微信公众号开发之微信支付代码记录的实现
需求说明
这个需求说明是完全没有必要的,但是还是写一下吧,但凡是做公众号的,一般都是需要了解这个微信支付的,不然基本的业务都没办法走,所以今天简单的记录一下微信支付的一些问题以及流程是怎么样的。记录的是jsapi支付,别的支付方式暂时没有记录,也就是拉起来付款界面的支付。
微信支付产品
https://pay.weixin.qq.com/static/product/product_index.shtml#payment_product
微信开发步骤
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3
这里简单的说一下,我们打开这哥链接以后其实是官方截图的配置,有一个支付配置和设置授权域名
首先是支付配置:最简单的办法是我们打开需要支付的公众号,右上角有三个点,直接复制url,这个url就是这里需要配置的url
至于下面的授权域名,我自己当时是没有进行配置的,这里可能是我疏忽了,但是我没有配置也没有影响我使用,所以这里我不确定要不要配置。
支付接口
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
functiononBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest',{ "appId":"wx2421b1c4370ec43b",//公众号名称,由商户传入 "timeStamp":"1395712654",//时间戳,自1970年以来的秒数 "nonceStr":"e61463f8efa94090b1f366cccfbbb444",//随机串 "package":"prepay_id=u802345jgfjsdfgsdg888", "signType":"MD5",//微信签名方式: "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89"//微信签名 }, function(res){ if(res.err_msg=="get_brand_wcpay_request:ok"){ //使用以上方式判断前端返回,微信团队郑重提示: //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。 } }); } if(typeofWeixinJSBridge=="undefined"){ if(document.addEventListener){ document.addEventListener('WeixinJSBridgeReady',onBridgeReady,false); }elseif(document.attachEvent){ document.attachEvent('WeixinJSBridgeReady',onBridgeReady); document.attachEvent('onWeixinJSBridgeReady',onBridgeReady); } }else{ onBridgeReady(); }
这段是官方的源码,我们是可以直接拿来使用的,这里主要是展示一下腾讯的签名是怎么生成的:
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
上面的五个参数其实appid是我们可以拿到的,时间戳是我们直接可以生成的,注意这里是秒数,不是毫秒,随机串这个可以直接自己写一个函数,生成一个32位以内的随机数,prepay_id这是后端提供接口,返回一个预付id,signType是md5加密,无可争议的,最后一个是签名,签名的规则是:
- 参数名ASCII码从小到大排序(字典序);
- 如果参数的值为空不参与签名;
- 参数名区分大小写;
- 验证调用返回或微信主动通知签名时,传送的sign参数不参与签名,将生成的签名与该sign值作校验。
- 微信接口可能增加字段,验证签名时必须支持增加的扩展字段
这个就比较有意思了,我做的时候直接用后端生成好的签名进行的,但是理论上我前端也是可以生成的,但是我失败了,可能是我顺序的问题或者是别的什么问题吧,这个不得而知了。
看源码
废话不说了,既然是记录,就直接贴源码:
- 步骤很简单:
- 根据js拿到code
- 根据code获取openid
- 根据openid获取到预付id
- 根据预付id加上一些必要参数拉起支付
- 判断支付的成功与否进行相应的操作
/** *@_fun_jsapi拉起微信付款的界面 */ _fun_jsapi(order_no){ letthat=this letopenid=sessionStorage.getItem('openid') if(openid&&that.timestamp&&that.nonceStr){ request({ method:'post', url:Constants.host_jsapi+api.jsapi, data:{ out_trade_no:order_no,//商家订单号 total_fee:that.account_price*100, product_id:'8501',//所含产品id body:'微信公众号订房-颐陆科技',//订单简述128字符(中文32位) detail:'',//订单详情60000字符(中文1500位) fee_type:'',//币种缺省值CNY attach:'',//用户附加字串,原样返回 limit_pay:'',//限制字串例:no_credit不收信用卡 goods_tag:'',//订单优惠标记 openid:openid,//仅在jsapi中会使用 } }).then((res)=>{ //alert(JSON.stringify(res)) if(res.data.result_code==='SUCCESS'){ that.prepay_id=res.data.prepay_id that.timestamp=res.data.time_stamp that.nonceStr=res.data.nonce_str that.paySign=res.data.pay_sign that.onBridgeReady() }else{ instance('error') } }).catch((err)=>{ instance(err); //alert(err); }) //instance(sessionStorage.getItem('openid')); }else{ instance('参数获取失败') } }, /** *@onBridgeReady */ onBridgeReady(){ letthat=this WeixinJSBridge.invoke( 'getBrandWCPayRequest',{ "appId":"wx7eb8183de8a1311b",//公众号名称,由商户传入 "timeStamp":that.timestamp+"",//时间戳,自1970年以来的秒数 "nonceStr":that.nonceStr,//随机串 "package":"prepay_id="+that.prepay_id,//预定单id "signType":"MD5",//微信签名方式: "paySign":that.paySign//微信签名 }, function(res){ if(res.err_msg=="get_brand_wcpay_request:ok"){ //instance('支付成功') that.$router.push({path:'/Pay_success'}) }elseif(res.err_msg=="get_brand_wcpay_request:ok"){ //that.$router.push({path:'/Pay_success'})取消支付 instance('取消支付') }else{ //instance('支付失败') } }) },
需要注意的是:微信支付的金额是分为单位的,也就是我们正常的钱需要进行*100的操作
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。