【18】微信小程序：03-数据绑定、事件、事件传参、wxs脚本简介、wxs基础语法、内嵌wxs脚本、外联wxs脚本、条件渲染、列表渲染、下拉及上拉刷新、Mustache语法、bindtap、其他事件

小程序基础第三天

---

一、数据绑定

001 - 如何定义页面的数据

• 小程序每个页面，是由 4 部分组成，其中 .js 文件内可以定义页面的数据、生命周期函数、其他业务逻辑
• 如果要在 .js 文件内定义页面的数据，只需把数据定义在 data 节点下即可

002 - Mustache 语法格式

把 data 中的数据绑定到页面中渲染，使用 Mustache 语法(双大括号) 将变量包裹起来即可

<view>{{ info }}</view>

• Mustache 语法的主要场景
  • 绑定内容
  • 绑定属性
  • 运算(三元表达式、算术运算、逻辑判断、字符串运算、数据路径运算)

003 - 案例代码

<!-- 页面结构 -->

<!-- 绑定内容和属性 -->
<view id="item-{{id}}">{{ info }}</view>

<!-- 算数运算 -->
<view>{{ 1 + 1 }}</view>

<!-- 三元表达式 -->
<view>{{ id == 10 ? "正确" : "错误" }}</view>

// 页面数据

Page({
  data: {
  	info: 'i miss you',
    id: 10,
    arr: [1, 2, 3]
  }
})

---

二、小程序中的事件

001 - 什么是事件

• 事件是视图层到逻辑层的通讯方式
• 事件可以将用户的行为反馈到逻辑层中进行处理
• 事件可以绑定到组件上，当组件触发事件，就会执行逻辑层中对应的事件处理函数
• 事件对象可以携带额外信息，如： id、dataset、 touches

002 - bindtap 绑定触摸事件

• 在小程序中，不存在网页中的 onclick 鼠标点击事件，而是通过 tap 事件来响应触摸行为
• 在小程序中，可以通过 input 事件来响应文本框内的输入事件
  • 使用 bindinput 为文本框绑定输入事件

003 - data 和 文本框之间的数据同步

• 在文本框的 input 事件处理函数中，通过事件参数 event ，能够访问到文本框的最新值
  • 语法结构 event.detail.value
• 通过 this.setData(dataObject) 方法，可以把页面中的 data 数据重新赋值

004 - 案例代码

<!-- 页面结构 -->

<button bindtap='handle' type='warn'>我是按钮</button>

<input bindinput='inputHandle' value='输入框'></input>

<input bindinput='datasync' value='{{ msg }}'></input>

// 页面逻辑

Page({
  data: {
    msg: ''
  },
   
  handle: function (event) {
    console.log('按钮绑定的事件')
    console.log(event)
  },

  inputHandle: function (e) {
    console.log(e)
  },

  // 数据同步演示
  datasync: function (e) {
    console.log(e.detail.value)
    
    this.setData({
      msg: e.detail.value
    })
  }
  
  // coding...
})

---

三、小程序中的事件传参

001 - 不能再绑定事件的同时传递参数

• 小程序的事件传参比较特殊，不能在为组件绑定事件的同时，为事件处理函数传递参数
• 小程序会把 bindtap 后指定的值，统一当做事件名称来处理

// 错误做法
<button bindtap='eventHandle(123)' type='primary' data-info='info'>传递参数</button>

002 - 通过 data-* 自定义属性传参

• 如果要在组件触发事件处理函数的时候，传递参数，可以为组件提供 data-* 自定义属性传参

003 - 获取 data-* 自定义属性中传递的参数

• 通过事件参数 event-target-dataset.参数名，能够获取 data-* 自定义属性传递到事件处理函数中的参数

004 - 案例代码

<!-- 页面结构 -->

<button bindtap='eventHandle' type='primary' data-info='info'>传递参数</button>

// 页面逻辑

Page({
  data: {},
    
  eventHandle: function (e) {
    console.log(e.target.dataset.info)
  }
   
  // coding...
})

---

四、 WXS 脚本简介

001 - 什么是 wxs

• wxs 是小程序的一套脚本语言，结合 wxml ，可以构建出页面的结构

002 - wxs 的注意事项

• 没有兼容性
  • wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行
• 与 javascript 不同
  • wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致
• 隔离性
  • wxs 的运行环境和其他 javascript 代码是隔离的
  • wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API
• 不能作为事件回调
  • wxs 函数不能作为组件的事件回调
• iOS设备上比 javascript 运行快
  • 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。
  • 在 android 设备上二者运行效率无差异

003 - wxs 遵循 CommonJS 模块化规范

