前言
今天，领导提了一个需求，就是flutter嵌入H5页面，大概需求是这样的！
- APP 弹出活动弹框
- 用户点击关闭按钮 - 弹框关闭 - 啥也不做
- 用户点击查看详情 - 跳转到H5商品列表页面
- 点击关闭按钮 - 关闭H5页面
- 点击商品 - 跳转到APP中的具体商品的详情页
实现
根据上面的需求，毕竟是第一次做flutter应用，当然首先就是google了！找了好几款插件。最终选定插件为flutter_webview_plugin: ^0.4.0。
首先是看文档，好在官网上还有个例子。下面是我简单的实现，如有不足、错误之处，请拍砖指教。由于是公司业务，这里仅使用demo模拟！
APP 弹出活动弹框
这里没什么东西，不做过多介绍，仅使用一张图来展示，由于要使用png图片，我自己简单是使用AI画了个！
image.png
具体插件
引入插件
- image.png
具体通讯代码
- flutter 代码
import 'package:feilu_app/pages/webview_page/webview_page_controller.dart';
import 'package:feilu_app/utils/app_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:get/get.dart';
class WebviewPagePage extends StatelessWidget {
WebviewPagePage({Key? key}) : super(key: key);
final controller = Get.find<WebviewPageController>();
@override
Widget build(BuildContext context) {
final Set<JavascriptChannel> jsChannels = {
JavascriptChannel(
name: 'appobject',
onMessageReceived: (JavascriptMessage message) {
controller.state.flutterWebviewPlugin.close();
Get.offNamed(
"/product/detial/${message.message}/${DateTime.now().millisecondsSinceEpoch}",
);
}),
};
return MaterialApp(
debugShowCheckedModeBanner: false,
routes: {
"/": (_) => MediaQuery.removePadding(
context: context,
child: WebviewScaffold(
url: "http://127.0.0.1:5500/demo.html",
userAgent: "xxx",
javascriptChannels: jsChannels,
appBar: AppBar(
elevation: 2,
title: const Text(
'WebView',
style: TextStyle(color: Colors.black87),
),
backgroundColor: Colors.white,
leading: GestureDetector(
onTap: () {
controller.state.flutterWebviewPlugin.evalJavascript(
'flutterCallJsMethod("我是flutter传递给js的数据")');
// flutterWebviewPlugin.close();
// Get.back();
},
child: const Icon(
AppIcons.ARROR_LEFT,
color: Colors.black87,
size: 30,
),
),
),
),
),
},
);
}
}
- H5代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebView</title>
</head>
<body>
<button id="jsb" onclick="send()">
发送数据到flutter
</button>
<p>收到的flutter数据 <span id="flutter"></span></p>
<script>
function send(params) {
appobject.postMessage('TJFDfwJF');
}
function flutterCallJsMethod(ms) {
document.getElementById('flutter').innerHTML=ms
alert(ms)
}
</script>
</body>
</html>
321.gif
返回
// 打开上面的这两行注释
controller.state.flutterWebviewPlugin.close();
Get.back();
333.gif
注意
两端通讯时，名字要保持一致！
结语
仅仅是简单的记录一下，由于比较忙，也没有记录的过于详细！如有疑问，留言即可！
