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语法过时的内容