微信小程序插入html代码

对于在微信小程序开发中，插入html代码，有两种做法，具体如下：

1. js文件中

content内容为html代码，使用replace() 方法进行字符的替换，达到预期的效果（不需要改，直接复制即可）。

Page({
/**
* 页面的初始数据
*/
data: {
content:'',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var cOntent= "

美景图

";
var newCOntent= content.replace(/ .replace(/ .replace(/>/g, '>')
.replace(/ /g, ' ')
.replace(/"/g, '\"');
this.setData({
content:newContent
})
},
})

2. wxml文件中

rich-text中，nodes绑定的是html代码。

效果如下：

关于rich-text组件，具体可看官网：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

注意，如下截图：

1. 看第5点，也就是说只能支持部分html标签（具体看官网），如video标签是不支持，会被移除的。

对于rich-text组件，如不能支持video标签，那么使用插件可以实现video标签的解析。

1. 下载：https://github.com/icindy/wxParse

如下，点击下载。

下载解压，将文件夹中的wxParse文件夹复制粘贴到小程序根目录下的utils文件夹下。

如下，wxParse文件夹下的emojis文件夹里都是一些表情包图片，格式为gif。如果不需要，可直接删除。

2. js文件中：js引入和数据绑定

1）在要使用wxParse的页面的js文件头部引入WxParse模块：var WxParse = require(&＃8216;../../utils/wxParse/wxParse.js&＃8217;);

2）数据绑定：WxParse.wxParse(&＃8216;article&＃8217;, &＃8216;html&＃8217;, content, this, 0);其中“article”为绑定名字，名字自定义，使用时用到。

var WxParse = require('../../utils/wxParse/wxParse.js');
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var cOntent= '

美景图

3. wxml文件中：使用