项目背景
随着项目的不断完善,需要做一些运营活动,通常是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方法传参。