2018-07-04 10:19:09 webstore 阅读数 444
  • 微信小程序样式开发入门

    讲解微信小程序中样式的入门使用,如何使用传统的css知识点来开发wxss的样式;本节课主要讲解在微信小程序中创建样式的几种 写法,元素选择器的基础使用,id选择器和id派生选择器的使用,class类选择器的使用。

    1579 人正在学习 去看看 黄菊华

微信小程序视图层WXSS_小程序WXSS

微信小程序的WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式。

WXSS用来决定小程序的WXML的组件应该怎么显示。

为了适应广大的前端开发者,微信小程序的WXSS具有CSS大部分特性。同时为了更适合开发微信小程序,我们对微信小程序的CSS进行了扩充以及修改。

与css相比我们扩展的特性有:

  • 尺寸单位
  • 样式导入

尺寸单位

  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。

注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表,@import跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码:

/** common.wxss **/
.small-p{
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式

微信小程序框架组件上支持使用style、class属性来控制组件的样式。

  • style:静态的样式统一写到class中。style接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染速度。
<view style="color:{{color}};" />
  • class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
<view class="normal_view" />

选择器

目前支持的选择器有:

选择器样例样例描述
.class.intro选择所有拥有class="intro"的组件
#id#firstname选择拥有id="firstname"的组件
elementview选择所有view组件
element, elementview checkbox选择所有文档的view组件和所有的checkbox组件
::afterview::after在view组件后边插入内容
::beforeview::before在view组件前边插入内容

全局样式与局部样式

定义在微信小程序app.wxss中的样式为全局样式,作用于每一个页面。在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器。

2018-01-26 14:01:25 mylovewanzi 阅读数 1789
  • 微信小程序样式开发入门

    讲解微信小程序中样式的入门使用,如何使用传统的css知识点来开发wxss的样式;本节课主要讲解在微信小程序中创建样式的几种 写法,元素选择器的基础使用,id选择器和id派生选择器的使用,class类选择器的使用。

    1579 人正在学习 去看看 黄菊华

微信小程序开发之wxss学习中的六个问题


01 wxss

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比,WXSS 扩展的特性有:

  • 尺寸单位
  • 样式导入

02 尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6
上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px =
1物理像素。
建议:微信小程序开发过程中建议以iphone6为标准

03 样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
代码:

<!--pages/test/test.wxml-->
<!--九九乘法表  -->
<view class='con'>
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
    <view style='display:inline-block;width:35px' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
      <view wx:if="{{j<=i}}">
        {{i}}*{{j}}={{i*j}}
      </view>
    </view>
  </view>
</view>
/* pages/test/test.wxss */
@import "c.wxss";
.con{
  font-size: 8px
}
/* 这是c.wxss */
.con{
  color: red
}

运行结果:
这里写图片描述
心得:

  • @import必须是第一句,不然没有效果

04 内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style
    中,以免影响渲染速度
<view style="color:{{color}};" />
  • class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
<view class="normal_view" />

05 选择器

目前支持的选择器:
这里写图片描述

06 全局样式与局部样式

  • 全局样式定义在app.wxss 中,作用在每一个页面中。
  • 在 page 的 wxss 文件中定义的样式为局部样式,作用在对应的页面中。
  • 局部样式覆盖全局样式。

-END-

2017-06-10 13:42:46 weixin_37730482 阅读数 370
  • 微信小程序样式开发入门

    讲解微信小程序中样式的入门使用,如何使用传统的css知识点来开发wxss的样式;本节课主要讲解在微信小程序中创建样式的几种 写法,元素选择器的基础使用,id选择器和id派生选择器的使用,class类选择器的使用。

    1579 人正在学习 去看看 黄菊华

WXSS详解

 

1.概述

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比,WXSS 扩展的特性有

   尺寸单位。


   样式导入。

 

 

 

2.尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

 


建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

 

 

 

3.样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。​​​​​​​

 

代码

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

 

 

 

4.内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

 

4.1.​​​​​​​style

静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

<view style="color:{{color}};" />

 

4.2.class

用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

<view class="normal_view" />

 

 

 

5.选择器

目前支持的选择器​​​​​​​

 

 

6.全局样式与局部样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

 

 

 

 

 

2019-11-12 12:35:54 yw8886484 阅读数 163
  • 微信小程序样式开发入门

    讲解微信小程序中样式的入门使用,如何使用传统的css知识点来开发wxss的样式;本节课主要讲解在微信小程序中创建样式的几种 写法,元素选择器的基础使用,id选择器和id派生选择器的使用,class类选择器的使用。

    1579 人正在学习 去看看 黄菊华

对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置微信小程序样式,把对应的控件显示出来

一、wxml

微信小程序界面结构wxmL比较容易理解,微信小程序主要是由八大类基础组件构成:

一、视图容器(View Container): 二、基础内容(Basic Content)
组件名 说明 组件名 说明
view 视图容器 icon  图标
scroll-view 可滚动视图容器 text 文字
swiper 可滑动的视图容器 progress 进度条
三、表单组件(Form) 四、操作反馈组件(Interaction)
组件名 说明 组件名 说明
button 按钮 action-sheet 上拉菜单
form 表单 modal 模态弹窗
input 输入框 progress 进度条
checkbox 多项选择器 toast 短通知
radio 单项选择器 五、导航(Navigation)
picker 列表选择器 组件名 说明
slider 滑动选择器 navigator 应用内跳转
switch 开关选择器
label 标签
六、多媒体(Media) 七、地图(Map)
组件名 说明 组件名 说明
audio 音频 map 地图
image 图片
video 视频
八、画布(Canvas)
组件名 说明
canvas 画布

 

二、微信小程序wxss

wxml理解起来容易,但光搭好了框架,并不能达到我们想要的界面效果,这就需要用到wxss样式了。

wxss样式决定了组件应该如何显示,并在css的基础上做了一些功能扩展,主要包括:

1.尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。

rpx 与 px单位换算如下:

 

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx

 

2.样式导入

可以使用@import语句来导入外联样式表,其后面跟需要导入外联样式表的相对路径,并以分号结束。

例如:

/** other.wxss **/

.appText{

  margin:10px;

}

/** app.wxss **/

@import "other.wxss";

.content_text:{

  margin:15px;

}

app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。

 

对于微信小程序wxss样式的使用来说,其实大部分都和css样式一致,下面简单的进行介绍一下:

wxss样式属性
一、wxss display(显示)
属性 说明
flex 多栏多列布局 flex-direction:row/column
inline-block 行内块元素
inline 此元素会被显示为内联元素,元素前后没有换行符
inline-table 作为内联表格来显示(类似 <table>),表格前后没有换行符
inline-flex 将对象作为内联块级弹性伸缩盒显示
none 此元素不会被显示
block 此元素将显示为块级元素,此元素前后会带有换行符
list-item 此元素会作为列表显示
table 会作为块级表格来显示(类似 <table>),表格前后带有换行符
table-caption 作为一个表格标题显示(类似 <caption>)
table-cell 作为一个表格单元格显示(类似 <td> 和 <th>)
table-column 作为一个单元格列显示(类似 <col>)
table-column-group 作为一个或多个列的分组来显示(类似 <colgroup>)
table-row 作为一个表格行显示(类似 <tr>)
table-row-group 作为一个或多个行的分组来显示(类似 <tbody>)
table-header-group 作为一个或多个行的分组来显示(类似 <thead>)
table-footer-group 作为一个或多个行的分组来显示(类似 <tfoot>)
inherit 从父元素继承 display 属性的值
flex:多栏多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml

 

二、wxss position(定位)
属性 说明
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
inherit 规定应该从父元素继承 position 属性的值

 

三、wxss float(浮动)
属性 说明
left 元素向左浮动
right 元素向右浮动
none默认值 元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

 

四、wxss background(背景)
属性 说明 语法(属性值)
background 简写属性,作用是将背景属性设置在一个声明中 background: color position size repeat origin clip attachment image;
background-color 指定要使用的背景颜色
background-position 指定背景图像的位置 background-position:center
background-size  指定背景图片的大小 background-size:80px 60px;宽度 高度
background-repeat 指定如何重复背景图像 repeat,repeat-x,repeat-y,no-repeat,inherit
background-origin 指定背景图像的定位区域 padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
background-clip 指定背景图像的绘画区域 属性值,同上
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承
local 背景图片随滚动元素滚动
background-image 指定要使用的一个或多个背景图像 url('URL') 图像的URL
none 无图像背景会显示。这是默认
inherit 指定背景图像应该从父元素继承

 

五、wxss border(边框)
属性 说明 语法(属性值)
border 简写属性,用于把针对四个边的属性设置在一个声明 border:5px solid red;
border-width 用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度 border-top-width 上右下左边框厚度 属性值:thin medium thick length
border-style 设置元素所有边框的样式,或者单独地为各边设置边框样式。 border-top-width 上右下左边框样式 属性值:solid,dashed,dotted,double等
border-color 元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色 border-top-width 上右下左边框颜色

 

六、wxss 轮廓(outline)
属性 说明 语法(属性值)
outline 在一个声明中设置所有的外边框属性 outline: outline-color, outline-style, outline-width
outline-color 设置外边框的颜色
outline-style 设置外边框的样式。 属性值:solid,dashed,dotted,double等
outline-width 设置外边框的宽度 属性值:thin medium thick length

 

七、wxss 文本属性(text)
属性 说明 语法(属性值)
color 设置文本颜色
direction 设置文本方向。 ltr:文本方向从左到右;rtl:文本方向从右到左
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本 left:把文本排列到左边。默认值,由浏览器决定。
right:把文本排列到右边。
center:把文本排列到中间。
justify:实现两端对齐文本效果。
inherit: 规定应该从父元素继承 text-align 属性的值。
text-decoration 向文本添加修饰 underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影 text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置,允许负值;
v-shadow:垂直阴影的位置,允许负值;
blur:模糊的距离;
color:阴影的颜色
text-transform 控制元素中的字母 capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
unicode-bidi 设置或返回文本是否被重写 
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

 

八、wxss 字体属性(font)
属性 说明 语法(属性值)
font 在一个声明中设置所有字体属性 font:font-style font-variant font-weight font-size/line-height font-family(按顺序)
font-style 指定文本的字体样式 normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
font-variant 以小型大写字体或者正常字体显示文本 normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。
font-weight 指定字体的粗细 normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
inherit 规定应该从父元素继承字体的粗细。
font-size 指定文本的字体大小 smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
font-family 指定文本的字体系列

 

九、wxss margin(外边距)(margin)
属性 说明 语法(属性值)
margin 在一个声明中设置所有外边距属性。 margin:10px 5px 15px 20px;(上边距,右边距,下边距,左边距)
margin-top 设置元素的上外边距。
margin-right 设置元素的右外边距。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距

 

 

 

十、wxss padding(填充)(padding)
属性 说明 语法(属性值)
padding 使用缩写属性设置在一个声明中的所有填充属性 padding:10px 5px 15px 20px;(上填充,右填充,下填充,左填充)
padding-top 设置元素的顶部填充。
padding-right 设置元素的右部填充
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
十一、wxss 选择器
选择器 样例 样例描述
.class(类选择器) .intro 选择所有拥有class="intro"的组件
#id(id选择器) #firstname 选择拥有id="firstname"的组件
element view 选择所有view组件
element, element view checkbox 选择所有文档的view组件和所有的checkbox组件
::after view::after 在view组件后边插入内容
::before view::before 在view组件前边插入内容

 

2019-01-20 22:47:39 qq_33799366 阅读数 529
  • 微信小程序样式开发入门

    讲解微信小程序中样式的入门使用,如何使用传统的css知识点来开发wxss的样式;本节课主要讲解在微信小程序中创建样式的几种 写法,元素选择器的基础使用,id选择器和id派生选择器的使用,class类选择器的使用。

    1579 人正在学习 去看看 黄菊华

对于一个很久不搞前端的程序猿,真的好多前端东西都不熟悉,在开发小程序途中,一路跌跌拌拌的,很幸运,也学到了挺多东西。估计也有和我一样的同学存在,所以特意总结了一些开发用到的效果样式,特意分享出来供大家参考,不喜勿喷啊。

1、scroll-view隐藏滚动条

       加入如下代码就好使了,特别方便

::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

2、button设置文本垂直居中

        设置行高line-height (=button的行高)就行,还有问题的话可以稍稍调节;水平方向就很好调节了。

3、设置文本text单行显示、多行显示,超出的加省略号

/* 设置文本单行,溢出的加... */
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
/* 设置文本多行,-webkit-line-clamp指定在哪一行加… */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;

      以下为显示效果

               

             

4、让控件居于底部不随滚动而变化,置于顶层页面

position:fixed;    //设置固定布局
bottom:0;	    //距左边距
right:100rpx;	    //距右边距
z-index:1;	    //设置置于顶层

5、设置button边框样式,使用伪元素::after

button::after {
  border-radius: 20rpx;            //设置圆角    
  border: 0;                        
  border-bottom: 5rpx solid red;   //设置顶部5rpx,红色边框
}

6、使图片自适应宽高

background-repeat:no-repeat; 
background-size:100% 100%;
-moz-background-size:100% 100%;

7、获取屏幕高度,动态设置wxss样式

//  宽度固定,始终为750rpx;高度可以通过以下代码换算获取

var that = this;
//  高度自适应
wx.getSystemInfo({
   success: function (res) {
     let clientHeight = res.windowHeight-120,
     let clientWidth = res.windowWidth,
     let rpxR = 750 / clientWidth;

     //计算后的高度,单位rpx
     var calcHeight = clientHeight * rpxR;
     that.setData({
        winHeight: calcHeight 
     });
    }
 });

8、文本text中加空格

       在text标签里面加上属性decode=”true”,然后使用&nbsp;加空格就好使,只能在text里面才能这样用

 

没有更多推荐了,返回首页