uni-app:授权（以微信小程序为例）

说明

个人使用环境说明

设备环境：win10 64bit
编译环境：HBuilder X
运行环境：微信开发者工具、真机

其他说明

在微信小程序中，在调试模式、开发者模式中，调用用户信息默认失败。发布后，可以根据实际用户授权返回授权的结果。
由于如果用户之前拒绝过授权，此接口会直接调用师表回调。一般搭配uni.getSetting(获取当前用户授权)和uni.openSetting（打开授权）使用。
APP的授权判断方式见https://ext.dcloud.net.cn/plugin?id=594。
地理位置权限需要在manifest.json 配置 permission，详见https://uniapp.dcloud.io/collocation/manifest。
本人在测试该接口时，引用了ColorUI的样式

调用

调用方法

uni.authorize(OBJECT)

功能

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。如果用户之前拒绝了授权，此接口会直接进入失败回调，一般搭配uni.getSetting和uni.openSetting使用。

平台差异

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	QQ小程序
×	×	√	×	√	√	√

Object参数

参数	类型	必填	说明
scope	String	是	需要获取权限的 scope，详见 scope 列表。
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

scope列表

scope	对应接口	描述	地理位置
scope.userInfo	uni.getUserInfo	用户信息
scope.userLocation	uni.getLocation, uni.chooseLocation	地理位置
scope.userLocationBackground	wx.userLocationBackground	后台定位	微信小程序
scope.address	uni.chooseAddress	通信地址
scope.record	uni.getRecorderManager	录音功能
scope.writePhotosAlbum	uni.saveImageToPhotosAlbum, uni.saveVideoToPhotosAlbum	保存到相册	字节跳动小程序的返回值是scope.album
scope.camera	<camera /> 组件，头条下的扫码、拍照、选择相册	摄像头
scope.invoice	wx.chooseInvoice	获取发票	微信小程序、QQ小程序
scope.invoiceTitle	uni.chooseInvoiceTitle	发票抬头	微信小程序、百度小程序、QQ小程序
scope.werun	wx.getWeRunData	微信运动步数	微信小程序

示例代码

1 uni.authorize({
2     scope: 'scope.userLocation',
3     success() {
4         uni.getLocation()
5     }
6 })

个人代码

打开授权设置页

授权获取失败时，根据用户选择，打开授权设置页。

 1 // 打开授权设置页 : authouName: 授权名称
 2 openSetting(authouName) {
 3     uni.showModal({
 4         title: '授权',
 5         content: '获取授权' + authouName + '失败,是否前往授权设置？',
 6         success: function(result) {
 7             if (result.confirm) {
 8                 uni.openSetting();
 9             }
10         },
11         fail: function() {
12             uni.showToast({
13                 title: '系统错误！',
14                 icon: 'none'
15             });
16         }
17     })
18 }

配置授权

由于申请位置接口，需要在maifest.json在小程序特有相关中配置权限。以微信小程序为列,使用HBuilder X 打开项目的配置文件。点击【微信小程序配置】→微信小程序权限的【位置】接口，并填写权限申请原因。

 1 /* 小程序特有相关 */
 2 "mp-weixin": {
 3     "appid": "小程序appid",
 4     "setting": {
 5         "urlCheck": false
 6     },
 7     "usingComponents": true,
 8     "permission": {
 9         "scope.userLocation": {
10             "desc": "小程序位置接口的效果展示"
11         }
12     }
13 },

页面代码

