flutter web 對接微信支付

flutter web 已經支持穩定版，根據公司要求，須要開發公衆號，項目中須要對接微信支付，在網上看了下這類，資料比較少，so: 我整理下我調試的心得，提供給你們參考。html

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…web

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了。api

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";
        });
}
複製代碼

flutter web 對接微信支付 JsApi