注冊程序:App()方法
在邏輯層,App()方法用來注冊一個小程序。App()接受一個object參數(shù),用于指定小程序的生命周期函數(shù)等。App()方法有且僅有一個,存在于app.js中。object參數(shù)見下表
注意:onLaunch函數(shù)全局只觸發(fā)一次。
前臺、后臺:用戶當前界面運行或操作小程序時為前臺;當用戶點擊左上角關(guān)閉,或者按了設(shè)備Home鍵離開微信,小程序并沒有直接銷毀,而是進入后臺;當再次進入微信或再次打開小程序,又會從后臺進入前臺。
銷毀:只有當小程序進入后臺一定時間,或者系統(tǒng)資源占用過高,才會被真正銷毀。此時代表小程序的生命周期結(jié)束。
關(guān)閉小程序(公共庫版本1.1.0開始支持): 當用戶從掃一掃、轉(zhuǎn)發(fā)等入口(場景值為1007, 1008, 1011, 1025)進入小程序,且沒有置頂小程序的情況下退出,小程序會被銷毀。
示例代碼:
App({ onLaunch: function(){ //啟動時執(zhí)行的初始化工作 }, onShow: function(){ //小程序從后臺進入前臺時,觸發(fā)執(zhí)行的操作 }, onHide: function(){ //小程序從前臺進入后臺時,觸發(fā)執(zhí)行的操作 }, globalData:'I am global data' })
onLaunch, onShow 參數(shù)
通常開發(fā)者希望轉(zhuǎn)發(fā)出去的小程序被二次打開的時候能夠獲取到一些信息,例如群的標識?,F(xiàn)在通過調(diào)用 wx.showShareMenu
并且設(shè)置 withShareTicket
為 true
,當用戶將小程序轉(zhuǎn)發(fā)到任一群聊之后,可以獲取到此次轉(zhuǎn)發(fā)的 shareTicket
,此轉(zhuǎn)發(fā)卡片在群聊中被其他用戶打開時,可以在 App.onLaunch() 獲取到另一個 shareTicket
。這兩步獲取到的 shareTicket
均可通過 wx.getShareInfo() 接口可以獲取到相同的轉(zhuǎn)發(fā)信息。
微信團隊為開發(fā)者提供全局的getApp()函數(shù),可以用來獲取小程序?qū)嵗?。示例如下?/p>
//other.js var app = getApp(); console.log(app.globalData);//I am global data
注意: ♦ App()方法須在app.js中注冊,且不能注冊多個。 ♦ 不要再定義App()內(nèi)的函數(shù)中調(diào)用getApp(),使用this就可以拿到App實例。 ♦ 通過getApp()獲取實例之后,不要私自調(diào)用生命周期函數(shù)。
注冊頁面:Page()方法
在邏輯層,Page()方法用來注冊一個頁面。Page()接受一個object參數(shù),用于指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。Page()方法每個頁面有且僅有一個,存在于該頁面的.js文件中。
示例代碼:
Page({ Data: { Text: 'This is page data.' }, onLoad: function (options) { //頁面加載時執(zhí)行的初始化工作 }, onReady: function () { //頁面就緒后觸發(fā)執(zhí)行的操作 }, onShow: function () { //頁面打開時,觸發(fā)執(zhí)行的操作 }, onHide: function () { //頁面隱藏時,觸發(fā)執(zhí)行的操作 }, onUnload: function () { //頁面關(guān)閉時,觸發(fā)執(zhí)行的操作 }, onPullDownRefresh: function(){ //用戶在頁面下拉時執(zhí)行的操作 }, onReachBottom: function(){ //到達頁面底部時執(zhí)行的操作 }, //Event Handler viewTap: function () { this.setData({ text: 'set some data for updating view.' }) }, })
注意: ♦ 不要在 onLaunch 的時候調(diào)用 getCurrentPages(),此時 page 還沒有生成。
初始化數(shù)據(jù)
初始化數(shù)據(jù)將作為頁面的第一次渲染。對象data將會以JSON的形式由邏輯層傳至視圖層,所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式:字符串、數(shù)字、布爾值、對象、數(shù)組。視圖層可以通過WXML對數(shù)據(jù)進行綁定。
<!--demo.wxml--> <view>{{text}}</view> <view>{{array[0].msg}}</view>
//demo.js Page({ /** * 頁面的初始數(shù)據(jù) */ data: { text: 'init data', array: [{msg:'1'},{msg:'2'}] } })
頁面的生命周期
生命周期包括onLoad、onShow、onReady、onHide、onUnload。
onload:頁面加載時執(zhí)行的初始化操作:
♦ 一個頁面只會調(diào)用一次。
♦ 參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的query。
onShow:頁面顯示時執(zhí)行的操作。每次打開頁面都會調(diào)用一次。
onReady:頁面初次渲染完成時執(zhí)行的操作。
♦ 一個頁面只會調(diào)用一次,代表頁面已經(jīng)準備妥當,可以和視圖層進行交互。
♦ 對頁面的設(shè)置(如wx.setNavigationBarTitle)在onReady之后設(shè)置。
onHide:頁面隱藏時執(zhí)行的操作。當navigateTo或底部進行tab切換時調(diào)用。
onUnload:頁面卸載時執(zhí)行的操作。當進行redirectTo或navigateBack操作時調(diào)用。
頁面相關(guān)事件處理函數(shù)
onPullDownRefresh:下拉刷新時執(zhí)行的操作。
♦ 監(jiān)聽用戶下拉刷新事件。
♦ 需要在config的window選項中開啟enablePullDownRefresh。
♦ 處理完數(shù)據(jù)刷新后,wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。
事件處理函數(shù)
除了初始化數(shù)據(jù)和生命周期函數(shù),Page()方法中可以定義一些特殊的函數(shù):事件處理函數(shù)。在視圖層通過對組件加入事件綁定,當滿足事件時,就會執(zhí)行Page()中定義的事件處理函數(shù)。
//<!--wxml--> //綁定viwTap事件到view組件 <view bindtap="viewTap"> Click Me </view>
//page.js Page({ //定義一個viewTap事件處理函數(shù) viewTap:function(){ console.log('view tap') } })
頁面棧及其實例獲取
框架以棧的形式維護了當前的所有頁面。 當發(fā)生路由切換的時候,頁面棧的表現(xiàn)如下:
getCurrentPages()函數(shù)用于獲取當前頁面棧的實例,以數(shù)組的形式按棧的順序給出第一個元素為首頁,最后一個元素為當前頁面。
注:不要嘗試修改頁面棧,會導(dǎo)致路由以及頁面狀態(tài)錯誤。
頁面的路由
在小程序中,所有頁面的路由全部都由框架進行管理,對于路由的觸發(fā)方式以及頁面生命周期見下表:
Tab 切換對應(yīng)的生命周期(以 A、B 頁面為 Tabbar 頁面,C 是從 A 頁面打開的頁面,D 頁面是從 C 頁面打開的頁面為例):
模塊及調(diào)用
文件作用域
在頁面的JavaScript(.js)腳本文件中聲明的變量和函數(shù)只在該文件中有效;不同的文件中可以聲明相同名字的變量和函數(shù),不會相互影響。
通過全局函數(shù)getApp()可以獲取全局的應(yīng)用實例,如果需要全局的數(shù)據(jù)可以在App()中設(shè)置。
//app.js App({ globalData:1 }) //a.js //變量localValue只在a.js文件中有效 var localValue = 'a' //獲取App實例 var app = getApp() //獲取全局數(shù)據(jù)值并修改 app.globalData++ //b.js //可以在b.js文件中重新定義變量localValue,這并不會影響 a.js文件中的localValue var localValue = 'b' //若a.js在b.js之前運行,那么這里的globalData就應(yīng)是2 console.log(getApp().globalData)
模塊化
可以將一些公共的代碼抽離成為一個單獨的js腳本文件,作為一個模塊。
注:模塊只有通過module.exports才能對外暴露接口以供其他.js文件引入使用。
示例代碼:
//common.js function sayHello(name){ console.log('Hello' + name + '!') } module.exports = { sayHello:sayHello }
在需要使用這些模塊的.js文件中,使用require(path)將公共代碼引入。
示例代碼:
//call.js var common = require('common.js') Page({ helloMINA:function(){ common.sayHello('MINA') } })
下一篇:小程序--三級聯(lián)動