flutter web 微信授权和微信支付

微信官网开发文档：概述 | 微信开放文档

flutter web 微信授权

1 .通过微信开放平台获取授权参数

参数说明
appid 公众号的唯一标识

redirect_uri 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理

response_type 返回类型，请填写code

scope 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

state 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节

wechat_redirect 是 无论直接打开还是做页面302重定向时候，必须带此参数

2.拼接参数，得到跳转url

 import 'dart:html';    

String appid=xxx;

String redirect_uri=xxx;//你的跳转url，微信跳回到你的项目页面，若页面链接有特殊字符需要处理urlEncode(text: "你跳转的url")或者Uri.encodeComponent('你跳转的url')

final url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect';

///使用js的方法跳转，也可以使用url_launcher库
window.location.href = url;

3.获取微信回到url参数code

在redirect_uri设置的回调链接跳转的页面中解析微信回调的链接url:

import 'dart:html';

///前端知识，可以咨询前端开发者，如何获取页面链接，并解析链接获取链接地址中的参数 
Uri u = Uri.parse(window.location.href);
String code = u.queryParameters['code'] ?? '';

4.通过code，给后端获取openId，和自己需要的字段如token等等

注：微信授权失败可能的原因：链接上面的#号没去除，通过url_strategy库去除网页URL中的“#”(hash)

flutter web 微信支付

我们使用的支付方式是微信内h5支付，之前用过微信二维码支付，不过用户支付完成后整个页面会被关闭，只能再次点击链接才能看到订单。
h5支付主要分为两步

1.发起支付请求，解析后端支付参数

后端通过之前拿到的openId，提交微信支付请求，然后会给前端支付参数，格式如下：

"payInfo": "{\"appId\":\"xxx\",\"timeStamp\":\"xxx\",\"nonceStr\":\"xxx\",\"package\":\"prepay_id=xxx\",\"signType\":\"RSA\",\"paySign\":\"jUIZCTn4iePqkERcECVxagu1/9YHXc/nyaSfGE0EsYcpxBr/L3wk3L+5BP14mEOWJNokGUGgRrq2ALzTmITioTa+I5VB6rMGnExDCctm4Gllvx7X63LxMUGzYaUZJo5EI6Y46QoOF44URMOcsQQeVVv4iwnxTx0XhvGx5F/1vXQrVUbXUppzdZDyOsZE3fBoyLcXrUQvXHw2EPv0D8qMY59sVliJ+q0Hr8PB56uLJl/iIX3e0gNJXrpq6aqx1fyjejV/qoxUILUbC1JgyTAUw6OlX4fdnHzG688E9FfE8C30wntnI0PKGrSzSKuCK370g5AUp43WtJ2DDpT44yuhdg==\"}"

2.前端通过js唤起微信支付

flutter 使用js代码步骤如下：

（1）引入js文件

在web/index.html中加入：

<!--微信支付-->
<!--注意路径要写对（src）-->
<script src="js/wxPay.js" type="application/javascript"></script>

我的js存放目录：

 （2）编写js代码

wxPay.js文件内容如下：

//微信支付
function onBridgeReady(appId,timeStamp,nonceStr,packageValue,signType,paySign){
   window.WeixinJSBridge.invoke(
   'getBrandWCPayRequest', {
       "appId":appId,     //公众号ID，由商户传入
       "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数
       "nonceStr":nonceStr, //随机串
       "package":packageValue,
       "signType":signType,         //微信签名方式：
       "paySign":paySign //微信签名
   },
   function(res){
       ///dart提供的方法，通过js调用wxPayOperate来实现js与dart的通信
       wxPayOperate(res.err_msg);

});
}
function toPay(appId,timeStamp,nonceStr,packageValue,signType,paySign){
           //下面是解决WeixinJSBridge is not defined 报错的方法
           if (typeof WeixinJSBridge == "undefined") {//微信浏览器内置对象。参考微信官方文档
               if (document.addEventListener) {
                   document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
               } else if (document.attachEvent) {
                   document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                   document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
               }
           } else {
               onBridgeReady(appId,timeStamp,nonceStr,packageValue,signType,paySign);

           }
}

（3）flutter web中使用js

import 'dart:js';
//将dart方法传给js，通过js调用wxPayOperate来实现js与dart的通信
    context["wxPayOperate"] = wxPayOperate;
    //调用js的函数来执行想要的操作
    context.callMethod("toPay", [
      param['appId'],
      param['timeStamp'],
      param['nonceStr'],
      param['packageValue'],
      param['signType'],
      param['paySign']
    ]);



  ///给js 提供回调的方法
  wxPayOperate(String callbackStr) {
    // 关闭弹窗
    closeProgress();
    if (callbackStr == "get_brand_wcpay_request:ok") {
      // 使用以上方式判断前端返回,微信团队郑重提示：
      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      ///下面是支付成功后的逻辑，根据自己的业务写
      MyNavigatorUtils.mineOrderPaySuccessPage(
        _pageContext,
        widget.bean ?? Records(),
        (result) {},
        replace: true,
      );
    } else {
      showToast('支付失败！');
    }
  }