【0基礎學習微信小程式】4.模組化與page函式

weixin_34208283發表於2017-04-02
微信小程式函式

本文為菜鳥窩編輯吳佳林的連載。

在 微信小程式入門（三）中，我們主要學習了開發者工具介紹以及專案的結構，本篇文章就主要介紹微信小程式的模組化以及page函式。

一. 模組化

如果學過Android的，應該對模組不陌生，我們通常會把一些業務功能抽取成獨立的一個模組，然後根據業務模組進行分組開發。微信小程式也有模組化的概念，但是微信小程式的對模組化定義有些不同，官方文件對模組的定義是：

"我們可以將一些公共的程式碼抽離成為一個單獨的 js 檔案，作為一個模組。"

也就是將公共程式碼進行封裝起來，避免重複程式碼，可以重複呼叫。

微信小程式的模組化機制跟JavaScript的模組化機制非常相似，都是通過module.exports暴露物件，然後再通過通過require來獲取物件。下面來了解一下微信小程式的模組化開發。

1.定義一個在頁面定義個公共方法：比如在utils包建立一個common.js，然後在裡面定義方法

function printHello(){
    console.log("first printHello");
}

2.通過 module.exports 暴露模組介面

module.exports={
    printHello:printHello
};

3.在其它模組通過 require(path) 進行引用模組，然後呼叫方法

//引入comm.js檔案
var comm=require('../../utils/common.js')
    
//在onLoad方法進行呼叫
onLoad: function () {
    comm.printHello();
}

4.編譯後就可以在除錯介面看到輸出的文字了。

5205232-c2a9c653b29e6edb.png

好了，經過上面幾步，我們的模組化開發就完成了。

二. page函式

在每個js檔案裡面，都一個固定函式 page() ,這個函式主要作用是用來註冊一個頁面，接受一個 object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。示例如下：

Page({
     data:{
      
      },
      onLoad:function(options){
        // 頁面初始化 options為頁面跳轉所帶來的引數
      },
      onReady:function(){
        // 頁面渲染完成
      },
      onShow:function(){
        // 頁面顯示
      },
      onHide:function(){
            // 頁面隱藏
        },
          onUnload:function(){
            // 頁面關閉
         }
    })

  • 初始化資料：

    data :初始化頁面資料

  • 生命週期函式

    onLoad: 監聽頁面載入，一個頁面只會呼叫一次

    onReady: 監聽頁面初次渲染完成，一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動

    onShow: 監聽頁面顯示，每次開啟頁面都會呼叫一次

    onHide: 監聽頁面隱藏，頁面隱藏的時候呼叫

    onUnload: 監聽頁面解除安裝，頁面解除安裝的時候呼叫

  • 事件處理

    onPullDownRefresh: 監聽使用者下拉動作，需要在config的window選項中開啟enablePullDownRefresh

    onReachBottom: 頁面上拉觸底事件的處理函式，需要在config的window選項中開啟enablePullDownRefresh

    onShareAppMessage: 使用者點選右上角分享

  • 自定義

    可以新增任意的函式或資料到 object 引數中，在頁面的函式中用 this 可以訪問

關於data,這裡要說個兩個點

  1. 如何在wxml使用data裡面初始化的值。

    在js檔案的data引數定義相關 key-value 的值後，在wxml檔案加上 {{key}} 就可以使用data裡面的值了。

    示例程式碼：

    在js檔案以及在wxml定義：

Page({
     data: {
        text: 'init data',
        array: [{text: 'init data'}],
        object: {
        text: 'init data'
                }
        }......

        <view>{{text}}</view>
        <view>{{array[0].text}}</view>
        <view>{{object.text}}</view>
        
    ```
    
    
    


2. 如何在其他函式修改初始化data裡面的值

    在函式裡面使用setData() ，以 key，value 的形式表示將 this.data 中的 key 對應的值改變成 value。

    示例程式碼：

Page({
data: {
text: 'init data',
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
this.setData({
text: 'changed data'
})
}

    

###三.總結

看完這篇文章，模組化理解起來不是很難，至於page函式，是微信小程式中一個很關鍵的點，因為裡面涉及了初始化資料，生命週期等函式，特別是生命週期，我們在之後的文章也是會專門講生命週期這個點。


>更多內容，請關注菜鳥窩（微信公眾號ID: cniao5），程式猿的線上學習平臺。 轉載請註明出處，本文出自菜鳥窩，原文連結http://www.cniao5.com/forum/thread/3b9a922611e511e7b98900163e0230fa

相關文章