微信小程序常用的三种解析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

三种版本介绍

组件使用

可用的代码高亮语言

您的项目需求