WePY HTML

简介

「WePY HTML」是基于「WePY」小程序框架所开发的富文本内容组件。与小程序原生的「rich-text」组件相比，本组件能实现更多交互效果；与「wxParse」相比，本组件的解析性能更高、灵活性更强。

（注意：本组件目前仅支持基于「WePY」开发的微信小程序项目）

安装

在小程序项目目录下安装本组件：

npm install wepy-html --save

此外，还要安装一个构建插件：

npm install wepy-plugin-replace --save-dev

调用

首先要在「wepy.config.js」中增加构建步骤（开发和生产都要加）：

{
    plugins: {
        replace: {
            filter: /\.wxml$/,
            config: {
                find: /<\!-- wepyhtml-repeat start -->([\W\w]+?)<\!-- wepyhtml-repeat end -->/,
                replace(match, tpl) {
                    let result = '';
                    let prefix = '';
 
                    tpl = tpl.replace(/\{\{\s*(\$.*?\$)thisIsMe\s*\}\}/, (match, p) => {
                        prefix = p;
                        return '';
                    });
 
                    for (let i = 0; i <= 20; i++) {
                        result += '\n' + tpl
                            .replace('wepyhtml-0', 'wepyhtml-' + i)
                            .replace(/<\!-- next template -->/g, () => {
                                return i === 20 ?
                                    '' :
                                    `<template is="wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ ${ prefix }content: item.children, ${ prefix }imgInsteadOfVideo: ${ prefix }imgInsteadOfVideo }}"></template>`;
                            });
                    }
                    return result;
                }
            }
        }
    }
}

然后就可以在页面（page.wpy）中调用组件了，例如：

<template lang="wxml">
    <wepy-html />
</template>
 
<style>
/* 可以覆盖默认样式 */
.wepyhtml-tag-p {
    margin: 1em 0;
}
</style> 
 
<script>
import WepyHTML from 'wepy-html';
 
export default class Page extends wepy.component {
    components: {
        'wepy-html': WepyHTML
    },
 
    onLoad() {
        // 调用组件接口，传入HTML内容和相关参数
        this.$invoke('wepy-html', 'updateContent', htmlCode, {
            // 是否使用图片代替视频（点击时全屏播放视频），
            // 主要用于防止视频组件遮挡其他元素
            imgInsteadOfVideo: true,
 
            // 可以在此函数中处理链接点击
            onHyperlinkTap(e) {
                // e.href 为链接地址
            },
 
            // 可以在此函数中修改属性
            onNodeCreate(nodeName, attrs) {
                // nodeName 为标签名
                // attrs 为属性集合
            }
        });
    }
}
</script>