更新记录

1.0.0（2026-01-21）

上线

平台兼容性

uni-app(4.87)

uni-permission-authorize 插件说明

📦 插件概述

这是一个完整的 uniapp 权限管理插件，包含两个核心组件，完全支持 Vue2 和 Vue3。

🎯 核心组件

1. uni-permission-authorize（权限授权基础组件）

功能：

• 统一管理各种权限请求
• 自动显示权限使用说明
• 权限被拒绝后引导用户到设置页面
• 支持 7 种权限类型

使用场景：

• 需要单独请求某个权限时
• 需要在业务逻辑中控制权限流程时

示例：

<uni-permission-authorize ref="authorize" />

<script>
this.$refs.authorize.showView('CAMERA', () => {
  // 权限获取成功后的回调
})
</script>

2. uni-custom-action-sheet（相机/相册选择组件）

功能：

• 封装了相机和相册的选择功能
• 自动处理相机和存储权限
• 提供友好的底部弹出选择界面
• 支持自定义菜单项

使用场景：

• 需要上传图片时（拍照或从相册选择）
• 需要扫描识别时（身份证、银行卡等）
• 任何需要选择图片来源的场景

示例：

<uni-custom-action-sheet 
  propTips="用于上传身份证正面" 
  @imgupload="handleUpload"
>
  <image src="placeholder.png"></image>
</uni-custom-action-sheet>

<script>
handleUpload(type) {
  // type: 'camera' 或 'album'
  uni.chooseImage({
    sourceType: [type],
    success: (res) => {
      // 处理图片
    }
  })
}
</script>

📁 项目结构

uni-permission-authorize/
├── components/                                    # 组件目录
│   ├── uni-permission-authorize/                  # 权限授权组件
│   │   └── uni-permission-authorize.vue
│   └── uni-custom-action-sheet/                   # 相机/相册选择组件
│       └── uni-custom-action-sheet.vue
├── utils/                                         # 工具函数
│   ├── config.js                                  # 权限配置
│   └── permission.js                              # 权限处理逻辑
├── examples/                                      # 示例代码
│   ├── vue2-example.vue                           # Vue2 权限组件示例
│   ├── vue3-example.vue                           # Vue3 权限组件示例
│   ├── custom-action-sheet-vue2.vue               # Vue2 相机/相册示例
│   └── custom-action-sheet-vue3.vue               # Vue3 相机/相册示例
├── docs/                                          # 文档
│   ├── guide.md                                   # 使用指南
│   └── api.md                                     # API 文档
├── index.js                                       # 入口文件
├── package.json                                   # 包配置
├── README.md                                      # 主文档
├── QUICK_START.md                                 # 快速开始
├── STRUCTURE.md                                   # 项目结构说明
├── changelog.md                                   # 更新日志
└── 检查清单.md                                    # 检查清单

🚀 快速开始

1. 安装

将 uni-permission-authorize 文件夹复制到项目的 uni_modules 目录下

2. 安装依赖

确保已安装 uni-popup 组件

3. 使用

场景一：上传图片（推荐使用 uni-custom-action-sheet）

<template>
  <view>
    <uni-custom-action-sheet @imgupload="handleUpload">
      <view class="upload-box">
        <image v-if="imageUrl" :src="imageUrl"></image>
        <text v-else>点击上传</text>
      </view>
    </uni-custom-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleUpload(type) {
      uni.chooseImage({
        sourceType: [type],
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0]
        }
      })
    }
  }
}
</script>

场景二：单独请求权限（使用 uni-permission-authorize）

<template>
  <view>
    <uni-permission-authorize ref="authorize" />
    <button @click="getLocation">获取位置</button>
  </view>
</template>

<script>
export default {
  methods: {
    getLocation() {
      this.$refs.authorize.showView('LOCATION', () => {
        uni.getLocation({
          success: (res) => {
            console.log('位置信息：', res)
          }
        })
      })
    }
  }
}
</script>

🎨 组件对比

💡 使用建议

什么时候用 uni-custom-action-sheet？

• ✅ 需要上传图片（拍照或从相册选择）
• ✅ 需要扫描识别（身份证、银行卡等）
• ✅ 需要用户选择图片来源
• ✅ 希望简化权限处理流程

什么时候用 uni-permission-authorize？

• ✅ 需要请求位置权限
• ✅ 需要请求麦克风权限
• ✅ 需要请求拨打电话权限
• ✅ 需要在业务逻辑中精确控制权限流程
• ✅ 需要单独处理某个权限

🔧 实际应用示例

示例1：身份证上传（来自你的代码）

<template>
  <view>
    <!-- 身份证正面 -->
    <uni-custom-action-sheet 
      propTips="用于上传身份证正面" 
      @imgupload="uploadIdCardFront"
    >
      <image :src="idCardFrontUrl || 'placeholder.png'"></image>
    </uni-custom-action-sheet>

    <!-- 身份证反面 -->
    <uni-custom-action-sheet 
      propTips="用于上传身份证反面" 
      @imgupload="uploadIdCardBack"
    >
      <image :src="idCardBackUrl || 'placeholder.png'"></image>
    </uni-custom-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      idCardFrontUrl: '',
      idCardBackUrl: ''
    }
  },
  methods: {
    uploadIdCardFront(type) {
      uni.chooseImage({
        count: 1,
        sourceType: [type],
        success: (res) => {
          this.idCardFrontUrl = res.tempFilePaths[0]
          // 调用身份证识别接口
          this.recognizeIdCard(res.tempFilePaths[0], true)
        }
      })
    },
    uploadIdCardBack(type) {
      uni.chooseImage({
        count: 1,
        sourceType: [type],
        success: (res) => {
          this.idCardBackUrl = res.tempFilePaths[0]
          // 调用身份证识别接口
          this.recognizeIdCard(res.tempFilePaths[0], false)
        }
      })
    },
    recognizeIdCard(imagePath, isFront) {
      // 调用识别接口
      console.log('识别身份证：', imagePath, isFront ? '正面' : '反面')
    }
  }
}
</script>

示例2：银行卡上传

<template>
  <view>
    <uni-custom-action-sheet 
      propTips="用于上传银行卡" 
      @imgupload="uploadBankCard"
    >
      <image :src="bankCardUrl || 'placeholder.png'"></image>
    </uni-custom-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bankCardUrl: ''
    }
  },
  methods: {
    uploadBankCard(type) {
      uni.chooseImage({
        count: 1,
        sourceType: [type],
        success: (res) => {
          this.bankCardUrl = res.tempFilePaths[0]
          // 调用银行卡识别接口
          this.recognizeBankCard(res.tempFilePaths[0])
        }
      })
    },
    recognizeBankCard(imagePath) {
      // 调用识别接口
      console.log('识别银行卡：', imagePath)
    }
  }
}
</script>

📝 注意事项

1. 依赖要求：必须安装 uni-popup 组件
2. 平台差异：iOS 和 Android 权限处理流程不同
3. 权限配置：需在 manifest.json 中配置对应权限
4. 真机测试：权限功能必须在真机上测试

🎉 总结

这个插件提供了完整的权限管理解决方案：

• uni-permission-authorize：底层权限管理，灵活可控
• uni-custom-action-sheet：高层封装，开箱即用

根据你的需求选择合适的组件，或者两者结合使用，可以轻松处理各种权限场景！