vuedemo：下载地址文章底部技术栈vuevue-cliweixin-js-sdk(WeChatjsSdk)微信支付术语WechatjsSdk需要提前初始化和初始化加密参数需要通过后台计算返回给前台后初始化url就是微信支付中配置的前台url。（产品中心=>开发配置=>JSAPI支付=>添加支付授权目录）支付流程前端需要的核心操作，总共分为以下几个步骤：初始化（包括加密结果）。初始化微信jsSdk（wx.ready()完成初始化）。用户确认支付，调用后台下单接口，获取微信统一订单id，后台统一下单时的加密信息。前端调用微信jsSdk.chooseWXPay()调用微信支付页面。支付成功jsSdk回调success支付失败，jsSdk回调fail取消支付，jsSdk回调cancel触发回调机制处理回调结果。注意：微信jsSdk触发的结果回调同步成功不代表真正成功，业务结果需要请求后台获取最终支付状态。代码获取jsSdk初始化配置，完成初始化操作created(){letconfig={url:'https://app.*.com/'};letpromises=Http.post('/wx/getSdkConfig',config);promises.then((response)=>{letcontent=response.content;config.nonceStr=content.nonceStr;config.signature=content.signature;config.timestamp=content.timestamp;config.appId=content.appId;config.debug=true;config.jsApiList=['chooseWXPay'];wx.config(config);wx.ready(()=>{this.wx=wx;});wx.error(function(res){console.info('errorverificationfailed',res);});});}发起支付，调出微信支付页面pay(){letparams={payAmount:this.payAmount};letpromises=Http.post('/transaction/do',params);让那个=这个；promises.then((response)=>{if(response.status===0){letrecordOrderGid=response.content.recordOrderGid;try{this.wx.chooseWXPay({timestamp:response.content.timeStamp,//支付签名时间戳，注意微信jssdk中使用的时间戳字段全部为小写。但是最新版支付后台生成签名使用的timeStamp字段名需要大写。S字符nonceStr:response.content.nonceStr,//支付签名随机字符串，不超过32位package:'prepay_id='+response.content.prepayId,//统一支付接口返回的prepay_id参数值，提交格式如下：prepay_id=\*\*\*)signType:response.content.signType,//签名方式，默认为'SHA1'，使用新版支付时需要传入'MD5'paySign:response.content.sign,//支付签名成功:function(){that.doWxPayCallback(recordOrderGid);},失败:function(){that.doWxPayCallback(recordOrderGid);},cancel:function(){console.info('取消支付，如需支付请继续。');}});}catch(e){console.info('订单支付异常，请稍后重试。');}}else{console.info(response.message);}});}处理微信支付结果doWxPayCallback:函数(recordOrderGid){让taskCount=0;this.intervalid1=setInterval(()=>{taskCount++;if(taskCount>5){clearInterval(this.intervalid1);}letstatusPromise=this.queryOrderStatus(recordOrderGid);statusPromise.then(sta=>{if(sta.status===0){console.info(sta.content);letorderStatus=sta.content.status;if(orderStatus===1){clearInterval(this.intervalid1);this.$router.push({路径:'resultOrder',query:{}});}elseif(orderStatus===2){clearInterval(this.intervalid1);console.info('订单支付失败的'）;}elseif(orderStatus===0){console.info('订单支付处理');}}});},2000);}注意订单签名统一，后续前端拉取微信支付的签名需要统一，即都使用MD5加密。如果两者不同，会导致前端拉取微信支付失败。这是一个巨大的坑。因为这个原因调试了很久，微信也没有在文档中明确标明统一下单的签名验证方式需要和前端拉取微信支付的签名验证方式保持一致.微信jsSdk初始化信息需要后台加密。vue支付业务流程文档接口地址描述调用者src/components/index/Index.vue=>created()初始化微信支付jsApi配置，初始化参数由后台返回，url为前台当前域名，需要和微信后台配置一样，选择WXPay代表使用微信支付插件，还有很多其他插件。具体请参考微信官方文档。终端发起订单，获取后台统一订单id，调用微信jsApi.chooseWXPay调出微信支付页面。支付成功会调用success方法，支付失败会调用fail方法，取消支付会调用cancel方法。此处取得的成功不能作为支付成功的依据。支付结果需要通过调用后端接口异步获取=>Terminal=>微信sdksrc/components/index/Index.vue=>methods.doWxPayCallback()微信支付结果处理后，循环调用后端获取支付结果，查询一定次数后跳转到账单或结果页面，根据个人业务需要微信sdk=>前端=>后端博客，请移步：https://www.oopmind.comDemo关注公众号后台回复【微信支付】联系方式如果Pica_pay对你有帮助，可以关注作者支持一下，每天我会不定时回复消息（有问题可以留言）.微信公众号预览
