@H5微信支付前端处理流程后台基于项目需求，需要搭建H5端商城，自然少不了支付。鉴于微信的社交能力，我们前期只考虑了微信支付。过程中遇到了一些问题，简单整理了一下。这里只说前端需要处理的，其他配置和参数后端会为你调整，就不介绍了。支付方式1.WeixinJSBridge(jsApi)用于接入微信支付。详情请参考文档。可以在微信环境下进行支付，可以通过WeixinJSBridge（微信内置对象）暂停支付。2.支付流程需要去微信获取授权换取openid。（建议在进入支付页面前先获取openid，因为我在开发过程中发现，如果用户在当前页面刷新页面获取，会报错，而获取的code是用户授权的isonlyCanbeusedonce.）我们的项目使用的是React。所以使用window.WeixinJSBridge判断是否有WeixinJSBridge，否则代码会报错。//外部调用直接导入wxPay.js传入支付参数和跳转页面路由//首先封装具体的封装方法//参数说明历史：路由方便支付成功后跳转到指定页面。//params:支付函数需要的参数onBridgeReady(params,history){if(window.WeixinJSBridge){window.WeixinJSBridge.invoke('getBrandWCPayRequest',{appId:params.appId,//公众号名称，由merchant传入timeStamp:params.timeStamp,//时间戳，从1970年开始的秒数.paySign,//微信签名},function(res){if(res.err_msg==='get_brand_wcpay_request:ok'){history.replace({pathname:params.pathname,});}},);}}导出默认函数wxPay(params,history){console.log('paymentfunction',params);if(typeofWeixinJSBridge==='undefined'){if(document.addEventListener){document.addEventListener('WeixinJSBridgeReady',onBridgeReady(params,history),false);}elseif(document.attachEvent){document.attachEvent('WeixinJSBridgeReady',onBridgeReady（参数，历史））；document.attachEvent('onWeixinJSBridgeReady',onBridgeReady(params,history));}}else{onBridgeReady(params,history);}}非微信支付1.该方式支付完成后微信推荐增加二次确认弹窗，确认用户是否完成支付。为什么要这样做，在开发文档中有体现2.关于支付完成后的回调地址，建议使用前端自己写，发给后端，这样回调地址会改变。灵活多变，方便开发和测试。ps注意1.由于各厂商浏览器机制不同，部分手机在支付完成后通过配置的redirect_url返回二次确认页面时，浏览器会刷新，所以您的弹框可能无法正确显示，所以自己可以用一些方法（增加参数/本地存储）来判断。2、ios手机浏览器一定要刷新。//微信环境外的支付后台会直接返回一个url，直接在当前页面打开结果唤醒微信暂停支付。window.location.href=res.data.mwebUrl;否则1。调试时微信支付不支持本地IP，请配置开发域名和官方域名。2、项目建议不要使用hash(#)路由方式，会给你带来意想不到的bug。3.如有错误请评论指正。
