Flutter 安卓WebView拍照上传图片文件问题及InAppWebView使用_flutter_inappwebview couldn't find meta-data for p

前言

最近项目中加了一个H5的链接，里面有拍照、选照片和文件，以前用的原生的WebView，iOS功能还可以正常弹窗，安卓死活没反应，就换了一种方案，使用InAppWebView看看。

实现过程

新建了页面，创建InAppWebView，具体代码如下：

import 'dart:collection';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:magic/assets/styles/app_color.dart';

import '../../../common/utils/routers/fluro_navigator.dart';
import '../../../common/widgets/reza_app_bar.dart';

class WebViewInAppScreen extends StatefulWidget {
  const WebViewInAppScreen({
    Key key,
    @required this.url,
    this.title,
    this.type,
    this.onWebProgress,
    this.onWebResourceError,
    this.onLoadFinished,
    this.onWebTitleLoaded,
    this.onWebViewCreated,
  }) : super(key: key);

  final String url;
  final String title;
  final String type;
  final Function(int progress) onWebProgress;
  final Function(String errorMessage) onWebResourceError;
  final Function(String url) onLoadFinished;
  final Function(String webTitle) onWebTitleLoaded;
  final Function(InAppWebViewController controller) onWebViewCreated;

  @override
  State<WebViewInAppScreen> createState() => _WebViewInAppScreenState();
}

class _WebViewInAppScreenState extends State<WebViewInAppScreen> {

  // GlobalKey可以获取到对应的Widget的State对象
  // 当我们页面内容很多时，而需要改变的内容只有很少的一部分且在树的底层的时候，我们如何去实现增量更新/通常情况下有两种方式，第一种是通过方法的回调，去实现数据更新，第二种是通过GlobalKey
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController webViewController;
  InAppWebViewOptions viewOptions = InAppWebViewOptions(
    useShouldOverrideUrlLoading: true,
    mediaPlaybackRequiresUserGesture: true,
    // applicationNameForUserAgent: "dface-yjxdh-webview",
  );

  // webview配置
  // InAppWebViewGroupOptions viewOptions = InAppWebViewGroupOptions(
  // // 跨平台配置
  // crossPlatform: InAppWebViewOptions (
  //   useShouldOverrideUrlLoading: true,
  //   mediaPlaybackRequiresUserGesture: true,
  // ),
  // // android平台配置
  //   android: AndroidInAppWebViewOptions(
  //     //支持HybridComposition
  //     useHybridComposition: true
  //   ),
  //   // ios 平台配置
  //   ios: IOSInAppWebViewOptions(
  //     allowsInlineMediaPlayback: true,
  //   )
  // );

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    webViewController?.clearCache();
    super.dispose();
  }

  // 设置页面标题
  void setWebPageTitle(data) {
    if (widget.onWebTitleLoaded != null) {
      widget.onWebTitleLoaded(data);
    }
  }

  // flutter调用H5方法
  void callJSMethod() {

  }

  //返回
  void back() async {
    bool canGoBack = await webViewController.canGoBack();
    if (canGoBack) {
      webViewController.goBack();
    } else {
      NavigatorUtils.goBack(context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: Platform.isIOS ? false : true,
      appBar: RezaAppBar(
        centerTitle: widget.title,
        isBack: true,
        isClose: true,
        onBack: () {
          back();
        },
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: InAppWebView(
              key: webViewKey,
              initialUrlRequest: URLRequest(url: Uri.parse(widget.url)),
              initialOptions: InAppWebViewGroupOptions(
                crossPlatform: viewOptions,
              ),
              onWebViewCreated: (controller) {
                webViewController = controller;
                if (widget.onWebViewCreated != null) {
                  widget.onWebViewCreated(controller);
                }
              },
              onTitleChanged: (controller, title) {
                if (widget.onWebTitleLoaded != null) {
                  widget.onWebTitleLoaded(title);
                }
              },
              onLoadStart: (controller, url) {},
              shouldOverrideUrlLoading: (controller, navigationAction) async {
                // 允许路由替换
                return NavigationActionPolicy.ALLOW;
              },
              onLoadStop: (controller, url) async {
                // 加载完成
                widget.onLoadFinished(url.toString());
              },
              onProgressChanged: (controller, progress) {
                if (widget.onWebProgress != null) {
                  widget.onWebProgress(progress);
                }
              },
              onLoadError: (controller, Uri url, int code, String message) {
                if (widget.onWebResourceError != null) {
                  widget.onWebResourceError(message);
                }
              },
              onUpdateVisitedHistory: (controller, url, androidIsReload) {},
              onConsoleMessage: (controller, consoleMessage) {
                print(consoleMessage);
              },
            ),
          ),
        ],
      ),
    );
  }
}

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

运行，页面倒是加载出来了，但是一点击拍照的按钮就直接崩溃了，如下：

报错信息

下面一大堆日志，关键报错的原因：

Couldn't find meta-data for provider with authority com.foton.general.flutter_inappwebview.fileprovider

崩溃原因：
相机权限默认是禁止的。直接跳转到相册。
开启相机权限，闪退。
授权被拒绝后，无法再弹出授权
无法直接跳转到相机拍照

所以就百度一番，原来是没加这个：

 <provider
           android:name="androidx.core.content.FileProvider"
           android:authorities="${applicationId}.flutter_inappwebview.fileprovider"
           android:exported="false"
           android:grantUriPermissions="true"
           >
           <meta-data
               android:name="android.support.FILE_PROVIDER_PATHS"
               android:resource="@xml/provider_paths" />
       </provider>

1
2
3
4
5
6
7
8
9
10
11

要在project->app->android->app->src->mian里的 AndroidManifest.xml 的 application 中添加上面的代码，添加以上代码后，在相机权限开启的情况下，能正常弹出选择弹框了。

结果运行直接报错，下面的错误：

倒是说的听明白的，没加tools:replace=“android:authorities”，建议就加上了：

添加的完整的配置参数：

<provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.flutter_inappwebview.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true"
            tools:replace="android:authorities"
            >
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/jshare_file_provider_paths" />
        </provider>

1
2
3
4
5
6
7
8
9
10
11
12

完整的配置。

然后运行就OK了，可以拍照，选文件相册了，记录一下踩坑历程。

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

欢迎大家一键三连支持，若需要文中资料，直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓（文末还有ChatGPT机器人小福利哦，大家千万不要错过）

PS:群里还设有ChatGPT机器人，可以解答大家在工作上或者是技术上的问题