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標籤都切掉

相關推薦