Flutter?webview與網(wǎng)頁(yè)通訊交互實(shí)現(xiàn)

更新時(shí)間：2022年04月13日 15:11:58 作者：我也還在想

最近要在Flutter項(xiàng)目的基礎(chǔ)上加一個(gè)實(shí)時(shí)定位的功能,下面這篇文章主要給大家介紹了關(guān)于Flutter?webview與網(wǎng)頁(yè)通訊交互實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在app開發(fā)中我們有JSBridge來(lái)實(shí)現(xiàn)app和網(wǎng)頁(yè)端通訊，現(xiàn)參考JSBridge實(shí)現(xiàn)了Flutter webview和網(wǎng)頁(yè)端通訊。

預(yù)覽

flutter

import 'package:ds_bridge/ds_bridge.dart';
class JsBridgeUtil {
  // 向H5調(diào)用接口
  static executeMethod(flutterWebViewPlugin, String jsonStr) async{
    DsBridge dsBridge = DsBridge(flutterWebViewPlugin);
    Result result = dsBridge.dispatch(jsonStr);
    if(result.method == 'share'){
      result.callBack('收到網(wǎng)頁(yè)端share事件，內(nèi)容為${result.data}并返回此文本給網(wǎng)頁(yè)');
    }
    if(result.method == 'share1'){
      result.callBack('收到網(wǎng)頁(yè)端share1事件');
    }
  }
}

網(wǎng)頁(yè)

import 'dsbridge_flutter'
dsBridge.call('share', { name: 'woyehaizaixiang' }, function (res) {
  alert(res)
})

具體實(shí)現(xiàn)

flutter中使用ds_bridge

此包是flutter_webview_pluginwebview與網(wǎng)頁(yè)交互的工具包，需要先添加flutter_webview_plugin組件，具體flutter_webview_plugin組件使用請(qǐng)前往官網(wǎng)查看，在添加flutter_webview_plugin組件后，添加ds_bridge組件

1.配置依賴包

dependencies:
    ds_bridge: ^0.0.1

2.在webview頁(yè)面添加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)聽頁(yè)面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調(diào)用接口
  static executeMethod(flutterWebViewPlugin, String jsonStr) async{
    DsBridge dsBridge = DsBridge(flutterWebViewPlugin);
    Result result = dsBridge.dispatch(jsonStr);
    if(result.method == 'share'){
      result.callBack('收到網(wǎng)頁(yè)端share事件，內(nèi)容為${result.data}并返回此文本給網(wǎng)頁(yè)');
    }
    if(result.method == 'share1'){
      result.callBack('收到網(wǎng)頁(yè)端share1事件');
    }
  }
}

網(wǎng)頁(yè)端使用dsbridge_flutter

此插件為網(wǎng)頁(yè)端插件，配合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)
})

總結(jié)

本文參考JSBridge實(shí)現(xiàn)了Flutter webview和網(wǎng)頁(yè)端交互。具體用到的插件有Flutter端flutter_webview_plugin和ds_bridge、網(wǎng)頁(yè)端有dsbridge_flutter。

到此這篇關(guān)于Flutter webview與網(wǎng)頁(yè)通訊交互實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Flutter webview與網(wǎng)頁(yè)通訊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: