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)可以審核通過。當(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)行修改來得到自己的項(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ā)過程中遇到的一些問題。
組件和 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)出來, 請(qǐng)求發(fā)送出去之后, 通過抓包可以看到請(qǐng)求正常的發(fā)送了, 也正常返回了, 但是小程序既不會(huì)走進(jìn) success 分支, 也不會(huì)進(jìn)入 error 分支, 報(bào)錯(cuò)也不能被 catch, 這個(gè)問題后期百度官方已經(jīng)修復(fù)了。
分包體積限制不同
微信小程序目前的限制規(guī)則是,每個(gè)包不超過 2M ,總包不超過 8M,而百度小程序目前的限制規(guī)則是主包不得超過 4M,每個(gè)分包不得超過 2M,總包不得超過 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 過濾器。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é)來說還是很方便的。
百度小程序 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)差異帶來的苦惱。需要注意的是:工具做不到運(yùn)行時(shí) diff 的抹平,也做不到一個(gè) API 從無(wú)到有的過程。所以,需要大家根據(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é)同過濾的思想建立一個(gè)模糊信譽(yù)管理系統(tǒng),突出對(duì)商品信息的處理與個(gè)性化推薦。上線以來,百度推薦模塊的數(shù)據(jù)對(duì)比于原有蘇寧內(nèi)部的推薦來看,更貼合于用戶在基于百度強(qiáng)大的搜索端的行為數(shù)據(jù)。對(duì)垂直行業(yè)的定制化推薦,滿足不同行業(yè)的需求,讓我們看到了百度推薦的智能化、專業(yè)化。
以上是我在蘇寧開發(fā)百度小程序的一些經(jīng)驗(yàn),各公司也可以嘗試一下,百度小程序也在不斷的迭代中,每一次迭代都能感覺到進(jìn)步,感覺百度小程序開發(fā)組的同學(xué),遠(yuǎn)程幫我們解決了很多問題,特別感謝百度方的李嘉輝來蘇寧駐場(chǎng)提供技術(shù)支持,沒有你我們的開發(fā)之路不會(huì)這么順利,以及百度的 QA 同學(xué),對(duì)我們小程序提出寶貴的建議。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)