微信小程序顯示html內容

一、概述

小程序默認是不支持html格式的內容顯示的，網絡上的文章提到：wxParse-微信小程序富文本解析組件，鏈接如下：

https://github.com/icindy/wxParse

現在已經停止維護了

 

官方已經有解決方案：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

 

二、代碼演示

官方給的演示代碼，內容比較多，下面來一個簡單一點的。

test.wxml

<view class="container">
  <block>
    <rich-text nodes="{{htmlSnip}}"></rich-text>
  </block>
</view>

 

test.js

Page({
  data: {
    htmlSnip:"<div class=\"para\" label-module=\"para\">HTML的全稱為超文本標記語言，是一種<a target=\"_blank\" href=\"/item/%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80/5964436\" data-lemmaid=\"5964436\">標記語言</a>。它包括一系列標簽．通過這些標簽可以將網絡上的<a target=\"_blank\" href=\"/item/%E6%96%87%E6%A1%A3/1009768\" data-lemmaid=\"1009768\">文檔</a>格式統一，使分散的<a target=\"_blank\" href=\"/item/Internet/272794\" data-lemmaid=\"272794\">Internet</a>資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性<a target=\"_blank\" href=\"/item/%E6%96%87%E6%9C%AC/5443630\" data-lemmaid=\"5443630\">文本</a>，HTML命令可以說明<a target=\"_blank\" href=\"/item/%E6%96%87%E5%AD%97/612910\" data-lemmaid=\"612910\">文字</a>，<a target=\"_blank\" href=\"/item/%E5%9B%BE%E5%BD%A2/773307\" data-lemmaid=\"773307\">圖形</a>、<a target=\"_blank\" href=\"/item/%E5%8A%A8%E7%94%BB/206564\" data-lemmaid=\"206564\">動畫</a>、<a target=\"_blank\" href=\"/item/%E5%A3%B0%E9%9F%B3/33686\" data-lemmaid=\"33686\">聲音</a>、<a target=\"_blank\" href=\"/item/%E8%A1%A8%E6%A0%BC/3371820\" data-lemmaid=\"3371820\">表格</a>、<a target=\"_blank\" href=\"/item/%E9%93%BE%E6%8E%A5/2665501\" data-lemmaid=\"2665501\">鏈接</a>等。<sup class=\"sup--normal\" data-sup=\"1\" data-ctrmap=\":1,\">\n[1]</sup><a class=\"sup-anchor\" name=\"ref_[1]_692\">&nbsp;</a>\n</div>"
  },
})

注意：這里的htmlSnip是json序列化之后的字符串。

 

說明：只需要用rich-text標簽就可以實現了。

 

效果如下：

 

 

本文參考鏈接：

https://developers.weixin.qq.com/community/develop/doc/ec946412e4516d9fce18fd0ee8abb45a