获取用户权限
多多洛
在使用小程序的一些api的时候都需要用户主动授权才可以使用,比如用户信息,这个是最常用的,我们据具体来说说获取用户信息的授权处理。

获取用户信息会用到的接口有:
1.wx.getSetting()  获取用户授权信息
2.wx.getUserInfo() 获取用户信息
3.wx.authorize() 弹出授权窗口  如果用户已经授权将不会弹出,次方法虽然有success回调方法,貌似是异步的,所以基本不会用到

 

我最开始是准备这么去实现,如果用户没有授权,用户需要登录的时候弹出授权窗口,授权后就登录,没有授权就还是未登录状态,但是发现无法在用户触发授权或者拒绝后处理相应的逻辑,最后想到以下两种方式。

1.强制用户授权

我们有的应用就是必须登录才可以使用,那么就需要强制获取用户微信信息。
实现思路就是,在页面展示的时候如果用户没有授权获取用户信息,那么就打开设置页面,直到用户授权后才能进入制定页面。

来看下实现代码:
wxml:
<view class="container">
   <view class='avatar'><image src="{{userIcon}}"></image></view>
   <view class="user-name">{{userName}}</view>
   <button bindtap="openSetting"  class='btn'>设置</button>
</view>
为了能够方便的测试用户授权和没有授权的情况,我加了一个设置按钮方便打开设置页面。

js:
const app = getApp()

Page({
  data:{
    userIcon:"../../images/default_icon.gif",
    userName:"未登录"
  }, onShow:function(){
    let that = this;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.userInfo']) {
          console.info("用户未授权");
          wx.openSetting();
        } else {
          console.info("用户已经授权");
          that.setUserInfo();
        }
      }
    }) 
  },setUserInfo:function(){
    let that = this;
    wx.getUserInfo({
      success: function (userRes) {
         that.setData({
           userIcon: userRes.userInfo.avatarUrl,
           userName: userRes.userInfo.nickName,
           haveLogin:true
         })
      }
    });
  },//打开权限设置 
  openSetting: function () {
    let that = this;
    wx.openSetting()
  }
})
注意,检测用户是否授权了获取用户信息要放在onShow方法中,不能放到onLoad中,从生命周期一章中知道,只要界面展示就会调用onShow,onLoad只会调用一次,所以必须用onShow

wxss:
.avatar{
  text-align: center;
}

.avatar image{
  margin: 0px auto;
  width: 100px;
  height: 100px;
  border-radius: 50px;
}
.user-name{
   text-align: center;
  margin-top: 10px;
}

.btn{
  margin: 50px 20px 0px 20px;
  background:red;
  color: #fff;
}
我们来看下效果:


可以看到,如果不授权,进入页面后又回来了,只有授权了才能进入页面,所以这个就是强制用户必须授权用户信息才能使用。
 

2.让用户自己授权

方法差不多,无非授权是让用户自己触发,不强制,如果不触发,可以给一些默认信息,一些高级功能不授权就无法使用,至于是否使用,让用户自己决定。

wxml:
<view class="container">
   <view class='avatar'><image src="{{userIcon}}"></image></view>
   <view class="user-name">{{userName}}</view>
   <block wx:if="{{!haveLogin}}">
      <button bindtap="openSetting"  class='btn'>点我登录</button>
   </block>
   <button bindtap="openSetting"  class='btn'>设置</button>
</view>
js:
const app = getApp()

Page({
  data:{
    userIcon:"../../images/default_icon.gif",
    userName:"未登录",
    haveLogin:true,
  }, onShow:function(){
    let that = this;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.userInfo']) {
          console.info("用户未授权");
          that.setData({
            haveLogin:false
          })
        } else {
          console.info("用户已经授权");
          that.setUserInfo();
        }
      }
    }) 
  },setUserInfo:function(){
    let that = this;
    wx.getUserInfo({
      success: function (userRes) {
         that.setData({
           userIcon: userRes.userInfo.avatarUrl,
           userName: userRes.userInfo.nickName,
           haveLogin:true
         })
      }
    });
  },//打开权限设置 
  openSetting: function () {
    let that = this;
    wx.openSetting()
  }
})

还是看演示: