Flutter webview与网页通讯交互实现

更新时间：2022年04月13日 15:11:58 作者：我也还在想

最近要在Flutter项目的基础上加一个实时定位的功能,下面这篇文章主要给大家介绍了关于Flutter webview与网页通讯交互实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

前言

在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.1

2.在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_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与网页通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Android实现调用震动的方法
这篇文章主要介绍了Android实现调用震动的方法,实例分析了Android中Vibrator类的调用与使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
Android实现伸缩弹力分布菜单效果的示例
本文介绍下在Android中实现伸缩弹力分布菜单效果。这种效果比较炫酷，有需要的朋友可以参考一下。
2016-10-10
在Android平台上实现消息推送功能
随着移动互联网应用的飞速发展,消息推送已成为移动应用中不可或缺的功能,在Android平台上,实现消息推送涉及到服务端的消息发送、客户端的消息接收、通知渠道（Notification Channels）的管理以及应用在前台和后台不同状态下的处理等多个方面,下面小编给大家详细介绍一下
2025-04-04
android 九宫格滑动解锁开机实例源码学习
开机密码的样式种类多种多样，五花八门.本文接下来介绍滑动九宫格来达到开机目的，感兴趣的朋友可以了解下
2013-01-01
Android仿一号店货物详情轮播图动画效果
这篇文章主要为大家详细介绍了Android-仿一号店货物详情轮播图动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
Android编程实现实时监听EditText文本输入的方法
这篇文章主要介绍了Android编程实现实时监听EditText文本输入的方法,结合实例形式分析了EditText控件及事件响应相关操作技巧,需要的朋友可以参考下
2017-06-06
Flutter开发之支持放大镜的输入框功能实现
在Flutter开发时，有时为了优化用户输入体验，往往会需要输入框支持在移动光标过程中可以出现放大镜功能。本文将为大家介绍实现的方法，需要的可以参考一下
2022-02-02
Android 曲线图的绘制示例代码
本篇文章主要介绍了Android 曲线图的绘制示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
RxJava入门指南及其在Android开发中的使用示例
RxJava是JVM的一个扩展库,它能够帮助Java更加方便地实现基于事件的编程,这对安卓来说十分有用,接下来就一起来看一下RxJava入门指南及其在Android开发中的使用示例:
2016-06-06
Android中判断listview是否滑动到顶部和底部的实现方法
下面小编就为大家分享一篇Android中判断listview是否滑动到顶部和底部的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-11-11