flutter_webview嵌套h5，并进行通信vue+flu
1、引入依赖包
webview_flutter: ^2.3.1
flutter_scankit: ^1.2.0
2、开启权限
1》android端：
<uses-permission android:name="android.permission.BLUETOOTH"/>
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
android的版本升级到9，http协议无法通过，只支持https的问题，到这里不过可以在安卓的系统配置文件中配置允许http协议请求，在res下面创建一个xml文件文件内容为：
<?xml version="1.0" encoding="utf-8"?>
<base-config cleartextTrafficPermitted="true">
<certificates src="system" />
<certificates src="user" />
</network-security-config>
引入到AndroidManifest.xml文件中使用，打包编译，我用的真机测试，没有发现问题
文件路径：android/app/src/main/AndroidManifest.xml
2》IOS端：
1》在ios的info.list中配置当前内容
文件路径：ios/Runner/info.list
NSAppleMusicUsageDescription
App需要您的同意,才能访问媒体资料库
NSCameraUsageDescription
App需要您的同意,才能访问相机
NSPhotoLibraryUsageDescription
App需要您的同意,才能访问相册
3、编码
1》初始化WebView（我的代码中用了，授权判断，如果需要的话可以加一个权限请求库，使得代码更加严谨）
@override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform =SurfaceAndroidWebView();
print(Get.arguments);
_easyPermission =FlutterEasyPermission()
..addPermissionCallback(onGranted: (requestCode, perms, perm) {
debugPrint("android获得授权:$perms");
debugPrint("iOS获得授权:$perm");
}, onDenied: (requestCode, perms, perm, isPermanent) {
if (isPermanent) {
FlutterEasyPermission.showAppSettingsDialog(title:"Camera");
}else {
debugPrint("android授权失败:$perms");
debugPrint("iOS授权失败:$perm");
}
}, onSettingsReturned: () {
FlutterEasyPermission.has(perms:permissions, permsGroup: []).then(
(value) => value
? debugPrint("已获得授权:$permissions")
: debugPrint("未获得授权:$permissions"));
});
scanKit =FlutterScankit();
scanKit.addResultListen((val) {
debugPrint("scanning result:$val");
setState(() {
code = val;
});
_startDialog(_controller);
});
2》监听h5中的函数调用
JavascriptChannel_toasterJavascriptChannel(BuildContext context,controller) {
return JavascriptChannel(
name:'Toaster',
onMessageReceived: (JavascriptMessage message) {
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(
SnackBar(content:Text(message.message)),
);
start(controller);
});
}
监听h5的函数调用
扫码成功进行回调
调用h5中的函数方法
vue项目中的结构
1》接收flutter的消息推送（调用）
window["getInfoFromFlutter"] = (info) => {
this.getInfoFromFlutter(info);
};
备注：一定要暴露出当前函数名，否则app调用则会出现not defined
2》发送消息（命令）给flutter
window.Toaster.postMessage("Hello,Flutter");
其中的Toaster一定要与flutter中相对应
备注：后期出直接使用methodChannel进行原生与h5通信，插件中出现了很多java语法过时的内容
