【微信小程序】WXSS、WXML、WXS

WXSS

  1. 行内（内联）样式：style
  2. 页面（外联）样式 class id …
  3. 全局样式 app.wxss

权重 ： 行内 > 页面 > 全局

单位：

wxss单位：rpx (小程序适配)
iphone6（750）为标准：1px == 2rpx

样式导入：

可以在app.wxss中导入这个样式 ；也可以在page.wxss导入这个样式
@import “路径”

官方样式库：

WeUI.wxss基本样式库 ： https://github.com/Tencent/weui-wxss

WXML

wxml只能用wx中的组件 view, text, image… ； 大小写敏感 class Class不同

1）Mustache语法 ：

2）逻辑判断 wx:if …

1
2
3
4
5
6
7
wx:if
wx:elif
wx:else

hidden

wx:if 与 hidden区别（v-if v-show）： v-if="false"在dom中没有不存在，hidden只是添加了display： none

3）列表渲染 wx:for

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1. 遍历数组、字符串、数字
  item index，会自动生成的
  <view wx:for="{{[1, 2, 3, 4]}}">{{item}} {{index}}</view>
  <view wx:for="rocyuan">{{item}} {{index}}</view>
  <view wx:for="{{5}}">{{item}}</view>  // 01234

2. block标签：包裹一组组件的标签 并非组件（不会在界面上渲染，只接收控制属性）
  <block></block>

3. item/index起名字
  wx:for-item="inner_item"
  wx:for-index="inner_index"

  <view wx:for="{{arr}}" 
        wx:for-item="inner_item"
        wx:for-index="inner_index">
        {{inner_item}} {{inner_index}}
  </view>

4. wx:key（唯一标识）
  没有key：中间改变一项，后面全都会变
  有key：利用key直接复用更改后的虚拟dom
  <view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>

key的作用主要是为了高效的更新虚拟DOM。

4）模板用法 template

WXML提供模板（template），可以在模板中定义代码片段，在不同的地方调用。(是一种wxml代码的复用机制) ;
使用 name 属性，作为模板的名字, 然后在