微信小程序之调用微信授权窗口

微信小程序中常常需要使用微信官方授权窗口来获取用户的个人信息，比如头像、昵称、地理位置等，本文将会介绍如何在微信小程序中调用微信授权窗口。

1.前置条件

在开始编写代码之前，我们需要保证已经在微信公众平台创建了小程序并通过审核，拥有开发者身份，并在小程序后台配置好服务器地址和域名白名单。

2.授权操作代码实现

首先，在需要使用到用户授权的地方，我们需要在.wxml文件中添加按钮组件，如下：

<button type="primary" bindtap="getUserInfo">获取用户信息</button>

接下来，在对应的.js文件中编写事件函数，实现用户授权操作：

Page({
  data: {
    userInfo: {}
  },
  // 获取用户信息
  getUserInfo: function (e) {
    var that = this;
    wx.getSetting({
      success(res) {
        console.log(res.authSetting)
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              console.log(res.userInfo)
              that.setData({
                userInfo: res.userInfo
              })
            }
          })
        } else {
          wx.authorize({
            scope: 'scope.userInfo',
            success() {
              wx.getUserInfo({
                success: function (res) {
                  console.log(res.userInfo)
                  that.setData({
                    userInfo: res.userInfo
                  })
                }
              })
            }
          })
        }
      }
    })
  }
})

在事件函数中，首先使用wx.getSetting() API获取用户是否已经授权的信息，并根据授权结果判断是否弹出授权窗口；若未授权，则使用wx.authorize() API 弹出授权窗口。

2.1 wx.getSetting() API

wx.getSetting(OBJECT)

wx.getSetting()是一个异步API，用于获取用户的当前设置信息，返回值中包含了所有调用过的权限。

参数OBJECT用来设置成功回调函数success(res)、失败回调函数fail(res) 和 complete回调函数 complete(res)。

我们在事件函数中使用 wx.getSetting() 获取用户的授权信息。成功回调函数中返回的是authSetting对象，即小程序已经向用户请求过的权限，权限与是否允许权限请求结果息息相关。

2.2 wx.getUserInfo() API

wx.getUserInfo(OBJECT)

wx.getUserInfo()是一个异步API，用于获取用户信息，一般需要先调用 wx.authorize() 向用户请求授权。

参数OBJECT用来设置成功回调函数success(res)、失败回调函数fail(res) 和 complete回调函数 complete(res)。

我们在事件函数中使用 wx.getUserInfo() 获取成功授权后的用户信息并进行数据处理。返回的是一个包含用户头像、昵称等信息的userInfo对象。

2.3. wx.authorize() API

wx.authorize(OBJECT)

wx.authorize()是一个异步API，用于弹出授权窗口，请求用户授权，仅支持授权scope.userinfo。

参数OBJECT用来设置想要弹出哪些授权窗口，成功回调函数success(res)、失败回调函数fail(res) 和 complete回调函数 complete(res)。

我们在事件函数中使用 wx.authorize() 向用户请求打开 “用户信息” 授权，并在用户允许授权之后，再通过 wx.getUserInfo() 获取用户信息。

3.总结

本文中，我们通过一个实例展示了在微信小程序中调用微信授权窗口的具体实现，需要注意的是，由于小程序需要满足微信官方严格的安全规范，因此在实际开发过程中，需要认真对接口进行配置和使用。