小程序：组件使用、数据绑定、条件渲染、列表渲染

逃离我推掉我的手 2022-01-25 14:52 363阅读 0赞

**准备工作：**

新建一个quickstart项目，然后再pages目录下自己新建一个页面，例如t文件夹名为test，再在其下分别新建test.wxml、test.js、test.wxss文件。最后在app.json全局配置文件中配置test页面路径，项目结构如下：

![项目结构图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]

## 1.组件的基本使用 ##

小程序开发文档中组件部分有很多组件介绍，包含视图容器类组件，基础内容类组件、表单组件、导航组件、媒体组件、地图组件和画布组件等。选几个常用的组件介绍其用法。

text组件可以直接显示文本文字，button组件显示就是按钮，按钮有default、primary、warn三种type类型，颜色分别是默认灰，原始绿、警告红。text和button组件的使用如下：

![text和button组件的使用][text_button]

可以在js文件中使用bindtap属性为button绑定事件。当点击按钮时，下方显示一行文字，变量是使用mustache语法绑定的。

注意：WXML中所有动态的数据都是来自对应Page中的data。如下：

![js代码][js]

效果如如下：

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]

## 2.数据绑定和条件渲染 ##

简单的数据绑定是使用 Mustache 语法（双大括号）将变量包起来，如上方的`<text>{ {msg}}</text>`语句是绑定msg变量的方法。

**WXML 中的动态数据均来自对应 Page 的 data。**

1.数据绑定可以作用在条件语句wx:if和wx:else中，如：

<view>大家好，我是南南</view>
    
    <text>text直接显示文本</text>
    
    
    <button type='primary' bindtap='btnClick'>primary原始绿</button>
    
    <text wx:if="{ {condition}}">我是条件1</text>
    <text wx:else>我是条件2</text>

在js中改变condition的值，每次点击按钮时内容改变：

/** test.js **/
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        // msg: "testing"
        condition: true
      },
    
    // 自己定义的函数
      btnClick: function() { 
        var condition = this.data.condition;
        console.log(condition);
        // 使用setData()函数赋值
        this.setData({ condition:!condition});
      }
    })

实现的效果是默认显示条件1，点击按钮显示条件2，循环变化：

![数据绑定效果展示][20190531100222827.gif]

2.在框架中，使用 wx:if="" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块。

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

[详情参考][Link 1]

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

## 3.列表渲染 ##

1.在组件上，使用wx:for绑定一个数据，遍历次数据，就可以使用数组中的各项元素重复渲染该组件。

**小程序中默认数组的当前下标变量名为index，当前元素变量名为item。**

![wx:for列表渲染的使用][wx_for]

也可以自己再重新定义列表索引和当前列表元素的变量名，使用wx:for-index指定索引变量名，使用wx:for-item指定当前元素变量名。如：

![指定变量名效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]

2.wx:for也可以嵌套使用。

3.列表渲染`wx:for`和条件渲染`wx:if`类似，也可以将wx:for用在`<block/>`标签上，以渲染一个包含多个节点的解构块。如：

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

`wx:for`有两点需要注意：

1.当`wx:for`数组是字符串时，会将字符串解析成字符串数组。如：

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 3]

等同于:

2.如果mustache语法的大括号\}与双引号"之间有空格，最终会被解析为字符串。例一：

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 4]

例二：

![效果2][2]

[列表详情参考][Link 2]

## 每天进步一点点、充实一点点、加油！！！ ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20220125/7030a950237d41d5a8ce2d37688d24bb.png
[text_button]: /images/20220125/80f86fc9912a4bd488625ebf067938e6.png
[js]: /images/20220125/38046b916c2647c5bed61bcff153b227.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]: /images/20220125/8eaed6225f174318a2b6b5a9c9fcdea1.png
[20190531100222827.gif]: /images/20220125/7597ff14ffc04ec98aff505c2c9e88ce.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html
[wx_for]: /images/20220125/683253c42c1643a09b84beccb26784a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]: /images/20220125/a791a1d0d0094ea090f48bafc52e08bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 3]: /images/20220125/f5104a525b454feb92ce0a4bf5e9feae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 4]: /images/20220125/98a4ce3ebd7041b995c62a5ecb6954bc.png
[2]: /images/20220125/74f47b5828f846dda3a66857795af25e.png
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html