新手入手教程微信小程序上手开发和使用总结.pdfVIP

新手入手教程微信小程序上手开发和使用总结 一、模板 WXML 提供模板组件给我们使用，可以在模板定义公用的代码片段，然后在需要引用的地方进行调用。 定义模板 定义模板使用name 属性作为模板的名字，然后在template 标签中定义代码片段： 1template name=mytemplate1 2 view 3 textfirstName:{{firstName}}/text 4 textlastName: {{lastName}}/text 5 /view 6/template 7template name=mytemplate2 8 view wx:for={{persons}} 9 textfirstName:{{item.firstName}}/text 10 textlastName: {{item.lastName}}/text 11 /view 12/template 使用模板 使用模板我们用is 属性引用定义好的模板，然后把模板所需要的值通过data 属性传给模板。比如需要遍 历persons 数组，我们可以将整个persons 作为对象传给模板，也可以遍历persons 后将每个对象传给模板， 具体取决于所应用的场景。 1view wx:for={{persons}} 2 template is=mytemplate1 data={{...item}}/template 3/view 4template is=mytemplate2 data={{persons}}/template 需要的数据结构如下 1Page({ 2 data:{ 3 persons:[ 4 {firstName: Hulk, lastName: Hu}, 5 {firstName: Shang, lastName: You}, 6 {firstName: Gideon, lastName: Lin} 7 ] 8 } 9}) 注意：  is 属性也可以使用Mustache 语法进行动态渲染，决定使用哪个模板  data 如果传的是对象类型的数据，需要用“…”进行“解构”，在模板中可以直接调用对象的属性；如果是其他数据类型则不需要 用“…” 二、事件 什么是事件呢，简单来说，事件就是逻辑层到逻辑层的通讯方式。就是在页面上通过触发某个操作（就是 我们说的事件），在逻辑层进行一系列的操作，最终来改变数据。 比如在一个输入框中用户输入了一段文字，但是data 中的数据并没有随之改变，因此我们需要在输入框 上绑定对应的输入事件来更改数据。 事件分类 事件也有分类，可以分为冒泡事件和非冒泡事件。“冒泡”这个词很形象的表现了事件向上传递的过程，这 两种事件的区别也在于是否会向父节点进行传递。 一些常用的冒泡事件，除以下的事件外都是非冒泡事件： 名称 触发 touchstart 手指开始触摸 touchmove 手指触摸后移动 touchend 手指触摸动作结束 touchcancel 触摸被打断，比如来点，弹框等 tap 触摸后离开，有点像点击click longtap 长按，超过350ms 才离开 事件对象 当事件函数被调用时，从逻辑层有一个默认的事件对象传到函数中，不同的事件所包含的事件对象的属性 有所区别，一些常用的事件对象的属性如下： 属性 类型 说明 type String 事件类型 timeStamp Int 从页面加载到事件触发的时间戳 target Object 触发事件的组件的一些属性值集合 currentTarget Object 当前组件的属性值集