构建自定义组件

#前言 接上篇，因项目需由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中不能传入函数以及在本页面代码冗余的问题。