微信小程式-06-詳解介紹.js 邏輯層檔案-註冊頁面

摘要： 上一篇介紹的是 app.js 邏輯層檔案中註冊程式，對應的每個分頁面都會有的 js 檔案中 page() 函式註冊頁面 微信小程式-06-詳解介紹.js 邏輯層檔案-註冊頁面 寶典官方文件： https://developers.weixin.qq....

上一篇介紹的是 app.js 邏輯層檔案中註冊程式，對應的每個分頁面都會有的 js 檔案中 page() 函式註冊頁面

微信小程式-06-詳解介紹.js 邏輯層檔案-註冊頁面

• 寶典官方文件：
  https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
• 今天開始深度學習程式設計語法，雖然大部分是拷貝官方文件，程式碼類都是我自己敲的，希望能自己敲一遍表格裡的內容，熟悉一下操作

頁面 Page

• Page(Object)
• Page(Object) 函式用來註冊一個頁面。接受一個 Object 型別引數，其指定的初始資料、宣告週期回撥、時間處理函式等
• Object 引數說明：

屬性	型別	描述
Object	頁面的初始資料
Function	生命週期回撥—監聽頁面載入
Function	生命週期回撥—監聽頁面顯示
Function	生命週期回撥—監聽頁面初次渲染完成
Function	生命週期回撥—監聽頁面隱藏
Function	生命週期回撥—監聽頁面解除安裝
Function	監聽使用者下拉動作
Function	頁面上拉觸底事件的處理函式
Function	使用者點選右上角轉發
Function	頁面滾動觸發事件的處理函式
Function	當前是 tab 頁時，點選 tab 時觸發
其他	Any	開發者可以新增任意的函式或資料到Object 引數中，在頁面的函式中用this 可以訪問

• Object 內容在頁面載入時會進行一次深拷貝，需考慮資料大小對頁面載入的開銷
• 示例：

//和 app 一樣，輸入 page 根據提示回車，會自動生成預製的函式
Page({

/**
* 頁面的初始資料
*/
data: {
text: "這裡寫頁面資料"
},

/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {

},

/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {

},

/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {

},

/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {

},

/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {

},

/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {

},

/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {

},

/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {

},

/**
* 當頁面滾動的時候執行
*/
onPageScroll: function() {

},

onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
/**
* 事件處理
*/
viewTap: function() {
this.setData({
text: '為更新檢視設定一些資料'
), function() {
// 這裡是設定資料回撥
}
},

customData: {
hi: 'MINA'
}
})

data

• data 是頁面第一次渲染使用的初試資料

• 頁面載入時，data 將會以 json 字串的形式由邏輯層傳至渲染層，因此 data 中的資料必須是可以轉成 json 的型別：字串，數字，布林值，物件，陣列
• 渲染層可以通過 WXML（後續會詳細說明） 對資料進行繫結
• 示例程式碼：

// wxml 檔案
 <view>{{text}}</view>
 <view>{{array[0].msg}}</view>

//js 檔案
Page({
data: {
text: 'int data',
array:[{msg: '1'}, {msg: '2'}]
}
})

生命週期回撥函式

• 生命週期的觸發以及頁面的路由方式詳見

• onLoad(Object query)
• 頁面載入時觸發，一個頁面只會呼叫一次，可以在 onLoad 的引數中獲取開啟當前頁面路徑中的引數

• 引數說明：

名稱	型別	說明
query	Object	開啟當前頁面的路徑中的引數

onShow()

• 頁面顯示、切入前臺時觸發

onReady()

• 頁面初次渲染完成觸發。一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動
• 【注意】：對介面內容進行設定的 API 如 wx.setNavigationBarTitle，請在 onReady 之後進行。詳見生命週期（本篇後面介紹）

onHide()

• 頁面隱藏、切入後臺時觸發。如 navigationTo 或底部 tab 切換到其他壓面，小程式切入後臺等

onUnload()

• 頁面解除安裝時觸發。如 redirectTo 或 navigateBack 到其他頁面時

頁面處理函式

onPullDownRefresh()

• 監聽使用者下拉重新整理事件
  • 需要在 app.json 的 window 選項中或頁面配置中開啟 enablePullDownRefresh
  • 可以通過 wx.startPullDownRefresh 觸發下拉重新整理，呼叫後觸發下拉重新整理動畫，效果與使用者手動下拉重新整理一致
  • 當處理完資料重新整理後，wx.stopPullDownRefresh 可以停止當前頁面的下拉重新整理

onReachBottom()

• 監聽使用者上拉觸底事件
  • 可以在 app.josn 的 window 選項中或頁面配置中設定觸發距離 onReachBottomDistance
  • 在觸發距離內滑動期間，本事件只會被觸發一次

onPageScroll(Object)

• 監聽使用者滑動頁面事件

• Object 引數說明：

屬性	型別	說明
scrollTop	Number	頁面在垂直方向已滾動的距離（單位px）

onShareAppMessage(Object)

• 監聽使用者點選頁面內轉發按鈕（button 元件 open-type="share"）或右上角選單 “轉發” 按鈕的行為，性自定義轉發內容
• 【注意】：只有定義了此事件處理函式，右上角選單才會顯示 “轉發” 按鈕
• Object 引數說明：

引數	型別	說明	最低版本
from	String	轉發事件來源。 button ：頁面內轉發按鈕； menu ：右上角轉發選單	1.2.4
target	Object	如果from 值是button ，則target 是觸發這次轉發事件的button ，否則為undefined	1.2.4
webViewUrl	String	頁面中包含<web-view> 元件時，返回當前<web-view> 的url	1.6.4

• 此事件需要 return 一個 Object，用於自定義轉發內容，返回內容如下：
• 自定義轉發內容

欄位	說明	預設值	最低版本
title	轉發標題	當前小程式名稱
path	轉發路徑	當前頁面 path ，必須是以 / 開頭的完整路徑
imageUrl	自定義圖片路徑，可以是本地檔案路徑、程式碼包檔案路徑或者網路圖片路徑。支援PNG及JPG。顯示圖片長寬比是 5:4。	使用預設截圖	1.5.0

• 示例程式碼：

Page({
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 來自頁面內轉發按鈕
console.log(res.target)
}
return {
title: '自定義轉發標題',
path: '/page/user?id=123'
}
}
})

