不得不看的微信小程序深度漫遊指南

推薦理由：

微信最近又發佈了一些小程序的新能力 ，同時向我的開發者開放註冊。預期又會有一些開發者開始投入小程序的懷抱。下面我推薦的這篇文章，分享的就是較早加入小程序陣營的自選股團隊的經驗分享，講述他們的一些開發經驗和踩過的坑，但願對你們有幫助。

如下爲文章原文：

做者 | 竇寧
編輯 | 京露

竇寧，一個普通的前端開發工程師，就任於騰訊自選股，專一行情圖繪製，正在面向全棧開發中。
微信最近又發佈了一些小程序的新能力 ，同時向我的開發者開放註冊。預期又會有一些開發者開始投入小程序的懷抱。本文分享的是較早加入小程序陣營的自選股團隊的經驗分享，講述他們的一些開發經驗和踩過的坑，但願對你們有幫助。

相信最近幾天，你們都被微信小程序（MINA）內測開始的新聞引爆了朋友圈，甚至所以引起了js的學習狂潮（笑）。有幸做爲早期參與進來的自選股攻關小分隊的咱們，心裏也是激動不已，但願能夠儘早給你們分享一些開發經驗和踩過的坑。

不過呢，因爲MINA的開發權限尚未徹底放開，有一些具體的內容還在保密階段，咱們在徵求了微信開平同事的贊成後，將開發過程當中的一些經驗和改進方案整理出來，但願能夠對其餘開發者提供一些參考。

在此特別提出，對於早期泄露的自選股小程序，咱們想說：「真的不是臣妾的鍋啊~」——而首發當天的泄露版其實是很是早期的一個版本，當時不少的設計最後並無被採用，而即便是那樣的一個demo也引發了至關大的反響，尤爲是其亮眼的加載速度，讓全部人都對小程序寄予厚望，同時也對咱們的正式版本充滿好奇。因而，在此，咱們誠意奉上——微信小程序深度漫遊指南。

框架描述：

引用一段官方介紹：

MINA是微信提供的一套應用框架，經過封裝微信客戶端提供的文件系統、網絡通訊、任務管理、數據安全等基礎功能，對上層提供了一套完整的Javascript Api，使得開發者可以很是方便的使用到微信客戶端提供的各類基礎功能，快速構建一個應用。

在頁面視圖層，咱們使用wxml搭建頁面的基本視圖框架，使用css控制頁面的視圖樣式。wxml是MINA提供的一套相似html的標籤語言，同時也提供了一系列的基礎組件，幫助咱們快速構建視圖。在頁面中不能使用腳本代碼，頁面渲染所須要的數據，以及頁面的交互處理邏輯都是在AppService中。咱們提供了很方法將AppService中的數據與頁面進行單向綁定，當AppService中的數據變動時，會主動觸發對應的頁面組件的從新渲染，這裏使用virtual-dom的技術，加快頁面的渲染效率。同時咱們爲頁面組件提供了bindtap、bindtouchstart等事件監聽相關的屬性，能夠與AppService中的提供的事件處理函數綁定在一塊兒。實現頁面向AppService層同步用戶的交互數據。

AppService是每一個MINA的服務中心，由微信客戶端在頁面視圖層外啓用異步線程單獨加載運行，MINA中全部使用javascript編寫的交互邏輯、網絡請求、數據處理都必須在AppService中實現，且AppService中不能使用DOM操做相關的腳本代碼。應用中的各個頁面能夠經過AppService實現數據管理、網絡通信、應用生命週期管理和頁面路由管理。

因此有了這麼棒的底層框架，咱們才更有信心把自選股這麼重的應用搬到小程序裏。

從零開始推進Canvas Native(iOS圖形庫)支持

微信小程序除了在底層架構的運行機制作了大量的優化，還對重功能（page切換、tab切換、多媒體、網絡鏈接等）其實是更傾向於使用native組件承載。而對於自選股來講，除了大量的數據，行情圖的展現也是不可缺乏的一環。而若是沒有原生繪圖組件的支持，那麼這樣的重功能必定會影響到速度，從而下降用戶體驗。

因爲自選股的行情圖是自研的前端模塊，裏面涉及到座標系、幾何圖形、技術指標等大量模塊，咱們但願可以在儘量少的修改代碼就能夠平滑的在小程序環境下完美運行。所以咱們主動與微信開平團隊交流，推進了Canvas Native的組件化流程，並共同構思了Canvas Native的語法、圖形API的支持。

作過H5的前端開發必定對截圖的Canvas語法不陌生。

(……冒着生命危險泄漏了微信小程序的框架圖↑)

（協商討論後的支持寫法）

能夠看到，繪圖語法基本沒有變化，其中wx.createContent()是建立並返回繪圖上下文context對象。 其中，context只是一個記錄方法調用的容器，用於生成記錄繪製行爲的actions數組。context跟canvas不存在對應關係，一個context生成畫布的繪製動做數組能夠應用於多個canvas。而context.getActions()是獲取當前context上存儲的繪圖動做。輸出結果以下：

