自学微信小程序开发第三天-条件渲染、列表渲染、WXSS、组件

条件渲染

条件渲染则是根据判断，决定各组数组呈现与否。

WXML 中，使用 wx:if=“{{condition}}” 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>
<!--例：-->
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

也可以根据逻辑层中的参数来决定是否渲染。另，可以使用hidden进行渲染控制。

<!--index.wxml-->
<view class="container">
    <view>
        <view bindtap="tap">
            <text>切换隐藏</text>
        </view>
        <view wx:if="{{show}}">
            <text>
                具体内容...
                具体内容...
                具体内容...
            </text>
        </view>
        <view hidden="{{!show}}">测试hidden</view>
    </view>
</view>

// index.js
Page({
    data:{
        show: true
    },
    //处理点击事件
    tap:function(){
        this.setData({
            show:!this.data.show
        })
    }
})

hidden 和 wx:if 的区别，除了在取值为真时隐藏和呈现的判断相反外，还有：

1. wx:if 是控制属性，可以写在 <block> 块中，而 hidden 不行。
2. wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
3. 同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
4. 渲染的时候，hidden组件其实会被渲染，只是被隐藏起来。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<!-- wxml -->
<!-- array 是一个数组 -->
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

//js
Page({
  data: {
    array: [
    {message: 'foo'}, 
    {message: 'bar'}
    ]
  }
})

一个实例：

<!-- wxml -->
  <view>
    <view wx:for="{{todos}}">
      <checkbox checked="{{item.completed}}"></checkbox>
      <text>{{item.name}}</text>
    </view>
  </view>

//js文件
Page({
  data:{
    todos:[
      {name: 'JavaScript',completed: false},
      {name: 'HTML',completed: true},
      {name: 'CSS',completed: false}
    ]
  }
})

当自定义的函数中，使用了item或是index,则在for循环体内部无法使用。这时候要重定义变量名（别名）：

<!-- wxml -->
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

使用别名和嵌套，来输出一个九九乘法表：

<!-- wxml -->
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

<!-- wxml -->
  <view>
    <switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
    <button bindtap="addNumberToFront"> 添加到前方</button>
  </view>

//js
Page({
  data: {
    numberArray: [1, 2, 3, 4, 5]
  },
  addNumberToFront: function (e) {
    this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

需注意的是：

当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">
  {{item}}
</view>

等同于

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

WXSS vs. CSS

视图层的样式呈现，和HTML类似，小程序是以WXSS方式呈现的。WXSS是基于CSS的小程序专用的样式表，其具体内容放在页面的.wxss文件内。这里主要研究下wxss和css的不同处。

官方开发文档中，WXSS扩展的特性有2点：尺寸单位和样式导入。不过在CSS里也支持样式导入，所以这里只研究尺寸单位的不同。

在CSS中，尺寸单位是 px ，即像素。但是因为移动端的屏幕大小、分辨率的不统一，所以小程序的呈现会遇到很多麻烦。所以微信里规定了一种新尺寸单位 rpx 来进行统一处理。

rpx 可以根据屏幕宽度进行自适应，其定义为屏幕宽为固定的 750rpx。例如iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

所以使用 rpx 进行样式开发时，其实是以手机宽度的相对比例进行呈现的。

组件

组件的基本情况可以查看官方的微信小程序开发文档里相应内容，这里记录一些比较常用的，和HTML有明显区别的组件。

text 组件

小程序的 text 组件和 HTML 的 <p> 标签的作用一样，就是显示一段文本。不同处在于：

1. text 组件可以嵌套，<p> 标签不能嵌套。
2. text 组件支持回车换行， <p> 标签必须使用专用的换行标签或其他方式。

progress 组件

progress 组件是一个进度条组件，可以呈现出一个进度条。这里要注意的是，试验如下代码:

<!--index.wxml-->
<view class="container">
    <progress percent="35" show-info active ></progress>
</view>

这里进度条是显示不出来的。经检查，是因为默认的样式 container 中，align-items: center 的样式设置。这样设置居中显示时，就会使得 progress 组件没有了宽度，所以无法显示出来。

checkbox 组件

checkbox 组件需要注意的地方是，多个checkbox 组件由 checkbox-group 来进行分组管理。可以将change事件绑定到 checkbox-group 上，判断内部 checkbox 是否 checked 则由 e.detail.value 来进行判断。

	<!--index.wxml-->
    <view class="container">
        <checkbox-group bindchange="checkboxChange">
            <label wx:for="{{items}}" wx:key="{{value}}">
                <checkbox value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</checkbox>
                <view></view>
            </label>
        </checkbox-group>
    </view>

// index.js
Page({
    data: {
        items: [
            { name: 'USA', value: '美国' },
            { name: 'CHN', value: '中国', checked: 'true' },
            { name: 'BRA', value: '巴西' },
            { name: 'JPN', value: '日本' },
            { name: 'ENG', value: '英国' },
            { name: 'TUR', value: '法国' }
        ],
        checkall:false,
        nocheck:false
    },
    checkboxChange(e){
        console.log('checkbox发生change事件，携带value值为：',e.detail.value)
    }
})

form 组件

form 组件可以将若干组件组成一个表单，在表单提交时可以方便的获取其中的数据，而不用一个组件一个组件的取值。

	<!--index.wxml-->
    <view class="container">
        <form bindsubmit="formSubmit">
            <view>switch<switch name="switch"></switch>
            </view>
            <view>radio
                <radio-group name="radio">
                    <radio value="radio1">选项一</radio>
                    <radio value="radio2">选项二</radio>
                </radio-group>
            </view>
            <view>checkbox
                <checkbox-group name="checkbox">
                    <checkbox value="chb1">选项一</checkbox>
                    <checkbox value="chb2">选项二</checkbox>
                </checkbox-group>
            </view>
            <view>slider
                <slider value="50" name="slider" show-value></slider>
            </view>
            <view>input
                <input name="input" placeholder="这是一个输入框" />
            </view>
            <view>button
                <button type="primary" form-type="submit">确认</button>
                <button type="default" form-type="reset">重置</button>
            </view>
        </form>
    </view>

// index.js
Page({
	formSubmit(e){
		console.log('form发生了submit事件，携带数据为:',e.detail.value)
	}
})

经过测试可以看出来，form 能够取表单中所有元素的值，元素名称在 name 定义，值就是其 value 。

重要参考：

B站上找到的开发教程视频，Up主不知道叫啥……