新建项目的注意点:
直接在app.json中写新页面的路径,然后新页面的文件就自动生成了。
1、注册页面
对于小程序中的每个页面,都需要在页面对应的js文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。
使用Page构造器注册页面
简单的页面可以使用Page()进行构造。
Page({
data:{
text:"This is page data."
},
onload:function(options){
//页面创建时执行},
onShow:function(){
//页面出现在前台时执行},
onReady:function(){
//页面首次渲染完毕时执行},
onHide:function(){
//页面从前台变为后台时执行},
onUnload:function(){
//页面销毁时执行},
onPullDownRefresh:function(){
//触发下拉刷新时执行},
onReachBottom:function(){
//页面触底时执行},
onShareAppMessage:function(){
//页面被用户分享时执行},
onPageScroll:function(){
//页面滚动时执行},
onResize:function(){
//页面尺寸变化时执行},
})
page中还可以定义组件事件处理函数。在渲染层的组见证加入事件绑定,当事件被触发时,就会执行Page中定义的事件处理函数。
逻辑层 App Service
小程序开发框架的逻辑层使用javascript引擎为小程序提供开发者javascript代码的运行环境以及微信小程序的特有功能。
逻辑层将数据进行处理后最终将会打包成一份javascript文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似ServiceWorker,所以逻辑层也称之为App Service。
在javascript的基础上,我们增加了一些功能,以方便小程序的开发:
增加App和Page方法,进行程序注册和页面注册。
增加getApp和getcurrentpages方法,分别用来获取App实例和当前页面栈。
提供丰富的API,如微信用户数据,扫一扫,支付等微信特有能力。
提供模块化能力,每个页面有独立的作用域。
2、setData(data,callback)函数
setData函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的this.data的值(同步)。
data 必填项,是这次要改变的数据。
callback不是必填项,setData引起的界面更新渲染完毕后的回调函数。
直接修改this.data而不调用this.setData是无法改变页面的状态的,还会造成数据不一致。
3、Page.route
到当前页面的路径,类型为String
4、页面间通信
如果一个页面由另一个页面通过wx.navigateTo()打开,这两个页面间将建立一条数据通道:
被打开的页面可以通过this.getopenerEventchannel()方法来获得一个Eventchannel对象
wx.navigateTo的success回调中也包含一个Eventchannel对象
这两个Eventchannel对象间可以使用emit和on方法相互发送、监听事件。
5、组件的生命周期
组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
6、由e.currentTarget.dataset.type引起的对事件的理解
什么是事件
事件时视图层到逻辑层的通讯方式
事件可以将用户的行为反馈到逻辑层进行处理
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
事件对象可以携带额外信息,如id,dataset,touches.
事件的使用方式
在组件中绑定一个事件处理函数
如bindtap,当用户点击该组件的时候会在该页面对应的p