2018 年 5 月，受百度邀請(qǐng)，蘇寧首批入駐百度小程序平臺(tái)。作為微信小程序的開發(fā)工程師，我接手了“開荒”百度智能小程序（以下簡(jiǎn)稱百度小程序）的任務(wù)，自 5 月初開發(fā)，一個(gè)多月就完成了蘇寧易購(gòu)百度小程序的開發(fā)工作，并在 7 月初的“百度開發(fā)者大會(huì)”上作為首批小程序?qū)ν馓峁┓?wù)。

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

百度小程序的初探

入駐百度小程序

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

開發(fā)前的準(zhǔn)備

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

開發(fā)者工具

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

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

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

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

開發(fā)文檔

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

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

因?yàn)橥瑫r(shí)開發(fā)百度小程序和微信小程序，我將對(duì)比微信小程序，講述百度小程序開發(fā)過(guò)程中遇到的一些問題。

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

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

組件的不同

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

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
// 也可以簡(jiǎn)寫為
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>

百度小程序的列表渲染：

<view>
<view s-for="p in persons">
{{p.name}}
</view>
</view>

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

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

<view wx:for="{{array}}" wx:if="{{item.isWx}}">
{{index}}: {{item.message}}
</view>
// 或者這樣子
<view wx:for="{{array}}" wx:if="{{isWx}}">
{{index}}: {{item.message}}
</view>

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

API 的不同

百度小程序提供了 AI 的能力，可以實(shí)現(xiàn)文字識(shí)別、文本審核、語(yǔ)音合成、圖像審核、圖像識(shí)別和語(yǔ)音識(shí)別功能。

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

分包體積限制不同

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

在 CSS 和 JS 處理的上的細(xì)微差異

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

百度小程序支持的長(zhǎng)度單位是 CSS3 的 vw，當(dāng)然也支持微信小程序的 rpx。

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

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

登錄方式的區(qū)別

因?yàn)槲⑿趴蛻舳耸菑?qiáng)制要求用戶登錄的，但是手百不需要，所以在聯(lián)合登錄時(shí)，針對(duì)此場(chǎng)景，百度小程序需要作出特別的開發(fā)。在百度小程序聯(lián)合登錄前，需要使用 swan.isloginsync api 進(jìn)行手百客戶端的登錄狀態(tài)判斷，手百?zèng)]有登錄的，不能使用聯(lián)合登錄，所以建議開發(fā)者還需要準(zhǔn)備一套獨(dú)立賬號(hào)登錄體系。

支付方式的區(qū)別

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

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

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

百度小程序 IDE 提供了兩種編譯模式: 依賴分析、普通編譯。 依賴分析模式 : 無(wú)用文件不會(huì)被打包到產(chǎn)出中，支持 node_modules 的使用 ; 普通編譯模式 : 不支持 node_modues 的使用，打包全部文件。

PhoneX 等機(jī)型樣式適配

目前微信小程序并沒有提供對(duì) iphoneX，iphoneXS 等機(jī)型底部 bar 的適配，但是百度小程序提供了這樣一個(gè)適配方案。

.swan-security-padding-bottom {

padding-bottom:34px; 
}

.swan-security-margin-bottom {

margin-bottom: 34px;

}
.swan-security-fixed-bottom {

bottom: 34px;

}

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

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

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

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

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

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