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

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

百度小程序的初探

入駐百度小程序

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

開發(fā)前的準備

用注冊得到的管理員賬號登錄后臺，在成員管理設置項目組成員的權限, 百度小程序的用戶權限主要分為：開發(fā)者權限、開發(fā)管理、開發(fā)設置、暫停服務設置、推廣設置、流量主、數(shù)據(jù)統(tǒng)計、小程序簡介、小程序頭像。在設置 - 開發(fā)設置，獲取小程序的 AppID、AppKey 和 AppSecret，并設置服務器域名、業(yè)務域名和代理域名（小程序 web 化使用）。在設置 - 基礎設置設置小程序名稱、頭像和簡介等信息。

開發(fā)者工具

在從百度小程序官網(wǎng)點擊文檔 - 開發(fā) - 左側導航欄工具 - 界面下載開發(fā)者工具，開發(fā)者工具啟動后，有和微信開發(fā)者工具差不多的界面，不同的地方如下：

百度小程序沒有集成類似于微信小程序 Tgit、騰訊云，云開發(fā)平臺等功能。開發(fā)者需要在自備代碼管理工具，服務端所需要的服務器等資源。

百度小程序 IDE 目前的新建功能只支持新建一個 DEMO，開發(fā)者需要在這個基礎上進行修改來得到自己的項目，或者使用搬家具將微信小程序轉換為百度小程序，不能從頭開始新建。微信小程序的新建功能是從輸入 appID 開始的，百度的 appid 只能在建好項目后手動的修改。

百度小程序 IDE 不需要獨立設置代理。微信小程序 IDE 需要單獨配置代理，在復雜網(wǎng)絡環(huán)境下可能會出現(xiàn)內(nèi)外網(wǎng)不能同時訪問的情況，但是百度小程序不需要設置單獨代理。

開發(fā)文檔

百度小程序有豐富的文檔，詳細的介紹了從申請入駐到小程序發(fā)布、從組件到 API 的百度小程序的方方面面，大家可以自行到官網(wǎng)上去閱讀。

前端開發(fā)者眼中的百度小程序

因為同時開發(fā)百度小程序和微信小程序，我將對比微信小程序，講述百度小程序開發(fā)過程中遇到的一些問題。

組件和 API 幾乎和微信相同，框架上分為邏輯層、視圖層、自定義組件和基礎能力，也支持分包加載等能力。百度小程序的組件也分為視圖組件、基礎組件、表單組件、導航組件、媒體組件、地圖組件、畫布組件和開放能力相關組件。

在 API 方面，百度小程序也分為網(wǎng)絡、媒體、文件、數(shù)據(jù)存儲、位置、界面（包含繪圖）、設備和開放接口等大類。以下是我們發(fā)現(xiàn)的一些百度小程序與微信小程序的不同。

組件的不同

百度小程序的列表渲染和微信不一致：

<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>

百度小程序的判斷和循環(huán)不能再同一個組件上。

例如微信小程序可以這么寫：

<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 的能力，可以實現(xiàn)文字識別、文本審核、語音合成、圖像審核、圖像識別和語音識別功能。

Swan.request 能力。request 的問題主要體現(xiàn)在對單引號, 以及 URL 的漢字的兼容上. 百度小程序 request 能力并未對請求 UR 中的漢字做 encodeURIComponent 處理, 導致手百客戶端發(fā)送請求直接失敗，這邊建議開發(fā)者自己對 get 請求的入?yún)⒆?encodeURIComponent 處理. 單引號的問題也是這樣, 具體表現(xiàn)出來, 請求發(fā)送出去之后, 通過抓包可以看到請求正常的發(fā)送了, 也正常返回了, 但是小程序既不會走進 success 分支, 也不會進入 error 分支, 報錯也不能被 catch, 這個問題后期百度官方已經(jīng)修復了。

分包體積限制不同

微信小程序目前的限制規(guī)則是，每個包不超過 2M ，總包不超過 8M，而百度小程序目前的限制規(guī)則是主包不得超過 4M，每個分包不得超過 2M，總包不得超過 8M，這個規(guī)則和目前微信程序的限制規(guī)則差別較大，在方便了開發(fā)者的同時，可能會在性能方便有所損耗。

在 CSS 和 JS 處理的上的細微差異

