構建自定義組件

#前言 接上篇，因項目需由H5轉到小程序，故需打造自定義對話框。而這塊需使用到微信小程序的自定義組件功能。

小程序自定義組件

點擊此處，能夠查看小程序自定義組件的api。 從自定義組件的樣例中，咱們瞭解到，其實自定義組件的頁面構成和小程序的正常頁面構成是同樣的；都有本身的wxml、wxss、js、json。惟一須要注意的是js內容不同以及json須要聲明爲組件。

小程序組件文件樣例

###dialog.wxml

<view wx:if="{{visible}}">
    <view class="mask" wx:if="{{mask}}">
    </view>
    <view class="dialog">
        <view>
            <image src="/assets/image/dialog/dialog.png" mode="widthFix"></image>
        </view>
        <view class="message">
            <view class="title">{{title}}</view>
            <view class="text">{{text}}</view>
            <view class="btn">
                <view class="sure {{item.cancle?'cancle':''}}" wx:for="{{buttons}}" data-index="{{index}}" catchtap="btnAction">{{item.title}}</view>
            </view>
        </view>
    </view>
</view>

###dialog.wxss

樣式省略...

###dialog.json

{
    "component": true
}

###dialog.js

Component({
    properties: {
        btnOpts: {
            type: Object,
            observer: '_dialog'
        }
    },
    data: {
        visible: false,//是否顯示
        mask: true, //是否顯示mask
        title: '', //提示標題
        text: '', //提示文字
        buttons: [],//按鈕信息
    },
    methods: {
        btnAction(e) {
            let index = e.currentTarget.dataset.index;
            let button = this.data.buttons[index];
            if (button.eventName !== undefined) {
                let detail = { index: index }
                this.triggerEvent(button.eventName, detail, {})
            }
        },
        _dialog(btnOpts, oldVal) {
            this.setData({
                visible: btnOpts.visible,
                title: btnOpts.title === undefined ? '' : btnOpts.title,
                text: btnOpts.text === undefined ? '' : btnOpts.text,
                buttons: btnOpts.buttons === undefined ? [] : btnOpts.buttons,
            });
        }
    }
})

在此處遇到的問題是，小程序data中，不能傳入函數；即便傳入了，小程序data也會過濾掉。故此處使用了triggerEvent也就是讓組件觸發頁面事件（組件事件說明API）

而個人對話框，可能有一個按鈕或者多個按鈕，故將按鈕定義爲數組對象。

最後看看在普通頁面中如何調用組件。 ##普通頁面中如何調用組件 ###在調用頁面的json中引入組件

{
    "usingComponents": {
        "dialog": "/pages/components/dialog/dialog"
    }
}

###在view頁面中使用組件標籤

<view class="submit" catchtap="submit">
        提交
</view>
 <dialog btnOpts="{{btnOpts}}" bindbtnevent="submit"></dialog>

###在js中聲明使用的屬性數據

... ...
   data: {
       btnOpts: '',
    }
... ... 

  submit(e) {
        let btnOpts = {
            visible: true,
            title: '舒適提示',
            text: '恭喜，您抽中了300個寵物蛋~',
            buttons: [{
                title: '肯定',
                eventName: 'btnevent',//觸發組建自定義事件
                handler: () => {
                    //關閉對話框
                    let btnOpts = {
                        visible: false,
                    };
                    this.setData({
                        btnOpts: btnOpts
                    });


                }
            }],
        }

        let triggerEventIndex = e.detail.index;
        if (triggerEventIndex === undefined) {
            this.setData({
                btnOpts: btnOpts
            });
        } else {
            let button = btnOpts.buttons[triggerEventIndex];
            if (button && typeof button.handler === "function") {
                button.handler();
            }
        }
    },

上面的代碼在本頁面按鈕點擊的時候會調用；在組件彈出對話框的按鈕點擊確認的時候也會調用。

因組件能經過e.detail屬性傳值，在點擊的時候，就能知道點擊的是哪一個按鈕；

故只須要組件回傳給我按鈕的數組index便可知道須要執行的函數；

解決了在data中不能傳入函數以及在本頁面代碼冗餘的問題。