微信小程序常用的三種解析html方法，你了解多少

言：在實際開發項目中遇到在微信小程序里需要顯示新聞內容，新聞內容是通過接口讀取的服務器中的富文本內容，是html格式的，小程序默認是不支持html格式的內容顯示的，那我們需要顯示html內容的時候，就可以通過以下三種方式來進行數據渲染。

第一種：通過小程序自帶的標簽進行 rich-text 數據渲染

文檔地址：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

使用方法：

1、在page.js中將從接口中獲取的值傳給content

Page({
  data: {
    content:''
  },
  onLoad: function () {
    var that = this;
    wx.request({
        url: '', 
        method: 'POST',
        data: {
            'id':15
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            var content = res.data['content'];//對應富文本編輯器的內容
            that.setData({
            	content:content
            })
        }
    })
  }
})

2、在page.wxml中進行數據輸出

<rich-text nodes="{{content}}" bindtap="tap"></rich-text>

第二種：使用插件wxParse來解析html

使用方法：

1、插件下載地址：https://github.com/icindy/wxParse

2、將下載后的文件夾放到小程序項目的根目錄

3、在需要加載html內容的頁面對應的js文件里引入wxParse

var WxParse = require('../../wxParse/wxParse.js');

4、通過調用WxParse.wxParse方法來設置html內容

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的數據名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體數據(必填)
* 4.target為Page對象,一般為this(必填)
* 5.imagePadding為當圖片自適應是左右的單一padding(默認為0,可選)
*/
Page({
  data: {
  },
  onLoad: function () {
    var that = this;
    wx.request({
        url: '', 
        method: 'POST',
        data: {
            'id':15
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            var article = res.data['content'];
            WxParse.wxParse('article', 'html', article, that,5);
        }
    })
  }
})

5、在頁面中引用模板

<!--放在底部-->
<import src="../../wxParse/wxParse.wxml"/>
  
 <!--放在數據需要渲染的地方-->
<view class="wxParse">
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
 </view>

6、這樣就配置完了，具體的樣式是可以通過css去自定義調整的

第三種，通過webview來加載外部網頁

如果說直接使用文章詳情頁面，強烈建議直接加載外部網頁，這樣使用起來是去合理化的。

文檔地址：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

使用方法：

1、在所需頁面加載web-view標簽，傳入外部訪問的路徑就可以了

<web-view bindload="finish" src="http://www.baidu.com"></web-view>

需要注意的是個人版的微信小程序沒有這個功能，企業版的需要在控制臺中先配置相關的業務域名。

總結

以上就是小程序開發過程中對富文本編輯器中html渲染的三種常用方法。

我是小程序軟件開發，每天分享開發過程中遇到的知識點，如果對你有幫助的話，幫忙點個贊再走唄，非常感謝。

《完》

往期文章分享：

php常用的富文本編輯器，ueditor和kindeditor

個搭建過程大約十分鐘就發布上線了，雖然，一直存在一些問題，“頁面iframe不支持引用非業務域名”，這是我網站形式造成的。

如果你是企業站或比較純粹的博客站等，沒有外部鏈接，那么，這個方法很適用。

那么，直接步入正題吧。

看看怎么用10分鐘就把自己網站轉換成微信小程序。

操作步驟：

1、申請SSL證書，轉https（不會的看下文，如果你用的是寶塔更簡單，此文未介紹）。

網站防篡改全站http轉https完整流程

https://mp.weixin.qq.com/s?__biz=MzU4ODM5MDkyMg==&mid=2247484609&idx=1&sn=6f1baa81167e08037508a62b05e47764&chksm=fddc33a4caabbab214150f70ea1400317e4dbb4c9864dc1c2735c863cafe25b1e931cecdcd15&scene=21#wechat_redirect

2、申請注冊小程序賬號（此方法，個人注冊小程序不行，必須企業或組織的）

不會注冊的，注冊流程看這里。

https://jingyan.baidu.com/article/295430f13472ee4d7e0050e4.html

個人版后臺無此“業務域名”配置功能

在綁定“業務域名”時需上傳文件驗證，所以登錄好服務器后臺或ftp工具。

3、小程序后臺配置好“服務器域名”及“業務域名”

4、下載微信開發者工具，找不到的看這里

https://jingyan.baidu.com/article/54b6b9c0d7ec6c6c583b47e4.html

5、安裝好之后，打開微信開發者工具，選擇小程序項目。點擊管理項目+號增加小程序。

6、桌面隨便新建個文件夾，小程序開發工具，選擇空白文件夾，并輸入AppID，不要使用云服務，點擊新建即可。

7、打開app.json文件，修改第9行“ ”內文字為自己小程序名稱，之后保存。

8、打開路徑/pages/index/index.wxml文件，清空內容。

9、將下面代碼粘貼進去，修改為自己的域名，之后保存，可見左側網站已顯示出來。

<web-view src="https://www.zhibushi.com"></web-view>

10、之后直接點擊上傳即可。

ps:上傳之前可以先真機調試檢查下是否有如我這樣的問題。

11、最后，回到公眾號服務平臺提交審核即可，審核通過即可提交上線。

