微信小程序自定义授权弹框

前言

最近微信获取用户信息的接口有调整，就是这货：wx.getUserInfo(OBJECT)，文档描述如下：

 此接口有调整，使用该接口将不再出现授权弹窗，请使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作
 1.当用户未授权过，调用该接口将直接报错
 2.当用户授权过，可以使用该接口获取用户信息

这就很蛋疼了，以前只需要弹框授权就行了，现在还必须要先按一个按钮，这样的话多了一个操作，多一个按钮感觉很别扭，放在页面上哪里都不合适，
看评论区有个图亮了:

解决方案

无缘无故在页面上多了一个按钮，只是为了引导用户授权，加在哪里都会觉得和页面内容格格不入。
那就弹一个框提示吧，虽然连续两个弹框也很怪，但是个人觉得比页面多一个按钮好一点。

微信自己定义的弹框交互并不适合授权这个场景，那就想到自定义一个弹框组件来解决。

实现

新建 components 目录文件如下：

dialog.json 文件内容：

{
  "component": true,  // 自定义组件必须先声明
  "usingComponents": {}
}

dialog.js 文件内容：

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    // 弹窗标题
    title: {          
      type: String,     
      value: '标题' // 默认值
    },
    // 弹窗内容
    content :{
      type : String ,
      value : '弹窗内容'
    },

    // 弹窗确认按钮文字
    confirmText :{
      type : String ,
      value : '确定'
    } 
  },

  /**
   * 组件内私有数据
   */
  data: {
    // 弹窗显示控制
    isShow:false
  },

  /**
   * 组件的公有方法列表
   */
  methods: {

    //隐藏弹框
    hideDialog(){
      this.setData({
        isShow: !this.data.isShow
      })
    },