微信小程序学习笔记（2）

写在前面：

本文仅用于记录自己的学习经过和转载一些资料

本文所有练习和实例均使用vscode和微信官方的微信开发者工具共同完成，vscode仅用于编译代码。某些功能如即时模拟，实际上要使用微信官方工具才得以实现。

要达成代码同步，仅需要使用vscode和微信工具同时打开一个项目即可。

---

目录

三、模板语法

1、数据绑定 

2、列表渲染

3、条件渲染

---

三、模板语法

1、数据绑定 

        WXML的动态数据来自对应 Page 的 data设置，使用 Mustache 语法（双花括号）*数组是绑定不出来的：

<view> {{message}} </view>

wxml文件

var msg = "test"
//创建数据
Page({
    data: {
        msg
    },
});
//载入数据

js文件

        绑定的数据和普通的js语法一样，支持对象属性、表达式、布尔型等等。同时，在wxml端进行引用时，可以在元素内使用data-进行数据绑定，举例：

var msg = "hello,world!"
var num = 0330
Page({
    data: {
        msg,num
    },
});
//用“,”分隔两个元素

js文件

<view data-num="{{num}}">
    {{msg}}
</view>
//用data-进行标签数据绑定

wxml文件

        wxml中可以使用data-num/data-isChecked等进行自定义属性绑定。总而言之，在属性中进行引用时，需要保证"{{}}"的完整性，不能缺失任何一个花括号{}或双引号""。而在属性外进行数据绑定时，不用加双引号""，如:

<view>
    {{msg}}
</view>

除此之外，wxml的花括号也支持简单的表达式和逻辑运算，如

<view>
    {{1+1}}
</view>
//四则运算

<view>
    {{flag ? true : false}}
</view>
//三目运算

<view wx:if="{{length > 5}}">
    {{msg}}
</view>
//逻辑判断

---

2、列表渲染

        当循环项为数组时，关键字：

wx:for	循环的数组
wx:for-item	循环项的值
wx:for-index	循环项的索引
wx:key	循环项的唯一值，用于加速列表渲染

当然，此处的“循环项”指的是你在wxml中欲绑定的数据，并非指的是在js文件中创建的对象或数组

        为三个循环属性举例：

var list = [1，2，3，4，5]
//创建数组对象

Page({
    data: {
        list
    },
});
//绑定进page

js文件

<view>
    <view wx:for="{{list}}"
          wx:for-item="shape"
          wx:for-index="index">
        第{{index+1}}个数为：{{shape}}
    </view>
</view>

wxml文件

        但默认情况下，小程序会自动帮你创建的循环项名称（wx:for-item）和索引（wx:for-index）命名为item和index，所以若只有一层循环，可以省略以上关键字。

---

        插入一个重点：使用wx:for时，需要注意：当数组是动态变化时，需使用wx:key关键字。同时注意：绑定一个普通的字符串时，那么这个字符串的名称（key）必须是对象里的唯一属性。（例如上述例子中的id/name）。故正确的写法应是：

<view>
    <view wx:for="{{list}}"
          wx:for-item="item"
          wx:for-index="index"
          wx:key="id">
        第{{index+1}}个数为{{item}}
    </view>
</view>

p.s.当你确认你的数组是静态时，可以不加key，无视报错。

        *当对象数组本身就是一个唯一的字符串或者数字时，如[1,2,3,4,5]时可以用固定写法wk:key="*this",代表在for循环中的item自身。关于这点，可以在这里学习更详细的部分。

---

        当循环项为对象时，关键字为

wx:for-item	循环对象的该属性下的值(value)
wx:for-index	循环对象的属性(key)

        举例：

var list = {
    job:"无用之人",
    weapon:"鸡腿",
    level:"1"
}

js文件

<view>
    <view>艾尔登法环我的开荒选择是：</view>
    <view wx:for="{{list}}"
        wx:for-item="value"
        wx:for-index="key"
        wx:key="job">
        {{key}}:{{value}}
    </view>
</view>

wxml文件

        模拟后的循环即为：

---

3、条件渲染

        （1）wx:if

关键字	值	说明
wx:if	true	显示标签
	false	隐藏标签
wx:elif	true	显示标签
	false	隐藏标签
wx:else		显示标签

等价于一般代码中的 if / else if / else三种逻辑

        （2）hidden

属性值	说明
true	隐藏标签
false	显示标签

        *关于hidde和wx:if的区别和使用时机：

属性	作用	使用时机
wx:if	将整个标签从页面结构直接移除	当标签并不需要频繁的切换显示，如关闭页面等等时使用
hidden	通过添加样式（display）来修改标签样式，类似空白覆盖	当标签需要频繁的切换显示，如选中等等时使用

p.s.使用hidden时注意，style的权重比hidden高，不建议同时使用display属性和hidden