小程序 HalfScreenDialog和getPhoneNumber等授权按钮

前言：

最近我利用HalfScreenDialog的效果，做了一个用户授权手机号码的提示。

因为微信官方的设定，获取用户的手机号的button，必须设置为open-type="getUserInfo"，通过用户手动点击按钮来触发。

但是HalfScreenDialog中的按钮是通过Array来引入的。

官方示例代码：

// page.js示例代码
Page({
    data: {
        show: false,
        buttons: [
            {
                type: 'default',
                className: '',
                text: '辅助操作',
                value: 0
            },
            {
                type: 'primary',
                className: '',
                text: '主操作',
                value: 1
            }
        ]
    },
    open: function () {
        this.setData({
            show: true
        })
    },
    buttontap(e) {
        console.log(e.detail)
    }
});

 但是getPhoneNumber的button必须设置open-type="getUserInfo"的属性，结果设置完以后直接报错：

怎么办呢？就在这时我突然想到了HalfScreenDialog的Slot属性。

Slot 

名称	描述
title	组件自定义标题栏
desc	组件自定义操作描述
footer	操作按钮区域slot

通过讲view设置为slot="footer"来自定义操作按钮区域，需要注意的是一旦你设置了slot="footer"后，原先的buttons="{{buttons}}"也就没有了效果，同理可得title和desc也是如此。