[移动开发]flutter接入H5支付微信支付宝不能唤醒app解决方案

webview容器

推荐使用： webview_flutter

根据webview_flutter文档允许运行js后，前端通过window.localtion.href跳转 唤醒微信支付宝，并不能正常唤醒。

在 navigationDelegate 下拦截 唤醒 app请求，然后导入url_launcher想用launch拉起微信和支付宝的小手，会吊起IOS微信、安卓支付宝。但是就是吊不起IOS支付宝、安卓微信。

最后公司大佬接手后，不断的测试。发现页面在等待一段时间后就可以正常唤醒app

然后在onWillPop添加future 正常唤醒app 完成支付请求

onWillPop: () {
    Navigator.pop(context);
    // 安卓端微信H5支付吊不起来 大多是是因为这个
    if (title == 'H5网站title属性') {
        return Future.value(false);
    } else {
        return Future.value(true);
    }
}

不得不说，大佬就是大佬

最后，完整拦截打开app代码如下：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:webview_flutter/webview_flutter.dart';

///通用webview
class WebViewPage extends StatefulWidget {
  String title; // 网址title
  String data; // 网页地址
  WebViewPage(this.data, this.title);

  @override
  WebViewExampleState createState() => WebViewExampleState(data, title);
}

class WebViewExampleState extends State<WebViewPage> {
  var data;
  var title;
  late WebViewController _controller;

  WebViewExampleState(this.data, this.title);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        Navigator.pop(context);
        // 安卓端微信H5支付吊不起来 大多是是因为这个
        if (title == 'H5网站title属性') {
          return Future.value(false);
        } else {
          return Future.value(true);
        }
      },
      child: Scaffold(
          body: Wrap(
        children: [
          Container(
            height: MediaQuery.of(context).size.height,
            child: WebView(
              // 网页地址
              initialUrl: data,
              // 允许运行js
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller) {
                _controller = controller;
                // 给网页添加referer头信息
                _controller.loadUrl(data, headers: {"Referer": data});
              },
              // 拦截支付
              navigationDelegate: (NavigationRequest request) {
                if (Platform.isAndroid) {
                  if (request.url.startsWith("https://wx.tenpay.com")) {
                    _controller.loadUrl(request.url,
                        headers: {"Referer": 'H5 Referer'});
                    return NavigationDecision.prevent;
                  }
                  if (request.url.startsWith("weixin://wap/pay")) {
                    launch(request.url);
                    return NavigationDecision.prevent;
                  }
                  if (request.url.startsWith("alipays") ||
                      request.url.startsWith("alipay://")) {
                    launch(request.url);
                  }
                } else if (Platform.isIOS) {
                  if (request.url.startsWith("weixin://wap/pay") ||
                      request.url.startsWith("alipays") ||
                      request.url.startsWith("alipay://")) {
                    launch(request.url);
                  }
                }
                return NavigationDecision.navigate;
              },
              // 与JS约定好的方法名
              javascriptChannels: <JavascriptChannel>[
                // goBackLastPage
                JavascriptChannel(
                  name: "方法名",
                  onMessageReceived: (JavascriptMessage message) {
                    // 吧啦吧啦
                    // message js传入的参数
                  },
                ),
              ].toSet(),
            ),
          )
        ],
      )),
    );
  }
}