在內容類型的小程序中，通常使用富文本編輯器添加內容，如summernote等。

內容存儲在數據庫中，類似余下面這與的html+css的混合代碼

<p><img src="https://img-blog.csdnimg.cn/img_convert/2f5107a290cc223731167253c953c1d1.png" style="width: 50%;"></p><p>近日，據以色列財經媒體 Globes 報道，由巴塞羅那球星梅西代言的 Finney 區塊鏈手機（以下簡稱 Finney）遭遇了前所未有的經濟危機，由于這款區塊鏈手機銷量遠遠未達預期標準，其制造商以色列通訊技術公司 Sirin Labs 不得已開始了大規模裁員，裁員規模高達25%。</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p>號稱全球第一款區塊鏈手機</p><p><br></p><p><br></p><p><br></p><p>“區塊鏈手機”的概念是由 Sirin Labs 于2017年9月首次提出。</p><p><br></p>

在小程序中，使用view 等容器渲染這些代碼時，會原樣展示，原因在于小程序并不支持這些html標簽。

這就需要將 html 標簽內容轉換為 wxml 標簽內容，如將html 中的 img 轉換成 小程序中的 image。

wxPare 就是干這個的！

使用步驟

第一步：下載

wxParse 下載

下載完成，解壓壓縮文件，目錄如下

將 wxParse 文件夾拷貝到小程序中，可以放到根目錄，也可以放到其他目錄，我放到了 utils 目錄下

第二步：引入文件

要想使用此插件，需要分別在小程序頁面的視圖、樣式和邏輯文件中引入相關文件

在 xx.wxss 中引入樣式文件

在 xx.js 中文件中引入js文件

在 xx.ml 中引入如下視圖文件

第三步：編寫代碼替換

下面就是將html 代碼替換成 wxml 代碼

在解釋這行代碼 之前，首先看一下我 article 變量的結構

其中，content 鍵中存儲了 html 結構代碼，我們的目的就是將其替換成 wxml

下面再解釋下面這行代碼中參數的意義

參數1：替換之后的變量名稱，這個變量我們會在視圖中使用，變量名稱自定義

參數2：表示源代碼為html格式

參數3：通過上面article 變量結構截圖，我們知道，article.content 就是要替換的存儲著 html 代碼的字段名稱

參數4：當前頁面的上下文，如果沒有在回調函數中，可以使用 this

參數5：imagePadding為當圖片自適應是左右的單一padding(默認為0,可選)

最后一步：修改視圖代碼

最后將如下代碼放到原本顯示 article.content? 變量的地方

注意：標注的變量名稱“content”就是上面方法中的第一個參數的名稱

?

總結

以上是生活随笔為你收集整理的小程序下wxParse 渲染html代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。