03微信小程序-视图与逻辑1

数据绑定与事件绑定

定义页面的数据

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

Page({
 data: {
 info: 'init data', // 字符串类型的数据
 array: [{msg: '1'}, {msg: '2'}] // 数组类型的数据
 }
})

Mustache语法格式

把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可；
语法格式为：

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

Mustache 语法的主要场景

• 绑定内容
• 绑定属性
• 运算(三元表达式、算术运算、逻辑判断、字符串运算、数据路径运算)

案例：

• 1.页面结构

<!-- 页面结构 -->
<!-- 绑定内容和属性 -->
<view id="item-{{id}}">{{ info }}</view>
<!-- 算数运算 -->
<view>{{ 1 + 1 }}</view>
<!-- 三元表达式 -->
<view>{{ id == 10 ? "正确" : "错误" }}</view>

• 2.页面数据

// 页面数据

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

小程序中的事件

什么是事件

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

1.bindtap绑定触摸事件

在小程序中，不存在网页中的 onclick 鼠标点击事件，而是通过 tap 事件来响应触摸行为；

• 1. 通过 bindtap，可以为组件绑定触摸事件，语法如下：

<view bindtap=“tapName”> Click me! <view>

• 2.在相应的Page定义中写上相应的事件处理函数，事件参数是event：

Page ({
 tapName: function(event) {
   console.log(event)
  }
})

2.bindinput绑定文本框输入事件

在小程序中，通过 input 事件来响应文本框的输入事件；

• 1. 通过 bindinput，可以为文本框绑定输入事件，语法如下：

<input bindinput=“inputName”><input>

• 2.在相应的Page定义中写上相应的事件处理函数，事件参数是event：

Page({
 inputName: function(event) {
   console.log(event)
  }
})

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

• 1. 监听文本框的数据变化
     在文本框的 input 事件处理函数中，通过事件参数 event，能够访问到文本框的最新值：
     语法：event.detail.value
     示例代码如下：

inputName: function (event) {
// 获取到文本框中最新的内容
console.log(event.detail.value) }

• 2. 修改data中的数据
     通过 this.setData(dataObject) 方法，可以给页面中的 data 数据重新赋值。
     例如：监听文本框的数据变化，并把最新的值赋值给 data 中的 msg
     示例代码如下：

inputName: function (event) {
this.setData({
msg: event.detail.value // 为 data 中的 msg 重新赋值
   })
}

事件传参

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

• 小程序的事件传参比较特殊，不能在为组件绑定事件的同时，为事件处理函数传递参数
• 小程序会把 bindtap 后指定的值，统一当做事件名称来处理
• 通过事件参数 event-target-dataset.参数名，能够获取 data-* 自定义属性传递到事件处理函数中的参数

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

示例代码如下：

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

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

wxs 脚本

wxs（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

wxs 的注意事项

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

wxs 遵循 CommonJS 模块化规范

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

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

wxs 基础语法

• 1. 使用 module.exports 向外共享成员
     通过 module.exports 属性，可以对外共享本模块的私有变量与函数。示例代码如下：

var foo = “‘hello world’ from wxs”; // 定义私有变量 foo
var bar = function (d) { // 定义私有函数 bar
 return d;
}
module.exports = { // 通过 modules.exports 向外共享私有成员
 FOO: foo, // 向外共享私有变量 foo
 bar: bar, // 向外共享私有函数 bar
};
module.exports.msg = “some msg”; // 额外向 module.exports 中挂载 msg 变量

• 2. 使用 require 引入其它 wxs 模块
     假设有两个 wxs 模块，路径分别为 /pages/tools.wxs 和 /pages/logic.wxs，如果要在 logic.wxs 中引
     入 tools.wxs 脚本，则示例代码如下：

// 使用 require 导入 tools.wxs 脚本
var tools = require("./tools.wxs");
// 得到的 tools 对象，可以直接访问到 tools.wxs 中向外暴露的变量和方法

• 3. 使用 require 的注意点
     在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。
     引用的时候，要注意如下几点：
     ① 只能引用 .wxs 文件模块，且必须使用相对路径。 ② wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多
     次引用，使用的都是同一个 wxs 模块对象。
     ③ 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。
• 4. 支持的数据类型
     WXS 语言目前共有以下8种数据类型：
• number 数值类型
• string 字符串类型
• boolean 布尔类型
• object 对象类型
• function 函数类型
• array 数组类型
• date 日期类型
• regexp 正则
  注意事项
  注意：由于wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致，
  所以在使用以上8种数据类型的时候，一定要先翻阅官方文档，再进行使用！
  参考文档： 数据类型

内嵌 wxs 脚本

• 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）

内嵌 wxs 脚本的示例代码:

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

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

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

外联 wxs 脚本文件

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

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
 return d;
}
module.exports = {
 FOO: foo,
 bar: bar,
};
module.exports.msg = "some msg";

---

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

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