溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“MINA框架的視圖層和邏輯層實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“MINA框架的視圖層和邏輯層實例分析”吧!
1. 開篇導言
目標用戶：無編程經驗，但對微信小程序感興趣的同學。
學習目標：了解MINA框架的視圖層(View)，邏輯層(App Service)，及其之間的交互。
案例分析：helloworld小程序。
2. 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>
到此，相信大家對“MINA框架的視圖層和邏輯層實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
