开发微信小程序（二）

二、微信小程序各种概念

（一）、数据绑定（data）

1、在.js文件内存在页面初始化数据（data）和各种生命周期（onLoad、onUnload、onHide onReady、onShow、onHide、onUnload、onPullDownRefresh、onReachBottom、onShareAppMessage）

2、我们先只用data这一属性

3、然后在.wxml处调用这些数据

其中hidden接收的是bool类型数据

（二）、条件渲染（wx:if）

wx:if="{{val}}" （其中val为布尔类型）
wx:elif="{{val}}"
wx:else

它是逐个判断，基本思想和if、if else一样

（三）、列表渲染（wx:for）

　{{index}}:{{item.message}}

1、在data内部创建一个数组，它内部存放对象

2、在.wxml内部，index是每个元素的索引号（从0开始），item就是每个对象，对象的属性就用.* 表示，类似于结构体。


3、或者说在view内部添加属性，将index和item名替换为其他自定义的字符串进行使用，效果是一样的。

4、综合使用列表渲染和条件渲染

判断元素大小并对元素进行操作

（四）、模板（template）

<template></template>

（五）、导入和包含（import include）

import --> 导入模板（具有作用域概念，只会import目标文件中的模板）
include --> 导入目标文件

test.wxml

test2.wxml

test1.wxml

result：

这里的include我感觉和C语言中的函数有几分相像（如果将一个页面封装成一个“函数”的话）。

（七）、页面事件

微信中时间分为两类：

• 冒泡事件（当一个组件上的事件被触发后，该事件会向父节点传递）

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

• 非冒泡事件（当一个组件上的事件被触发后，该事件不会向父节点传递。）

1、事件绑定

（1）、bind（bind开头的事件不会阻止冒泡事件向上冒泡）

e.g.
test.wxml中
click
{{name}}

test.js中
Page({
data: {
name:“欧元”
},
test: function(){
console.log(“this is output”)
},
test1: function(){
this.setData({
name: “欧阳”
})
console.log(“change succeed!”)
}
})

现象为点击click时console输出"this is output"
点击欧元时变成欧阳，同时console输出"change succeed!"
还有其他功能根据上述表格调试即可。

（2）、catch（catch开头的事件可以阻止冒泡事件向上冒泡）

参考网址：
微信小程序API