微信小程序使用的框架：邏輯層和視圖層
微信小程序使用的框架已經是當下最熱門的話題，下面將從多方面來談談微信小程序使用的框架相關的內容。
小程序的邏輯層由js完成，視圖層由微信提供的WXML(WeiXin Mark Language)和WXSS(WeiXin Style Sheet)文件來完成。
其中官方給出的解釋：頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的環境，所以不能在腳本中使用window，也無法在腳本中操作組件。同時由于zepto/jQuery 會使用到window對象和document對象，所以在小程序中均無法使用。
邏輯層
邏輯層將數據進行處理后發送給視圖層，同時接受視圖層的事件反饋。 在 JavaScript 的基礎上，微信增加和修改了以下特性：
-
增加 App 和 Page 方法，進行程序和頁面的注冊。
-
增加 getApp 和 getCurrentPages 方法，分別用來獲取 App 實例和當前頁面棧。
-
提供豐富的 API，如微信用戶數據，掃一掃，支付等微信特有能力。
-
每個頁面有獨立的作用域，并提供模塊化能力。
-
由于框架并非運行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
-
開發者寫的所有代碼最終將會打包成一份 JavaScript，并在小程序啟動的時候運行，直到小程序銷毀。類似 ServiceWorker，所以邏輯層也稱之為 App Service。
注冊程序
quikstart示例中App.js文件內容如下：
//app.js
App({
onLaunch: function () {
//調用API從本地緩存中獲取數據
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{
//調用登錄接口
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()函數
App() 函數用來注冊一個小程序。接受一個 object 參數，其指定小程序的生命周期函數等。
其中onLaunch為系統的生命周期函數，getUserInfo和globalData分別為用戶自定義函數和數據結構對象。
App() 函數的object參數說明：
屬性
類型
描述
觸發時機
onLaunchFunction生命周期函數–監聽小程序初始化當小程序初始化完成時，會觸發 onLaunch(全局只觸發一次)
onShowFunction生命周期函數–監聽小程序顯示當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow
onHideFunction生命周期函數–監聽小程序隱藏當小程序從前臺進入后臺，會觸發 onHide
其他Any開發者可以添加任意的函數或數據到 Object 參數中，用 this 可以訪問
getApp()函數
我們提供了全局的 getApp() 函數，可以獲取到小程序實例。
示例代碼：
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注冊頁面
index頁面中index.js代碼如下：
//index.js
//獲取應用實例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//調用應用實例的方法獲取全局數據
app.getUserInfo(function(userInfo){
//更新數據
that.setData({
userInfo:userInfo
})
})
}
})
Page()函數
Page() 函數用來注冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。
object 參數說明：
屬性
類型
描述
dataObject頁面的初始數據
onLoadFunction生命周期函數–監聽頁面加載
onReadyFunction生命周期函數–監聽頁面初次渲染完成
onShowFunction生命周期函數–監聽頁面顯示
onHideFunction生命周期函數–監聽頁面隱藏
onUnloadFunction生命周期函數–監聽頁面卸載
onPullDownRefreshFunction頁面相關事件處理函數–監聽用戶下拉動作
onReachBottomFunction頁面上拉觸底事件的處理函數
其他Any開發者可以添加任意的函數或數據到 object 參數中，在頁面的函數
Page還提供了setData() 和getCurrentPages()函數。
setData()函數：
setData 函數用于將數據從邏輯層發送到視圖層，同時改變對應的 this.data 的值。
注意：
-
直接修改 this.data 無效，無法改變頁面的狀態，還會造成數據不一致。
-
單次設置的數據不能超過1024kB，請盡量避免一次設置過多的數據。
getCurrentPages()函數：
getCurrentPages() 函數用于獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面。
注意：不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。
API
微信提供了諸多JavaScript形式的微信原生 API，可以方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。
API將在專門的章節介紹。
視圖層WXML
WXML(WeiXin Markup Language)是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。
用以下一些簡單的例子來看看 WXML 具有什么能力：
數據綁定
<!--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
})
}
})
-
微信小程序商城系統開發其實很簡單
微信小程序商城系統開發其實很簡單，只需要五步就可以完成，整個過程包括開發、上線、發布都可以輕松搞定...詳情
第二部分：如何開通一個小商店
立即掃碼關注
咨詢電話：4006-089-731