博客站

在 UniApp 中，用户授权是获取用户权限（如位置、相机、相册等）的关键步骤。UniApp 提供了统一的 API 来处理用户授权，同时支持 小程序、H5 和 App 平台。以下是 UniApp 处理用户授权的常用方法：

一、获取用户授权

1. uni.authorize

• 用于向用户发起授权请求。
• 支持的权限范围包括：scope.userLocation（位置）、scope.camera（相机）、scope.album（相册）等。
• 示例：

  uni.authorize({
    scope: 'scope.userLocation',
    success: () => {
      console.log('用户已授权');
    },
    fail: (err) => {
      console.log('用户拒绝授权', err);
    }
  });
  

2. uni.getSetting

• 获取用户的当前授权设置。
• 示例：

  uni.getSetting({
    success: (res) => {
      if (res.authSetting['scope.userLocation']) {
        console.log('用户已授权位置权限');
      } else {
        console.log('用户未授权位置权限');
      }
    }
  });
  

3. uni.openSetting

• 打开用户的授权设置页面，允许用户手动修改权限。
• 示例：

  uni.openSetting({
    success: (res) => {
      if (res.authSetting['scope.userLocation']) {
        console.log('用户已授权位置权限');
      }
    }
  });
  

二、处理授权逻辑

1. 检查授权状态

• 在请求权限前，先检查用户是否已授权。
• 示例：

  uni.getSetting({
    success: (res) => {
      if (res.authSetting['scope.userLocation']) {
        console.log('用户已授权位置权限');
      } else {
        uni.authorize({
          scope: 'scope.userLocation',
          success: () => {
            console.log('用户已授权');
          },
          fail: () => {
            console.log('用户拒绝授权');
          }
        });
      }
    }
  });
  

2. 处理拒绝授权

• 如果用户拒绝授权，可以引导用户手动开启权限。
• 示例：

  uni.authorize({
    scope: 'scope.userLocation',
    success: () => {
      console.log('用户已授权');
    },
    fail: () => {
      uni.showModal({
        title: '提示',
        content: '需要位置权限才能使用该功能，是否去设置？',
        success: (res) => {
          if (res.confirm) {
            uni.openSetting();
          }
        }
      });
    }
  });
  

三、平台差异处理

1. 小程序平台

• 小程序平台的授权逻辑与 UniApp 一致，使用 uni.authorize、uni.getSetting 和 uni.openSetting 即可。

2. H5 平台

• H5 平台的授权逻辑依赖于浏览器的权限机制。
• 示例（获取位置权限）：

  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log('位置信息：', position);
    },
    (error) => {
      console.log('获取位置失败：', error);
    }
  );
  

3. App 平台

• App 平台的授权逻辑需要调用原生 API。
• 示例（获取位置权限）：

  uni.getLocation({
    type: 'wgs84',
    success: (res) => {
      console.log('位置信息：', res);
    },
    fail: (err) => {
      console.log('获取位置失败：', err);
    }
  });
  

四、常见权限列表

五、完整示例

以下是一个完整的示例，展示了如何获取用户位置权限：

export default {
  methods: {
    checkLocationPermission() {
      uni.getSetting({
        success: (res) => {
          if (res.authSetting['scope.userLocation']) {
            this.getLocation();
          } else {
            uni.authorize({
              scope: 'scope.userLocation',
              success: () => {
                this.getLocation();
              },
              fail: () => {
                uni.showModal({
                  title: '提示',
                  content: '需要位置权限才能使用该功能，是否去设置？',
                  success: (modalRes) => {
                    if (modalRes.confirm) {
                      uni.openSetting();
                    }
                  }
                });
              }
            });
          }
        }
      });
    },
    getLocation() {
      uni.getLocation({
        type: 'wgs84',
        success: (res) => {
          console.log('位置信息：', res);
        },
        fail: (err) => {
          console.log('获取位置失败：', err);
        }
      });
    }
  }
};

六、总结

UniApp 提供了统一的 API 来处理用户授权，开发者可以通过 uni.authorize、uni.getSetting 和 uni.openSetting 实现权限的请求、检查和设置。针对不同平台（小程序、H5、App），需要注意授权逻辑的差异。通过合理处理用户授权，可以提升应用的功能性和用户体验。