648
京東小程序的三生三世
內容來源：2017年3月11日，周偉鵬在“H5夢工廠”進行《京東小程序的三生三世》演講分享。IT大咖說作為獨家視頻合作方，經主辦方和講者審閱授權發布。
嘉賓演講視頻地址：https://t.cn/R9Vtevu
前世
之前京東購物入口的首頁還是比較複雜的，現在首頁簡化到隻有搜索和領券的功能。
初見
1、小程序產品定位
用完即走，觸手可及。
輕量、突出重點，快速直達用戶的核心需求。
優秀的操作體驗。
2、小程序組成
作為開發者來說，小程序需要WXML、WXSS和JS三部分。WXML和WXSS組成了view層，負責view層的渲染。JS組成了manager層，JS負責整個小程序的邏輯部分。
3、小程序架構
WXML和WXSS負責配置部分，小程序的view層其實還是Web view的形式。Manger是在app service的部分。
頁麵可以通過JSbridge和app service進行交互，也可以調用一些native組件。
Manager也是通過JSbridge，額外有一個單獨封裝的API，就可以直接通過API調用native組件。
4、小程序native組件
小程序的實現方式是通過小程序JSbridge的API，獲取原來Web組件的信息，在Webview上蓋了一層native的組件。
小程序裏具有native能力的組件大概有canvas、video、input、textarea、map和picker。這幾個組件在小程序裏是以native的形式展現出來。
5、與Web端的區別
優點：
小程序具有native的能力，有掃碼、離線、地圖之類的功能。
它接近原生應用的用戶體驗。
它是類似Web的開發語言，入門門檻低。
提供大量常用組件，開發成本低。
自帶ES6支持。
限製：
無法訪問到真實的DOM節點。
無法綁定原生事件。
更新需要發版本，微信審核。
6、京東購物小程序
技術預研：前期我們做了大量的技術預研。閱讀一些官方文檔、事例代碼，動手編寫demo，也讓一些同事組織了內部技術分享。
組件開發團隊：我們的開發團隊前端是四個人，“後台”開發有六個人。
確定結構及分工：
我們把小程序分為page和models、API兩部分。
前端主要負責page部分，包括頁麵重構、數據渲染、用戶交互邏輯等等。
Models和API這層是“後台”開發負責的，它們主要負責數據的獲取、加工，提供公共的API。
製定開發規範：我們製定了命名規範、接口規範、樣式規範、文檔規範、文件目錄規範和git分支規範。
渡劫
1、手動實現cookie
我們在開發小程序的時候遇到的第一個問題就是運行環境裏沒有cookie，導致後台接口無法驗證登錄態。
利用本地存儲的能力，在獲得網絡請求的時候拿到cookie，存到local storage裏。下次發網絡請求的時候，再從storage裏拿出cookie，手動添加到header裏，實現了手動cookie的過程。
2、用Nginx進行轉發
第二個問題是wx.request的合法域名最多為10個，導致其他域名下的業務請求失敗。
因為京東業務分散，域名很多，一個頁麵需要調用大量API接口，這些API都散落在不同的域名下麵。
我們配置了一台nginx，培植了一個新域名專門供小程序進行域名的轉發，把需要用到的域名全都映射到新域名的路徑裏，這樣就可以把大量域名合並到一個或幾個很小的域名裏，成功繞過了限製。
3、使用Websocket
wx.request的並發數不能超過5個，導致並發能力受限，超出限製時請求失敗。
傳統方式是通過page直接和Server進行交互。有了小程序限製之後，我們在中間加入了WS Server，就可以把請求包裝到Websocket裏，Websocket再通過轉發到Server，Server返回數據後再通過Websocket的形式回到前麵的小程序。
因為微信原生支持Websocket，並發數也比較高，基本滿足了並發的需求。
4、提前梳理好頁麵層級關係
微信小程序頁麵層級最多為5個，這就會導致像京東購物這樣比較複雜的頁麵層級達到上限時頁麵跳轉無響應。
提前做好頁麵層級關係的梳理，保證頁麵邏輯在5層之內。
5、組件開發模式
小程序隻能通過page對象來進行頁麵內容的修改，加大了UI組件的開發難度。
京東的小程序開發是把組件完全獨立出來，每個組件都擁有自己的JS、WXML和WXSS。利用組件自己的JS，setData到WXML，WXML通過事件回調的方式回調到自己的JS。
組件開發完之後WXML通過import+template的方式引用到頁麵的WXML裏。JS通過require的方式引入頁麵。
6、代碼動態下發？
小程序的程序包大小不能超過1MB，使很多功能受限。對於電商應用，1MB確實不太夠。
我們當時有想過將JS腳本內容通過接口請求，然後用eval執行，或是把模版文件內容通過接口獲取後，動態插入到頁麵中。但是微信在這方麵有許多限製，eval等能動態執行JS語句的函數被禁用，模版文件內容無法動態添加。
飛升
1、關於性能優化
“Getthe hardest part done first.”這裏的the hardest part我們當時首先想到的是圖片。
2、基礎支持
京東有一套比較好的圖片係統，它是基於京東分布式文件係統JFS和CDN係統的一個包括存儲、圖片的在線處理、緩存分發的圖片係統。
3、圖片優化
利用CDN域名來分散請求，從而擴大並行下載數；
按需加載不同尺寸的圖片；
使用Webp圖片格式；
根據當前網絡狀況請求不同壓縮質量的圖片。
4、0ms呈現首屏
小程序本地存儲的文件是像HTML、CSS、IMG和JS這類靜態資源。
利用小程序的能力，通過上一個頁麵直接把首屏需要展現的頁麵傳到下一個頁麵。在打開新頁麵的時候，靜態資源和接口數據都已經有了，就可以直接展現出來。
5、頁麵滑動優化
搜索列表頁通過回收屏幕外的節點來保持滑動的流暢性。
6、Page間的通信
我們用事件的方式做了一個page間的通信，支付成功後會觸發一個事件，通知到前麵需要訂閱它的頁麵去更新自己的狀態。
7、網絡容災
Page是通過Websocket的方式和Server進行交互的，但因為用戶的網絡情況是不確定的，導致有時候小程序會連不到Websocket。這時我們會在小程序裏自動切到備份的HTTPS的服務器，通過HTTPS服務器和Server正常地進行交互，保證了小程序的穩定性。
8、異常監控
在一些不確定的情況下，小程序有可能出現報錯之類的情況。微信給我們提供了onError的API，通過這個API可以捕獲到小程序的一些錯誤，然後我們就能把這些錯誤信息提交到monitor上，根據監控平台反饋的數據對這些錯誤進行不斷優化和迭代。
9、一次開發，多次複用
把基礎類服務打包，給其它小程序做引用。
我的分享到此結束，謝謝大家！
相關推薦
移動端SDK優化的特點與經驗分享
Shall we begin？
最後更新：2017-08-13 22:46:16