微信小程序渲染富文本HTML标签
小程序 wxParse 大约 1535 字原生rich-text控件
支持标签有限,传入HTML String性能下降。
wxml
<rich-text nodes="{{htmlString}}" bindtap="tap"></rich-text>
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
js
Page({
data: {
htmlString: "<span>Hello World!</span>",
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
第三方wxParse
将HTML标签转换成小程序原生控件。
使用方法
- 拷贝
wxParse
至项目根目录
- wxParse/
-wxParse.js(必须存在)
-html2json.js(必须存在)
-htmlparser.js(必须存在)
-showdown.js(必须存在)
-wxDiscode.js(必须存在)
-wxParse.wxml(必须存在)
-wxParse.wxss(必须存在)
-emojis(可选)
- 在页面的js文件中引入wxParse模块
var WxParse = require('../../wxParse/wxParse.js');
- 在页面的js文件中绑定数据
var htmlString = '<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', htmlString, that, 5);
- 在页面的wxml文件中引入wxParse模板
// 引入模板
<import src="../../wxParse/wxParse.wxml" />
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
- 在页面的wxss文件中引入wxParse.css(也可以在app.wxss)
@import "../../wxParse/wxParse.wxss";
项目地址
https://github.com/icindy/wxParse
参考代码
阅读 815 · 发布于 2020-02-05
————        END        ————
扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Elasticsearch can not run elasticsearch as root阅读 2613
-
Golang在Windows上编译Linux版本阅读 279
-
Linux之定时任务crontab阅读 534
-
Golang JSON的序列化和反序列化阅读 529
-
MySQL查询重复数据阅读 483
-
数据结构:简化平衡二叉树旋转时节点交换的操作阅读 79
-
Spring Boot RabbitMQ Execution of Rabbit message listener failed阅读 524
-
OpenResty历险记阅读 797
-
Spring Boot JPA设置字段unsigned阅读 1287
-
Golang何时使用new和make阅读 222