Flutter?webview與網頁通訊交互實現
更新時間：2022年04月13日 15:11:58 作者：我也還在想
最近要在Flutter項目的基礎上加一個實時定位的功能,下面這篇文章主要給大家介紹了關于Flutter?webview與網頁通訊交互實現的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
前言
在app開發(fā)中我們有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();
// 監(jiān)聽 url changed
_onUrlChanged =
flutterWebViewPlugin.onUrlChanged.listen((String url) async {
});
// 監(jiān)聽頁面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_flutter
2.使用
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與網頁通訊內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Android開發(fā)中獲取View視圖寬與高的常用方法小結
這篇文章主要介紹了Android開發(fā)中獲取View視圖寬與高的常用方法,結合實例形式總結分析了Android獲取View視圖寬與高的三種常用方法及使用場景,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了Android實現回彈ScrollView的原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Android 線程之自定義帶消息循環(huán)Looper的實例
這篇文章主要介紹了Android 線程之自定義帶消息循環(huán)Looper的實例的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了使用RecyclerView實現瀑布流高度自適應，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了Android自定義控件EditText的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
Android中ViewPager獲取當前顯示的Fragment
這篇文章主要介紹了Android中ViewPager獲取當前顯示的Fragment的兩種方法，一種是使用 getSupportFragmentManager().findFragmentByTag()方法，另一種是重寫適配器的 setPrimaryItem()方法，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
android 使用虛擬機安裝apk對一些新手朋友會很陌生，今天教大家使用使用虛擬機安裝apk文件，步驟很詳細，有需要的朋友可以參考下2012-12-12
這篇文章主要給大家介紹了關于kotlin實現通知欄提醒功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用kotlin具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
這篇文章主要為大家詳細介紹了Android自定義通用標題欄CustomTitleBar，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
打飛機游戲終極BOSS Android實戰(zhàn)打飛機游戲完結篇
打飛機游戲終極BOSS，Android實戰(zhàn)打飛機游戲完結篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07