微信小程序之授权 wx.authorize
一、 wx.authorize(Object object)
提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。
- 用户可以授权的
scope 包括:
scope | 对应接口 | 描述 |
---|---|---|
scope.userInfo | wx.getUserInfo | 用户信息 |
scope.userLocation | wx.getLocation, wx.chooseLocation, wx.openLocation | 地理位置 |
scope.address | wx.chooseAddress | 通讯地址 |
scope.invoiceTitle | wx.chooseInvoiceTitle | 发票抬头 |
scope.invoice | wx.chooseInvoice | 获取发票 |
scope.werun | wx.getWeRunData | 微信运动步数 |
scope.record | wx.startRecord | 录音功能 |
scope.writePhotosAlbum | wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum | 保存到相册 |
scope.camera | 摄像头 |
注意:上述接口中,wx.authorize({scope: "scope.userInfo"}),无法弹出授权窗口,使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01
二、 wx.authorize 用法
- 首先, 可以通过 wx.getSetting 获取当前用户的设置,返回值中只会出现小程序已经向用户请求过的权限。参考:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.getSetting.html
wx.getSetting({
success (res) {
console.log(res.authSetting)
}
})
如果用户已经授权过 地理位置,上面代码则会返回:"scope.userInfo": true
- 向用户发起授权请求
// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
wx.getSetting({
success(res) {
if (!res.authSetting['scope.record']) {
wx.authorize({
scope: 'scope.record',
success () {
// 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问
wx.startRecord()
}
})
}
}
})
三、 注意
- 微信中使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。
- 所以在用户未授权的情况下,在 onload 函数中使用 wx.getUserInfo 是默认失败的, 如下:
onLoad: function (options) {
// 只有在用户已经授权后,才能在 onload 函数中获取到用户信息
// 所以,下面通过 wx.getSetting 检查用户是否已经授权,
// 如果没有授权,则停止执行
// 如果已经授权,则继续执行success
wx.getSetting({
success (res){
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
}
})
}
}
})
},
-
建议使用 button 组件,并将 open-type 指定为 getUserInfo 类型,通过点击事件获取用户基本信息。
-
代码如下:
wxml:
<button open-type="getUserInfo" bindgetuserinfo='getUser'>获取用户信息(授权登录)</button>
js:
getUser(e) {
console.log(e)
wx.getUserInfo({
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo
});
}
})
}