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

本文轉載自查看原文 2019-05-31 15:48 890

文章列表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"') })
關於跳轉外部頁面的處理

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

由於小程序所有的跳轉都是通過navigateTo這個對象來進行跳轉的，但是這個對象只能跳轉小程序內的page頁面或者其他的百度小程序

所以解決方案是，寫一個page做一個web-view的承載頁

而在調用頁，使用一個bindtap的方法執行page的切換，同時把要跳轉的url傳遞過去
還是web-view的問題，直接寫src的http鏈接是可以帶參數的，但是通過調用中間頁url的參數會報錯,原因是傳參會解析url 問號后邊的參數，解決方法是先encodeURLComponent 一下
關於外部字體的引入
視覺中有關於特殊字體的引入

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

導致頁面無法渲染，關鍵是不報錯

解決方法（個人想法）：前端或者后端對不支持的標簽進行過濾，小程序可以添加一個過濾器，對返回的字符串進行檢驗（有一個大膽的想法，可以寫一個loader插件專門來過濾這些文章）
異步接口返回到渲染有時間延遲，可以加一個中間的過度頁面
關於自定義導航欄沒有返回按鈕
視覺希望的效果是這樣，也就是頁面的元素頂到導航欄的下邊，同時導航欄是透明的，這樣頁面看起來更漂亮一些

百度小程序提供了自定義導航欄的功能，通過配置頁面的 XXX.json的 navigationStyle屬性為custom,開啟自定義模式

開啟后發現導航欄是透明了，視頻頁頂頭了，但是沒有了返回按鈕（令人窒息），所以只能自己寫一個。
懸浮在video等原生組件的上層只能使用cover-view或者cover-image標簽
這些都不是多么復雜，我把自定義的導航欄寫為一個公共組件，fixed定位到頁面的左上角，令人窒息的事情又出現了，在cover-view上綁定的bindtap的點擊事件不生效
之前在其他的地方也使用過這個標簽，綁定事件也沒問題，問題只可能出現在樣式上,調試了css代碼后，發現定位只要移除導航欄區域點擊事件就可以生效，百度開發者工具的模擬器上確實是這個樣子。
之后又真機調試后發現可以，即使在導航欄區域點擊也是生效的
總結：這應該算是開發者工具模擬器的一個bug，如果真發現不了代碼的問題，建議真機調試，開發者工具的模擬並不完全可信
小程序跳轉小程序
這算是小程序向站外跳轉的第二種，也就是除了跳第三方H5頁面，這次是跳其他的小程序，針對跳其他的小程序，百度小程序給了自己的api

同時也有返回上一個小程序的api

具體的寫法，是在util的工具類中封裝了一個公共的方法，方便所有的地方調用