蘇寧：我們開發百度小程式遇到的那些 “坑”
作者｜馬建旭
編輯｜覃雲
2018 年 5 月，受百度邀請，蘇寧首批入駐百度小程式平臺。作為微信小程式的開發工程師，我接手了“開荒”百度智慧小程式（以下簡稱百度小程式）的任務，自 5 月初開發，一個多月就完成了蘇寧易購百度小程式的開發工作，並在 7 月初的“百度開發者大會”上作為首批小程式對外提供服務。
從 5 月至今，作為百度小程式的主力開發，總結了以下的一些開發經驗。
百度小程式的初探
入駐百度小程式
百度小程式的入駐方式，與微信小程式幾乎相同，準備一個百度賬號，登入百度智慧小程式後臺，選擇入駐申請，選擇適合的型別，填寫表單資訊，提交稽核，一般 24 小時內可以稽核通過。當然，如果有百度小程式的邀請碼，也可以走邀請碼通道進行入駐。這裡特別需要注意的是，目前僅面向企業、政府、媒體及其它組織等非個人主體開放申請，個人使用者是沒有辦法入駐的。入駐完成後，進入平臺，可以看到自己的小程式。
開發前的準備
用註冊得到的管理員賬號登入後臺，在成員管理設定專案組成員的許可權, 百度小程式的使用者許可權主要分為：開發者許可權、開發管理、開發設定、暫停服務設定、推廣設定、流量主、資料統計、小程式簡介、小程式頭像。在設定 - 開發設定，獲取小程式的 AppID、App Key 和 App Secret，並設定伺服器域名、業務域名和代理域名（小程式 web 化使用）。在設定 - 基礎設定設定小程式名稱、頭像和簡介等資訊。
開發者工具
在從百度小程式官網點選文件 - 開發 - 左側導航欄工具 - 介面下載開發者工具，開發者工具啟動後，有和微信開發者工具差不多的介面，不同的地方如下：
-
百度小程式沒有整合類似於微信小程式 Tgit、騰訊雲，雲開發平臺等功能。開發者需要在自備程式碼管理工具，服務端所需要的伺服器等資源。
-
百度小程式 IDE 目前的新建功能只支援新建一個 DEMO，開發者需要在這個基礎上進行修改來得到自己的專案，或者使用搬傢俱將微信小程式轉換為百度小程式，不能從頭開始新建。微信小程式的新建功能是從輸入 appID 開始的，百度的 appid 只能在建好專案後手動的修改。
-
百度小程式 IDE 不需要獨立設定代理。微信小程式 IDE 需要單獨配置代理，在複雜網路環境下可能會出現內外網不能同時訪問的情況，但是百度小程式不需要設定單獨代理。
開發文件
百度小程式有豐富的文件，詳細的介紹了從申請入駐到小程式釋出、從元件到 API 的百度小程式的方方面面，大家可以自行到官網上去閱讀。
前端開發者眼中的百度小程式
因為同時開發百度小程式和微信小程式，我將對比微信小程式，講述百度小程式開發過程中遇到的一些問題。
元件和 API 幾乎和微信相同，框架上分為邏輯層、檢視層、自定義元件和基礎能力，也支援分包載入等能力。百度小程式的元件也分為檢視元件、基礎元件、表單元件、導航元件、媒體元件、地圖元件、畫布元件和開放能力相關元件。
在 API 方面，百度小程式也分為網路、媒體、檔案、資料儲存、位置、介面（包含繪圖）、裝置和開放介面等大類。以下是我們發現的一些百度小程式與微信小程式的不同。
元件的不同
百度小程式的列表渲染和微信不一致：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
// 也可以簡寫為
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
百度小程式的列表渲染：
<view>
<view s-for="p in persons">
{{p.name}}
</view>
</view>
百度小程式的判斷和迴圈不能再同一個元件上。
例如微信小程式可以這麼寫：
<view wx:for="{{array}}" wx:if="{{item.isWx}}">
{{index}}: {{item.message}}
</view>
// 或者這樣子
<view wx:for="{{array}}" wx:if="{{isWx}}">
{{index}}: {{item.message}}
</view>
而百度小程式則必須寫成這邊這個樣子：
<view s-for="(index,item) in array">
<block s-if="item.isBd">
{{index}}: {{item.message}}
</block>
</view>
// 或者這樣子
<block s-if="isBd">
<view s-for="p in persons">
{{p.name}}
</view>
</block>
API 的不同
-
百度小程式提供了 AI 的能力，可以實現文字識別、文字稽核、語音合成、影象稽核、影象識別和語音識別功能。
-
Swan.request 能力。request 的問題主要體現在對單引號, 以及 URL 的漢字的相容上. 百度小程式 request 能力並未對請求 UR 中的漢字做 encodeURIComponent 處理, 導致手百客戶端傳送請求直接失敗, 這邊建議開發者自己對 get 請求的入參做 encodeURIComponent 處理. 單引號的問題也是這樣, 具體表現出來, 請求傳送出去之後, 通過抓包可以看到請求正常的傳送了, 也正常返回了, 但是小程式既不會走進 success 分支, 也不會進入 error 分支, 報錯也不能被 catch, 這個問題後期百度官方已經修復了。
分包體積限制不同
微信小程式目前的限制規則是，每個包不超過 2M ，總包不超過 8M，而百度小程式目前的限制規則是主包不得超過 4M，每個分包不得超過 2M，總包不得超過 8M，這個規則和目前微信程式的限制規則差別較大，在方便了開發者的同時，可能會在效能方便有所損耗。
在 CSS 和 JS 處理的上的細微差異
百度小程式不支援 css 的>選擇器, 建議樣式直接使用 class 選擇器。
百度小程式支援的長度單位是 CSS3 的 vw，當然也支援微信小程式的 rpx。
使用偽元素實現的 0.5px 邊框在百度小程式下會有異常，建議不要使用這種方法。
百度小程式不支援類似於微信小程式 WXS 的寫法。百度小程式沒有提供類似於微信小程式 WXS 的寫法, 但是提供了 Filter 過濾器。Filer 程式碼可以編寫在 swan 檔案中的標籤內，或以 .filter.js 為字尾名的檔案內。
登入方式的區別
因為微信客戶端是強制要求使用者登入的，但是手百不需要，所以在聯合登入時，針對此場景，百度小程式需要作出特別的開發。在百度小程式聯合登入前，需要使用 swan.isloginsync api 進行手百客戶端的登入狀態判斷，手百沒有登入的，不能使用聯合登入，所以建議開發者還需要準備一套獨立賬號登入體系。
支付方式的區別
微信小程式使用的是微信支付，而百度小程式使用的是百度聚合收銀臺，在接入流程和開發流程上都和微信小程式不一樣，當然百度小程式官方也貼心的提供了微信直聯和支付寶直聯的能力，大家可以根據自己的需要選用適合自己的付款方式。
打包方式及釋出的區別
百度小程式點選預覽按鈕生成的開發版小程式是可以給其他使用者掃碼檢視的，並未像微信一樣嚴格要求開發者許可權才能開啟開發版小程式，也沒有體驗者這一角色，這一點對於測試同學來說還是很方便的。
百度小程式 IDE 提供了兩種編譯模式: 依賴分析、普通編譯。 依賴分析模式 : 無用檔案不會被打包到產出中，支援 node_modules 的使用 ; 普通編譯模式 : 不支援 node_modues 的使用，打包全部檔案。
PhoneX 等機型樣式適配
目前微信小程式並沒有提供對 iphoneX，iphoneXS 等機型底部 bar 的適配，但是百度小程式提供了這樣一個適配方案。
.swan-security-padding-bottom {
padding-bottom:34px;
}
.swan-security-margin-bottom {
margin-bottom: 34px;
}
.swan-security-fixed-bottom {
bottom: 34px;
}
該組樣式會自動在需要適配安全區的場景動態注入，開發者不需要自行新增，只要在.swan 檔案中使用這組類名即可。效果如下圖所示：
如果你之前有開發微信小程式開發，百度小程式提供了一個搬家工具。 搬家工具，是基於 Abstract Syntax Tree 開發的輔助工具，可以幫助您把微信小程式的部分程式碼遷移到百度智慧小程式上。
工具可進行靜態語法上的轉換，根據一些規則去轉換程式碼，抹平微信小程式語法和百度智慧小程式語法上的差異，為大家減少因平臺差異帶來的苦惱。需要注意的是：工具做不到執行時 diff 的抹平，也做不到一個 API 從無到有的過程。所以，需要大家根據轉換 log，進行二次開發。
網路的虛擬性導致信任關係難以建立，交易決策困難。對於小程式這種輕便、易傳播的特性，如何讓使用者能夠更容易的決策，並且給使用者適合他的商品。這無疑是十分重要的一環，而與百度合作的手百小程式中，百度的基於使用者操作行為的大資料商品推薦系統可以處理信任評估中的主觀因素，提高交易預測的準確性。
基於雙方協同過濾的思想建立一個模糊信譽管理系統，突出對商品資訊的處理與個性化推薦。上線以來，百度推薦模組的資料對比於原有蘇寧內部的推薦來看，更貼合於使用者在基於百度強大的搜尋端的行為資料。對垂直行業的定製化推薦，滿足不同行業的需求，讓我們看到了百度推薦的智慧化、專業化。
以上是我在蘇寧開發百度小程式的一些經驗，各公司也可以嘗試一下，百度小程式也在不斷的迭代中，每一次迭代都能感覺到進步，感覺百度小程式開發組的同學，遠端幫我們解決了很多問題，特別感謝百度方的李嘉輝來蘇寧駐場提供技術支援，沒有你我們的開發之路不會這麼順利，以及百度的 QA 同學，對我們小程式提出寶貴的建議。
作者簡介
馬建旭，蘇寧易購前端技術經理，蘇寧易購小程式產品線技術負責人。曾任途牛旅遊網線上預訂前端負責人，具有豐富的前端開發經驗，在 nodeJs、reacrJs、vue 等多個領域均有技術實踐。對前後端分離、前端元件化、小程式開發等方面，有獨特的見解和豐富的實踐經驗。
活動推薦
12 月 7 日北京 ArchSummit 全球架構師峰會上，來自美團、百度、阿里、快手的講師齊聚一堂，共同分享“打造 Native 體驗 Hybrid App 實踐”、“定製統一可維護的前端架構”、“10 年雙十一前端關鍵技術”和“同構 Web App 的另一種探索”的分享。
會議開幕倒數第 4 天，購票聯絡票務灰灰 17326843116
詳情可 掃描以下二維碼 或點選 閱讀原文 。