CommonJS 是 javascript 的模块化规范之一，小程序的脚本语言 wxs 遵循了 CommonJS 规范，因此，使用 wxs 时的体验和使用 node.js 的体验比较相似。

• module 对象
  • 每个 wxs 都是独立的模块，每个模块均有一个内置的 module 对象，每个模块都有自己独立的作用域。
• module.exports
  • 由于 wxs 拥有独立作用域，所以在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见，
  • 通过 module.exports 属性，可以对外共享本模块的私有变量与函数。
• require函数
  • 在 wxs 模块中引用其他 wxs 文件模块，可以使用 require 函数。

---

五、 wxs 基础语法

001 - 使用 module.exports 向外共享成员

• 通过 module.exports 属性，可以对外共享本模块的私有变量与函数

var foo = “‘hello world’ from wxs”; // 定义私有变量 foo
var bar = function (d) {            // 定义私有函数 bar
  return d
}

// 通过 modules.exports 向外共享私有成员
module.exports = {
  FOO: foo, // 向外共享私有变量 foo
  bar: ba, // 向外共享私有函数 bar
};

// module.exports 中挂载 msg 变量
module.exports.msg = “some msg”

002 - 使用 require 引入其它 wxs 模块 以及注意事项

• 在 wxs 模块中引用其他 wxs 文件模块，可以使用 require 函数。

// 使用 require 导入 tools.wxs 脚本
var tools = require("./tools.wxs")

// 得到的 tools 对象，可以直接访问到 tools.wxs 中向外暴露的变量和方法
console.log(tools)

注意事项 ：

• 只能引用 wxs 文件模块，且必须使用相对路径
• wxs 模块均为单例
  • wxs 模块在第一次被引用时，会自动初始化为单例对象。
  • 多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

003 - 支持的数据类型

• WXS 语言目前共有以下8种数据类型：
  • number 数值类型
  • string 字符串类型
  • boolean 布尔类型
  • object 对象类型
  • function 函数类型
  • array 数组类型
  • date 日期类型
  • regexp 正则

注意事项

注意：由于wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致，

所以在使用以上8种数据类型的时候，一定要先翻阅官方文档，再进行使用！

参考文档： 数据类型

---

六、内嵌 wxs 脚本

001 - 使用规则

• wxs 代码可以编写在 wxml 文件中的 <wxs></wxs> 标签内，就像 javascript 代码可以编写在 html 文件中的 <script></script> 标签内一样。
• wxml 文件中的每个 <wxs></wxs> 标签，必须提供一个 module 属性，用来指定当前 <wxs></wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。
• module 属性值的命名必须符合下面两个规则：
  • 首字符必须是：字母（a-z A-Z），下划线（_）
  • 剩余字符可以是：字母（a-z A-Z），下划线（_）， 数字（0-9）

002 - 案例代码

<view>{{ info.msg }}</view>

<wxs module='info'>
  var msg = '我在等风来'

  module.exports = {
    msg: msg
  }
</wxs>

---

七、外联 wxs 脚本文件

001 - 使用规则

• wxs 代码可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名文件中一样。
• 在 wxml 中如果要引入外联的 wxs 脚本，必须为 <wxs></wxs> 标签添加 module 和 src 属性。
  • module 用来为 <wxs></wxs> 标签指定模块名，作为当前页面访问这个模块的标识名称；
  • src 用来指定当前 <wxs></wxs> 标签要引入的脚本路径，必须是相对路径；

002 - 案例代码

// .wxs 文件

var msg = '风铃响,故人归'
var handle = function (params) {
    return params
}

module.exports = {
  msg: msg,
  handle: handle
}

<wxs src='./ling.wxs' module='feng'></wxs>
<view>{{ feng.msg }}</view>
<view>{{ feng.handle('我在等风') }}</view>

注意：在 wxs中不要使用高级的JS语法

---

八、条件渲染

001 - wx:if

• 在小程序中，使用 wx:if="{{condition}}"来判断是否需要渲染该代码块
• 也可以用 wx:elif 和 wx:else 来添加一个 else 块

<view wx:if='{{id < 10}}'>JavaScript</view>
<view wx:elif='{{id == 10}}'>HTML</view>
<view wx:else='{{id > 10}}'>CSS</view>

002 - block wx:if

• 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。
• 如果要一次性判断多个组件标签，可以使用一个 <block></block> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
• <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

<block wx:if='{{ id == 10 }}'>
  <view>JavaScript</view>
  <view>HTML</view>
  <view>CSS</view>
</block>

003 - hidden

• 使用 hidden="{{condition}}" 也能控制元素的显示与隐藏

<view hidden='{{ id > 10 }}'>前端三板斧</view>

004 - hidden 和 wx:if 的区别