前面也說了，我的是因為網站性質的問題，所以會不斷跳出“不支持非業務域名”，一般的企業站等不會有外部域名，也就不會出現這種問題，當然，換了友鏈之類也會彈出提醒。

當時做這個小程序，也是我第一次接觸小程序。本來只是拿來練手，只是希望能把網站轉成小程序，也能方便搜索訪問下載資源，但每打開一個頁面就要關閉下提醒的確有點煩。

后續也做過幾個不同類型的小程序，更熟悉了小程序的搭建，但上面的問題卻一直沒找到方法解決。除非網站重建或者重建小程序，但那樣就不是我當建站的本意了。

這篇純教程，沒啥資源推薦，最近又補充了點新資源，需要就老地方自取！！

紹

今天為大家帶來的是一個用于在微信小程序中渲染html和Markdown的富文本組件，而且支持代碼高亮，它就是html2wxml！

Github

https://github.com/qwqoffice/html2wxml

三種版本介紹

插件版本準備

1、打開小程序管理后臺，轉到設置 - 第三方服務，點擊添加插件

2、搜索 html2wxml ，選中并添加

3、添加成功

4、回到小程序開發環境，編輯 app.json ，添加插件聲明，最新版為 1.3.0

"plugins": {
 	"htmltowxml": {
 		"version": "1.3.0",
 		"provider": "wxa51b9c855ae38f3c"
 	}
 }

5、在對應頁面的 json 文件，比如首頁 index.json，添加使用插件組件的聲明

 "usingComponents": {
 	"htmltowxml": "plugin://htmltowxml/view"
 }

組件版本準備

1、復制整個 html2wxml-component 文件夾到小程序目錄

2、在對應頁面的 json 文件，比如首頁 index.json，添加使用組件的聲明，注意路徑

 "usingComponents": {
 	"htmltowxml": "path/to/html2wxml-component/html2wxml"
 }

模板版本準備

1、復制整個 html2wxml-template 文件夾到小程序目錄

2、在對應頁面的 js 文件，比如首頁 index.js，添加引用聲明，并使用html2wxml方法進行數據綁定，注意路徑，參數分別為綁定的數據名、已解析的富文本數據、當前頁面對象和容器與屏幕邊緣的單邊的距離

 var html2wxml = require('path/to/html2wxml-template/html2wxml.js');
 html2wxml.html2wxml('article', res.data, this, 5);

3、在對應頁面的 wxml 文件，比如首頁 index.wxml，添加引用模板的聲明，并使用模板，注意路徑和綁定的數據名

 <import src="path/to/html2wxml-template/html2wxml.wxml" />
 <template is="html2wxml" data="{{wxmlData:article}}" />

4、在對應頁面的 wxss 文件，比如首頁 index.wxss或app.wxss，引入樣式表和你喜歡的代碼高亮樣式，注意路徑

@import "path/to/html2wxml-template/html2wxml.wxss";
@import "path/to/html2wxml-template/highlight-styles/darcula.wxss";

組件使用

示例

// 將Page中的content數據作為HTML格式渲染
<htmltowxml text="{{content}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用代碼高亮功能
<htmltowxml text="{{content}}" highlight="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用代碼行號顯示功能
<htmltowxml text="{{content}}" linenums="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 代碼高亮樣式改為tomorrow
<htmltowxml text="{{content}}" highlightStyle="tomorrow" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 設置代碼高亮檢測語言 (最多6個，自行搭建服務不受限制)
<htmltowxml text="{{content}}" highlightLanguages="{{['html','js','php','css','cpp','ruby']}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 對HTML數據中的img標簽的相對路徑補全域名
<htmltowxml text="{{content}}" imghost="https://www.qwqoffice.com" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用加載中動畫
<htmltowxml text="{{content}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 將Page中的text數據作為Markdown格式渲染
<htmltowxml text="{{text}}" type="md" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 直接渲染Page中的已經過解析的obj數據
<htmltowxml json="{{obj}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

服務端用法

富文本的解析默認是由QwqOffice完成，存在不穩定因素，你可以自行搭建解析服務或將解析組件引入到你的項目中。

1、復制整個 html2wxml-php 文件夾到項目目錄中

2、引入類文件class.ToWXML.php

 include( 'path/to/html2wxml-php/class.ToWXML.php' );

3、實例化html2wxml，進行解析并輸出，示例：

 $towxml = new ToWXML();
 $json = $towxml->towxml( '<h1>H1標題</h1>', array(
 	'type' => 'html',
 	'highlight' => true,
 	'linenums' => true,
 	'imghost' => null,
 	'encode' => false,
 	'highlight_languages' => array( 'html', 'js', 'php', 'css' )
 ) );
 echo json_encode( $json, JSON_UNESCAPED_UNICODE );

可用的代碼高亮語言

在線咨詢

上一篇：分享一個外貿老鳥開發百萬訂單的方法
下一篇：html（網頁）運行本地程序（exe文件）的方法與源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

微信小程序常用的三種解析html方法，你了解多少

第一種：通過小程序自帶的標簽進行 rich-text 數據渲染

第二種：使用插件wxParse來解析html

第三種，通過webview來加載外部網頁

總結

紹

Github

三種版本介紹

組件使用

可用的代碼高亮語言

您的項目需求