⼩程序开发教程（七）逻辑层——.js详解
逻辑层，是事务逻辑处理的地⽅。对于⼩程序⽽⾔，逻辑层就是.js脚本⽂件的集合。逻辑层将数据进⾏处理后发送给视图层，同时接收视图层的事件反馈。
⼩程序开发框架的逻辑层是由JavaScript编写。在JavaScript的基础上，团队做了⼀些适当的修改，以便提⾼开发⼩程序的效率。主要修改包括：
♦增加app和page⽅法，进⾏程序和页⾯的注册
♦提供丰富的API，如扫⼀扫、⽀付等特有的能⼒
♦每个页⾯有独⽴的作⽤域，并提供模块化能⼒。
逻辑层的实现就是编写各个页⾯的.js脚本⽂件。但由于⼩程序并⾮运⾏在浏览器中，所以JavaScript在Web中的⼀些能⼒⽆法使⽤，如document、window等。
我们开发编写的所有代码最终会打包成⼀份JavaScript，并在⼩程序启动的时候运⾏，直到⼩程序销毁。
注册程序：App()⽅法
在逻辑层，App()⽅法⽤来注册⼀个⼩程序。App()接受⼀个object参数，⽤于指定⼩程序的⽣命周期函数等。App()⽅法有且仅有⼀个，存在于app.js中。object参数见下表
注意：onLaunch函数全局只触发⼀次。
前台、后台：⽤户当前界⾯运⾏或操作⼩程序时为前台；当⽤户点击左上⾓关闭，或者按了设备Home键离开，⼩程序并没有直接销毁，⽽是进⼊后台；当再次进⼊或再次打开⼩程序，⼜会从后台进⼊前台。
销毁：只有当⼩程序进⼊后台⼀定时间，或者系统资源占⽤过⾼，才会被真正销毁。此时代表⼩程序
的⽣命周期结束。
关闭⼩程序(公共库版本1.1.0开始⽀持)：当⽤户从扫⼀扫、转发等⼊⼝(为1007, 1008, 1011, 1025)进⼊⼩程序，且没有置顶⼩程序的情况下退出，⼩程序会被销毁。
⽰例代码：
App({
onLaunch: function(){
//启动时执⾏的初始化⼯作
},
onShow: function(){
//⼩程序从后台进⼊前台时，触发执⾏的操作
},
onHide: function(){
//⼩程序从前台进⼊后台时，触发执⾏的操作
},
globalData:'I am global data'
})
onLaunch, onShow 参数
获取更多转发信息
通常开发者希望转发出去的⼩程序被⼆次打开的时候能够获取到⼀些信息，例如的标识。现在通过调⽤wx.showShareMenu并且设
置withShareTicket为true，当⽤户将⼩程序转发到任⼀聊之后，可以获取到此次转发的shareTicket，此转发卡⽚在聊中被其他⽤户打开时，可以在获取到另⼀个shareTicket。这两步获取到的shareTicket均可通过接⼝可以获取到相同的转发信息。
团队为开发者提供全局的getApp()函数，可以⽤来获取⼩程序实例。⽰例如下：
/
/other.js
var app = getApp();
console.log(app.globalData);//I am global data
注意：
♦ App()⽅法须在app.js中注册，且不能注册多个。
♦不要再定义App()内的函数中调⽤getApp()，使⽤this就可以拿到App实例。
♦通过getApp()获取实例之后，不要私⾃调⽤⽣命周期函数。
注册页⾯：Page()⽅法
在逻辑层，Page()⽅法⽤来注册⼀个页⾯。Page()接受⼀个object参数，⽤于指定页⾯的初始数据、⽣命周期函数、事件处理函数等。Page()⽅法每个页⾯有且仅有⼀个，存在于该页⾯的.js⽂件中。
⽰例代码：
Page({
Data: {
Text: 'This is page data.'
},
onLoad: function (options) {
//页⾯加载时执⾏的初始化⼯作
},
onReady: function () {
//页⾯就绪后触发执⾏的操作
},
onShow: function () {
//页⾯打开时，触发执⾏的操作
},
onHide: function () {
//页⾯隐藏时，触发执⾏的操作
},
onUnload: function () {
//页⾯关闭时，触发执⾏的操作
},
onPullDownRefresh: function(){
//⽤户在页⾯下拉时执⾏的操作
},
onReachBottom: function(){
/
/到达页⾯底部时执⾏的操作
},
//Event Handler
viewTap: function () {
this.setData({
text: 'set some data for updating view.'
})
},
})
js脚本开发注意：
♦不要在 onLaunch 的时候调⽤ getCurrentPages()，此时 page 还没有⽣成。初始化数据
初始化数据将作为页⾯的第⼀次渲染。对象data将会以JSON的形式由逻辑层传⾄视图层，所以其数据必须是可以转成JSON的格式：字符串、数字、布尔值、对象、数组。视图层可以通过WXML对数据进⾏绑定。
<!--demo.wxml-->
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
//demo.js
Page({
/**
* 页⾯的初始数据
*/
data: {
text: 'init data',
array: [{msg:'1'},{msg:'2'}]
}
})
页⾯的⽣命周期
⽣命周期包括onLoad、onShow、onReady、onHide、onUnload。
onload：页⾯加载时执⾏的初始化操作：
♦⼀个页⾯只会调⽤⼀次。
♦参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的query。
onShow：页⾯显⽰时执⾏的操作。每次打开页⾯都会调⽤⼀次。
onReady：页⾯初次渲染完成时执⾏的操作。
♦⼀个页⾯只会调⽤⼀次，代表页⾯已经准备妥当，可以和视图层进⾏交互。
♦对页⾯的设置（如wx.setNavigationBarTitle）在onReady之后设置。
onHide：页⾯隐藏时执⾏的操作。当navigateTo或底部进⾏tab切换时调⽤。
onUnload：页⾯卸载时执⾏的操作。当进⾏redirectTo或navigateBack操作时调⽤。
页⾯相关事件处理函数
onPullDownRefresh：下拉刷新时执⾏的操作。
♦监听⽤户下拉刷新事件。
♦需要在config的window选项中开启enablePullDownRefresh。
♦处理完数据刷新后，wx.stopPullDownRefresh可以停⽌当前页⾯的下拉刷新。
事件处理函数
除了初始化数据和⽣命周期函数，Page()⽅法中可以定义⼀些特殊的函数：事件处理函数。在视图层通过对组件加⼊事件绑定，当满⾜事件时，就会执⾏Page()中定义的事件处理函数。
//<!--wxml-->
//绑定viwTap事件到view组件
<view bindtap="viewTap"> Click Me </view>
//page.js
Page({
//定义⼀个viewTap事件处理函数
viewTap:function(){
console.log('view tap')
}
})
页⾯栈及其实例获取
框架以栈的形式维护了当前的所有页⾯。当发⽣路由切换的时候，页⾯栈的表现如下：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论