Flutter中使用WebView接入微信h5支付

需求: flutter项目中使用webView, webView中使用微信h5支付.

1. 方案1, 使用webview_flutter库(安卓失败)

webview_flutter: 0.3.22+1

 WebView(
            initialUrl: 'https://www.example.com',
            javascriptMode: JavascriptMode.unrestricted,
            navigationDelegate: (NavigationRequest request) async{
              var url = request.url;
              print('拦截URL = $url');
              if(url.startsWith("weixin://wap/pay?"))
              {
                   await launch(url);
                  return NavigationDecision.prevent;
              }
              return NavigationDecision.navigate;
            },
          

webView中接入微信h5支付, 正常只要拦截url(weixin://wap/pay?), 打开微信app即可。iOS中正常可以进行微信支付,但是在安卓手机上就坑了, 拦截之后, 打开微信后就报错(商家参数格式有误, 请联系商家解决), 前后端一切切配置都是正常的, 就是安卓报错.在这里插入图片描述

经过搜索发现安卓中的webView有一个参数 ignoreSSLErrors, 忽略SSL错误, 设置为true即可. 但是webview_flutter库里面并没有该参数, 故使用flutter_webview_plugin库.

方案2, 使用flutter_webview_plugin

把ignoreSSLErrors参数设置为true, 即可解决安卓中出现的问题


final _flutterWebviewPlugin = new FlutterWebviewPlugin();

WebviewScaffold(
                url: widget.url,
                withJavascript: true,
                clearCache: true,
                ignoreSSLErrors: Platform.isAndroid ? true: false,
              )


void initState() {

    _flutterWebviewPlugin.onStateChanged.listen((event) async{
      if (event.type == WebViewState.shouldStart) {//拦截即将展现的页面
        if (event.url.startsWith("weixin://")) {
          _flutterWebviewPlugin.stopLoading();//停止加载
          await launch(event.url);
          return;
        }
        if(event.url.startsWith("alipays://") || event.url.startsWith("alipay://")) {
          await launch(event.url);
        }
      }
   
    super.initState();
  }
Flutter 中,虽然它主要用于构建原生应用程序,但你可以通过混合使用 FlutterWebview 和特定的库来模拟微信小程序的体验,并嵌入 H5 页面。以下是一个简单的步骤指南: 1. **安装依赖**: - 首先,你需要安装 `flutter_webview_plugin` 和可能需要的其他支持库,比如用于分享、推送等功能的相应库。在 `pubspec.yaml` 文件中添加它们。 ```yaml dependencies: flutter: sdk: flutter webview_flutter: ^2.0.13 # 或者最新的版本 share_plus: ^2.0.0 # 如果你需要分享功能 # 其他所需库... ``` 2. **加载 H5 页面**: 使用 `WebViewController` 类加载网页。例如,在一个函数中,你可以这样创建一个新的 WebViewController 并显示 H5 页面: ```dart import 'package:flutter/material.dart'; import 'package:flutter/webview_flutter/flutter_webview_plugin.dart'; Future<void> openH5Page(String url) async { final WebViewController controller = await WebViewPlugin.loadUrl(url); ScaffoldMessenger.of(context).showWebview(controller); } ``` 3. **模拟微信小程序交互**: - 虽然 Flutter Web 没有完整的微信小程序 API,但你可以使用一些开源库,如 `flutter_wechat_miniprogram` 来实现基础的分享、导航等模拟。 - 对于更复杂的交互,你可能需要直接在 H5 里处理,通过 JavaScript 与 Flutter 进行通信。 4. **用户体验调整**: - 确保使用合适的布局(如 tabBar 或底部导航栏)来提供类似微信小程序的界面结构。 - 根据微信小程序的UI规范,对 Flutter 的样式进行定制。 5. **运行测试**: 使用 `flutter run -d chrome` 或 `flutter run -d web-server` 在 Chrome 浏览器上查看效果,因为微信小程序的模拟通常是在浏览器环境中完成的。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值