在內(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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。