如何让小程序解析html

 

后台使用富文本编辑器编辑内容,内容中就会有各种html标签,但小程序有自己的一套wxml,是不支持html的,所以显示就出了问题。

 

但是前提说明,以下的操作会影响一部分性能,如果不是必须,那就不要使用了。

 

我们可以通过wxParse来解析html。

 

1.下载wxParse,下载结束后,只拷贝wxParse文件夹即可

https://github.com/icindy/wxParse

 

2.引入必要的文件(要注意路径)

js

var WxParse = require('你的路径/wxParse/wxParse.js');

css

//在使用的Wxss中引入WxParse.css,有可以在app.wxss,这样全部的页面就都有了
@import "你的路径/wxParse/wxParse.wxss";

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;
//不用放到setData方法中
WxParse.wxParse('article', 'html', article, that, 5);

4.模板调用

// 引入模板
<import src="你的路径/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>


版权声明:如果要转载我的文章,请标明出处,谢谢了。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

打赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注