weapp-component-rich-view
微信小程序富文本(HTML)渲染组件
- 适用于公众号文章类似的图文内容, 让运营人员可以灵活编辑
- 可自定义按钮的行为, 例如触发分享, 跳转页面等等
组件属性
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
contents |
Array<Content> |
内容 | |
loadHtmlContent |
Function(src, Content):Promise<data> |
加载 HTML 内容的方法, 当配置了 content.src 时需设置 |
|
defaultHtmlContent |
String |
<p style="text-align:center">正在加载中...</p> |
默认的 HTML 内容 |
emptyHtmlContent |
String |
<p style="text-align:center">暂无内容</p> |
空内容提示 |
errorHtmlContent |
String |
<p style="text-align:center">加载失败:(</p> |
加载失败的提示 |
Content 对象
Content 基础属性, 即内容的公共属性
type
: 内容类型 -{string}
- 目前支持
html
和button
- 目前支持
content
: 内容 -{string}
style
: CSS 样式 -{object}
hidden
: 是否隐藏 -{boolean}
html
类型的内容的特有属性
content
: 可以直接使用content
属性来放置 HTML 的内容, 会优先使用src
: 或者引用远程 HTML 文件的路径 -{string}
optimizeImgTag
: 是否优化 HTML 内容中的img
标签, 默认为true
-{boolean}
optimizeSectionTag
: 是否优化 HTML 内容中的section
标签, 默认为true
-{boolean}
button
类型的内容的特有属性
behavior
: 按钮的行为, 需要结合openType
来使用 -{string}
- 取值为
weapp
时使用开放能力的按钮行为 - 取值为
custom
时使用自定义的按钮行为
- 取值为
openType
: 按钮的动作 -{string}
- 对应原生的
open-type
值 - 或者直接调用
wx.xxx
的 API, 例如wx.navigateTo
- 或者其他自定义内容
- 同时会抛出
clickbutton
事件(event.detail=button
)
- 对应原生的
options
: 额外的参数 -{object}
- 在调用
wx.xxx
方法时可能需要的额外参数, 例如: 配置openType
为wx.navigateTo
时, 需要配置options: {url: '/pages/path/to?param=1'}
, 具体的选项与微信小程序的 API 文档保持一致 - 或抛出事件时外部可能需要的额外参数
- 在调用
使用方法
PS: 目前适用于 Min 来构建的小程序项目接入, 对于原生小程序项目或者其他构建方式, 请手工 copy 代码 :(
-
安装组件
npm install weapp-component-rich-view --save
-
引用组件(在页面中引用自定义组件)
"usingComponents": -
使用组件(在页面中使用自定义组件)
示例
原理
- 通过
rich-text
来显示HTML
的内容(传入 HTML 字符串)- 亲测 rich-text 的内容在域名白名单体制之外(不受白名单机制的控制), 连 HTTP 都可以!
- 通过
button
来实现自定义按钮
其他方案
- https://github.com/jin-yufeng/Parser 解析 HTML 内容, 支持表格、图片、视频等多种类型
- https://github.com/TooBug/wemark Markdown渲染库
- https://github.com/qwqoffice/html2wxml HTML和Markdown格式的富文本渲染组件
- https://github.com/icindy/wxParse 富文本解析自定义组件,支持HTML及markdown解析
- https://github.com/pacochan/wxParser HTML 富文本解析
- https://github.com/zhanziyang/wxmlify 显示富文本编辑器生成的HTML
- https://github.com/sbfkcel/towxml 将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库
- https://github.com/tans/we-rich Parse HTML into Weapp rich-text Nodes
- https://github.com/andrejewski/himalaya Parse HTML into JSON