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

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

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

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

頁面 Page

• Page(Object)
• Page(Object) 函數用來註冊一個頁面。接受一個 Object 類型參數，其指定的初始數據、聲明周期回調、時間處理函數等
• Object 參數說明：

• 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 的參數中獲取打開當前頁面路徑中的參數

• 參數說明：

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 參數說明：

onShareAppMessage(Object)

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

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

• 示例代碼：

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 參數說明：

• 示例代碼

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 的值（同步）

• 參數說明：

• 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 實例的生命周期
• 

更多文章鏈接：微信小程式