細數百度小程序踩的坑

最近接觸百度小程序挺多，開發了幾個產品，都快被百度的小程序折磨死。真的是不想吐槽了，接下來我就講講我遇到的坑與一些經驗。

1. s-for

這個for循環的寫法爲 s-for='arr' 或者 s-for = 'item,index in arr' 。這些到沒什麼，主要是s-for不能循環常數。。。這讓我從微信小程序轉到百度小程序不太習慣。。。官方迴應說什麼底層diff差別哦，後面會修復。不知道如今修復好沒。

2. 自定義組件之命名與路徑

引用組件的時候，在json文件中，usingComponents 選項裏填入要引入的組件並自定義名稱："my-radio":"/components/bd-radio/bd-radio"。須要注意的是：這個組件的名稱不支持駝峯和大寫寫法。路徑支持絕對路徑和相對路徑。

3. 自定義組件之組件通信

子組件 this.triggerEvent('getchange', idx); 觸發事件，getchange是父組件須要接收的事件名，第二個參數是須要傳回去的數據，最好是object，其它的參數，在2.0.3以前不支持。
父組件 <my-radio bindgetchange='getSex'></my-radio> bindgetchange bind後面的就是子組件傳過來的事件名，再後面一個(getSex)就是父組件中定義的函數，接收的時候e.detail，就是自組件傳過來的數據

4. 獲取索引值

若是要獲取s-for中當前點擊元素的索引值，只有在元素上添加 data-idx='{{index}}' 自定義屬性，而後點擊事件裏面，經過：e.currentTarget.dataset.idx 獲取。

5. swan.request

百度小程序的 swan.request 只支持 https協議。若是你不當心接口弄成了HTTP協議的url，在開發者工具上徹底沒問題，可是真機調試的話，若是你運氣好，就沒問題，運氣很差在某些手機上就會出現接口無反應的狀況，而且swan.request 的fail打印出： illegal request 非法請求。可是又沒報錯。因此，這個狀況的提示也是不明顯的，誰知道那個非法請求是接口仍是url地址的錯啊。

還有就是百度好像並無對這個接口中的url進行encodeURIComponent，因此若是有中文，那本身須要進行編碼一次。

6. swan.setStorageSync

swan.setStorageSync 這個同步的存儲數據接口，官方文檔說：參數支持String key, Object/String data。我第一次使用這個接口的時候，沒注意看參數，結果傳了一個布爾值進去，可是使用swan.getStorageSync獲取的時候，始終獲取不了，結果發現數據最外層包了一個data屬性。即正常是xxx:true，實際上取出來是 data:{xxx:true} 也是醉了。。。不支持的至少給個錯誤提示啊。。。

7. rich-text

使用rich-text富文本組件的時候

<rich-text node="{{a.b}}"></rich-text>
//若是a是後臺取的，在js的data中初始化的時候，若是a設置爲null，有可能會報錯，致使頁面複製相同的內容，即出現兩個相同的內容連在一塊兒。因此最好設置爲 {} 空對象。

並且若是遇到識別不了的標籤會中止渲染，而且不會有錯誤提示。。。

我遇到過幾回出現兩個相同的內容連在一塊兒的狀況，忘了截圖的，具體怎樣出現的也忘了。。。

8. image 組件出現 image load faild

若是遇到某些時候圖片路徑是正確的，可是出現 image load faild 這個錯誤，我也不知道怎麼解決。官方回答說不影響開發就行。。。特別是從一個頁面navgitor或者其它的跳轉方式跳轉到另外的頁面，就有可能會出現這種狀況。並且圖片仍是本地的。。。

官方回覆說：image圖片地址只支持https協議，而且在小程序後臺進行域名配置，或者百度域名的圖片，不知足條件的話，圖片將沒法正常顯示。不過有時候仍是會出現上面的問題。

9. H5支付 轉到 百度支付 swan.requestPolymerPayment

關於百度小程序支付：最開始我天真的覺得，web-view嵌套一個已經完善的H5商城，支付的時候也能夠直接使用本身對接的H5的支付。由於在本地預覽時，無論安卓仍是IOS，均可以支付成功，沒問題。可是隻要一發布上線，支付的時候就調不起微信或者支付寶的支付彈窗了。都不能跳轉到支付彈窗的頁面。安卓機所有不得行，IOS沒問題。抓包發現結果返回正常，沒有錯誤。我估計是百度官方屏蔽了。官方給出的回答是：爲保護用戶的資金安全，小程序的web-view不支持自行調用第三方支付服務。若有支付需求，建議接入百度收銀臺。。。可是，可是，可是。。。我看到蘇寧易購的百度小程序就是使用的本身對接的第三方支付，並無使用百度的支付接口。。。我就很奇怪了，爲撒子蘇寧易購就能夠？？？