• 被 wx:if 控制的区域，框架有一个局部渲染的过程，会根据控制条件的改变，动态创建或销毁对应的 UI结构。
• wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
• 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
• 总结：wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

九、列表渲染

001 - wx:for

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

<view wx:for='{{ arr }}' wx:key='index'>
  我是{{ item }} -- 索引是 {{ index }}
</view>

002 - block wx:for

• wx:for 可以用在 <block></block> 标签上，以渲染一个包含多节点的结构块。

<block wx:for='{{ arr }}' wx:key='index'>
  <view>值：{{item}} -- 索引{{index}}</view>
</block>

003 - 指定索引和当前项的变量名

• 使用 wx:for-item 可以指定数组当前元素的变量名
• 使用 wx:for-index 可以指定数组当前下标的变量名，

<view wx:for='{{ arr }}' wx:for-item='foritem' wx:for-index='forindex' wx:key='index'>
  我是{{ foritem }} -- 索引是 {{ forindex }}
</view>

004 - 列表渲染中的 wx:key

1. wx:key 的作用说明

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

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

2. wx:key 的注意事项

   • key 值必须具有唯一性，且不能动态改变
   • key 的值必须是数字或字符串
   • 保留关键字 *this 代表在 for 循环中的 item 本身，它也可以充当 key 值，但是有以下限制：需要 item 本身是一个唯一的字符串或者数字。
   • 如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

十、下拉刷新

001 - 下拉刷新的概念以及场景

• 概念：下拉刷新是移动端更新列表数据的交互行为，用户通过手指在屏幕上自上而下的滑动，可以触发页面的下拉刷新，更新列表数据。
• 应用场景：在移动端，数据列表是常见的页面效果，更新列表数据是最基本的页面需求，相比于按钮刷新、定时刷新来说，下拉刷新的用户体验方便友好，已经成为移动端刷新列表数据的最佳解决方案。

002 - 如何启动下拉刷新

• 在 app.json 的 window 选项中或页面配置中开启 enablePullDownRefresh。
• 可以通过 wx.startPullDownRefresh() 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

注意： 一般情况下，推荐在页面配置中为需要的页面单独开启下拉刷新行为

003 - 设置下拉刷新窗口的样式

• 在 app.json 的 window 选项中或页面配置中修改 backgroundColor 和 backgroundTextStyle 选项。
• backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制颜色值
• backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

004 - 监听下拉刷新事件

需要先开启下拉刷新

• 为页面添加 onPullDownRefresh() 函数，可以监听用户在当前页面的下拉刷新事件。

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh: function () {
  console.log('触发下拉刷新啦')
}

005 - 停止下拉刷新

• 处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，
• 因此需要手动隐藏下拉刷新的 loading 效果，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh: function () {
  console.log('触发下拉刷新啦')
    
  wx.stopPullDownRefresh()
}

---

十一、 上拉刷新

001 - 上拉刷新的概念以及场景

• 概念：在移动端，随着手指不断向上滑动，当内容将要到达屏幕底部的时候，页面会随之不断的加载后续内容，直到没有新内容为止，我们称之为上拉加载更多。上拉加载更多的本质就是数据的分页加载。
• 应用场景：在移动端，列表数据的分页加载，首选的实现方式就是上拉加载更多。

002 - 设置上拉刷新的距离

• 在 app.json 的 window选项中或页面配置中设置触底距离 onReachBottomDistance。单位为px，默认触底距离为 50px。
• 为页面添加 onReachBottom() 函数，可以监听用户在当前页面的上拉触底事件，从而实现上拉加载更多列表数据的效果。

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom: function () {
  console.log('触发上拉刷新啦')
},

十二、 其他事件

001 - 页面滑动事件onPageScroll

• 监听用户滑动页面事件
  • 得到 scrollTop，页面在垂直方向已滚动的距离（单位px）

onPageScroll: function (e) {
  console.log(e)
}

002 - 分享事件 onShareAppMessage

• 监听用户点击页面内转发按钮（<button> 组件 open-type="share"）
• 右上角菜单“转发”按钮的行为，并自定义转发内容。

参数	类型	说明
from	String	转发事件来源。button：页面内转发按钮；menu：右上角转发菜单
target	Object	如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined
webViewUrl	String	页面中包含组件时，返回当前的url

• 自定义转发内容， return 一个 Object 就可以

字段	说明	默认值
title	转发标题	当前小程序名称
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。	使用默认截图

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

003 - 点击 tab 时触发事件 onTabItemTap

参数	类型	说明
index	String	被点击 tabItem 的序号，从0开始
pagePath	String	被点击tabItem 的页面路径
text	String	被点击 tabItem 的按钮文字

onTabItemTap(item) {
  console.log(item.index)
  console.log(item.pagePath)
  console.log(item.text)
}