flutter web 对接微信支付

flutter web 已经支持稳定版，根据公司要求，需要开发公众号，项目中需要对接微信支付，在网上看了下这类，资料比较少，so: 我整理下我调试的心得，提供给大家参考。

1. 微信公众号支付对接前提准备

• 申请微信商户号
• 申请微信服务号

2. 微信公众号配置（只针对前端需要配置的）

网页授权，主要是为了获取code ,一般为首页地址。或者支付页面地址（不推荐）

3. 支付对接整体流程

• 获取微信code
• 用获取到的code 请求后台Api 获取openID
• 创建订单信息
• 拉起微信支付

4. 获取微信code

• 调用微信微信获取code方法,需要插件：url_launcher url_encoder

  void initState() {
    super.initState();
    Uri u = Uri.parse(js.context['location']['href']);
    String code = u.queryParameters['code']!=null?u.queryParameters['code']:'0';
    String state = u.queryParameters['state']!=null?u.queryParameters['state']:'0';

    if(code =='0'&&state == '0'){
      // Util.showMsg('code is 0');
      _getWxCode();
    }else{
      _getOpenId(code);
    }
  }
复制代码

  _getWxCode() async{
    final url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2db21c1fd1f97062&response_type=code&scope=snsapi_base&state=1&redirect_uri=${urlEncode(text: "https://xxx.xxxx.xxx/xxxx/xxxx")}#wechat_redirect';
    print(url);
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
复制代码

redirect_uri:获取code授权地址，一般为xxx.xxxx.xxx/xxxx/xxx?co…, 在获取code和配置微信公众号网页授权的时候会发现，我们flutter生成路由的url过程中，会带有#/标识，而我们在配置的时候，微信官会提示我们带#/的url不合法，我们尝试把#/去调发现,页面为404，所以我们要解决这个问题也就是#/去掉也能访问。我们把路由方式改为：Path模式setUrlStrategy(PathUrlStrategy());,具体请看：api.flutter.dev/flutter/flu…

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  setUrlStrategy(PathUrlStrategy());
  await SpUtil.getInstance();
  try {
    if (Platform.isAndroid) {
      SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ).copyWith(statusBarBrightness: Brightness.dark);
      SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
    }
  } catch (e) {}

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => TabbarSelectedIndexProvider()),
        ChangeNotifierProvider(create: (_) => UserInfoProvider()),
        ChangeNotifierProvider(create: (_) => ShoppingCartProvider()),
      ],
      child: MyApp(),
    ),
  );
}
复制代码

这时我们不带#/也可以访问。但是在加载xxx.xxxx.xxx/xxxx/xxx?co…
url的时候会发现为空白页面，这个时候需要后台人员配置Nginx，让该url带参也可以访问就OK了。

5.获取openID

  _getOpenId(String code) async{
    BaseEntity baseEntity = await DioManager().postForm(AppApi.getWxOpenid,data: {'code': code});
    if (baseEntity.code == DioManager.successCode) {
      openId = baseEntity.result['openId'];
    } else {
    }
  }
复制代码

6.下单

  _weChatPayOrder(String openid) async{
    BaseEntity baseEntity = await DioManager().postForm(AppApi.weChatPayOrder,data: {'amount': _textEditingController.text,'openid': openid,'equipment':'web'});
    if (baseEntity.code == DioManager.successCode) {
    ///调用js代码拉起微信支付
      var request = js.context.callMethod("onBridgeReady",[baseEntity.result['appId'],baseEntity.result['timeStamp'],baseEntity.result['nonceStr'],baseEntity.result['package'],baseEntity.result['signType'],baseEntity.result['paySign']]);
    } else {
      print('result-------->${baseEntity.message}');
      /// 失败
    }
  }
复制代码

7.编辑js代码调起微信

function onBridgeReady(appId,timeStamp,nonceStr,package,signType,paySign){
   alert("发起请求：");// 测试用flutter 是否成功调用js
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
            "appId":appId,     //公众号名称，由商户传入
            "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数
            "nonceStr":nonceStr, //随机串
            "package":package,
            "signType":signType,         //微信签名方式：
            "paySign":paySign //微信签名
        },
        function(res){
            if(res.err_msg == "get_brand_wcpay_request:ok" ){
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                return "true";
            }
            else
                return "false";
        });
}
复制代码