微信小程序運行流程圖詳解看這篇就夠了
一.微信小程序是啥
本質(zhì)其實就是(混合)的app 介于web app與native 原生app之間,具備豐富的調(diào)用手機各種功能的接口,同時又具備靈活性,跨平臺
1. 運行環(huán)境差異
微信小程序運行在三端:iOS、Android 和 用于調(diào)試的開發(fā)者工具。
三端的腳本執(zhí)行環(huán)境以及用于渲染非原生組件的環(huán)境是各不相同的:
- 在 iOS 上,小程序的 javascript 代碼是運行在 JavaScriptCore 中,是由 WKWebView 來渲染的,環(huán)境有 iOS8、iOS9、iOS10
- 在 Android 上,小程序的 javascript 代碼是通過 X5 JSCore來解析,是由 X5 基于 Mobile Chrome 53/57 內(nèi)核來渲染的
- 在 開發(fā)工具上, 小程序的 javascript 代碼是運行在 nwjs 中,是由 Chrome Webview 來渲染的來自官方文檔說明
2.小程序目錄結(jié)
project ├── pages | ├── index | | ├── index.json index 頁面配置 | | ├── index.js index 頁面邏輯 | | ├── index.wxml index 頁面結(jié)構(gòu) | | └── index.wxss index 頁面樣式表 | └── log | ├── log.json log 頁面配置 | ├── log.wxml log 頁面邏輯 | ├── log.js log 頁面結(jié)構(gòu) | └── log.wxss log 頁面樣式表 ├── app.js 小程序邏輯 ├── app.json 小程序公共設(shè)置 └── app.wxss 小程序公共樣式表
二、小程序架構(gòu)
微信小程序的框架包含兩部分View視圖層(可能存在多個)、App Service邏輯層(一個),View層用來渲染頁面結(jié)構(gòu),AppService層用來邏輯處理、數(shù)據(jù)請求、接口調(diào)用,它們在兩個線程里運行。
視圖層使用WebView渲染,邏輯層使用JSCore運行。
視圖層和邏輯層通過系統(tǒng)層的WeixinJsBridage進(jìn)行通信,邏輯層把數(shù)據(jù)變化通知到視圖層,觸發(fā)視圖層頁面更新,視圖層把觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理。
重點講一下wxs :
由于view 與 App Service是不同線程,之前是傳遞數(shù)據(jù),當(dāng)遇到一些數(shù)據(jù)需要在view中處理時,就可以用wxs來處理,如下所示定義 <wxs module="tools">,使用說明
index.js
//獲取應(yīng)用實例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false }, //事件處理函數(shù) bindViewTap: function() { }, onLoad: function() { } })
<!--index.wxml--> <view class="container"> <view class="usermotto"> <text class="user-motto">{{tools.bar(motto)}}</text> <text class="user-motto">{{tools.foo}}</text> </view> <wxs module="tools"> var foo = "'hello world' from comm.wxs"; var bar = function(d) { return '啥子玩意'+d; } module.exports = { foo: foo, bar: bar }; </wxs> </view>
三、小程序啟動加載
第二部分:如何開通一個小商店