Flutter webview与网页通讯交互实现
短信预约 -IT技能 免费直播动态提醒
前言
在app开发中我们有JSBridge来实现app和网页端通讯，现参考JSBridge实现了Flutter webview和网页端通讯。
预览
flutter
import 'package:ds_bridge/ds_bridge.dart';
class JsBridgeUtil {
// 向H5调用接口
static executeMethod(flutterWebViewPlugin, String jsonStr) async{
DsBridge dsBridge = DsBridge(flutterWebViewPlugin);
Result result = dsBridge.dispatch(jsonStr);
if(result.method == 'share'){
result.callBack('收到网页端share事件，内容为${result.data}并返回此文本给网页');
}
if(result.method == 'share1'){
result.callBack('收到网页端share1事件');
}
}
}网页
import 'dsbridge_flutter'
dsBridge.call('share', { name: 'woyehaizaixiang' }, function (res) {
alert(res)
})具体实现
flutter中使用ds_bridge
此包是flutter_webview_pluginwebview与网页交互的工具包，需要先添加flutter_webview_plugin组件，具体flutter_webview_plugin组件使用请前往官网查看 ，在添加flutter_webview_plugin组件后，添加ds_bridge组件
1.配置依赖包
dependencies:
ds_bridge: ^0.0.12.在webview页面添加JavascriptChannel
webview.dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:yundk_app/routes/application.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import '../../utils/JsBridgeUtil.dart';
class WebviewPage extends StatefulWidget {
final String url;
final VoidCallback backCallback;
WebviewPage({
Key key,
@required this.url,
this.backCallback,
}) : super(key: key);
@override
_WebviewPageState createState() => _WebviewPageState();
}
class _WebviewPageState extends State<WebviewPage> {
String _title = '';
final flutterWebViewPlugin = FlutterWebviewPlugin();
final Set<JavascriptChannel> jsChannels = [
JavascriptChannel(
name: 'DsBridgeApp',
onMessageReceived: (JavascriptMessage msg) {
String jsonStr = msg.message;
JsBridgeUtil.executeMethod(FlutterWebviewPlugin(), jsonStr);
}),
].toSet();
StreamSubscription<String> _onUrlChanged;
@override
void initState() {
super.initState();
flutterWebViewPlugin.close();
// 监听 url changed
_onUrlChanged =
flutterWebViewPlugin.onUrlChanged.listen((String url) async {
});
// 监听页面onload
flutterWebViewPlugin.onStateChanged.listen((viewState) async {
if (viewState.type == WebViewState.finishLoad) {
flutterWebViewPlugin.evalJavascript('document.title').then((result) => {
setState(() {
_title = result;
})
});
}
});
}
@override
void dispose() {
_onUrlChanged.cancel();
flutterWebViewPlugin.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: WebviewScaffold(
appBar: new AppBar(
leading: IconButton(
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
icon: Icon(const IconData(0xe61b, fontFamily: 'IconFont'), color: Color(0xff333333), size: 18),
onPressed: (){
flutterWebViewPlugin.close();
Application.router.pop(context);
},
),
title: new Text(
_title,
style: TextStyle(color: Color(0xff333333), fontSize: 17),
),
actions: [
new IconButton(
icon: new Icon(
Icons.refresh_outlined,
color: Color(0xff333333),
size: 20
),
onPressed: () {
flutterWebViewPlugin.reload();
}
),
],
centerTitle: true,
elevation: 0,
),
url: widget.url,
javascriptChannels: jsChannels,
mediaPlaybackRequiresUserGesture: false,
withZoom: true,
withLocalStorage: true,
hidden: true,
)
);
}
}3.在JsBridgeUtil类中
utils/JsBridgeUtil.dart
import 'package:ds_bridge/ds_bridge.dart';
class JsBridgeUtil {
// 向H5调用接口
static executeMethod(flutterWebViewPlugin, String jsonStr) async{
DsBridge dsBridge = DsBridge(flutterWebViewPlugin);
Result result = dsBridge.dispatch(jsonStr);
if(result.method == 'share'){
result.callBack('收到网页端share事件，内容为${result.data}并返回此文本给网页');
}
if(result.method == 'share1'){
result.callBack('收到网页端share1事件');
}
}
}网页端使用dsbridge_flutter
此插件为网页端插件，配合flutter端ds_bridge一起使用
1.安装
npm install dsbridge_flutter2.使用
import 'dsbridge_flutter'
dsBridge.call(<String> method, <Object> data, <Function> callback)3.例子
import 'dsbridge_flutter'
dsBridge.call('share', { name: 'woyehaizaixiang' }, function (res) {
alert(res)
})总结
本文参考JSBridge实现了Flutter webview和网页端交互。具体用到的插件有Flutter端flutter_webview_plugin和ds_bridge、网页端有dsbridge_flutter。
到此这篇关于Flutter webview与网页通讯交互实现的文章就介绍到这了,更多相关Flutter webview与网页通讯内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
