前言

最近微信獲取使用者資訊的介面有調整，就是這貨：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
      })
    },
    //展示彈框
    showDialog(){
      this.setData({
        isShow: !this.data.isShow
      })
    },
     /**
     * triggerEvent 元件之間通訊
     */
    confirmEvent(){
      this.triggerEvent("confirmEvent");
    },

    bindGetUserInfo(){
      this.triggerEvent("bindGetUserInfo");
    }

  }
})

dialog.wxml 檔案內容：

<view class='dialog-container' hidden="{{!isShow}}">
    <view class='dialog-mask'></view>
    <view class='dialog-info'>
        <view class='dialog-title'>{{ title }}</view>
        <view class='dialog-content'>{{ content }}</view>
        <view class='dialog-footer'>
          <button class='dialog-btn' open-type="getUserInfo" bindgetuserinfo='bindGetUserInfo' catchtap='confirmEvent'>{{ confirmText }}</button>
        </view>
    </view>
</view>

dialog.wxss 檔案內容：

.dialog-mask{
  position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}
.dialog-info{
    position: fixed;
    z-index: 5000;
    width: 80%;
    max-width: 600rpx;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
}
.dialog-title{
    font-size: 36rpx;
    padding: 30rpx 30rpx 10rpx;
}
.dialog-content{
    padding: 10rpx 30rpx 20rpx;
    min-height: 80rpx;
    font-size: 32rpx;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-all;
    color: #999999;
}
.dialog-footer{
    display: flex;
    align-items: center;
    position: relative;
    line-height: 90rpx;
    font-size: 34rpx;
}
.dialog-btn{
    display: block;
    -webkit-flex: 1;
    flex: 1;
    position: relative;
    color: #3CC51F;
}

在首頁或者我的頁面進行授權檢測：
首先還是要在 json 檔案進行宣告
index.json:

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

index.wxml:

<dialog id='dialog' 
      title='登入提示' 
      content='小程式需要您的授權才能提供更好的服務哦' 
      confirmText='知道了'
      bind:confirmEvent='confirmEvent'
      bind:bindGetUserInfo='bindGetUserInfo'>
</dialog>

index.js:

onReady: function () {
    //獲得dialog元件
    this.dialog = this.selectComponent("#dialog");
},

showDialog: function(){
    this.dialog.showDialog();
},

confirmEvent: function(){
    this.dialog.hideDialog();
},

bindGetUserInfo: function() {
    // 使用者點選授權後，這裡可以做一些登陸操作
    this.login();
},

效果

總結