微信小程序教程入門篇【4】,MINA框架的視圖層邏輯層

2017-12-20

導讀：本帖最后由狂兔科技于 2016-11-1 18:14 編輯 1. 開篇導言本節目標：通過上一節的講解，相信大家對小程序框架MINA的目錄結構和配置有了一定的了解。接下來將會講解視圖層，邏輯層及...

1. 開篇導言

本節目標：通過上一節的講解，相信大家對小程序框架MINA的目錄結構和配置有了一定的了解。接下來將會講解視圖層，邏輯層及其之間的交互。
目標用戶：無編程經驗，但對微信小程序感興趣的同學。
學習目標：了解MINA框架的視圖層(View)，邏輯層(App Service)，及其之間的交互。
案例分析：helloworld小程序。
代碼下載
傳送門：

備注：有編程經驗或看過微信官網簡易教程的同學，請酌情略過該章節。

2. MINA結構基礎
從某種程度來來講，我們可以把MINA的結構簡化如下圖：
微信小程序教程入門篇【4】,MINA框架的視圖層邏輯層

view模塊：負責UI顯示。它由開發者編寫的wxml，wxss及微信提供的相關組件來組成。
service模塊：負責應用的后臺邏輯，它由小程序的 js 代碼以及微信提供的相關輔助模塊組成。
其中view模塊由view thread進行驅動，service模塊則由AppService Thread進行驅動。我們說view模塊和service模塊之間的交互，其實指的是線程間的交互。
一個小程序只有一個 service 進程，它在程序生命周期內后臺運行。當小程序進入后臺一定時間，或者系統資源占用過高，才會被真正的銷毀。

3. 案例展示
微信小程序教程入門篇【4】,MINA框架的視圖層邏輯層

上圖為該項目的兩個頁面。左面：主頁面。右面：logs頁面。
下面將分為三部分對helloworld進行講解：啟動流程，主頁面，logs頁面。

4. 啟動流程
微信小程序教程入門篇【4】,MINA框架的視圖層邏輯層

邏輯入口：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. 主頁面
微信小程序教程入門篇【4】,MINA框架的視圖層邏輯層

上圖描述了啟動后，進入主頁面，小程序的調用流程。

文件層

找尋在路徑【"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如下：

<view class="container log-list">
<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. 預告

了解并使用微信開發工具的調試功能。

第二部分：如何開通一個小商店

您可能感興趣: 微信小程序入門與實戰微信小程序從入門到精通

上一篇：微信小程序教程入門篇【3】,MINA框架的目錄結構和配置 下一篇：微信小程序教程入門篇【5】,微信開發工具的調試功能

一级片大奶子_色又黄又爽18禁免费视频_热久久久久久久_久久久精品一区二区_日韩av不卡在线播放_精品国内自产拍在线观看视频

微信小程序教程入門篇【4】,MINA框架的視圖層邏輯層