最近在陪玩系统源码开发工作中，有个H5页面需要实现微信支付和支付宝支付的功能，现在已经完成，抽个时间写出来，分享给有需要的人。第一步：先判断当前环境判断陪玩系统源码中用户所属环境，根据环境不同，执行不同的支付程序。if(/MicroMessenger/.test(window.navigator.userAgent)){//alert('微信');}elseif(/AlipayClient/.test(window.navigator.userAgent)){//alert('支付宝');}else{//alert('其他浏览器');}第二步：如果是微信环境，需要先进行网页授权网页授权的详细介绍可以查看微信相关文档。这里不做介绍。第三步：1、微信支付陪玩系统源码实现微信支付有两种方法：1：调用微信浏览器提供的内置接口WeixinJSBridge2：引入微信jssdk，使用wx.chooseWXPay方法，需要先通过config接口注入权限验证配置。我这里使用的是第一种，在从后台拿到签名、时间戳这些数据后，直接调用微信浏览器提供的内置接口WeixinJSBridge即可完成陪玩系统源码中的微信支付功能。getRequestPayment(data){functiononBridgeReady(){WeixinJSBridge.invoke("getBrandWCPayRequest",{"appId":data.appId,//公众号ID，由商户传入"timeStamp":data.timeStamp,//时间戳，自1970年以来的秒数"nonceStr":data.nonceStr,//随机串"package":data.package,"signType":data.signType,//微信签名方式："paySign":data.paySign//微信签名},function(res){alert(JSON.stringify(res));//get_brand_wcpay_requestif(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();}},2、支付宝支付支付宝支付相对于微信来说，前端这块工作更简单 ，陪玩系统源码后台会返回给前端一个form表单，我们要做的就是把这个表单进行提交即可。相关代码如下：this.$api.alipayPay(data).then((res)=>{//console.log('支付宝参数',res.data)if(res.code==200){varresData=res.dataconstdiv=document.createElement('div')div.id='alipay'div.innerHTML=resDatadocument.body.appendChild(div)document.querySelector('#alipay').children[0].submit()//执行后会唤起支付宝}}).catch((err)=>{})以上便是“陪玩系统源码开发，H5页面中调用支付功能的实现”的全部内容，希望能给大家带来帮助。本文转载自网络，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理原文链接：