android webview 执行js_flutter建立JsBridge用于webview与h5通信

项目背景随着项目的不断完善，需要做一些运营活动，通常是H5页面，在app中打开这些H5页面就需要引入WebView，有时候H5需要客户端提供一些内部的接口，这时候我们就需要建立JSBridge用于客户端与H5之间的通讯。除此之外，Hybrid开发模式也需要Webview与JS做频繁的交互。使用1、安装webview_flutterwebview_flutter: 2、在android中添加网络权

weixin_39637589

269人浏览 · 2020-11-29 23:57:43

weixin_39637589 · 2020-11-29 23:57:43 发布

项目背景

随着项目的不断完善，需要做一些运营活动，通常是H5页面，在app中打开这些H5页面就需要引入WebView，有时候H5需要客户端提供一些内部的接口，这时候我们就需要建立JSBridge用于客户端与H5之间的通讯。除此之外，Hybrid开发模式也需要Webview与JS做频繁的交互。

使用

1、安装webview_flutter

webview_flutter:

2、在android中添加网络权限，目录android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

3、 ios中在ios/Runner/Info.plist中添加

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>*

4、建立JSBridge

需要与H5开发约定协议，建立Model

/// WebView与h5进行通信

2. 对接收到的h5方法，进行内部处理，这里举个简单的例子，客户端向h5提供了打开微信App的接口openWeChatApp

import

2. 建立可复用的Webview组件

import

3. JS调用JsBridge

<!doctype html>

4. flutter 调用h5方法

// flutter
webViewController.evaluateJavascript("sayHello('hello world')")

// h5
function sayHello(msg){
   console.log(msg)
}

以上实现了一个简易版的JsBridge，webview_flutter是官网插件，功能非常强大，JS与Flutter交互只是常用的功能，还提供了页面加载、路由、手势等功能，感兴趣的同学可以去更详细的了解。

===============================================================

有同学反馈回调函数没有办法调用，确实是没有办法执行，因为 jsBridge.error?.call()调用方法是dart语言的写法，想要调用js方法，应该调用webview的方法，webViewController.evaluateJavascript('${jsBridge.error}()')这样才能执行回调，也可以向js方法传参。

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