【helloworld】-微信小程序開發教程-入門篇【4】
1. 開篇導言
- 本節目標：通過上一節的講解，相信大家對小程序框架MINA的目錄結構和配置有了一定的了解。接下來將會講解視圖層，邏輯層及其之間的交互。
- 目標用戶：無編程經驗，但對微信小程序感興趣的同學。
- 學習目標：了解MINA框架的視圖層(View)，邏輯層(App Service)，及其之間的交互。
- 案例分析：helloworld小程序。
- 代碼下載
- 傳送門：
目錄：微信小程序教程-開篇導言-很快微信小程序社區
上一篇：【helloworld】-微信小程序教程-入門篇【3】
下一篇：未開啟。
- 備註：有編程經驗或看過微信官網簡易教程的同學，請酌情略過該章節。
2. MINA結構基礎
從某種程度來來講，我們可以把MINA的結構簡化如下圖：
view模塊：負責UI顯示。它由開發者編寫的wxml，wxss及微信提供的相關組件來組成。
service模塊：負責應用的後臺邏輯，它由小程序的 js 代碼以及微信提供的相關輔助模塊組成。
其中view模塊由view thread進行驅動，service模塊則由AppService Thread進行驅動。我們說view模塊和service模塊之間的交互，其實指的是線程間的交互。
一個小程序只有一個 service 進程，它在程序生命周期內後臺運行。當小程序進入後臺一定時間，或者系統資源占用過高，才會被真正的銷毀。
3. 案例展示
上圖為該項目的兩個頁面。左面：主頁面。右面：logs頁面。
下面將分為三部分對helloworld進行講解：啟動流程，主頁面，logs頁面。
4. 啟動流程
- 邏輯入口：app.js
app.js的代碼如下：
//app.js
//1. App()函數用來註冊一個小程序。接受一個object參數，其指定小程序的生命周期函數等。
App({
//2. 生命周期函數--監聽小程序初始化,當小程序初始化完成時，會觸發onLaunch（全局只觸發一次）
onLaunch: function () {
//調用API從本地緩存中獲取數據
var logs = wx.getStorageSync(‘logs‘) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs‘, logs)
},
//3. 成員方法：獲取用戶數據。
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//調用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
//4. 全局數據
globalData:{
userInfo:null
}
})
//註意：App()必須在app.js中註冊，且不能註冊多個。
// 不要在定義於App()內的函數中調用getApp()，使用this就可以拿到app實例。
// 不要在onLaunch的時候調用getCurrentPage()，此時page還沒有生成。
上面的代碼文件說明了app.js文件的用處：註冊App()。這裏面包含兩部分。
其一：生命周期函數的定義(onLaunch/onShow/onHide)。
其二：自定義函數，通常用於操作全局數據或微信提供的用戶等業務邏輯數據。
全局數據。
- 啟動後的主頁面：app.json
啟動後的主頁面，根據app.json中【pages】中的部分來決定。準備的來說，誰在上面則主頁面是誰。在該項目中，代碼如下：
"pages":[
"pages/index/index",
"pages/logs/logs"
],
如果我們把index和logs更換位置，則主頁面則由上圖中的左圖更換為右圖。代碼如下：
"pages":[
"pages/logs/logs",
"pages/index/index"
],
5. 主頁面
上圖描述了啟動後，進入主頁面，小程序的調用流程。
- 文件層
找尋在路徑【"pages/index/index"】中，後綴為.json,.js,.wxml,.wxss的文件，並進行整合。
- 代碼層
對於路由後的主頁面，調用onLoad，onShow。該項目中代目如下：
//index.js
//1. 獲取應用實例
var app = getApp()
//2. Page() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。
Page({
//3. 頁面的初始數據
data: {
motto: ‘Hello World‘,
userInfo: {}
},
//4. 事件處理函數,當用戶點擊該組件的時候，調用該事件處理函數。跳轉到logs頁面。
bindViewTap: function() {
wx.navigateTo({
url: ‘../logs/logs‘
})
},
//5. 頁面加載,一個頁面只會調用一次.
onLoad: function () {
console.log(‘onLoad‘)
var that = this
//調用應用實例的方法獲取全局數據
app.getUserInfo(function(userInfo){
//更新數據
that.setData({
userInfo:userInfo
})
})
}
})
視圖層和邏輯層的交互是通過事件機制來實現的，上面代碼【4】所示為邏輯層的處理邏輯。事件代碼在視圖層如下所示：
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
如上所示，從coding層面上講，事件機制由兩部分組成。其一在page相關的wxml文件中。其二在.js文件中，定義相應的處理函數，並通過函數名進行關聯識別。
6. logs頁面
- logs頁面分析
logs.js代碼如下：
//logs.js
//1. 加載模塊
var util = require(‘../../utils/util.js‘)
Page({
//2. Page() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。
data: {
logs: []
},
//3. 頁面加載,一個頁面只會調用一次.
onLoad: function () {
this.setData({
logs: (wx.getStorageSync(‘logs‘) || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
logs.wxml如下：
<!--logs.wxml-->
<view class="container log-list">
<!-- wx:for 在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。-->
<!-- block wx:for 渲染一個包含多節點的結構塊。-->
<!-- 用 wx:for-item 可以指定數組當前元素的變量名。-->
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
- 主頁面和logs頁面之間的跳轉
7. 小結
知識點：了解MINA框架的視圖層(View)，邏輯層(App Service)，及其之間的交互。
了解事件的基本使用方式。
了解界面之間的跳轉方式及棧空間。
8. 預告
了解並使用微信開發工具的調試功能。
【helloworld】-微信小程序開發教程-入門篇【4】