webview_h5与原生增加权限索取行为交互(Flutter)_flutter webview 添加读写权限

应各大应用市场上架要求,增加权限索取行为用户交互弹窗
详细: https://developer.huawei.com/consumer/cn/doc/app/FAQ-faq-05#h1-1698326401789-0

1. flutter端使用permission_handler申请权限
2. 注册一个MethodChannel,增加一个函数,提供安卓webview相机/麦克风等权限被触发时回调用到flutter端

static const platform = MethodChannel('webview_permission'); 
1

platform.setMethodCallHandler((MethodCall call) async {
	// 处理回调
	switch (call.method) {  
        case 'requestCameraPermission': 
         ...略
         // 回调showPermissionDialog
    }
}
1
2
3
4
5
6
7
8

3. 增加一个通用权限交互弹窗

  /// 通用权限弹窗
  /// @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
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

4. 安卓端同样注册MethodChannel

import android.content.pm.PackageManager;
import androidx.core.content.ContextCompat;
...略
//
methodChannel4Premission = new MethodChannel(messenger, "webview_permission");
methodChannel4Premission.setMethodCallHandler(this);

1
2
3
4
5
6
7

5. webview发起申请权限索取时,判断是否已授权,未授权时通过methodChannel调用flutter弹窗向用户说明权限用途

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

if (ContextCompat.checkSelfPermission(WebViewFlutterPlugin.activity, Manifest.permission.RECORD_AUDIO) != PackageManager.PERMISSION_GRANTED) {
	   methodChannel4Premission.invokeMethod("requestMicroPhonePermission", null);
	 }
1
2
3

判断是否已授权相机权限

if (ContextCompat.checkSelfPermission(WebViewFlutterPlugin.activity, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
        methodChannel4Premission.invokeMethod("requestCameraPermission", null);
      }
1
2
3

6. flutter端批量索取权限

    // 列出需要请求的权限
    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();
    }
  
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