wepy组件化开发之html转换组件

- 前言

相信大家在小程序开发时都会遇到需要将html代码转换为在小程序中可以展示的代码的情况，例如：我们在管理后台中通过富文本编辑器中录入公告，需要在小程序中动态展示这些公告，大家都知道，大部分的富文本编辑器编辑的结果要么是html格式的，要么就是md格式的，在我们的小程序中是没办法解析的。故此，我们需要用到一个控件【wxParse】,然而在使用这个控件的时候任然存在着一些不方便的地方，如需要使用wxParse的时候，需要在wxml,js,wxss中都分别引入对应文件，需要跟新内容时每次都需调用一次对应方法转化：

WxParse.wxParse("goodsDesc" , "html", "<p style='color:red;'>示例代码</p>", this,0);

并且需要在wxml中使用模板：

<template is="wxParse" data="{{wxParseData:goodsDesc.nodes}}"></template>

比较麻烦，不太直观。

综上所述，本人结合wxParse进行二次开发，封装了一个转化html的公共控件，以方便开发者快速转化html代码。

- 实现细节

1. 页面部分

<template>
    <import src="../plugins/wxParse/wxParse.wxml"/>

    <block wx:for="{{htmlParserTpl.nodes}}" wx:key="{{index}}">
        <template is="wxParse0" data="{{item}}"/>
    </block>

</template>

以上为页面部分代码。首先，需要引入wxParse.wxml文件，然后便是将给定数据转换为小程序元素。

2. 脚本

<script>
    import wepy from 'wepy';
    //import abc from 'abc';
    import config from '../common/config';
    import utils from '../common/util';
    import WxParse from '../plugins/wxParse/wxParse';

    export default class HTMLParser extends wepy.component {

        props = {
            parserName: {
                type:String,
                default: "htmlParserName"
            },
            parserContent:{
                type: String,
                default: "<p style='font-size: 32rpx; padding: 30rpx 0; text-align: center;'>没有任何内容</p>"
            },
            parserType:{
                type:String,
                default: "html"
            },
            parserPadding:{
                type: Number,
                default: 0
            }
        };

        data = {
            htmlParserTpl: {}
        };
        events = {
            'htmlParser-broadcast': ($event, ...args) => {
            },
        };

        methods = {
            htmlParserNotice(){

                this.htmlParse();

            }
        };

        async onLoad(){
            this.htmlParse();
        };

        wxParseImgLoad(image){
            let imgInfo = image.detail;

        };

        htmlParse(){
            /**
             * WxParse.wxParse(bindName , type, data, target,imagePadding)
             * 1.bindName绑定的数据名(必填)
             * 2.type可以为html或者md(必填)
             * 3.data为传入的具体数据(必填)
             * 4.target为Page对象,一般为this(必填)
             * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
             */

            try{

                WxParse.wxParse(this.parserName , this.parserType, this.parserContent || this.props.parserContent.default, this,this.parserPadding);

                this.htmlParserTpl = this[this.parserName];
            }catch (e){
                console.warn("kinerHtmlParser:","没有任何内容需要转换
",e);
            }
        }

    }
</script>

以上为组件的脚本部分。主要是通过动态属性的方式，将我们必要的参数从引入页面传递到组件中，并对外提供转换数据改变通知方法，当引用页面传递的被转换数据改变时，仅需调用此方法便可更新组件中的内容。

3. 样式

<style lang="less">
    @import "../plugins/wxParse/wxParse.wxss";

    .wxParse-img {
        margin: 0 auto;
        width: 100%;
        min-height: 200rpx;
        display: block;
        background-color: transparent;
    }
</style>

以上为公共组件中对样式的公共修饰，首先，在组件中引入wxParse.wss文件，其次是对页面图片的修饰，可根据具体需求调整

- 引用示例

<style lang="less">
    .tip{
        background-color: #FFFFFF;
        padding: 30rpx;
        margin: 20rpx;
    }
</style>
<template>

    <view class="container">

        <view class="tip">
            <htmlParser :parserName="name1" :parserContent.sync="content1"/>
        </view>
        <veiw class="tip">

            <htmlParser2 :parserName="name2" :parserContent.sync="content2"/>
        </veiw>

        <veiw class="tip">

            <htmlParser3 :parserName="name3" :parserContent.sync="content3"/>
        </veiw>


    </view>

</template>

<script>
    import wepy from 'wepy';

    import htmlParser from '../components/htmlParser';


    export default class Index extends wepy.page {

        config = {
            "navigationBarTitleText": "网页转换",
        };
        components = {
            htmlParser: htmlParser,
            htmlParser2: htmlParser,
            htmlParser3: htmlParser
        };

        mixins = [];

        data = {
            name1: "myHtmlParserKiner1",
            name2: "myHtmlParserKiner2",
            name3: "myHtmlParserKiner3",
            content1: "<text style='color: red;'>新1</text>",
            content2: "<text style='color: red;'>新2</text>",
            content3: ""
        };
        methods = {
        };

        events = {
        };
        async onLoad() {

            var self = this;
            wx.request({
                url: "",
                method: "POST",
                data:{
                }
            }).then((data)=>{
                self.content1 = data.data.goodsDes;

                //注意，在此处修改了content2之后，需要手动调用$apply()方法更新数据
                self.$apply();
                //调用通知接口通知组件更新数据
                this.$invoke('htmlParser', 'htmlParserNotice');
            });

            wx.request({
                url: "访问接口地址",
                method: "POST",
                data:{
                }
            }).then((data)=>{
                self.content2 = "<text style='color: red;'>新</text>"+data.data.goodsDes;
                //注意，在此处修改了content2之后，需要手动调用$apply()方法更新数据
                self.$apply();
                //调用通知接口通知组件更新数据
                this.$invoke('htmlParser2', 'htmlParserNotice');
            });

            wx.request({
                url: "访问接口地址",
                method: "POST",
                data:{
                }
            }).then((data)=>{
                self.content3 = data.data.goodsDes;
                //注意，在此处修改了content2之后，需要手动调用$apply()方法更新数据
                self.$apply();
                //调用通知接口通知组件更新数据
                this.$invoke('htmlParser3', 'htmlParserNotice');
            });



        };

    }
</script>

注意，在动态绑定属性是需要使用

:parserContent.sync="content2"

这种方式绑定，否则因为数据时通过接口异步返回会导致获取不到最新数据。

- 效果展示