flutter 使用webView与 vue js通信传值 vue调用flutter方法 flutter调用vue方法

最新推荐文章于 2024-08-19 18:31:48 发布

置顶一月三十八天

最新推荐文章于 2024-08-19 18:31:48 发布

阅读量4.4k

点赞数

文章标签： flutter vue.js android ios webview

本文链接：https://blog.csdn.net/qq_41110569/article/details/108845705

版权

flutter的 webVIew 想和vue进行数据交换那就上demo

先来看看vue的html代码 //vue我不会问的曾老师

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="js/test.js" type="text/javascript" charset="utf-8" async></script>
	</head>
	<body>
		<div id="app-5">
		  <p>{{ message }}</p>
		  <button v-on:click="reverseMessage">商品详情</button>
		</div>
	</body>
</html>

再看看js文件吧

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  mounted() {
  	window['show'] = (msg) => {  //和flutter一样的方法
		this.show(msg);
	};
  },
  
  methods: {
	 
    reverseMessage: function () {
	  OpenShopDetails.postMessage('');
      this.message = this.message.split('').reverse().join('')
    },
	
	show: function (msg){
		this.message = msg;
		OpenShopDetails.postMessage($a);
	}
	
  }
})

//reverseMessage 这个方法会发送一个消息到flutter那边接收
//show这个方法会调用flutter的一个方法仅供参考我自己也说不清这个够用

flutter 代码

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_rblcmall/pages/index/shop_details/shop_details.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewTest extends StatefulWidget {
  @override
  _WebViewTestState createState() => _WebViewTestState();
}

class _WebViewTestState extends State<WebViewTest> {
  final Completer<WebViewController> _controller =
  Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('yx'),

        actions: <Widget>[
          SampleMenu(_controller.future),
        ],
      ),

      body: Builder(builder: (BuildContext context) {
        return WebView(
          initialUrl: 'http://175.168.1.102:12138/helloWorld/test.html',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
          javascriptChannels: <JavascriptChannel>[
            _shopDetailsJavascriptChannel(context),
          ].toSet(),

          gestureNavigationEnabled: true,
        );
      }),
    );
  }

//这个OpenShopDetails 和vue那端对应的
  JavascriptChannel _shopDetailsJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'OpenShopDetails',
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);
          Navigator.push(context, MaterialPageRoute(builder: (context)=>ShopDetails()));
        });
  }

}

enum MenuOptions {

  navigationShopDetails,

}

class SampleMenu extends StatelessWidget {
  SampleMenu(this.controller);

  final Future<WebViewController> controller;
  final CookieManager cookieManager = CookieManager();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<WebViewController>(
      future: controller,
      builder:
          (BuildContext context, AsyncSnapshot<WebViewController> controller) {
        return PopupMenuButton<MenuOptions>(
          onSelected: (MenuOptions value) {
            switch (value) {

              case MenuOptions.navigationShopDetails:
                _showShopDetails(controller.data, context);
                break;
            }
          },
          itemBuilder: (BuildContext context) => <PopupMenuItem<MenuOptions>>[
            const PopupMenuItem<MenuOptions>(
              value: MenuOptions.navigationShopDetails,
              child: Text('跳转商品'),
            ),

          ],
        );
      },
    );
  }


  //跳转详情 
  Future<void> _showShopDetails( WebViewController controller, BuildContext context) async {

    DateTime now = DateTime.now();
    await controller.evaluateJavascript(
        "window.show('${now.toIso8601String()}');"
    );
  }

}