authorize.vue页面代码如下：

  1 <template>
  2     <view class="padding flex flex-direction bg-white">
  3         <!-- 授权设置页 -->
  4         <!-- #ifdef MP-WEIXIN || MP-BAIDU -->
  5         <button class="cu-btn bg-orange margin-xs" open-type="openSetting">授权设置页</button>
  6         <!-- #endif -->
  7         
  8         <button class="cu-btn bg-orange light margin-bottom-xs" @click="aUserInfo">用户信息</button>
  9         <button class="cu-btn bg-orange light margin-bottom-xs" @click="aLocation">地理位置</button>
 10         <!-- #ifdef MP-WEIXIN -->
 11         <button class="cu-btn bg-orange light margin-bottom-xs" @click="aLocationBackground">后台定位</button>
 12         <!-- #endif -->
 13         <button class="cu-btn bg-orange light margin-bottom-xs" @click="aAddress">通信地址</button>
 14         <button class="cu-btn bg-orange light margin-bottom-xs" @click="aRecord">录音功能</button>
 15         <button class="cu-btn bg-orange light margin-bottom-xs" @click="aWritePhotosAlbum">保存到相册</button>
 16         <button class="cu-btn bg-orange light margin-bottom-xs" @click="aCamera">摄像头</button>
 17         <!-- #ifdef MP-WEIXIN || MP-QQ -->
 18         <button class="cu-btn bg-orange light margin-bottom-xs" @click="aInvoice">获取发票</button>
 19         <!-- #endif -->
 20         <!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ -->
 21         <button class="cu-btn bg-orange light margin-bottom-xs" @click="aInvoiceTitle">发票抬头</button>
 22         <!-- #endif -->
 23         <!-- #ifdef MP-WEIXIN -->
 24         <button class="cu-btn bg-orange light margin-bottom-xs" @click="aWerun">微信步数</button>
 25         <!-- #endif -->
 26     </view>
 27 </template>
 28 
 29 <script>
 30     var _self;
 31     
 32     export default {
 33         data() {
 34             return {
 35                 
 36             }
 37         },
 38         onLoad:function(){
 39             _self = this;
 40         },
 41         methods: {
 42             //  ============================== 授权 ==========================================
 43             // 用户信息
 44             aUserInfo(e){
 45                 uni.authorize({
 46                     scope:'scope.userInfo',
 47                     success:function(){
 48                         console.log("获取用户信息：成功");
 49                     },
 50                     fail:function(){
 51                         console.log("授权用户信息：失败");
 52                         _self.openSetting("用户信息");
 53                     }
 54                 });
 55             },
 56             // 地理位置
 57             aLocation(e){
 58                 uni.authorize({
 59                     scope:'scope.userLocation',
 60                     success:function(){
 61                         console.log("授权地理位置：成功");
 62                     },
 63                     fail:function(){
 64                         console.log("授权地理位置：失败");
 65                         _self.openSetting("地理位置");
 66                     }
 67                 });
 68             },
 69             // 后台定位 （微信小程序）
 70             // #ifdef MP-WEIXIN
 71             aLocationBackground(){
 72                 uni.authorize({
 73                     scope:'scope.userLocationBackground',
 74                     success:function(){
 75                         console.log("授权后台定位：成功");
 76                     },
 77                     fail:function(){
 78                         console.log("授权后台定位：失败");
 79                         _self.openSetting("后台定位");
 80                     }
 81                 });
 82             },
 83             // #endif
 84             // 通讯地址
 85             aAddress(){
 86                 uni.authorize({
 87                     scope:'scope.address',
 88                     success:function(){
 89                         console.log("授权通讯地址：成功");
 90                     },
 91                     fail:function(){
 92                         console.log("授权通讯地址：失败");
 93                         _self.openSetting("通讯地址");
 94                     }
 95                 });
 96             },
 97             // 录音功能
 98             aRecord(){
 99                 uni.authorize({
100                     scope:'scope.record',
101                     success:function(){
102                         console.log("授权录音功能：成功");
103                     },
104                     fail:function(){
105                         console.log("授权录音功能：失败");
106                         _self.openSetting("录音功能");
107                     }
108                 });
109             },
110             // 保存到相册（字节跳动返回值是scope.album）
111             aWritePhotosAlbum(){
112                 uni.authorize({
113                     scope:'scope.writePhotosAlbum',
114                     success:function(){
115                         console.log("保存到相册：成功");
116                     },
117                     fail:function(e){
118                         console.log("保存到相册：失败");
119                         _self.openSetting("保存到相册");
120                     }
121                 });
122             },
123             // 摄像头
124             aCamera(){
125                 uni.authorize({
126                     scope:'scope.camera',
127                     success:function(){
128                         console.log("授权摄像头：成功");
129                     },
130                     fail:function(){
131                         console.log("授权摄像头：失败");
132                         _self.openSetting("摄像头");
133                     }
134                 });
135             },
136             // 获取发票(微信小程序、QQ小程序)
137             // #ifdef MP-WEIXIN || MP-QQ
138             aInvoice(){
139                 uni.authorize({
140                     scope:'scope.invoice',
141                     success:function(){
142                         console.log("授权获取发票：成功");
143                     },
144                     fail:function(){
145                         console.log("授权获取发票：失败");
146                         _self.openSetting("获取发票");
147                     }
148                 });
149             },    
150             // #endif
151             // 发票抬头（微信小程序、百度小程序、QQ小程序）
152             // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ
153             aInvoiceTitle(){
154                 uni.authorize({
155                     scope:'scope.invoiceTitle',
156                     success:function(){
157                         console.log("授权获取发票抬头：成功");
158                     },
159                     fail:function(){
160                         console.log("授权获取发票抬头：失败");
161                         _self.openSetting("发票抬头");
162                     }
163                 });
164             },
165             // #endif
166             // 微信步数（微信小程序）
167             // #ifdef MP-WEIXIN
168             aWerun(){
169                 uni.authorize({
170                     scope:'scope.werun',
171                     success:function(){
172                         console.log("授权微信步数：成功");
173                     },
174                     fail:function(){
175                         console.log("授权微信步数：失败");
176                         _self.openSetting("微信步数");
177                     }
178                 });
179             },
180             // #endif
181             // ===================================== 方法 ===========================
182             // 打开授权设置页 : authouName: 授权名称
183             openSetting(authouName){
184                 uni.showModal({
185                     title:'授权',
186                     content:'获取授权'+ authouName + '失败,是否前往授权设置？',
187                     success:function(result){
188                         if(result.confirm){
189                             uni.openSetting();
190                         }
191                     },
192                     fail:function(){
193                         uni.showToast({
194                             title:'系统错误！',
195                             icon:'none'
196                         });
197                     }
198                 })
199             }
200         }
201     }
202 </script>
203 
204 <style>
205 
206 </style>

参考网址

uni-app官网授权：https://uniapp.dcloud.io/api/other/authorize

uni-app 官网配置：https://uniapp.dcloud.io/collocation/manifest?id=mp-weixin

微信小程序权限配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission

posted @ 2021-04-27 12:02 陆陆无为而治者阅读(4597) 评论(0) 收藏举报

刷新页面返回顶部

lyj00436