【0基礎學習微信小程式】4.模組化與page函式
本文為菜鳥窩編輯吳佳林的連載。
在 微信小程式入門(三)中,我們主要學習了開發者工具介紹以及專案的結構,本篇文章就主要介紹微信小程式的模組化以及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.編譯後就可以在除錯介面看到輸出的文字了。
好了,經過上面幾步,我們的模組化開發就完成了。
二. 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選項中開啟enablePullDownRefreshonReachBottom
: 頁面上拉觸底事件的處理函式,需要在config的window選項中開啟enablePullDownRefreshonShareAppMessage
: 使用者點選右上角分享 -
自定義
可以新增任意的函式或資料到 object 引數中,在頁面的函式中用 this 可以訪問
關於data,這裡要說個兩個點
-
如何在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
相關文章
- 【重溫基礎】4.函式函式
- Python基礎之 4. 函式Python函式
- 微信小程式-模組化和模版化微信小程式
- 【學習】SQL基礎-004-函式SQL函式
- Python基礎學習3:函式Python函式
- Erlang學習筆記(四)模組與函式筆記函式
- 微信小程式學習微信小程式
- 微信小程式函式呼叫監控微信小程式函式
- 微信小程式Renard學習微信小程式
- 微信小程式模組化開發實踐微信小程式
- 『與善仁』Appium基礎 — 30、操作微信小程式APP微信小程式
- 微信小程式基礎功能解析微信小程式
- 前端進階 -- 微信小程式基礎前端微信小程式
- 微信小程式-基礎內容元件微信小程式元件
- 零基礎學習 Python 之函式Python函式
- 前端學習之PHP基礎函式總結前端PHP函式
- 用函式實現模組化程式設計習題函式程式設計
- go 學習筆記之學習函數語言程式設計前不要忘了函式基礎Go筆記函數程式設計函式
- 微信小程式零基礎入門:什麼是微信小程式微信小程式
- 微信小程式開發教程(基礎篇)4-關於回撥函式,匿名函式,閉包的雜談微信小程式函式
- 模擬微信小程式頁面Page方法微信小程式
- 微信小程式學習筆記微信小程式筆記
- 微信小程式學習網站微信小程式學習網站
- 微信小程式開發基礎(一)「配置」與「邏輯層」微信小程式
- python基礎學習16—-模組Python
- 好程式設計師web前端學習路線分享函式基礎程式設計師Web前端函式
- 0基礎學怎麼學習python?Python
- 安利這套《微信小程式設計基礎與實戰教程》微信小程式程式設計
- 微信小程式學習:雲開發微信小程式
- NumPy 基礎 (三) - 數學函式函式
- 0基礎lua學習(十四)封裝封裝
- PHP 中的匿名函式和閉包基礎學習PHP函式
- 小程式開發之基礎知識(0)
- 微信小程式功能-----基礎輪播圖配置微信小程式
- 微信小程式 BLE 基礎業務介面封裝微信小程式封裝
- 微信小程式零基礎入門:小程式的前景如何?微信小程式
- 微信小程式零基礎入門:在哪裡找到小程式微信小程式
- 0基礎能否學會Python?如何學習?Python