京東小程序的三生三世

內容來源：2021年3月11日，周偉鵬在“H5夢工廠”進行《京東小程序的三生三世》演講分享。IT大咖說作為獨家視頻合作方，經主辦方和講者審閱授權發布。閱讀字數：2211|3分鐘閱讀摘要作為中國很大的自營式電商企業，...

內容來源：2021年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層其實還是Webview的形式。Manger是在appservice的部分。

頁面可以通過-ridge和appservice進行交互，也可以調用一些native組件。

Manager也是通過-ridge，額外有一個單獨封裝的API，就可以直接通過API調用native組件。

4、小程序native組件

小程序的實現方式是通過小程序-ridge的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，存到localstorage里。下次發網絡請求的時候，再從storage里拿出cookie，手動添加到header里，實現了手動cookie的過程。

2、用Nginx進行轉發

第二個問題是wx.request的合法域名很多為10個，導致其他域名下的業務請求失敗。

因為京東業務分散，域名很多，一個頁面需要調用大量API接口，這些API都散落在不同的域名下面。

我們配置了一臺nginx，培植了一個新域名專門供小程序進行域名的轉發，把需要用到的域名全都映射到新域名的路徑里，這樣就可以把大量域名合并到一個或幾個很小的域名里，成功繞過了限制。

3、使用Websocket

wx.request的并發數不能超過5個，導致并發能力受限，超出限制時請求失敗。