数据绑定与事件绑定
定义页面的数据
- 小程序中每个页面,由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 事件来响应触摸行为;
-
- 通过 bindtap,可以为组件绑定触摸事件,语法如下:
Click me!
- 2.在相应的Page定义中写上相应的事件处理函数,事件参数是event:
Page ({
tapName: function(event) {
console.log(event)
}
})
2.bindinput绑定文本框输入事件
在小程序中,通过 input 事件来响应文本框的输入事件;
-
- 通过 bindinput,可以为文本框绑定输入事件,语法如下:
- 2.在相应的Page定义中写上相应的事件处理函数,事件参数是event:
Page({
inputName: function(event) {
console.log(event)
}
})
data和文本框之间的数据同步
-
- 监听文本框的数据变化
在文本框的 input 事件处理函数中,通过事件参数 event,能够访问到文本框的最新值:
语法:event.detail.value
示例代码如下:
- 监听文本框的数据变化
inputName: function (event) {
// 获取到文本框中最新的内容
console.log(event.detail.value) }
-
- 修改data中的数据
通过 this.setData(dataObject) 方法,可以给页面中的 data 数据重新赋值。
例如:监听文本框的数据变化,并把最新的值赋值给 data 中的 msg
示例代码如下:
- 修改data中的数据
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 基础语法
-
- 使用 module.exports 向外共享成员
通过 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 变量
-
- 使用 require 引入其它 wxs 模块
假设有两个 wxs 模块,路径分别为 /pages/tools.wxs 和 /pages/logic.wxs,如果要在 logic.wxs 中引
入 tools.wxs 脚本,则示例代码如下:
- 使用 require 引入其它 wxs 模块
// 使用 require 导入 tools.wxs 脚本
var tools = require("./tools.wxs");
// 得到的 tools 对象,可以直接访问到 tools.wxs 中向外暴露的变量和方法
-
- 使用 require 的注意点
在.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。
引用的时候,要注意如下几点:
① 只能引用 .wxs 文件模块,且必须使用相对路径。 ② wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多
次引用,使用的都是同一个 wxs 模块对象。
③ 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
- 使用 require 的注意点
-
- 支持的数据类型
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
语法