邏輯層檔案主要如下所示：App()
App()函式用來註冊一個小程式，接受一個object引數，其指定小程式的生命週期函式等。
object引數說明:
onLaunch
型別是function 作用監聽小程式初始化，觸發時機就是當小程式初始化載入，會觸發onLaunch(全域性只觸發一次)
onReady
型別function 作用監聽小程式載入。觸發時機當小程式初次渲染完成。
onShow
型別是Function 作用是監聽小程式顯示。觸發時機當小程式啟動後，或者從後臺進入前臺顯示，會觸發onShow
onHide
型別是Function 作用是監聽小程式隱藏，觸發時機當小程式從前臺進入後臺時候，會觸發onHide
OnError
型別function 作用錯誤監聽函式 , 當小程式發生指令碼錯誤，或者api呼叫失敗。會觸發onError並帶上錯誤資訊
其他
型別Any 開發者可以新增任意的函式或者資料到object引數中，用this可以訪問
特別注意：只有當小程式進入後臺一定的時間，或者系統資源佔用過高，才會被真正的銷燬。
getApp()
我們提供了全域性的getApp()函式，可以獲取到小程式例項
var app = getApp();
console.log(app.globalData) //I am global data
特別注意:App()必須在app.js中註冊，且不能是多個
不要在定義於App()內的函式呼叫getApp()使用this 就可以拿到app例項
不要在onlauch的時候呼叫getCurrentPages(),此時page還沒有生成
透過getApp() 獲取到例項後，不要私自呼叫或者啟用生命週期函式
Page
Page()函式用來註冊一個頁面，接受一個object引數，其指定的頁面的初始資料，生命週期函式，事件處理函式等等
Object引數說明:
data 型別object 作用頁面的初始資料
onLoad 型別Function 作用監聽頁面載入(只執行一次)
onReady 型別Function 作用監聽頁面初次渲染完成
onShow 型別Function 作用監聽頁面顯示
onHide 型別Function 作用監聽頁面隱藏
onUnload 型別Function 作用監聽頁面解除安裝
onPullDownRefresh 型別Function 作用監聽使用者下拉動作
onReachBottom 型別Function 作用頁面上拉觸底事件的處理函式
onPageScroll 型別Function 作用頁面滾動觸發事件的處理函式
其他 型別 Any 作用開發者可以新增任意的函式或者資料到object引數中。在頁面的函式中用this可以訪問
示例程式碼:
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
onReady: function() {
// Do something when page ready.
onShow: function() {
// Do something when page show.
onHide: function() {
// Do something when page hide.
onUnload: function() {
// Do something when page close.
onPullDownRefresh: function() {
// Do something when pull down.
onReachBottom: function() {
// Do something when page reach bottom.
onShareAppMessage: function () {
// return custom share data when user share.
onPageScroll: function() {
// Do something when page scroll
// Event handler.
viewTap: function() {
this.setData({
text: "Set some data for updating view."
}, function() {
// this is setData callback
})
customData: {
hi: "MINA"
}
初始化資料
初始化資料將作為頁面的第一次渲染。data將會以JSON的形式由邏輯層傳輸到渲染層。所以資料必須是可以轉成JSON格式的。字串，數字，布林值，物件，陣列
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
對應的在JS裡面的data資料應該寫成
data:{
text:"今天",
array:[{msg:"1"},{msg:"2"}]
生命週期函式
onLoad :頁面載入
一個頁面只會呼叫一次，可以在onLoad中獲取開啟當前頁面所呼叫的query引數
onShow:頁面顯示
每次開啟頁面都會呼叫一次
onReady: 頁面初次渲染完成
一個頁面只會呼叫一次，程式碼頁面已經準備妥當，可以和檢視層互動
對介面的設定如:wx.setNavigationBarTitle請在onReady之後設定
onHide 頁面隱藏
當navigateTo或者底部tab切換的時候呼叫
onUnload: 頁面解除安裝
當redirectTo或者navigateBack的時候呼叫
頁面相關事件處理函式
onPullDownRefresh :下拉重新整理
（1）監聽使用者下拉重新整理事件。
（2）必須需要在app.json的window選項中，或者在頁面配置中開啟enablePullDownRefresh
（3）當處理完資料重新整理後。wx.stopPullDownRefresh可以停止當前頁面的重新整理
onReachBottom:上拉觸底
(1)監聽使用者上拉觸底事件。
(2)可以在app.json裡面的window選項中或者頁面配置中設定觸發距離onReachBottomDistance
(3)在觸發距離內滑動期間，本事件只會觸發一次.
onPageScroll：頁面滾動
(1)監聽使用者滑動頁面事件
(2)引數為object包含以下欄位.
scrollTop 型別Num 頁面在垂直方向已滾動的距離(單位Px)
(3)程式碼如下:
onPageScroll:function(options){
console.log(options.scrollTop);
return {
title: "頁面的主標題",
desc: "頁面的描述",
path: "/pages/index/index?id=123"
事件處理函式
(1)除了初始化資料和生命週期函式，我們還可以自定義事件處理函式，在元件中加入事件繫結，當達到觸發事件就會執行Page中定義的事件處理函式.
在邏輯層(js)
clickme:function(){
console.log("Hello world!")
this.setData()
setData 函式用於將資料從邏輯層傳送到檢視層(非同步)，同時改變對應的this.data的值(同步)
setData()引數格式
data
型別object 必填:是 描述需要改變的資料
callback 型別function 必填:否 描述回撥函式
object以key,value的形式表示將this.data中的key對應的值變成value！callback是一個回撥函式，在這次setData對介面渲染完畢後使用。
其中key可以非常靈活，以資料路徑的形式給出。如arr[2].message,a.b.c.d並且不需要再this.data中預先定義.
注意:
直接修改this.data而不呼叫this.setData 是無法改變頁面的狀態的。還會造成資料不一致。
單次設定的資料不能超過1024KB，避免一次設定過多的資料.
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
在index.js檔案裡面
text: "init data",
num: 0,
array: [{text: "init data"}],
object: {
text: "init data"
changeText: function() {
// this.data.text = "changed data" // bad, it can not work
text: "changed data"
changeNum: function() {
this.data.num = 1
num: this.data.num
changeItemInArray: function() {
// you can use this way to modify a danamic data path
"array[0].text":"changed data"
changeItemInObject: function(){
"object.text": "changed data"
});
addNewField: function() {
"newField.text": "new data"
頁面路由
在小程式中所有的頁面的路由全部由框架進行管理
getCurrentPages()
getCurrentPages()函式用於獲取到當前頁面棧的例項，以陣列形式按棧的順序給出，第一個元素為首頁，最後一個元素為當前頁。
重要的事情說三遍。千萬不要修改頁面棧。千萬不要修改頁面棧。千萬不要修改頁面棧。
路由方式
開啟新頁面:
呼叫API wx.navigateTo
或者元件<navigator open-type="navigateTo">
頁面重定向
呼叫API wx.redirecTo
或者使用元件<navigator open-type="redirectTo">
頁面返回
呼叫API wx.navigateBack
或者使用元件<navigator open-type="navigateBack">
Tab切換
呼叫API wx.switchTab
或者使用元件<navigator open-type="switchTab">
重啟動
呼叫API wx.reLaunch
或者使用元件<navigator open-type="reLaunch">
這幾種路由跳轉方式。對於前頁面來說:
wx.navigateTo 對應的 onHide
wx.redirecTo 對應的 onUnload
wx.navigateBack 對應的onUnload
特別注意
navigateTo,redirectTo只能開啟不是底部導航指定的頁面
SwitchTab 只能開啟tabBar頁面
reLaunch 可以開啟任意頁面
頁面底部的tabBar由頁面決定，即只要是定義了tabbar的頁面，底部就有tabBar
呼叫頁面路由帶的引數可以在目標頁面的onLoad中獲取。
邏輯層檔案主要如下所示：App()
App()函式用來註冊一個小程式，接受一個object引數，其指定小程式的生命週期函式等。
object引數說明:
onLaunch
型別是function 作用監聽小程式初始化，觸發時機就是當小程式初始化載入，會觸發onLaunch(全域性只觸發一次)
onReady
型別function 作用監聽小程式載入。觸發時機當小程式初次渲染完成。
onShow
型別是Function 作用是監聽小程式顯示。觸發時機當小程式啟動後，或者從後臺進入前臺顯示，會觸發onShow
onHide
型別是Function 作用是監聽小程式隱藏，觸發時機當小程式從前臺進入後臺時候，會觸發onHide
OnError
型別function 作用錯誤監聽函式 , 當小程式發生指令碼錯誤，或者api呼叫失敗。會觸發onError並帶上錯誤資訊
其他
型別Any 開發者可以新增任意的函式或者資料到object引數中，用this可以訪問
特別注意：只有當小程式進入後臺一定的時間，或者系統資源佔用過高，才會被真正的銷燬。
getApp()
我們提供了全域性的getApp()函式，可以獲取到小程式例項
var app = getApp();
console.log(app.globalData) //I am global data
特別注意:App()必須在app.js中註冊，且不能是多個
不要在定義於App()內的函式呼叫getApp()使用this 就可以拿到app例項
不要在onlauch的時候呼叫getCurrentPages(),此時page還沒有生成
透過getApp() 獲取到例項後，不要私自呼叫或者啟用生命週期函式
Page
Page()函式用來註冊一個頁面，接受一個object引數，其指定的頁面的初始資料，生命週期函式，事件處理函式等等
Object引數說明:
data 型別object 作用頁面的初始資料
onLoad 型別Function 作用監聽頁面載入(只執行一次)
onReady 型別Function 作用監聽頁面初次渲染完成
onShow 型別Function 作用監聽頁面顯示
onHide 型別Function 作用監聽頁面隱藏
onUnload 型別Function 作用監聽頁面解除安裝
onPullDownRefresh 型別Function 作用監聽使用者下拉動作
onReachBottom 型別Function 作用頁面上拉觸底事件的處理函式
onPageScroll 型別Function 作用頁面滾動觸發事件的處理函式
其他 型別 Any 作用開發者可以新增任意的函式或者資料到object引數中。在頁面的函式中用this可以訪問
示例程式碼:
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
// Event handler.
viewTap: function() {
this.setData({
text: "Set some data for updating view."
}, function() {
// this is setData callback
})
},
customData: {
hi: "MINA"
}
})
初始化資料
初始化資料將作為頁面的第一次渲染。data將會以JSON的形式由邏輯層傳輸到渲染層。所以資料必須是可以轉成JSON格式的。字串，數字，布林值，物件，陣列
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
對應的在JS裡面的data資料應該寫成
Page({
data:{
text:"今天",
array:[{msg:"1"},{msg:"2"}]
}
})
生命週期函式
onLoad :頁面載入
一個頁面只會呼叫一次，可以在onLoad中獲取開啟當前頁面所呼叫的query引數
onShow:頁面顯示
每次開啟頁面都會呼叫一次
onReady: 頁面初次渲染完成
一個頁面只會呼叫一次，程式碼頁面已經準備妥當，可以和檢視層互動
對介面的設定如:wx.setNavigationBarTitle請在onReady之後設定
onHide 頁面隱藏
當navigateTo或者底部tab切換的時候呼叫
onUnload: 頁面解除安裝
當redirectTo或者navigateBack的時候呼叫
頁面相關事件處理函式
onPullDownRefresh :下拉重新整理
（1）監聽使用者下拉重新整理事件。
（2）必須需要在app.json的window選項中，或者在頁面配置中開啟enablePullDownRefresh
（3）當處理完資料重新整理後。wx.stopPullDownRefresh可以停止當前頁面的重新整理
onReachBottom:上拉觸底
(1)監聽使用者上拉觸底事件。
(2)可以在app.json裡面的window選項中或者頁面配置中設定觸發距離onReachBottomDistance
(3)在觸發距離內滑動期間，本事件只會觸發一次.
onPageScroll：頁面滾動
(1)監聽使用者滑動頁面事件
(2)引數為object包含以下欄位.
scrollTop 型別Num 頁面在垂直方向已滾動的距離(單位Px)
(3)程式碼如下:
onPageScroll:function(options){
console.log(options.scrollTop);
}
onShareAppMessage: function () {
return {
title: "頁面的主標題",
desc: "頁面的描述",
path: "/pages/index/index?id=123"
}
}
事件處理函式
(1)除了初始化資料和生命週期函式，我們還可以自定義事件處理函式，在元件中加入事件繫結，當達到觸發事件就會執行Page中定義的事件處理函式.
示例程式碼:
在邏輯層(js)
Page({
clickme:function(){
console.log("Hello world!")
}
})
this.setData()
setData 函式用於將資料從邏輯層傳送到檢視層(非同步)，同時改變對應的this.data的值(同步)
setData()引數格式
data
型別object 必填:是 描述需要改變的資料
callback 型別function 必填:否 描述回撥函式
object以key,value的形式表示將this.data中的key對應的值變成value！callback是一個回撥函式，在這次setData對介面渲染完畢後使用。
其中key可以非常靈活，以資料路徑的形式給出。如arr[2].message,a.b.c.d並且不需要再this.data中預先定義.
注意:
直接修改this.data而不呼叫this.setData 是無法改變頁面的狀態的。還會造成資料不一致。
單次設定的資料不能超過1024KB，避免一次設定過多的資料.
示例程式碼:
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
在index.js檔案裡面
Page({
data: {
text: "init data",
num: 0,
array: [{text: "init data"}],
object: {
text: "init data"
}
},
changeText: function() {
// this.data.text = "changed data" // bad, it can not work
this.setData({
text: "changed data"
})
},
changeNum: function() {
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({
"array[0].text":"changed data"
})
},
changeItemInObject: function(){
this.setData({
"object.text": "changed data"
});
},
addNewField: function() {
this.setData({
"newField.text": "new data"
})
}
})
頁面路由
在小程式中所有的頁面的路由全部由框架進行管理
getCurrentPages()
getCurrentPages()函式用於獲取到當前頁面棧的例項，以陣列形式按棧的順序給出，第一個元素為首頁，最後一個元素為當前頁。
重要的事情說三遍。千萬不要修改頁面棧。千萬不要修改頁面棧。千萬不要修改頁面棧。
路由方式
開啟新頁面:
呼叫API wx.navigateTo
或者元件<navigator open-type="navigateTo">
頁面重定向
呼叫API wx.redirecTo
或者使用元件<navigator open-type="redirectTo">
頁面返回
呼叫API wx.navigateBack
或者使用元件<navigator open-type="navigateBack">
Tab切換
呼叫API wx.switchTab
或者使用元件<navigator open-type="switchTab">
重啟動
呼叫API wx.reLaunch
或者使用元件<navigator open-type="reLaunch">
這幾種路由跳轉方式。對於前頁面來說:
wx.navigateTo 對應的 onHide
wx.redirecTo 對應的 onUnload
wx.navigateBack 對應的onUnload
特別注意
navigateTo,redirectTo只能開啟不是底部導航指定的頁面
SwitchTab 只能開啟tabBar頁面
reLaunch 可以開啟任意頁面
頁面底部的tabBar由頁面決定，即只要是定義了tabbar的頁面，底部就有tabBar
呼叫頁面路由帶的引數可以在目標頁面的onLoad中獲取。