微信小程序筆記<四>page.js —— 頁面注冊

小程序的每個頁面都是獨立的，每個頁面都必須有 page.js 和 page.wxhl 文件，page.json 和 page.wxss 文件非必要文件，注意如果創建 page.json 則至少保證有一個對大括號，否則IED報錯。

page.js 管理該頁面的邏輯事件。每個頁面必須聲明 Page() 方法。

Page() 用來注冊頁面，其包含一下屬性：

data 用於初始化數據；data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其數據必須是可以轉成 JSON 的格式：字符串，數字，布爾值，對象，數組；這里的 data 充當model的角色。

注：Page() 中 若不聲明 onShareAppMessage() 該頁面則不可分享，只有聲明 onShareAppMessage() 該頁面才有 分享/轉發 功能（就算onShareAppMessage()中什么都不寫都可以）

Page() 未聲明 onShareAppMessage() 案例

Page() 聲明 onShareAppMessage() 案例

// index/index.js
Page({
  data: {
    "user_name":"mirage",
    "user_skill":["javascript","jquery","angularjs","nodejs"]
  },
  onLoad: function (options) {},
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {}
})

// -----------------------------------

<!-- index/index.wxml -->
<view class="box">
  <text class="title">Hello World!</text>
</view>
<view class="userName">
  user name : <text>{{user_name}}</text>
</view>
<view>
  user skill : 
  <text class="item">{{user_skill[0]}}</text> / 
  <text class="item">{{user_skill[1]}}</text> / 
  <text class="item">{{user_skill[2]}}</text> / 
  <text class="item">{{user_skill[3]}}</text> / 
</view>

生命周期函數

• onLoad: 頁面加載

　　　　一個頁面只會調用一次，可以在 onLoad 中獲取打開當前頁面所調用的 query 參數。

• onShow: 頁面顯示

　　　　每次打開頁面都會調用一次。

• onReady: 頁面初次渲染完成

　　　　一個頁面只會調用一次，代表頁面已經准備妥當，可以和視圖層進行交互。

　　　　對界面的設置，如wx.setNavigationBarTitle請在onReady之后設置。

• onHide: 頁面隱藏

　　　　當navigateTo或底部tab切換時調用。

• onUnload: 頁面卸載

　　　　當redirectTo或navigateBack的時候調用。

onLoad() 參數

// index/index.js    ==============================
Page({
  data: {
    "user_name":"mirage",
    "user_skill":["javascript","jquery","angularjs","nodejs"]
  },
  onLoad: function (req) {
    console.log(req);
  },
  toas:function(){
    wx.navigateTo({
      url: "../info/info?name=" + this.data.user_name + "&skill="
      + this.data.user_skill
    })
  }
})

// info/info.js    ==============================
Page({
  data: {},
  onLoad: function (req) {
    this.setData({
      name:req.name,
      skill:req.skill.split(',')
    });
  }
})

onLoad 的參數作為接受傳遞參數的對象。

頁面相關事件處理函數

• onPullDownRefresh: 下拉刷新

1. 監聽用戶下拉刷新事件。
2. 需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。
3. 當處理完數據刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。

• onReachBottom: 上拉觸底

1. 監聽用戶上拉觸底事件。
2. 可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。
3. 在觸發距離內滑動期間，本事件只會被觸發一次。

• onPageScroll: 頁面滾動

1. 監聽用戶滑動頁面事件。
2. 該函數有參數獲取頁面在垂直方向已滾動的距離（單位px）。

• onShareAppMessage: 用戶轉發

1. 只有定義了此事件處理函數，右上角菜單才會顯示“轉發”按鈕
2. 用戶點擊轉發按鈕的時候會調用
3. 此事件需要 return 一個 Object，用於自定義轉發內容

Page({
  onShareAppMessage: function () {
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123'
    }
  }
})

Page.prototype.route（原型鏈字段）

route 字段可以獲取到當前頁面的路徑。（ 注：基礎庫 1.2.0 開始支持，低版本需做兼容處理 ）

Page.prototype.setData() 

setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

Page({
  data: {},
  onLoad: function (req) {
    // 通過 setData 獲取異步加載參數
    this.setData({
      name:req.name,
      skill:req.skill.split(',')
    });
  }
})

onLoad() 案例中有提到

setData() 參數格式

object 以 key，value 的形式表示將 this.data 中的 key 對應的值改變成 value。 callback 是一個回調函數，在這次setData對界面渲染完畢后調用。

其中 key 可以非常靈活，以數據路徑的形式給出，如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。

注意：

1. 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。

2. 單次設置的數據不能超過1024kB，請盡量避免一次設置過多的數據。

3. 請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設置並可能遺留一些潛在問題。

 

view層調用事件

view（視圖） 層中使用 bindtap 屬性調用 logic（邏輯） 中定義的事件。

Page({
  onLoad: function () {},
  onShow:function(){
    console.log(this.route);
  },
  // 點擊彈出提示卡
  click_1:function(){
    wx.showToast({
      title: '成功',
      icon:'success',
      duration:3000
    })
  },
  // 點擊輸出提示
  click_2:function(){
    console.log("你點擊了 “提示消息” 按鈕");
  },
  // 頁面跳轉
  goto:function(){
    wx.navigateTo({
      url: "../info/info?name=" + this.data.user_name + "&skill="
      + this.data.user_skill
    })
  }
})

 

最后附上一張官方的page生命周期圖解。