onTabItemTap(Object)

• 基礎庫 1.9.0 開始支援，低版本需做相容處理
• 點選 tab 時觸發
• Object 引數說明：

引數	型別	說明	最低版本
index	String	被點選tabItem的序號，從0開始	1.9.0
pagePath	String	被點選tabItem的頁面路徑	1.9.0
text	String	被點選tabItem的按鈕文字	1.9.0

• 示例程式碼

Page({
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})

元件事件處理函式

• Page 中還可以定義元件事件處理函式。在渲染層的元件中加入事件繫結，當事件被觸發時，就會執行 Page 中定義的事件處理函式
• 示例程式碼：

<view bindtap="viewTap"> click me </view>

Page({
viewTap: function() {
console.log('view tap')
}
})

Page.route

• 基礎庫 1.2.0 開始支援，低版本需做相容處理
• 到當前頁面的路徑，型別為String

Page({
onShow: function() {
console.log(this.route)
}
})

Page.prototype.setData(Object data, Function callback)

• setData 函式用於將資料從邏輯層傳送到檢視層（非同步），同時改變對應的 this.data 的值（同步）

• 引數說明：

欄位	型別	必填	描述	最低版本
data	Object	是	這次要改變的資料
callback	Function	否	setData引起的介面更新渲染完畢後的回撥函式	1.5.0

• Object 以 key: value 的形式表示，將 this.data 中的 key 對應的值改變成 value
• 其中其中 key 可以以資料路徑的形式給出，支援改變陣列中的某一項或物件的某個屬性

• 如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義

• 【注意】：
  • 1.直接修改 this.data 而不呼叫 this.setData 是無法改變頁面的狀態的，還會造成資料不一致
  • 2.僅支援設定可 JSON 化的資料
  • 3.單次設定的資料不能超過1024kB，請儘量避免一次設定過多的資料
  • 4.請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設定並可能遺留一些潛在問題
• 示例程式碼：

<!--index.wxml-->
<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'
})
}
})

生命週期

以下內容你不需要立馬完全弄明白，不過以後它會有幫助

• 下圖說明了 Page 例項的生命週期
• 

更多文章連結：微信小程式