vue3+ts+uniapp小程序封装获取授权hook函数

vue3+ts+uniapp小程序封装获取授权hook函数

小程序授权的时候，如果点击拒绝授权，然后就再也不会出现授权了，除非用户手动去右上角…设置打开

通过uni官方api自己封装一个全局的提示:
uni.getSetting :http://uniapp.dcloud.io/api/other/setting?id=getsetting
uni.authorize:http://uniapp.dcloud.io/api/other/authorize?id=authorize
uni.openSetting:https://uniapp.dcloud.net.cn/api/other/setting.html#opensetting

具体代码
src\composable\index.ts

/**
 * 授权综合逻辑
 * @param {*} scope 权限代表
 */
export const useShowPullAuth = () => {
  const pullAuth = (scope: keyof UniApp.AuthSetting): void => {
    const map: Record<string, string> = {
      'scope.userInfo': '用户信息',
      'scope.userLocation': '地理位置',
      'scope.userLocationBackground': '后台定位',
      'scope.address': '通信地址',
      'scope.record': '录音功能',
      'scope.writePhotosAlbum': '保存到相册',
      'scope.camera': '摄像头',
      'scope.invoice': '获取发票',
      'scope.invoiceTitle': '发票抬头',
      'scope.werun': '微信运动步数',
    }

    uni.getSetting({
      success() {
        // scope 存在
        if (map[scope]) {
          // 提前向用户发起授权请求
          uni.authorize({
            scope,
            fail() {
              const word = map[scope]
              uni.showModal({
                content: `检测到您没打开${word}权限，是否去设置打开？`,
                confirmText: '确认',
                cancelText: '取消',
                success: (res) => {
                  if (res.confirm) {
                    // 打开授权页
                    uni.openSetting({
                      success: (res) => {
                        if (res.authSetting[scope]) {
                          uni.showToast({
                            title: '授权成功',
                            icon: 'none',
                          })
                        } else {
                          uni.showToast({
                            title:
                              '未授权，将会影响使用小程序部分功能，可自行去右上角（...）中-设置手动打开！',
                            icon: 'none',
                          })
                        }
                      },
                    })
                  } else {
                    uni.showToast({
                      title:
                        '未授权，将会影响使用小程序部分功能，可自行去右上角（...）中-设置手动打开！',
                      icon: 'none',
                      duration: 2500,
                    })
                  }
                },
              })
            },
          })
        } else {
          // 不存在授权 scope
          uni.showToast({
            title: '无此授权功能',
            icon: 'none',
          })
        }
      },
    })
  }
  return { pullAuth }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

在需要用的页面使用 onLoad

放在onLoad是为了一进来就进行调用，当scope是对的就会进行发起授权，当你之前已经授权过了，就会什么也不做，若是发现未授权，就会弹窗手动引导你去系统授权设置里!

<script setup lang="ts">
import { useShowPullAuth } from '@/composable'
import { onLoad } from '@dcloudio/uni-app'
onLoad(() => {
  console.log('onLoad')
  pullAuth('scope.camera')
})
</script>
1
2
3
4
5
6
7
8