flutter和vue3项目利用webview_flutter插件通信
近来需要实现一个功能：
flutter项目的会员中心页面跳转到vue3项目的活动页，点击该活动页面的“签到”按钮后到flutter项目的积分中心页面进行签到，签到成功后手动返回上一个页面即vue3活动页面的按钮状态更新问题（需更新为“已签到”）。
实现方法：通过webview_flutter
webview_flutter 是 Flutter 官方提供的一个跨平台 WebView 插件，用于在 Flutter 应用中嵌入网页内容。它基于 Android 的 WebView 和 iOS 的 WKWebView 实现，支持多平台（包括 Android 和 iOS），并提供了丰富的功能。
pub add webview_flutter
pubspec.yaml文件里：
webview_flutter:git:url: "https://gitee.com/openharmony-sig/flutter_packages.git"path: "packages/webview_flutter/webview_flutter"
所需要使用处引入：
import 'package:webview_flutter/webview_flutter.dart';
步骤一：
须实现：flutter项目的会员中心页面跳转到vue3项目的活动页
会员中心的flutter代码：
InkWell(onTap: () async {// 根据点击的轮播图索引设置对应的 URLString targetUrl = widget.url;// 提前声明 controller 变量late WebViewController controller;controller = WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted)..loadRequest(Uri.parse(targetUrl))..setNavigationDelegate(NavigationDelegate(onPageFinished: (String url) {},));// 跳转到 WebView 页面await Navigator.push(context,MaterialPageRoute(builder: (context) => WebViewWidget(controller: controller,),),);
}
步骤二：
须实现：点击该活动页面的“签到”按钮后到flutter项目的积分中心页面进行签到。
处理方法：通过 JavaScript 通道（JavaScriptChannel），以实现 Flutter 代码与 WebView 中 JavaScript 代码之间的双向通信。
vue3页面代码：
const toComplete = () => {if (window.BackToFlutter) {window.BackToFlutter.postMessage('');}
};
flutter项目的会员中心页面代码（触发回调函数跳到积分中心页面）：
InkWell(onTap: () async {// 根据点击的轮播图索引设置对应的 URLString targetUrl = widget.url