微信小程序插入HTML

最新推荐文章于 2024-04-17 10:55:44 发布

原创最新推荐文章于 2024-04-17 10:55:44 发布 · 7.6k 阅读

9 ·

CC 4.0 BY-SA版权

微信小程序篇专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在微信小程序中使用wxParse插件实现HTML富文本的解析与展示，包括插件安装、配置步骤及实际应用效果。

微信小程序页面插入HTML富文本

一首先下载插件包:wxParse 如下图

二在要插入的页面引入包

1.1 js配置如下

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

success: function(result) {
    var article =result.attributes.html;
   //例 article为后台返回的HTML代码
   // 把富文本插入到指定的容器中--转wxml
    WxParse.wxParse('article', 'html', article, that, 5);
},
error: function(object, error) {

}

1.2.wxml 如下

<import src="../../wxParse/wxParse.wxml"/>
<view class="">
 <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

1.3 wxss如下

@import "../../wxParse/wxParse.wxss";

三效果如下(这是一段HTML代码)

<h1>
我是H1标签
</h1>
<p>
我是一段文字
</p>
<p>
<br />
</p>
<p>
<span style="color:#E53333;">我是红色的文字</span>
</p>

***显示为下图

补充:

     WxParse.wxParse('article', 'html', article, that, 5);

* 3. 数据绑定
```
var article = '<div>我是HTML代码</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);
```