微信小程序页面逻辑文件(JavaScript)讲解
页面逻辑文件主要功能有:设置初始化数据，注册当前页面生命周期函数，注册事件处理函数等。小程序的逻辑层文件是JavaScript
在小程序启动时运行，直到小程序销毁，类似于ServiceWorker，所以逻辑层也称为App Service。
览器中，一些浏览器提供的特有对象，如document、window等，在jQuery、Zepto都不能仕小样序十1文N是作的编程思路转化为数据绑
定和事件响应。
1.微信小程序注册页面
在页面逻辑文件中需要通过Page (函数注册页面，指定页面的初始数据、生命周期函数、事件处理函数等，参数为一个Object对象，
其属性如下:
象类型。当页面第一次渲染时，data会以JSON的形式由逻辑层传至渲染层，渲染层可以通过WXML对数据进行绑定。
-onLoad:生命周期函数，页面加载时触发。一个页面只会调用一次，接受页面参数，可以获取wx.navigateTo、wx.redirectTo以及中的query参数。
-onShow:生命周期函数，页面显示时触发。每次打开页面都会调用一次。
-onReady:生命周期函数，页面初次渲染完成时触发。一个页面生命周期中只会调用一次，代表当前页面已经准备妥当，可以和视图层进行交互。一些对界面的设置,操作需要在页面准备妥当后调用，如wx.setNavigationBarTitle需要在onReady之后设置，详细可以参考后面的“页面生命周期”小节。
-onHide:生命周期函数，页面隐藏时触发。-onUnload:生命周期函数，页面卸载时触发。
-onPullDownRefresh:页面相关时间处理函数，用户下拉时触发。使用时需要将app.json配置中window的enablePullDownRefresh属性设置为true。当处理完数据刷新后，可以调用wx.stopPullDownRefresh方法停止当前页面的下拉刷新。
-onReachBottom:页面上拉触底事件的处理函数。
·其他:开发者可以添加任意的函数或数据到Object参数中，可以用this访问这些函数和数据。
示例代码如代码清单2-2所示:代码清单2-2页面逻辑文件
Ⅱ获取app实例
var app = getApp();Page( {
data : {Ⅱ页面初始化数据count : 0
},
onLoad : function(){Ⅱ页面加载时执行};
onShow : function() {l页面打开时执行
console.log( app.globalData );),
onReady : function() {
l页面初次渲染完成执行，一个页面只会调用一次},
onHide : function() {
Ⅱ页面隐藏时执行},
onUnload : function() {l页面卸载时执行},
onPullDownRefresh : function() {下拉刷新时执行
},
onReachBottom : function() {Ⅱ下拉触底时执行
},
l自定义函数，可与渲染层中的组件进行事件绑定countClick : function() {
l触发视图层重新渲染this.setData( {
count : this.data.count + 1});
},
l自定义数据customData : {name : '微信'
});
页面的生命周期函数比小程序的生命周期函数略微复杂一点，弄懂其执行顺序能避免在不恰当的生命周期函数中调用还未创建的对象或方法，小程序框架以栈的形式维护了当前的所有页面，当发生路由切换时，页面栈和生命周期函数的关系如下:
·小程序初始化:默认页面入栈，依次触发默认页面onLoad、onShow、onReady方法。
·打开新页面:新页面入栈，依次触发新页面onLoad、onShow、onReady方法。
·页面重定向:当前页面出栈并卸载，触发当前页面onUnload方法，新页面入栈，触发新页面onLoad、onShow、onReady方法。
·页面返回:页面不断出栈并卸载，触发当前弹出页面onUnload方法，直到返回目标页面，新页面入栈，触发新页面onShow方法。
-Tab切换:当前页面出栈但不卸载，仅触发onHide方法，新页面入栈，如果当前页面是新加载的，触发onLoad、onShow、onReady方法，如果当前页面已加载过，仅触发onShow方法。
·程序从前台到后台:触发当前页面onHide方法，触发ApponHide方法。
·程序从后台到前台:触发小程序onShow方法，触发页面onShow方法。
整体来说，如果页面在生命周期中，只会触发onShow和onLoad方法,只有加载和卸载时才会触发onLoad、onReady和onUnload方法，而触发页面卸载只有页面返回和页面重定向两种操作。页面生命周期函数的执行顺序不用死记硬背，开发过程中可以开启app.json中的debug模式，路由切换时，小程序、页面的生命周期函数执行顺序都会在控制台以info形式输出，在后面小节中我们将对页面生命周期作简单介绍。
⒉微信小程序获取当前页面栈
有注册就有获取，getCurrentPages (函数便是用于获取当前页面栈的实例，页面栈以数组形式按栈顺序给出，第一个元素为首页，最后一个元素为当前页面。不要尝试修改页面栈，这会导致路由以及页面状态错误。
示例代码如下:
/*获取页面栈*
var pages = getCurrentPages();/产*获取当前页面对象*/
var currentPage = pages[pages.length - 1];
3.微信小程序事件处理函数
页面对象中注册的函数可以和视图层中的组件进行绑定，当达到触发条件时，就会执行Page中定义的相应事件，这类自定义函数统称为事件处理函数。小程序中组件的事件分为通用事件和特殊事件，事件类型请参考后面2.4.3节中“事件”小节。
示例代码如下:
<view bindtap= "myevent ">点击执行逻辑层事件</view>Page( {
myevent : function(){
console.log( '点击了view' );}
});
4.微信小程序触发视图层渲染
页面首次加载时，框架会结合初始化数据渲染页面，在逻辑层中则需主动调用Page.prototype.setData )方法，而不能直接修改Page的data值，这样不仅无法触发视图层渲染，还会造成数据不一致。当Page.prototype.setData (被调用时，会将数据从逻辑层发送到视图层触发视图层重绘，同时会修改Page的data值。setData (接受一个Object对象参数，方法会自动将this.data中的key对应的值变成Object参数中key对应的值。当Object参数key对应的值和this.data中key对应的值一致时，将不会触发视图层渲染。在项目中我们一定要保证视图层和逻辑层的数据一致。
Object参数的key值非常灵活，可以按数据路径的形式给出，如array[5].info、obj.key.subkey，并且这样使用时，不需要在this.data中预先定义。
示例代码如下:
<view>{{text}}</view>
<button bindtap="changeText">修改普通数据</button><view>{{object.subObject.objectTextl}</view>
<button bindtap="changeObjectText">修改对象数据</button><view>{{array[0].arrayText}}</view>
<button bindtap="changeArrayText">修改数组数据</button><view>{{newField.newFieldText}}</view>
<button bindtap="addNewData">添加新字段</button>Page( {
data : {
text : 'normal data'，object : {
subObject : {
objectText : 'object data'}
},array : [
{ arrayText : 'array data' }]
),
changeText : function() {this.setData( {
*普通索引*/
text : 'new normal data'
});},
changeObjectText : function(){this.setData( {
/*按路径索引*/
'object.subObject.objectText' : 'new object data'});
),
changeArrayText : function() {this.setData( {
/*按路径索引*
'array[0].arrayText : 'new array data'});
)},
addNewData : function() {this.setData( {
/*修改一个已绑定，但未在data中定义的数据*'newField.newFieldText' : 'add new data'
});
}});
您当前浏览的文章：《微信小程序页面逻辑文件(JavaScript)讲解》由小程序开发服务品牌九尾狐整理发布。
转载请注明：http://www.webs8.cn/shows/6/21.html
文章标签：
