手把手带你学习微信小程序 ——三 （列表渲染）

一、wx:key

（1）官方介绍

传送门

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

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

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

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

（2）个人理解

• 项目更新前后的差别，不使用wx : key的项目则会创建一个新的项目，而使用了wx : key的项目会则会更新项目并不会重新创建
• 所以使用wx : key的项目的的效率会比较高

（3）代码实现：

wxml 中（未使用 wx : key）

<view wx:for="{{lines}}">
<switch>{{item.name}}</switch>
</view>

<button bindtap='tamEvent'>更新</button>

.js中

data: {
      // books:[
      //   '高等数学',
      //   '线性代数',
      //   '概率论'
      // ],
      lines:[
         { "id":1,
          "name":'switch1',
        }, {
          "id": 2,
          "name": 'switch2',
        }, {
          "id": 3,
          "name": 'switch3',
        }, {
          "id": 4,
          "name": 'switch4',
        }
      ]
  },
  tamEvent: function(event){
    var lines=this.data.lines;
    lines.splice(0,0,{

      id:5,
      name:"switch5"
    });
    this.setData({
      lines:lines
    })
  }}) 

运行结果

我们发现，我们选中的两个 按钮，点击更新后没有变化，而是又创建了新的选项

我们再次添加 wx : key 试试，然后再试试

<view wx:for="{{lines}}" wx:key='id'>
//id来自 .js 文件中，data文件中 lines下的 id 标签
<switch>{{item.name}}</switch>
</view>

<button bindtap='tamEvent'>更新</button>

然后再次运行
tips:wx:key =‘value’ value也可以是name，只要值唯一即可

在学习的过程中，如果遇到更好的实例，我会分享给大家

二、WXML 模板学习 —— template

一个项目有时候需要多个同样的样式，如果不停的进行复制粘贴，会造成大量的浪费。因此可以定义模板完成这样的重复的工作

2.1 简单模板引用

我们在根目录创建一个templates 文件夹，然后在templates中创建一个子文件夹 message，然后创建以message 为名的 wxml 文件和 wxss文件，这里就存放我们的模板文件。

1. 然后我们就可以在 message.wxml 中写下我们希望的重复利用的内容

/*我们希望重复利用，所以内容必须都放在 template标签中，name中的取值为任意的，
然后就可以在template中写下我们希望重复利用的代码块*/
<template name="message">
  <view class="message-group">
    <text class="content">我们一起去钓鱼吧！</text>
    <text class="friend">小博</text>
  </view>
</template>

2. 设置重复利用的代码块的样式
   注意：样式与代码是一一属性相对应的

.message-group{
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #e4e4e4;
  padding: 10px;
}

/* content内容的设置 */
.message-group .content{
  float: left;
}
/* friend内容的设置 */

.message-group .friend{
  float:right;
  font-size: 12px;
  color: purple;
}

3. 引用重复代码块
   注意引用两点：
   • 内容引用，样式也不要忘记引用
   • 引用是通过 import 语句，内容引用的时候注意使用template标签

引用示例：

首先分析模板的路径 templates/message/message.wxml，样式只用把wxml替换即可

接下来分析引用文件的路径：…/…/…/ + 上面的地址 才是一个完整的地址

因此 ： src="…/…/…/templates/message/message.wxml"

wxml 内容引用 代码示例

<import src="../../../templates/message/message.wxml"/>
/*在html中，常常以反斜杠为结束的标志*/
<template is="message"></template>

wxss 样式引用 代码示例

@import "../../../templates/message/message.wxss";

两者差别还是很大的

2.2 传参引用

我们将模板的内容稍微改动一下，把我们需要传的参数用大括号引用起来

<template name="message">
  <view class="message-group">
    <text class="content">{{content}}</text>
    <text class="friend">{{name}}</text>
  </view>
</template>

然后回到显示内容的界面

<import src="../../../templates/message/message.wxml"/>

<template is="message" data="{{content:'我们一起去钓鱼吧',name:'小博'}}"></template>

这样的结果和上面显示的是一样的

注意一点：方括号与方括号之间的内容一一对应
content ——> content
name ——> name

2.3 快捷传参

给定一个模拟实战环境：数据来自服务器，我们就可以通过,js 文件进行传递参数，先给js 中补充两条数据，然后再 wxml 中通过循环遍历元素

方法一：

js文件

  data: {
      message:[
        {
          content:"今天去钓鱼",
          name:'小博'
        },
        {
          content:"今天去吃火锅",
          name:"小娜"
        }
      ]
  },

wxml

<import src="../../../templates/message/message.wxml"/>

<template is="message" wx:for='{{message}}' data="{{content:item.content,name:item.name}}"></template>

方法二：

再次回到之前的模板 —— message.wxml 文件

再检查一下自己定义的 js文件

只有当模板和待显示界面 中 js 文件的变量显示一致时，可以使用一下更加快捷的方式

<import src="../../../templates/message/message.wxml"/>

<!-- <template is="message" wx:for='{{message}}' data="{{content:item.content,name:item.name}}"></template> -->
<template is="message" wx:for="{{messages}}" data="{{...item}}"></template>

使用 …item 即可快捷的表达我们想要的结果

2.4 include静态代码块引用

在当前目录创建一个文件，名为 abc.wxml,当我们需要传参的时候，也同样可以在 .js文件中下的，data目录添加如下代码

 username:'Go',

然后回到新建的文件 abc.wxml中

<view>
 我是 abc..........
 <text>{{username}}</text>
</view>

再回到当前目录下的人 wxml 文件中，加入如下代码

<include src="abc.wxml" />

注意：

• template（模块代码） wxss（样式代码）代码无法被引用

2.5 总结：

1. 调用的时候，内容和样式都是通过import 语法进行传值
2. 快捷传值 【name ——> name】 一 一对应
3. 模板定义的标签使用是 template，请勿拼写错误
4. …item 快捷使用（条件注意）
5. include 标签的使用【静态界面的多处使用】

三、小彩蛋

感觉没看够，这里有 8大练习项目等你：微信小程序之项目实战篇

手把手带你学习微信小程序文章整合：手把手带你学习微信小程序系列文章整合