10. web-view的src也可使用localhost

web-view的src也能夠弄成IP地址的狀況。好比我本地使用vue-cli運行了一個項目，假設爲http://localhost:8087/szxgcs/detail.html。這時我把localhost改爲本身的IP地址，而後在web-view的src中：

<web-view src='http://192.168.xxx.xxx:8087/szxgcs/detail.html'></web-view>
//這樣就能運行在本地的代碼了

 

11. 使用未申明的變量，有可能會沒錯誤提示

有時候在某些接口中，或者request的data中，使用that.data.xxx的時候，因爲我粗心，that沒有聲明。因此在運行的時候，發現調接口沒反應。可是又沒有提示哪裏有錯，就很懵逼。因此必定要檢查某些變量是否聲明的。不過如今好像改好了，不聲明會報錯了。

12. swan.setPageInfo接入百度信息流

接入百度信息流的申請，就是在頁面配置swan.setPageInfo，若是小程序首頁是web-view嵌套的頁面，不是百度小程序原生開發的頁面。那麼就會申請不了。如今默認都是接入了百度信息流的，因此若是沒配置，會出現讓你配置的警告信息。建議代碼寫成swan.setPageInfo && swan.setPageInfo({配置內容}) ，若是不這樣寫，按照官方的寫法，在真機調試中，會報錯。

13. 發佈審覈時設置基礎庫版本高一點。

建議發佈審覈的時候，把開發者平臺 --- 設置 --- 基本設置 --- 基礎庫最低版本設置 設置高一點。低版本出現了問題，若是是百度的問題，官方是不會給你修復的，這是官方技術人員回覆個人原話。通常設置3.xxx以上就能夠了，3.xxx之前的沒多少用戶了。這樣也能夠避免審覈的時候測試人員在低版本測試，出現不清楚緣由的bug。

14. s-if不能和s-for一塊兒用。有可能出現不可預知的錯誤。還有就是 s-if 必定要寫在最前面，否則有可能也會出現一些小問題。。。

.假如須要給組件傳遞內容，這個內容是異步獲取的，那麼在組件裏，獲取的時候，有可能會遇到獲取不到傳過來的內容，這個很正常。在H5的vue中，我使用v-if來避免獲取不了的狀況。相似：

</ child :sendval='data' v-if='data' >
//data初始化爲false，這樣，只有在data真實獲取到內容的時候，才渲染組件。
//可是，在百度小程序中，判斷條件必須寫在前面即：
<child  s-if='data' :sendval='data' ></child>
//否則，仍是會出現獲取不了內容的狀況

 

15. swan.createSelectorQuery() 有時須要延時獲取寬高等信息。

swan.createSelectorQuery()這個獲取dom元素的接口，若是獲取的dom元素是動態添加的，那麼，在調用boundingClientRect獲取寬高等信息的時候，是須要延時獲取的。這個在組件中更明顯，就算組件加了s-if，在數據成功返回以後再渲染組件，可是渲染的過程也須要耗時，因此，不能及時地獲取到元素的信息。就算使用swan.nextTick()也沒做用，有時候也會獲取不到。我設置setTimeout延時通常是150ms

16. swan.nextTick()

swan.nextTick()就是提供一個異步操做。歷來就沒用過，官方的描述也是雲裏霧裏的。感受和vue的nextTick不太同樣。由於我試過相同狀況下相同的代碼，兩個的表現不同。

17. 慎用sConsole

web-view中的h5頁面跳轉到小程序會打開兩次。這個狀況是打開了SConsole調試面板的，關閉以後就不會出現這個狀況。

其它狀況使用sConsole也有可能會出現某些小問題。。。

18. getSwanId

getSwanId在開發者工具上，返回的是SWAN-DEVELOP，而真機上是一段長度爲幾十個的字母和數字組成的字符串。

19. css單位

css單位基本都支持，不過若是是rpx這種，小程序會自動轉換成vw或者vh，因此你會看到控制檯裏的單位都是vw或者vh

20. getStorage

getStorage獲取本地不存在的數據，默認進入success，不會進入fail回調

21. 分享到貼吧

這個功能，官方有說明： 這裏是接入文檔       這裏是簡單說明。

在代碼中配置好，而且上線小程序後，我覺得這樣就能申請分享白名單了。。。然而，按鈕居然沒給我激活，點不動。。。搞不清楚緣由。。。而後就放棄了

 

上面這些是真實遇到的狀況，真的累，原本只花一天的時間搞得定的內容，一路踩坑結果多花了兩三倍的時間。。。逐漸懷疑我是否是作程序員的料。。。

後面還會繼續開發百度小程序，估計又會折壽了。。。