小程序下wxParse 渲染html代码
在內(nèi)容類(lèi)型的小程序中,通常使用富文本編輯器添加內(nèi)容,如summernote等。
內(nèi)容存儲(chǔ)在數(shù)據(jù)庫(kù)中,類(lèi)似余下面這與的html+css的混合代碼
<p><img src="https://img-blog.csdnimg.cn/img_convert/2f5107a290cc223731167253c953c1d1.png" style="width: 50%;"></p><p>近日,據(jù)以色列財(cái)經(jīng)媒體 Globes 報(bào)道,由巴塞羅那球星梅西代言的 Finney 區(qū)塊鏈?zhǔn)謾C(jī)(以下簡(jiǎn)稱(chēng) Finney)遭遇了前所未有的經(jīng)濟(jì)危機(jī),由于這款區(qū)塊鏈?zhǔn)謾C(jī)銷(xiāo)量遠(yuǎn)遠(yuǎn)未達(dá)預(yù)期標(biāo)準(zhǔn),其制造商以色列通訊技術(shù)公司 Sirin Labs 不得已開(kāi)始了大規(guī)模裁員,裁員規(guī)模高達(dá)25%。</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p>號(hào)稱(chēng)全球第一款區(qū)塊鏈?zhǔn)謾C(jī)</p><p><br></p><p><br></p><p><br></p><p>“區(qū)塊鏈?zhǔn)謾C(jī)”的概念是由 Sirin Labs 于2017年9月首次提出。</p><p><br></p>在小程序中,使用view 等容器渲染這些代碼時(shí),會(huì)原樣展示,原因在于小程序并不支持這些html標(biāo)簽。
這就需要將 html 標(biāo)簽內(nèi)容轉(zhuǎn)換為 wxml 標(biāo)簽內(nèi)容,如將html 中的 img 轉(zhuǎn)換成 小程序中的 image。
wxPare 就是干這個(gè)的!
使用步驟
第一步:下載
wxParse 下載
下載完成,解壓壓縮文件,目錄如下
將 wxParse 文件夾拷貝到小程序中,可以放到根目錄,也可以放到其他目錄,我放到了 utils 目錄下
第二步:引入文件
要想使用此插件,需要分別在小程序頁(yè)面的視圖、樣式和邏輯文件中引入相關(guān)文件
在 xx.wxss 中引入樣式文件
在 xx.js 中文件中引入js文件
在 xx.ml 中引入如下視圖文件
第三步:編寫(xiě)代碼替換
下面就是將html 代碼替換成 wxml 代碼
在解釋這行代碼 之前,首先看一下我 article 變量的結(jié)構(gòu)
其中,content 鍵中存儲(chǔ)了 html 結(jié)構(gòu)代碼,我們的目的就是將其替換成 wxml
下面再解釋下面這行代碼中參數(shù)的意義
參數(shù)1:替換之后的變量名稱(chēng),這個(gè)變量我們會(huì)在視圖中使用,變量名稱(chēng)自定義
參數(shù)2:表示源代碼為html格式
參數(shù)3:通過(guò)上面article 變量結(jié)構(gòu)截圖,我們知道,article.content 就是要替換的存儲(chǔ)著 html 代碼的字段名稱(chēng)
參數(shù)4:當(dāng)前頁(yè)面的上下文,如果沒(méi)有在回調(diào)函數(shù)中,可以使用 this
參數(shù)5:imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選)
最后一步:修改視圖代碼
最后將如下代碼放到原本顯示 article.content? 變量的地方
注意:標(biāo)注的變量名稱(chēng)“content”就是上面方法中的第一個(gè)參數(shù)的名稱(chēng)
?
總結(jié)
以上是生活随笔為你收集整理的小程序下wxParse 渲染html代码的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: latex颜色
- 下一篇: Swift基础学习(二)数据类型