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

最新推荐文章于 2024-02-28 22:15:59 发布

weixin_39637589

最新推荐文章于 2024-02-28 22:15:59 发布

阅读量181

点赞数

本文介绍了在Flutter项目中使用WebView与H5页面进行交互的方法，包括安装webview_flutter插件、设置Android和iOS的网络权限，以及如何建立JSBridge实现客户端与H5的通讯。通过示例展示了如何调用H5方法和Flutter方法，同时也提到了JSBridge在Hybrid开发中的重要性。此外，针对回调函数调用问题，给出了修正方案。

摘要由CSDN通过智能技术生成

项目背景

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

weixin_39637589

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android webview 执行js_flutter建立JsBridge用于webview与h5通信

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

扫一扫