微信小程序使用的框架：邏輯層和視圖層
微信小程序使用的框架已經(jīng)是當(dāng)下最熱門(mén)的話題，下面將從多方面來(lái)談?wù)勎⑿判〕绦蚴褂玫目蚣芟嚓P(guān)的內(nèi)容。
小程序的邏輯層由js完成，視圖層由微信提供的WXML(WeiXin Mark Language)和WXSS(WeiXin Style Sheet)文件來(lái)完成。
其中官方給出的解釋：頁(yè)面的腳本邏輯是在JsCore中運(yùn)行，JsCore是一個(gè)沒(méi)有窗口對(duì)象的環(huán)境，所以不能在腳本中使用window，也無(wú)法在腳本中操作組件。同時(shí)由于zepto/jQuery 會(huì)使用到window對(duì)象和document對(duì)象，所以在小程序中均無(wú)法使用。
邏輯層
邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。 在 JavaScript 的基礎(chǔ)上，微信增加和修改了以下特性：
-
增加 App 和 Page 方法，進(jìn)行程序和頁(yè)面的注冊(cè)。
-
增加 getApp 和 getCurrentPages 方法，分別用來(lái)獲取 App 實(shí)例和當(dāng)前頁(yè)面棧。
-
提供豐富的 API，如微信用戶數(shù)據(jù)，掃一掃，支付等微信特有能力。
-
每個(gè)頁(yè)面有獨(dú)立的作用域，并提供模塊化能力。
-
由于框架并非運(yùn)行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無(wú)法使用，如 document，window 等。
-
開(kāi)發(fā)者寫(xiě)的所有代碼最終將會(huì)打包成一份 JavaScript，并在小程序啟動(dòng)的時(shí)候運(yùn)行，直到小程序銷毀。類似 ServiceWorker，所以邏輯層也稱之為 App Service。
注冊(cè)程序
quikstart示例中App.js文件內(nèi)容如下：
//app.js
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//調(diào)用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
App()函數(shù)
App() 函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。
其中onLaunch為系統(tǒng)的生命周期函數(shù)，getUserInfo和globalData分別為用戶自定義函數(shù)和數(shù)據(jù)結(jié)構(gòu)對(duì)象。
App() 函數(shù)的object參數(shù)說(shuō)明：
屬性
類型
描述
觸發(fā)時(shí)機(jī)
onLaunchFunction生命周期函數(shù)–監(jiān)聽(tīng)小程序初始化當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch(全局只觸發(fā)一次)
onShowFunction生命周期函數(shù)–監(jiān)聽(tīng)小程序顯示當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow
onHideFunction生命周期函數(shù)–監(jiān)聽(tīng)小程序隱藏當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide
其他Any開(kāi)發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用 this 可以訪問(wèn)
getApp()函數(shù)
我們提供了全局的 getApp() 函數(shù)，可以獲取到小程序?qū)嵗?/span>
示例代碼：
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注冊(cè)頁(yè)面
index頁(yè)面中index.js代碼如下：
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)
that.setData({
userInfo:userInfo
})
})
}
})
Page()函數(shù)
Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
object 參數(shù)說(shuō)明：
屬性
類型
描述
dataObject頁(yè)面的初始數(shù)據(jù)
onLoadFunction生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面加載
onReadyFunction生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面初次渲染完成
onShowFunction生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面顯示
onHideFunction生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面隱藏
onUnloadFunction生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面卸載
onPullDownRefreshFunction頁(yè)面相關(guān)事件處理函數(shù)–監(jiān)聽(tīng)用戶下拉動(dòng)作
onReachBottomFunction頁(yè)面上拉觸底事件的處理函數(shù)
其他Any開(kāi)發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，在頁(yè)面的函數(shù)
Page還提供了setData() 和getCurrentPages()函數(shù)。
setData()函數(shù)：
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時(shí)改變對(duì)應(yīng)的 this.data 的值。
注意：
-
直接修改 this.data 無(wú)效，無(wú)法改變頁(yè)面的狀態(tài)，還會(huì)造成數(shù)據(jù)不一致。
-
單次設(shè)置的數(shù)據(jù)不能超過(guò)1024kB，請(qǐng)盡量避免一次設(shè)置過(guò)多的數(shù)據(jù)。
getCurrentPages()函數(shù)：
getCurrentPages() 函數(shù)用于獲取當(dāng)前頁(yè)面棧的實(shí)例，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁(yè)，最后一個(gè)元素為當(dāng)前頁(yè)面。
注意：不要嘗試修改頁(yè)面棧，會(huì)導(dǎo)致路由以及頁(yè)面狀態(tài)錯(cuò)誤。
API
微信提供了諸多JavaScript形式的微信原生 API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲(chǔ)，支付功能等。
API將在專門(mén)的章節(jié)介紹。
視圖層WXML
WXML(WeiXin Markup Language)是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。
用以下一些簡(jiǎn)單的例子來(lái)看看 WXML 具有什么能力：
數(shù)據(jù)綁定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
條件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'MINA'
}
})
模板
<!--wxml-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
事件
<view bindtap="add"> {{count}} </view>
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})
-
微信小程序商城系統(tǒng)開(kāi)發(fā)其實(shí)很簡(jiǎn)單
微信小程序商城系統(tǒng)開(kāi)發(fā)其實(shí)很簡(jiǎn)單，只需要五步就可以完成，整個(gè)過(guò)程包括開(kāi)發(fā)、上線、發(fā)布都可以輕松搞定...詳情
第二部分：如何開(kāi)通一個(gè)小商店
- 關(guān)注官方公眾號(hào) -
咨詢電話：4006-089-731