微信授权获取用户信息及open-data

在新版本的微信小程序中，使用wx.getUserInfo()这个方法时，如果用户已授权，则能获取到用户信息，如果用户没有授权，则也不出现弹窗，直接进入fail方法中，

解决办

button

<button open-type="getUserInfo" bindgetuserinfo="selfGetInfo" 
      class="avatarImg"
点击授权
</button>
selfGetInfo (e){
  //出现授权弹窗，用户点了允许
   if(e.detail.userInfo){
       app.globalData.userinfo = e.detail.userInfo;
       this.setData({
         avatarUrl: e.detail.userInfo.avatarUrl
       })
     }else{
       //用户点了拒绝 ，则wx.getUserInfo这个方法，不会出现弹窗，直接进入fail的回调中
          this.selfModal();
        }
}  ,
 selfModal:function(){
    wx.showModal({
      title:'提示',
      content:'请接受授权，否则会影响你的使用效果',
      showCancel:false,//不显示取消按钮
      success:res=>{
        if(res.confirm){
          console.log('用户点击了确定')
        }else if(res.cancel){
          console.log('用户点击取消')
        }
      }
    })
  },

open-data这个新的组件

<open-data type="userNickName"></open-data>//用户头像
<open-data type="userAvatarUrl"></open-data>//用户昵称

授权的步骤

1.在app.js中，的onLaunch中首先判断用户授权了那些信息

/先判断用户已经授权了那些信息
    wx.getSetting({
       success:res=>{
         if (res.authSetting['scope.userInfo']){
                //说明用户信息已经授权，可直接调用wx.getUserInfo获取，
               wx.getUserInfo({
                  success:res=>{
                    console.log(res)
                    this.globalData.userInfo=res.userInfo;
                    // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                    // 所以此处加入 callback 以防止这种情况
                    if (this.userInfoReadyCallback) {
                      this.userInfoReadyCallback(res)
                    }
                  }
                })
         }
       }
    })

2.在需要展示授权信息的页面中，

//公共变量中用户信息是否存在
  if(app.globalData.userInfo){
    this.setData({
      avatarUrl: app.globalData.userInfo.avatarUrl
    })
  }else(wx.canIUse('button.open-type.getUserInfo')){
    app.userInfoReadyCallback = res => {
      this.setData({
        userInfo: res.userInfo,
        hasUserInfo: true
      })
    }
  

wx.canIUse

判断小程序的API，回调，参数，组件等是否在当前版本可用。

参数  string schema

使用 ${API}.${method}.${param}.${options} 或者 ${component}.${attribute}.${option} 方式来调用

返回值    boolean

参数说明

• ${API} 代表 API 名字
• ${method} 代表调用方式，有效值为return, success, object, callback
• ${param} 代表参数或者返回值
• ${options} 代表参数的可选值
• ${component} 代表组件名字
• ${attribute} 代表组件属性
• ${option} 代表组件属性的可选值