|
小程序的實(shí)現(xiàn)原理 根據(jù)微信官方的說明，微信小程序的運(yùn)行環(huán)境有 3 個(gè)平臺(tái)，iOS 的 WebKit（蘋果開源的瀏覽器內(nèi)核），Android 的 X5 (QQ 瀏覽器內(nèi)核)，開發(fā)時(shí)用的 nw.js（C++ 實(shí)現(xiàn)的 web 轉(zhuǎn)桌面應(yīng)用）。 平臺(tái) 渲染 js 運(yùn)行環(huán)境 iOS WKWebView JavaScriptCore Android X5 基于 Mobile Chrome 37 內(nèi)核 X5 JSCore 開發(fā)工具 Chrome WebView nw.js 小程序運(yùn)行時(shí)會(huì)創(chuàng)建兩個(gè)線程：View Thread 和 AppService Thread，相互隔離，通過橋接協(xié)議 WeixinJsBridage 進(jìn)行通信（包括 setData 調(diào)用、canvas 指令和各種 DOM 事件）。 下述表格展示了兩個(gè)線程的區(qū)別： 線程名稱 所屬模塊 運(yùn)行代碼 原理 說明 View 視圖層 WXML/WXSS WebView 渲染 wxml 編譯器把 wxml 文件轉(zhuǎn)為 js 并構(gòu)建 virtual dom；wxss 編譯器把 wxss 文件轉(zhuǎn)化為 js。 AppService 邏輯層 JS JavascriptCore 運(yùn)行 無法訪問 window / document 對(duì)象 兩個(gè)線程是通過系統(tǒng)層的 JSBridage 來通信的，邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁面更新，視圖層把觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理。 小程序與 App 的區(qū)別 運(yùn)行環(huán)境 原生 App 直接運(yùn)行在操作系統(tǒng)的單獨(dú)進(jìn)程中（在 Android 中還可以開啟多進(jìn)程），而小程序只能運(yùn)行在微信的進(jìn)程中。 開發(fā)成本 原生 App 的開發(fā)涉及到 Android/iOS 多個(gè)平臺(tái)、開發(fā)工具、開發(fā)語言、不同設(shè)備的適配等問題；而小程序只需要開發(fā)一個(gè)就可以在 Android/iOS 等不同平臺(tái)不同設(shè)備上運(yùn)行。 原生 App 需要在商店上架（Android 需要上架各種商店）；小程序只能在微信平臺(tái)發(fā)布。 系統(tǒng)權(quán)限 原生 App 調(diào)用的是系統(tǒng)資源，也就是說系統(tǒng)提供給開發(fā)的的 API 都可以使用；而小程序是基于微信的，小程序所有的功能都受限于微信，也就是說微信給開發(fā)者提供 API 才可以使用，不能繞過微信直接使用系統(tǒng)提供的 API。 原生 App 可以給用戶推送消息；小程序不允許主動(dòng)給用戶發(fā)送消息，只能回復(fù)模版消息 。 原生 App 有獨(dú)立的數(shù)據(jù)庫，可以做離線存儲(chǔ)；小程序只能存儲(chǔ)到 LocalStorage，無法做離線存儲(chǔ)。 原生 App 需要下載，安裝包比較大；小程序無需下載，可以通過小程序碼等方式通過微信直接打開。 運(yùn)行流暢度 原生 App 運(yùn)行在操作系統(tǒng)中，所有的原生組件可以直接調(diào)用 GPU 進(jìn)行渲染；而小程序運(yùn)行在微信的進(jìn)程中，只能通過 WebView 進(jìn)行渲染。 小程序與 H5 的區(qū)別 運(yùn)行環(huán)境 簡單來說，小程序是一種應(yīng)用，運(yùn)行的環(huán)境是微信（App）；H5 是一種技術(shù)，依附的外殼是是瀏覽器。 H5 的運(yùn)行環(huán)境是瀏覽器，包括 WebView，而微信小程序的運(yùn)行環(huán)境并非完整的瀏覽器，因?yàn)樾〕绦虻拈_發(fā)過程中只用到一部分H5 技術(shù)。 小程序的運(yùn)行環(huán)境是微信開發(fā)團(tuán)隊(duì)基于瀏覽器內(nèi)核完全重構(gòu)的一個(gè)內(nèi)置解析器，針對(duì)性做了優(yōu)化，配合自己定義的開發(fā)語言標(biāo)準(zhǔn)，提升了小程序的性能。 小程序中無法使用瀏覽器中常用的 window 對(duì)象和 document 對(duì)象，H5 可以隨意使用。 開發(fā)成本 H5 的開發(fā)，涉及開發(fā)工具（vscode、Atom等）、前端框架（Angular、react等）、模塊管理工具（Webpack 、Browserify 等）、任務(wù)管理工具（Grunt、Gulp等），還有 UI 庫選擇、接口調(diào)用工具（ajax、Fetch Api等）、瀏覽器兼容性等等。 盡管這些工具可定制化非常高，大部分開發(fā)者也有自己的配置模板，但對(duì)于項(xiàng)目中各種外部庫的版本迭代、版本升級(jí)，這些成本加在一起那就是個(gè)不小數(shù)目了。 而開發(fā)一個(gè)微信小程序，由于微信團(tuán)隊(duì)提供了開發(fā)者工具，并且規(guī)范了開發(fā)標(biāo)準(zhǔn)，則簡單得多。前端常見的 HTML、CSS 變成了微信自定義的 WXML、WXSS，官方文檔中都有明確的使用介紹，開發(fā)者按照說明專注寫程序就可以了。 需要調(diào)用后端接口時(shí)，調(diào)用發(fā)起請(qǐng)求API；需要上傳下載時(shí)，調(diào)用上傳下載API；需要數(shù)據(jù)緩存時(shí)，調(diào)用本地存儲(chǔ)API；引入地圖、使用羅盤、調(diào)用支付、調(diào)用掃碼等等功能都可以直接使用；UI 庫方面，框架帶有自家 weui 庫加成。 并且在使用這些 API 時(shí)，不用考慮瀏覽器兼容性，不用擔(dān)心出現(xiàn) BUG，顯而易見微信小程序的開發(fā)成本相對(duì)低很多。 系統(tǒng)權(quán)限 微信小程序相對(duì)于 H5 能獲得更多的系統(tǒng)權(quán)限，比如：網(wǎng)絡(luò)通信狀態(tài)、數(shù)據(jù)緩存能力等，這些系統(tǒng)級(jí)權(quán)限都可以和微信小程序無縫銜接。 而這一點(diǎn)恰巧是 H5 被詬病的地方，這也是 H5 的大多應(yīng)用場景被定位在業(yè)務(wù)邏輯簡單、功能單一的原因。 運(yùn)行流暢度 這條無論對(duì)于用戶還是開發(fā)者來說，都是最直觀的感受。長久以來，當(dāng)HTML5應(yīng)用面對(duì)復(fù)雜的業(yè)務(wù)邏輯或者豐富的頁面交互時(shí)，它的體驗(yàn)總是不盡人意，需要不斷的對(duì)項(xiàng)目優(yōu)化來提升用戶體驗(yàn)。但是由于微信小程序運(yùn)行環(huán)境獨(dú)立，盡管同樣用 HTML +CSS + JS 去開發(fā)，但配合微信的解析器最終渲染出來的是原生組件的效果，自然體驗(yàn)上將會(huì)更進(jìn)一步。 小程序多平臺(tái)互轉(zhuǎn)原理 微信小程序與支付寶小程序有很多相似之處，可以封裝兩個(gè)小程序之間的差異進(jìn)行轉(zhuǎn)換，從而實(shí)現(xiàn)一套邏輯代碼運(yùn)行在兩個(gè)平臺(tái)。 項(xiàng)目目錄結(jié)構(gòu)： |-ProjectName |-arch//基礎(chǔ)框架 |-arch.js//框架入口，只需要導(dǎo)入這一個(gè) js 即可 |-cache.js//緩存相關(guān)，封裝了 LocalStorage |-net.js//網(wǎng)絡(luò)相關(guān)，封裝了 網(wǎng)路請(qǐng)求 |-page.js//頁面跳轉(zhuǎn)相關(guān)，封裝了導(dǎo)航操作 |-phone.js//設(shè)備相關(guān)，封裝了系統(tǒng)信息，打電話，掃碼，剪切板，定位，支付 |-ui.js//平臺(tái) UI 相關(guān)，封裝了 Toast，Alert，Loading，ActionSheet，NavigationBar |-config//項(xiàng)目配置 |-api.js//項(xiàng)目 API 相關(guān)，接口參數(shù)配置等 |-config.js//項(xiàng)目配置，如：平臺(tái)判斷，LocalStorage 的 key |-pages//頁面 |-home |-home.acss/wxss |-home.axml/wxml |-home.js |-home.json |-utils//工具類 |-crypto-js.min.js//加密工具庫（按需添加） |-date.js//常用 Date 操作 |-money.js//常用 money 操作 |-net-api.js//自定義通用 API 請(qǐng)求方式，如：封裝統(tǒng)一頭部和響應(yīng)體 |-param.js//參數(shù)加密（按需添加） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 API 差異 //微信小程序 wx.setStorageSync('key', 'value') //支付寶小程序 my.setStorageSync({ key:'key', data:'value' }) 1 2 3 4 5 6 7 8 封裝后的 API： function set(key, value) { if (config.isAlipay) { my.setStorageSync({ key: key, data: value, }); } else { wx.setStorageSync(key, value); } } 1 2 3 4 5 6 7 8 9 10 布局差異 touchstart='onTouchStart' touchmove='onTouchMove' touchcancel='onTouchCancel' touchend='onTouchEnd' tap='onTap'> touchStart='onTouchStart' touchMove='onTouchMove' touchCancel='onTouchCancel' touchEnd='onTouchEnd' tap='onTap'> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 可以通過程序進(jìn)行轉(zhuǎn)換。 |
|
|
