小程式 rich-text 不支援 section 標籤的情況
★. 背景
- 今天在檢視文章顯示效果時,發現部分樣式的文字沒有顯示
- 排查原因發現:文案人員喜歡複製文章,對於其中包含
<section>
標籤的文字,小程式的<rich-text>
標籤現在還不支援解析,所以想找一種簡單的解決方法
編寫時間
:2019-01-11
閱讀引申
:能否讓 rich-text 元件支援 section 標籤
★. 解決方案
- 畢竟能用程式碼解決的問題,最好就自己動手,以保證使用者使用的友好性
所以想到的最簡單的方法就是,匹配替換
<section>
標籤為<div>
,目前來看不影響文章佈局顯示
article_content = article_content.replace(/<section/g, '<div').replace(/\/section>/g, '/div>');
- 具體的使用方法,可以參看文章:【微信小程式 rich-text 富文字的解析顯示】
補充
- 建議 微信小程式官方儘快完善
<rich-text>
對html
標籤的對應解析支援
相關推薦
小程式 rich-text 不支援 section 標籤的情況
★. 背景 今天在檢視文章顯示效果時,發現部分樣式的文字沒有顯示 排查原因發現:文案人員喜歡複製文章,對於其中包含 <section> 標籤的文字,小程式的 <rich-text> 標籤現在還不支援解析,所以想找一種簡單的解決方法
小程式backgroundAudioManager.play() 不支援m4a音樂格式
const backgroundAudioManager = wx.getBackgroundAudioManager(); backgroundAudioManager.title = '朋友-譚詠麟'; backgroundAudioManager.src ='https://m10
微信小程式rich-text富文字 圖片自適應寬度
第一種方法:接口裡給img標籤加樣式(PHP) $info['contents'] = str_replace("<img ", "<img style='max-width:100%;height:auto;'", $info['contents']); 第二種方法:小程
[微信小程式] rich-text富文字
rich-text是一個新增的微信小程式外掛,從基礎庫1.4.0開始,低版本需要做相容處理 nodes屬性可為Array和String型別,但推薦使用Array.由於String型別最終也會轉為Arr
小程式rich-text裡多張圖片自適應
<rich-text nodes="{{detail_tb}}"> </rich-text>這個是wxml裡<rich-text>富文字這個寫在js裡:var _that =this;_that.setData({ det
mpvue微信小程式之間的跳轉navigator標籤的坑 ,接收不到extra-data傳遞的物件
老方法即將廢棄,在這裡就不多說了,在mpvue裡這個方法其實是有坑的 navigator標籤官方文件,詳細介紹去這裡看 A小程式 <navigator target="miniProgram" open-type="navigate" app-i
小程式中text標籤之坑
在微信小程式中有一個標籤是<text>它相當於平常開發中用到的<span>標籤,是一個行內元素不過在小程式中<text>有一個讓人感覺很坑的地方就是<text>標籤不能換行寫,一旦換行了,其中的內容也會換行顯示<text&
Okam(奧卡姆):小程式開發框架,支援百度小程式、微信小程式、支付寶小程式
Okam(奧卡姆):小程式開發框架,支援百度小程式、微信小程式、支付寶小程式 Okam 是什麼 `Okam` 一個面向小程式開發的開發框架,開發體驗類 `Vue`。詳情 Okam 對各小程式的支援情況 支援 百度小程式 支援 微信小程式 支援 支付寶小程式 Okam 提供
微信小程式 三元運算子不起作用 | 出bug |解決方法
今天在寫微信小程式時,被坑到了, <!--.wxml-> <view class="row-in {{to_top ? 'to-top' : 'to-bottom'}}"> ... </view> 本意是想做一個簡單的動態頁面的,在使用
小程式修改檔案不自動更新
使用mpvue寫小程式,正常情況下npm run dev後修改檔案並儲存,會自動編譯並在微信開發者工具中熱過載。但有時候會失效,此時按如下步驟解決: 檢視微信開發者工具中設定-編輯設定-編輯-儲存時自動編譯小程式 是否勾選。 清空dist資料夾。 在
微信小程式:text文字的展開與收起
間隔了幾個月,又被拉來做小程式了~~~ 頁面中有一段說明文字,要求預設收起,只展示3行;點選按鈕可以檢視完整內容。看了下微信文件,沒發現有控制元件滿足要求,於是決定通過js實現 先看看佈局檔案,關鍵在與{{ellipsis?‘ellipsis’:‘unellipsis
小程式首頁不顯示tabbar,而非首頁顯示tabbar的方法
很多新手在寫tabBar的時候會發現明明自己按照微信開發文件的示例寫的tabBar,但是卻不出自己想要的效果,這個我剛開始寫小程式的時候也遇到了同樣的問題,現在給大家講講我的解決方案 一般我們會在在專案的app.json使用以下程式碼,卻沒有如期望那樣在螢幕底部出現TabBar。&nb
雲開發小程式端搜尋不到的原因
本以為是小程式端會自動填入openid,導致搜尋時自動按照openid去查 實際上是因為搜尋的格式是字串型別,而資料庫中是數字型別才沒查到 還有就是檢視雲端資料庫許可權是否設定正確。 小程式端查詢不必要用雲函式。 資料庫的記錄中是否擁有appid,與小程式端能否查到無關,與許可權設定
解決“微信小程式disabled屬性不生效”的問題!
微信小程式中帶disabled屬性的表單元件有(點選可以進入官方文件): button,checkbox,input,picker,radio,slider,switch,textarea 如果是固定禁用元件的話,直接放上disabled就好,簡單粗暴,如: <!
微信小程序rich-text 文本首行縮進和圖片居中
問題 表示 log 字符串 字符 str ons auto 標簽 微信小程序開發使用rich-text組件渲染html格式的代碼,常常因為不能自定義css導致文本不能縮進,以及圖片不能居中等問題,這裏可以考慮使用js的replace方法,替換字符串,然後在渲染的同時加載行內
小程式購物車功能(支援手動輸入數量)以及側邊欄和列表欄聯動的實現
小組剛完成一個小程式專案,第一版正式釋出了,過程中也遇到了很多問題,這裡記錄一下我負責的模組中的購物車功能的實現過程。後期再把其他小夥伴的模組也一併貼上來分析一下,自己也學習一下他們的獨門技能!效果圖如下: 在這裡,計數器、購物籃做成元件用於複用,由於左右聯動的功能
微信小程式:text文字的展開與收起(二)
之前寫過一篇《微信小程式:text文字的展開與收起》,通過css控制最大顯示行數,後來不少人私信問如果不足三行如何自動隱藏“展開/收起”按鈕;我接觸這個時間比較短,也不太熟悉,暫時只能想到改為js控制文字長度來處理。
(微信小程式)onload()載入不到app.globalData全域性變數的值
onLoad()載入不到app.globalData全域性變數的值 app.js globalData: { statusResult:null, } index.js wx.request({ url: 'xxx
小程式開發,不現實使用者的頭像!
1,重點記錄,以為是頭像路徑問題 2,開啟 瀏覽器——無法訪問——證書錯誤!————顯示的是本地其它的證書! 3,怎麼辦! 4,刪除本地這個證書————包括所有層級的頒發者——digicert——encrpy 5,刪除IIS裡面自己安裝的證書 6,重啟電腦————————成功! 這個&n
微信小程式背景圖片不顯示
1.寫在 wxss 中的background-image 不顯示。 2.<navigator url='' style='background-image:url(../../images/bj.png);background-siz