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