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

数据绑定与事件绑定

定义页面的数据

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

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

Mustache语法格式

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

{{ info }}

`Mustache` 语法的主要场景

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

案例：

1.页面结构



{{ info }}

{{ 1 + 1 }}

{{ id == 10 ? "正确" : "错误" }}

2.页面数据

// 页面数据

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

小程序中的事件

什么是事件

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

1.bindtap绑定触摸事件

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

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

 Click me!

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

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

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

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

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

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) }

1. 修改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-*` 自定义属性中传递的参数

示例代码如下：


// 页面逻辑

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 变量

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

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

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

内嵌 wxs 脚本

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

内嵌 wxs 脚本的示例代码:

{{ info.msg }}


  var msg = '我在等风来'

  module.exports = {
    msg: msg
  }

外联 `wxs` 脚本文件

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

// /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";


{{ feng.msg }}
{{ feng.handle('我在等风') }}

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