微信小程序入门

数据绑定与事件绑定

1. 通过 bindtap，可以为组件绑定触摸事件，语法如下：
   < view bindtap=“tapName”> Click me! < / view>

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

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

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

3.在文本框的 input 事件处理函数中，通过事件参数 event，能够访问到文本框的最新值：
语法：event.detail.value

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

4.通过 this.setData(dataObject) 方法，可以给页面中的 data 数据重新赋值。

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

事件传参

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

<button bindtap='btnHandler’ data-info=“{{123}}”>事件传参</button>

其中，info 会被当作参数名，数值 123 会被当作参数值。

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

btnHandler: function(event){
console.log(event.target.dataset.info)
}

. wxs 脚本

什么是wxs
wxs（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
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 中向外暴露的变量和方法

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

3. 内嵌 wxs 脚本的示例代码

<!--wxml-->
<wxs module="foo">
var some_msg = "hello world";
module.exports = {
msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>

输出：
hello world
上面例子声明了一个名字为 foo 的模块，将 some_msg 变量暴露出来，供当前页面使用。

4.wxml 内引用外联的 wxs 脚本

在 wxml 中如果要引入外联的 wxs 脚本，必须为 标签添加 module 和 src 属性。
 module 用来为 标签指定模块名，作为当前页面访问这个模块的标识名称；
 src 用来指定当前 标签要引入的脚本路径，必须是相对路径；

要引入的wxs文件的wxml文件

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

被引入的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";

语法和Vue很相似…