webview_h5与原生增加权限索取行为交互(Flutter)

应各大应用市场上架要求,增加权限索取行为用户交互弹窗

详细: https://developer.huawei.com/consumer/cn/doc/app/FAQ-faq-05#h1-1698326401789-0

  1. flutter端使用permission_handler申请权限
  2. 注册一个MethodChannel,增加一个函数,提供安卓webview相机/麦克风等权限被触发时回调用到flutter端
bash 复制代码
static const platform = MethodChannel('webview_permission'); 
bash 复制代码
platform.setMethodCallHandler((MethodCall call) async {
	// 处理回调
	switch (call.method) {  
        case 'requestCameraPermission': 
         ...略
         // 回调showPermissionDialog
    }
}
  1. 增加一个通用权限交互弹窗
dart 复制代码
  /// 通用权限弹窗
  /// @permission
  /// @title
  /// @desc
  void showPermissionDialog(Permission permission) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          title: Text(title),
          content: Text(desc),
          actions: <Widget>[
            TextButton(
              child: Text('去授权'),
              onPressed: () {
                Navigator.of(context).pop();
                // 处理权限授予逻辑
                permission.request().then((status) {
                  print(status.isGranted);
              });
              },
            ),
            TextButton(
              child: Text('不'),
              onPressed: () {
                // 处理权限拒绝逻辑
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
  1. 安卓端同样注册MethodChannel
bash 复制代码
import android.content.pm.PackageManager;
import androidx.core.content.ContextCompat;
...略
//
methodChannel4Premission = new MethodChannel(messenger, "webview_permission");
methodChannel4Premission.setMethodCallHandler(this);
  1. webview发起申请权限索取时,判断是否已授权,未授权时通过methodChannel调用flutter弹窗向用户说明权限用途

判断是否已授权麦克风权限

bash 复制代码
if (ContextCompat.checkSelfPermission(WebViewFlutterPlugin.activity, Manifest.permission.RECORD_AUDIO) != PackageManager.PERMISSION_GRANTED) {
	   methodChannel4Premission.invokeMethod("requestMicroPhonePermission", null);
	 }

判断是否已授权相机权限

bash 复制代码
if (ContextCompat.checkSelfPermission(WebViewFlutterPlugin.activity, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
        methodChannel4Premission.invokeMethod("requestCameraPermission", null);
      }
  1. flutter端批量索取权限
bash 复制代码
    // 列出需要请求的权限
    Map<Permission, PermissionStatus> statuses = {
      Permission.camera: await Permission.camera.status,
      Permission.location: await Permission.location.status,
      Permission.microphone: await Permission.microphone.status,
    };
    bool allPermissionsGranted = true;
    for (final entry in statuses.entries) {
      if (entry.value != PermissionStatus.granted) {
        allPermissionsGranted = false;
        break;
      }
    }
    if (allPermissionsGranted) {
      // 所有权限都已授权,调用成功的回调函数
      onSuccess();
    } else {
      // 批量索取权限
      await [
          Permission.camera,
          Permission.location,
          Permission.microphone,
        ].request();
    }
  
相关推荐
GISer_Jing17 小时前
阿里开源纯前端浏览器自动化 PageAgent,[特殊字符] 浏览器自动化变天啦?
前端·人工智能·自动化·aigc·交互
爱学习的程序媛19 小时前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
小白学鸿蒙19 小时前
使用Flutter从0到1构建OpenHarmony/HarmonyOS应用
flutter·华为·harmonyos
不爱吃糖的程序媛21 小时前
Flutter OH 框架介绍
flutter
ljt27249606611 天前
Flutter笔记--加水印
笔记·flutter
人机与认知实验室1 天前
人-机交互是新文科与新理科融合的最佳窗口
交互
恋猫de小郭1 天前
2026,Android Compose 终于支持 Hot Reload 了,但是收费
android·前端·flutter
GISer_Jing2 天前
从CLI到GUI桌面应用——前端工程化进阶之路
前端·人工智能·aigc·交互
KIHU快狐2 天前
KIHU快狐|国产鸿蒙系统立式一体机RK3588芯片多点触控交互查询终端
华为·交互·harmonyos
ljt27249606612 天前
Flutter笔记--事件处理
笔记·flutter