❤
npm
Sign UpSign In

weapp-component-rich-view

1.0.0 • Public • Published

weapp-component-rich-view

NPM version changelog license

微信小程序富文本(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": {
        "weapp-component-rich-view": "weapp-component-rich-view"
    }

  • 使用组件(在页面中使用自定义组件)

    <weapp-component-rich-view></weapp-component-rich-view>

示例

<template>
<view>
    <weapp-component-rich-view contents="{{contents}}" loadHtmlContent="{{loadHtmlContent}}" bindclickbutton="handleClickButton"></weapp-component-rich-view>
</view>
</template>
 
<script>
export default {
    config: {
        usingComponents: {
            'weapp-component-rich-view': 'weapp-component-rich-view'
        }
    },
    data: {
        contents: [{
            "type": "html",
            "content": "<p style='color:red'>test</p>" // 直接放置 HTML 内容
        }, {
            "type": "html",
            "src": "https://domain.com/test.html"      // 引用远程 HTML 文件的路径
        }, {
            "type": "button",
            "content": "打开客服",
            "behavior": "weapp",                       // 开放能力的按钮
            "openType": "contact",                     // 开发能力的类型
            "style": {
                "position": "absolute",
                "top": "848rpx",
                "left": "235rpx",
                "width": "260rpx",
                "height": "50rpx",
                "line-height": "50rpx",
                "background-color": "#FF9800",
                "color": "#fff",
                "font-size": "24rpx"
            }
        }, {
            "type": "button",
            "content": "立即开始",
            "behavior": "custom",                      // 自定义的按钮
            "openType": "test",                        // 自定义按钮的类型
            "style": {
                "position": "absolute",
                "top": "548rpx",
                "left": "235rpx",
                "width": "260rpx",
                "height": "50rpx",
                "line-height": "50rpx",
                "background-color": "#FF9800",
                "color": "#fff",
                "font-size": "24rpx"
            }
        }, {
            "type": "button",
            "content": "跳转页面",
            "behavior": "custom",                      // 自定义的按钮
            "openType": "wx.navigateTo",               // 调用 wx.xxx API
            "options": {                               // 调用的额外参数
                "url": "/pages/path/to?param=1"
            },
            "style": {
                "position": "absolute",
                "top": "448rpx",
                "left": "235rpx",
                "width": "260rpx",
                "height": "50rpx",
                "line-height": "50rpx",
                "background-color": "#FF9800",
                "color": "#fff",
                "font-size": "24rpx"
            }
        }],
        loadHtmlContent: function(src, content) {
            return new Promise(function(resolve, reject) {
                wx.request({
                    url: src,
                    success: function(requestResult) {
                        resolve(requestResult.data);
                    }
                });
            });
        },
    },
    handleClickButton: function(event) {
        var button = event.detail;
        if (button.behavior === 'custom' && button.openType === 'test') {
            console.log('test');
        }
    }
};
</script> 
<style lang="less"></style>

demo

原理

  • 通过 rich-text 来显示 HTML 的内容(传入 HTML 字符串)
    • 亲测 rich-text 的内容在域名白名单体制之外(不受白名单机制的控制), 连 HTTP 都可以!
  • 通过 button 来实现自定义按钮

其他方案

Readme

Keywords

Package Sidebar

Install

npm i weapp-component-rich-view

Repository

github.com/ufologist/weapp-component-rich-view

Homepage

github.com/ufologist/weapp-component-rich-view#readme

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

18.7 kB

Total Files

5

Last publish

Collaborators

  • ufologist
Try on RunKit
Report malware