二、微信小程序各种概念
(一)、数据绑定(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