2018 年 5 月，受百度邀請，蘇寧首批入駐百度小程序平臺。作為微信小程序的開發工程師，我接手了“開荒”百度智能小程序（以下簡稱百度小程序）的任務，自 5 月初開發，一個多月就完成了蘇寧易購百度小程序的開發工作，并在 7 月初的“百度開發者大會”上作為首批小程序對外提供服務。

從 5 月至今，作為百度小程序的主力開發，總結了以下的一些開發經驗。

百度小程序的初探

入駐百度小程序

百度小程序的入駐方式，與微信小程序幾乎相同，準備一個百度賬號，登錄百度智能小程序后臺，選擇入駐申請，選擇適合的類型，填寫表單信息，提交審核，一般 24 小時內可以審核通過。當然，如果有百度小程序的邀請碼，也可以走邀請碼通道進行入駐。這里特別需要注意的是，目前僅面向企業、政府、媒體及其它組織等非個人主體開放申請，個人用戶是沒有辦法入駐的。入駐完成后，進入平臺，可以看到自己的小程序。

開發前的準備

用注冊得到的管理員賬號登錄后臺，在成員管理設置項目組成員的權限, 百度小程序的用戶權限主要分為：開發者權限、開發管理、開發設置、暫停服務設置、推廣設置、流量主、數據統計、小程序簡介、小程序頭像。在設置 - 開發設置，獲取小程序的 AppID、AppKey 和 AppSecret，并設置服務器域名、業務域名和代理域名（小程序 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>

而百度小程序則必須寫成這邊這個樣子：

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 同學，對我們小程序提出寶貴的建議。