百度小程序開發實戰--踩坑經歷

1.  文章列表rich-text的圖片寬度問題
       效果以下
   
      後端返回的數據格式爲string，小程序對次採用了rich-text來識別傳入的html
      rich-text推薦使用node的數組模式，字符串模式會影響解析速度（由於最終仍是會轉換爲數組類型），可是後端返回的爲string格式，是由後臺編輯器傳入的。
   
    這就致使了沒法操做css中 rich-text 裏邊的圖片樣式。
    解決方法：
                  1. php端，在返回時修改返回的string
   $info['contents'] = str_replace("<img ", "<img style='max-width:100%;height:auto;'", $info['contents']);

                  2. 在js中處理返回的數據，可是增長了處理成本（採用此解決方案）
   that.setData({  contents: res.data.contents.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') })

2. 關於跳轉外部頁面的處理

   百度小程序給出了web-view這個標籤來跳轉外部的連接，可是web-view是自動打開新的頁面，沒法作到點擊某個圖片或者button，跳轉打開新的頁面

   因爲小程序全部的跳轉都是經過navigateTo這個對象來進行跳轉的，可是這個對象只能跳轉小程序內的page頁面或者其餘的百度小程序

   因此解決方案是，寫一個page作一個web-view的承載頁

    

    

    而在調用頁，使用一個bindtap的方法執行page的切換，同時把要跳轉的url傳遞過去

    

   
   

3. 仍是web-view的問題，直接寫src的http連接是能夠帶參數的，可是經過調用中間頁url的參數會報錯,緣由是傳參會解析url 問號後邊的參數，解決方法是先encodeURLComponent 一下

4. 關於外部字體的引入
   視覺中有關於特殊字體的引入
   
   在小程序新建了一個樣式表專門引入，可是踩的坑是，具體到組件的css引入後無效(page中是生效的)，最好在最外層的app.css中引入
   
5. 標籤支持較少 只能限制使用view template button text等幾個 ul li 等都不支持使用
6. 不支持根據數據動態引入template  如<template is="template-{{id}}"></template>
   解決方案： 根據block 判斷加載不一樣的template  <block s-if="{{ id == 1}}"><template is="template-1" data="{{{...detail}}}" /></block>
7. button 等標籤自帶默認樣式
 須要在css文件中覆蓋 最好寫一個reset的重置樣式表將button等須要自定義的標籤重置掉
 
8. rich-text 遇到不識別的標籤會中止渲染，而且不報錯
    rich-text 僅支持常規的標籤 在聯調中後端返回了一個沒法識別的link標籤
   
   

   致使頁面沒法渲染，關鍵是不報錯
   
   
   解決方法（我的想法）：前端或者後端對不支持的標籤進行過濾，小程序能夠添加一個過濾器，對返回的字符串進行檢驗（有一個大膽的想法，能夠寫一個loader插件專門來過濾這些文章）
9. 異步接口返回到渲染有時間延遲，能夠加一箇中間的過分頁面
10. 關於自定義導航欄沒有返回按鈕
    視覺但願的效果是這樣，也就是頁面的元素頂到導航欄的下邊，同時導航欄是透明的，這樣頁面看起來更漂亮一些
    
    
    百度小程序提供了自定義導航欄的功能，經過配置頁面的 XXX.json的 navigationStyle屬性爲custom,開啓自定義模式
    

    
    開啓後發現導航欄是透明瞭，視頻頁頂頭了，可是沒有了返回按鈕（使人窒息），因此只能本身寫一個。
    懸浮在video等原生組件的上層只能使用cover-view或者cover-image標籤
    這些都不是多麼複雜，我把自定義的導航欄寫爲一個公共組件，fixed定位到頁面的左上角，使人窒息的事情又出現了，在cover-view上綁定的bindtap的點擊事件不生效
    以前在其餘的地方也使用過這個標籤，綁定事件也沒問題，問題只可能出如今樣式上,調試了css代碼後，發現定位只要移除導航欄區域點擊事件就能夠生效，百度開發者工具的模擬器上確實是這個樣子。
    以後又真機調試後發現能夠，即便在導航欄區域點擊也是生效的
    總結：這應該算是開發者工具模擬器的一個bug，若是真發現不了代碼的問題，建議真機調試 ，開發者工具的模擬並不徹底可信

     

11. 小程序跳轉小程序
    這算是小程序向站外跳轉的第二種，也就是除了跳第三方H5頁面，此次是跳其餘的小程序，針對跳其餘的小程序，百度小程序給了本身的api
    
    同時也有返回上一個小程序的api
    
    具體的寫法，是在util的工具類中封裝了一個公共的方法，方便全部的地方調用
    

13. 自定義導航欄+自定義返回按鈕+video原生組件 在ios和安卓下的不一樣表現

    視覺是須要視頻類的頂頭，因此須要設置當前頁的nav的屬性爲custom

    可是新的問題又來了，設置爲custom後須要自定義返回按鈕，並且這個按鈕還必需要加在video組件上邊，因此只能在video組件中使用cover-view

    在真機測試前都是正常的，模擬器也是正常的顯示，可是實際機器測試時發現 ios能夠正常顯示，而且能夠正常返回，可是在安卓上，進入頁面後，左上角的返回按鈕會逐漸消失，至關因而被視頻組件遮擋了

    還有就是 在安卓下 視頻全屏播放，返回按鈕就會出現，直接從全屏返回會直接返回首頁，而不是返回當前列表頁面，點擊自帶的返回按鈕返回到列表，安卓下的返回按鈕又出現了，而且能夠正常點擊。

    我的猜想，1是cover+view+自定義導航欄+原生video標籤致使層級問題，也嘗試調過層級，可是不生效。

    我的猜想，原生組件的層級是1，cover-view的層級可能就是2，可是導航欄區域的層級其實才是全局最高的多是3，而本身加了的cover-view恰好就在這之間，因此失效了

    目前已經提bug給百度小程序開發組

13 仍是rich-text組件，目前總結下遇到的問題

    13.1 返回rich-text沒法識別的標籤 整個頁面中止渲染（這個也只能靠前端發現一個替換一個，好比遇到的section標籤，統一替換成p，可是有些自定義的標籤，好比說一些表情，目前 沒法替換）

    13.2 第三方抓取的標籤不完整，好比缺乏了一個</p>也是沒法渲染的（這個只能發現一篇，下線一篇，目前沒有什麼好的方法）

    13.3 空的標籤是佔位置的，這個前端replace把全部的空的html標籤都切掉