京東小程序的三生三世
內容來源：2017年3月11日，周偉鵬在“H5夢工廠”進行《京東小程序的三生三世》演講分享。IT大咖說作為獨家視頻合作方，經主辦方和講者審閱授權發布。閱讀字數：2211 | 3分鐘閱讀摘要作為中國最大的自營式電商企業， ...
內容來源： 2017年3月11日，周偉鵬在“H5夢工廠”進行《京東小程序的三生三世》演講分享。IT大咖說作為獨家視頻合作方，經主辦方和講者審閱授權發布。
閱讀字數：2211 | 3分鐘閱讀
摘要
作為中國最大的自營式電商企業，京東小程序的開發也是一波三折。
“不是每個人都能看透這三生三世的愛恨交織。”
嘉賓演講視頻地址： 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、 一次開發，多次復用
把基礎類服務打包，給其它小程序做引用。
我的分享到此結束，謝謝大家！
