wepy-htmltowxml
v0.0.1 html markdown weapp weixin wxparse-html-markdown to-wxml
微信小程序·WxParse富文本解析插件二次修改、wepy支持
说明
此插件二次封装在微信小程序club
社区发现的,故将其代码梳理成to-wxml.wpy
文件。
修改部分:
- style样式格式化处理
- 对wxParse增加clearClass、clearStyle特性(清除class、行内样式)
- wxParse调整部分使用es6/7特性编写
使用
安装
npm i -S to-wxml
引入组件
// index.wpy page
<template>
<toWxml :content="content"></toWxml>
</template>
<script>
import wepy from 'wepy'
import ToWxml from '../components/to-wxml'
export default class Index extends wepy.page {
components = {
toWxml: ToWxml
}
data = {
content: '<p>GitHub repo 地址:<a href="https://github.com/alsotang/node-lessons">https://github.com/alsotang/node-lessons</a></p><img src="//dn-cnode.qbox.me/Fn4rCeRCAiZqBbOvJUj1in10w16A" alt="error.jpg">', // 模板内容
}
}
</script>
参数
属性 | 必填 | 默认值 | 备注 |
---|---|---|---|
name | 否 | toWxmlName | 绑定名称 |
data | 否 | <p class="no-content">没有任何内容</p> |
模板内容 |
imgPadding | 否 | 0 | 为当图片自适应是左右的单一padding |
mode | 否 | html | 可以为html或者md |
clearStyle | 否 | false | 清除行内样式 |
clearClass | 否 | false | 清除class |
自定义参数使用方式
// index.wpy page
<template>
<toWxml :name="name" :content.sync="content" :imgPadding="imgPadding" :mode="mode" :clearStyle="clearStyle" :clearClass="clearClass"></toWxml>
</template>
<script>
import wepy from 'wepy'
import ToWxml from '../components/to-wxml'
export default class Index extends wepy.page {
components = {
toWxml: ToWxml
}
data = {
name: 'myParse', // 绑定名称
content: '', // 模板内容
imgPadding: 10, // 为当图片自适应是左右的单一padding
mode: 'html', // 可以为html或者md
clearStyle: true, // 清除行内样式
clearClass: true // 清除class
}
async onLoad () {
const res = await wepy.request({
url: `requestApi`
})
this.content = res.data
// 异步更新数据 遵循wepy数据绑定原理,需执行```this.$apply()```更新数据
this.$apply()
// 通知towxml组件更新数据
this.$invoke('toWxml', 'toParserNotice')
}
}
</script>
注意
- a、img标签的点击事件与原wxParse使用方法一致
- 若属性由异步获取, 父组件利用props传值时切记使用
.sync
修饰符
参考
wepy组件化开发之html转换组件: http://www.wxappclub.com/topic/961
wxParse-微信小程序富文本解析自定义组件: https://github.com/icindy/wxParse