本期想要和大家分享一下大众点评点餐小程序开发中的逻辑层的经验。与视图层微信自己定义了一套与HTML对应的WXML和WXSS不同小程 ...
本期想要和大家分享一下大众点评点餐小程序开发中的逻辑层的经验。
与视图层微信自己定义了一套与HTML对应的WXML和WXSS不同小程序的逻辑层还是使用javascript编写的。不过与我们普通的编写js还是有一些区别的。接下来我会根据实践进行说明。逻辑层代码结构为
menu
├── menu.html
├── menu.js
├── menu.json
└── menu.less
app.js
作为逻辑层我们只需要关注app.js和menu.js。
App和Page App小程序提供了App方法来注册整个小程序seo优化知识小程序的逻辑层还是使用javascript编写的。不过与我们普通的编写js还是有一些区别的。接下来我会根据实践进行说明。逻辑层代码结构为
menu
├── menu.html
├── menu.js
├── menu.json
└── menu.less
app.js
作为逻辑层我们只需要关注app.js和menu.js。
App和Page App小程序提供了App方法来注册整个小程序在App方法里我们可以传入一个对象指定小程序的生命周期函数以及自定义的函数或者数据。注意这个函数只能被调用一次。
App
globalData
onLaunch
onShow
onHide
onError
其他自定义
如上所示App拥有着4个生命周期函数我们可以在launch的时候进行一些全局信息的获取比如用户信息门店信息等等然后存入到全局数据中。这里的数据可以被每个页面访问到。
Page小程序针对每个页面提供了Page的函数。整个逻辑层大部分的代码都会写在Page函数中Page中承接着整个页面的数据生命周期函数以及在视图中绑定的事件的触发函数例如各点击事件。整个Page函数允许的参数如下所示：
Page
data
onload
onReady
onShow
onHide
onUnload
onPullDownRefresh
onReachBottom
onShareAppMessage
其他自定义函数
如上Page函数因为是页面级别的所以拥有着更多的生命函数会有下拉刷新事件会有页面到达底部的事件。这里我们需要区别好各个生命周期函数。onLoad只会在初始化的时候调用一次onShow是每次打开页面都会调用onReady只有页面初次渲染完成才会被调用。onHide会在navigateTo(微信提供的跳转API)或者底部tab切换时调用onUnload会在redirectTo(微信提供的redirect的API)或者navigateBack(微信提供的回退的API)的时候调用。Page更具体的渲染过程可以参考下面这张图：
简单描述下就是：视图层和逻辑层同时进行初始化的操作：视图层ready之后通知逻辑层发送数据；逻辑层执行onload和onShow方法seo优化onUnload会在redirectTo(微信提供的redirect的API)或者navigateBack(微信提供的回退的API)的时候调用。Page更具体的渲染过程可以参考下面这张图：
简单描述下就是：视图层和逻辑层同时进行初始化的操作：视图层ready之后通知逻辑层发送数据；逻辑层执行onload和onShow方法然后等待视图层的通知在接收到视图层的通知之后发送数据给视图层然后继续等待视图层的通知。视图层根据数据进行初次渲染后通知逻辑层渲染完毕逻辑层调用onReady方法。然后后续的行为逻辑层可以通过再次发送数据重新渲染视图层。
Page的整个工作流程可以参照下面的图：
小程序内申明的变量和函数只在该文件内有效不同的文件可以申明相同名字的变量和函数并不会相互影响。上面提到App内可以设置全局数据。我们在每个Page里面都可以通过全局函数getApp()来拿到全局的引用实例。然后就可以访问页面的数据。比如我们在购物车下完单之后回到菜单页可能会需要进行菜单的刷新我们在购物车页面就会调用getApp().data.menuRefresh = true然后在菜单页的onShow方法进行判断例如:
let app = getApp(); Page( requestMenu () { //刷新菜单 }; onShow () { if (app.data.menuRefresh === true) { app.data.menuRefresh === false; this.requestMenu(); } } );在每个Page内我们还可以用getCurrentPages来获取当前页面栈的实例数组形式第一个元素为首页最后一个元素为当前页面。页面栈的表现情况如下表所示：
路由方式 页面栈表现