百度小程序不支持 css 的 > 選擇器, 建議樣式直接使用 class 選擇器。

百度小程序支持的長度單位是 CSS3 的 vw，當然也支持微信小程序的 rpx。

使用偽元素實現(xiàn)的 0.5px 邊框在百度小程序下會有異常，建議不要使用這種方法。

百度小程序不支持類似于微信小程序 WXS 的寫法。百度小程序沒有提供類似于微信小程序 WXS 的寫法, 但是提供了 Filter 過濾器。Filer 代碼可以編寫在 swan 文件中的標簽內(nèi)，或以 .filter.js 為后綴名的文件內(nèi)。

登錄方式的區(qū)別

因為微信客戶端是強制要求用戶登錄的，但是手百不需要，所以在聯(lián)合登錄時，針對此場景，百度小程序需要作出特別的開發(fā)。在百度小程序聯(lián)合登錄前，需要使用 swan.isloginsync api 進行手百客戶端的登錄狀態(tài)判斷，手百沒有登錄的，不能使用聯(lián)合登錄，所以建議開發(fā)者還需要準備一套獨立賬號登錄體系。

支付方式的區(qū)別

微信小程序使用的是微信支付，而百度小程序使用的是百度聚合收銀臺，在接入流程和開發(fā)流程上都和微信小程序不一樣，當然百度小程序官方也貼心的提供了微信直聯(lián)和支付寶直聯(lián)的能力，大家可以根據(jù)自己的需要選用適合自己的付款方式。

打包方式及發(fā)布的區(qū)別

百度小程序點擊預覽按鈕生成的開發(fā)版小程序是可以給其他用戶掃碼查看的，并未像微信一樣嚴格要求開發(fā)者權限才能打開開發(fā)版小程序，也沒有體驗者這一角色，這一點對于測試同學來說還是很方便的。

百度小程序 IDE 提供了兩種編譯模式: 依賴分析、普通編譯。 依賴分析模式 : 無用文件不會被打包到產(chǎn)出中，支持 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;

}

該組樣式會自動在需要適配安全區(qū)的場景動態(tài)注入，開發(fā)者不需要自行添加，只要在.swan 文件中使用這組類名即可。效果如下圖所示：

如果你之前有開發(fā)微信小程序開發(fā)，百度小程序提供了一個搬家工具。 搬家工具，是基于 Abstract Syntax Tree 開發(fā)的輔助工具，可以幫助您把微信小程序的部分代碼遷移到百度智能小程序上。

工具可進行靜態(tài)語法上的轉換，根據(jù)一些規(guī)則去轉換代碼，抹平微信小程序語法和百度智能小程序語法上的差異，為大家減少因平臺差異帶來的苦惱。需要注意的是：工具做不到運行時 diff 的抹平，也做不到一個 API 從無到有的過程。所以，需要大家根據(jù)轉換 log，進行二次開發(fā)。

網(wǎng)絡的虛擬性導致信任關系難以建立，交易決策困難。對于小程序這種輕便、易傳播的特性，如何讓用戶能夠更容易的決策，并且給用戶適合他的商品。這無疑是十分重要的一環(huán)，而與百度合作的手百小程序中，百度的基于用戶操作行為的大數(shù)據(jù)商品推薦系統(tǒng)可以處理信任評估中的主觀因素，提高交易預測的準確性。

基于雙方協(xié)同過濾的思想建立一個模糊信譽管理系統(tǒng)，突出對商品信息的處理與個性化推薦。上線以來，百度推薦模塊的數(shù)據(jù)對比于原有蘇寧內(nèi)部的推薦來看，更貼合于用戶在基于百度強大的搜索端的行為數(shù)據(jù)。對垂直行業(yè)的定制化推薦，滿足不同行業(yè)的需求，讓我們看到了百度推薦的智能化、專業(yè)化。

以上是我在蘇寧開發(fā)百度小程序的一些經(jīng)驗，各公司也可以嘗試一下，百度小程序也在不斷的迭代中，每一次迭代都能感覺到進步，感覺百度小程序開發(fā)組的同學，遠程幫我們解決了很多問題，特別感謝百度方的李嘉輝來蘇寧駐場提供技術支持，沒有你我們的開發(fā)之路不會這么順利，以及百度的 QA 同學，對我們小程序提出寶貴的建議。