wordpress显示一个类目长沙优化网站技术厂家

近来需要实现一个功能：

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