- 前言

相信大家在小程序開發時都會遇到需要將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"

這種方式綁定，否則因為數據時通過接口異步返回會導致獲取不到最新數據。

- 效果展示