最後一步，使用wx.drawCanvas()進行繪圖。

配合微信小程序的改進

MINA的定位是輕量的、用完即走的，咱們也配合着微信貫徹這一理念。隨着MINA版本的更迭，自選股小程序也及時調整着自身的方向，愈來愈凸顯出其不一樣於App的特性。

一方面，儘可能減小須要多屏互動的場景出現，這也就是說，不少狀況下咱們須要在一屏上呈現更多的數據，針對大量數據咱們作出了以下優化：

數據層優化: 自選股產品原本就是數據驅動的產品，並且要求數據實時性很高，在開盤的時候頁面股票數據實時更新

優化 1：setData 函數用於將數據從邏輯層發送到視圖層，同時改變對應的 this.data 的值

改變String

this.setData({

text: '自選股'

})
改變Array

var changeData = {};
var index = 0;
changeData['array[' + index + '].text'] = '自選股';
this.setData(changeData);
改變Object

this.setData({

'object.text': '自選股'

})
這裏須要注意的是：

一、直接修改 this.data 無效，沒法改變頁面的狀態，還會形成數據不一致

二、單次設置的數據不能超過1024kB，請儘可能避免一次設置過多的數據

對於以上狀況，咱們的處理與優化方法是：

一、減小setData的數據量

二、對setData數據分段處理

優化 2：本地緩存，即每一個微信小程序能夠有本身的本地緩存

對於緩存的獲取、設置、清除，小程序分別提供了同步與異步的方法。

爲了加強體驗，咱們在Page的生命週期 onLoad(頁面加載) onHide(頁面隱藏) onUnload(頁面卸載)函數裏面添加緩存載入、設置，提升應用首次展現速度，加快頁面與頁面之間數據的通用性，提高用戶在弱網絡環境下體驗。

後端優化: 另外一方面，鑑於MINA自己微信場景的限制，不少native app可使用的特性在MINA這裏並不支持，例如balabala…針對這樣的實際狀況，咱們暫時作了以下的兼容方式。

優化1：小程序對網絡請求接口域名有明確要求。針對4種服務器域名（request、socket、uploadfile、downloadfile）每種只能指定一個合法域名。自選股後臺業務十分複雜，使用了不一樣域名對業務進行劃分。應對這個限制，自選股經過統一代理方式將域名收斂爲一個域名，由代理層將請求轉發。

優化2：微信小程序文檔中要求wx.request網絡請求發起的是https請求，自選股在統一代理層部署證書支持https請求，後端RS機器無需改動。

優化3：小程序併發請求數不超過5，自選股使用動態接口將頁面須要的數據進行合併，經過一個接口獲取頁面所需數據。

優化4：小程序關於登陸態與移動應用和網頁應用的不一樣之處是拋棄了access_token的驗證方式，而是採用session_key加簽名的方式，爲小程序與服務器交換敏感數據提供了對稱加密方法。簽名方法對小程序透明，後端服務實現相應的解密程序以及登陸態驗證和控制能力。

極致體驗、極速開發

綜上所述，微信小程序MINA有着接近原生app的運行速度，作了大量的框架層面的優化設計，對android端和iOS端作出了高度一致的呈現，而且準備了完備的開發和調試工具。感謝微信開平的同事，他們的不懈努力爲衆多開發者們打開了一扇新世界的大門。也很佩服開平的同窗們，咱們在開發溝經過程中提出來的多數建議都可以快速的響應並支持，給了咱們很是大的成就感！

而對於更多的開發者來講，JS語言的低入門門檻、迅速的調試發佈流程、完備的API文檔和微信強大的平臺能力更是讓人慾罷不能。咱們從MINA誕生至今跟隨其一同演化發展，互相促進支撐，過程當中MINA框架結構幾經山崩地裂的調整，全部頁面在前一秒仍是好好的，更新開發工具後面目全非。但，很幸運的是，如今工具已經趨於完善穩定，你們能夠盡情地「玩耍」啦

最後仍是要說，咱們的開發過程儘管荊棘滿布，咱們仍緊追不捨，在短短的兩個月時間內，不斷推翻、不斷重構、不斷打磨體驗細節，終於完成了自選股小程序的基本核心需求，初步造成了一個閉環。

咱們還在不斷的優化，你看到的只是冰山一角，敬請期待自選股小程序的正式亮相！

小程序MINA開發者名單
產品：許翩翩
前端：張坤、張仁元、竇寧、卓晗
後端：宋景凱
設計師：郝曉

相關推薦

微信小程序之提升應用速度小技巧
教你寫一個雲上Hello world小程序
新增線下、APP、公衆號多處入口，小程序會再火起來麼？（內有福利）

文章出自騰訊雲技術社區

（埋文字鏈https://www.qcloud.com/commun...）

推薦你們關注騰訊雲技術社區微信公衆號：QcloudCommunity