京東小程序的三生三世

內(nèi)容來源：2021年3月11日，周偉鵬在“H5夢工廠”進(jìn)行《京東小程序的三生三世》演講分享。IT大咖說作為獨(dú)家視頻合作方，經(jīng)主辦方和講者審閱授權(quán)發(fā)布。閱讀字?jǐn)?shù)：2211|3分鐘閱讀摘要作為中國很大的自營式電商企業(yè)，...

內(nèi)容來源：2021年3月11日，周偉鵬在“H5夢工廠”進(jìn)行《京東小程序的三生三世》演講分享。IT大咖說作為獨(dú)家視頻合作方，經(jīng)主辦方和講者審閱授權(quán)發(fā)布。

閱讀字?jǐn)?shù)：2211|3分鐘閱讀

摘要

作為中國很大的自營式電商企業(yè)，京東小程序的開發(fā)也是一波三折。

“不是每個(gè)人都能看透這三生三世的愛恨交織。”

嘉賓演講視頻地址：t.cn/R9Vtevu

前世

之前京東購物入口的首頁還是比較復(fù)雜的，現(xiàn)在首頁簡化到只有搜索和領(lǐng)券的功能。

初見

1、小程序產(chǎn)品定位

用完即走，觸手可及。

輕量、突出重點(diǎn)，快速直達(dá)用戶的核心需求。

優(yōu)秀的操作體驗(yàn)。

2、小程序組成

作為開發(fā)者來說，小程序需要WXML、WXSS和JS三部分。WXML和WXSS組成了view層，負(fù)責(zé)view層的渲染。JS組成了manager層，JS負(fù)責(zé)整個(gè)小程序的邏輯部分。

3、小程序架構(gòu)

WXML和WXSS負(fù)責(zé)配置部分，小程序的view層其實(shí)還是Webview的形式。Manger是在appservice的部分。

頁面可以通過-ridge和appservice進(jìn)行交互，也可以調(diào)用一些native組件。

Manager也是通過-ridge，額外有一個(gè)單獨(dú)封裝的API，就可以直接通過API調(diào)用native組件。

4、小程序native組件

小程序的實(shí)現(xiàn)方式是通過小程序-ridge的API，獲取原來Web組件的信息，在Webview上蓋了一層native的組件。

小程序里具有native能力的組件大概有canvas、video、input、textarea、map和picker。這幾個(gè)組件在小程序里是以native的形式展現(xiàn)出來。

5、與Web端的區(qū)別

優(yōu)點(diǎn)：

小程序具有native的能力，有掃碼、離線、地圖之類的功能。

它接近原生應(yīng)用的用戶體驗(yàn)。

它是類似Web的開發(fā)語言，入門門檻低。

提供大量常用組件，開發(fā)成本低。

自帶ES6支持。

限制：

無法訪問到真實(shí)的DOM節(jié)點(diǎn)。

無法綁定原生事件。

更新需要發(fā)版本，微信審核。

6、京東購物小程序

技術(shù)預(yù)研：前期我們做了大量的技術(shù)預(yù)研。閱讀一些官方文檔、事例代碼，動手編寫demo，也讓一些同事組織了內(nèi)部技術(shù)分享。

組件開發(fā)團(tuán)隊(duì)：我們的開發(fā)團(tuán)隊(duì)前端是四個(gè)人，“后臺”開發(fā)有六個(gè)人。

確定結(jié)構(gòu)及分工：

我們把小程序分為page和models、API兩部分。

前端主要負(fù)責(zé)page部分，包括頁面重構(gòu)、數(shù)據(jù)渲染、用戶交互邏輯等等。

Models和API這層是“后臺”開發(fā)負(fù)責(zé)的，它們主要負(fù)責(zé)數(shù)據(jù)的獲取、加工，提供公共的API。

制定開發(fā)規(guī)范：我們制定了命名規(guī)范、接口規(guī)范、樣式規(guī)范、文檔規(guī)范、文件目錄規(guī)范和git分支規(guī)范。

渡劫

1、手動實(shí)現(xiàn)cookie

我們在開發(fā)小程序的時(shí)候碰到的第一個(gè)問題就是運(yùn)行環(huán)境里沒有cookie，導(dǎo)致后臺接口無法驗(yàn)證登錄態(tài)。

利用本地存儲的能力，在獲得網(wǎng)絡(luò)請求的時(shí)候拿到cookie，存到localstorage里。下次發(fā)網(wǎng)絡(luò)請求的時(shí)候，再從storage里拿出cookie，手動添加到header里，實(shí)現(xiàn)了手動cookie的過程。

2、用Nginx進(jìn)行轉(zhuǎn)發(fā)

第二個(gè)問題是wx.request的合法域名很多為10個(gè)，導(dǎo)致其他域名下的業(yè)務(wù)請求失敗。

因?yàn)榫〇|業(yè)務(wù)分散，域名很多，一個(gè)頁面需要調(diào)用大量API接口，這些API都散落在不同的域名下面。

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

3、使用Websocket

wx.request的并發(fā)數(shù)不能超過5個(gè)，導(dǎo)致并發(fā)能力受限，超出限制時(shí)請求失敗。