Vue3微信JSAPI支付和微信支付宝H5支付详细教程

微信H5支付和支付宝H5支付

微信支付宝H5支付比较简单把下单信息传给接口会返回一个URL支付地址条出去即可

1.注意点安卓和IOS手机跳转方式所不同

识别设备判断是IOS还是安卓区分跳转

var isAndroid = user_sb.indexOf('Android') > -1 || user_sb.indexOf('Adr') > -1
var isiOS = !!user_sb.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

后端返回URL根据设备跳转

if (code === 200) {
const url = res
     if (isAndroid) {
      window.open(url)
} else if (isiOS) {
    window.location.href = url
} else {
    Toast.fail(msg)
}

根据设备类型使用对应跳转方式

2.下单二次支付

下单后需要存储订单号和所需要的参数当跳转出去后就弹出一个窗口查询订单和重新支付如果用户没有支付就会从重新支付此时就需要拿本地存储的订单和参数去查询如果没有支付就继续调起支付否查询支付成功就提示支付成功

2.微信JSAPI支付

1.JSAPI支付有两种方式第一种使用SDK

首先安装微信SDK

npm i weixin-js-sdk

方式1需要先配置wx.config官方文档此数据来源后端所使用的API都需要写入jsApiList种字符串

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

2.支付方法需要放在 wx.ready中

wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      });

3.支付方法

wx.chooseWXPay({
        timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr, // 支付签名随机串，不长于 32 位
        package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign, // 支付签名
        success: function (res) {
          console.log(res)
          // 支付成功后的回调函数
        }
      });

第二种JSAPI支付方式方便简单

1.先引用JS文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.支付方法官方文档所见

下单前调用将参数传入

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号ID，由商户传入     
         "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，但并不保证它绝对可靠。
      } 
   }); 
}

文档种此方法是判断JS有没有加载完成这个自行考虑是否使用本人未使用（index.html引入打开页面再下单此时间不存在未加载完）

if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

3.需要获取用户的openid 网页授权参考

参考链接(请在微信客户端中打开此链接体验)：

scope为snsapi_base：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

scope为snsapi_userinfo：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx807d86fb6b3d4fd2&redirect_uri=http%3A%2F%2Fdevelopers.weixin.qq.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
参数	是否必须	说明
appid	是	公众号的唯一标识
redirect_uri	是	授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
response_type	是	返回类型，请填写code
scope	是	应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
state	否	重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
#wechat_redirect	是	无论直接打开还是做页面302重定向时候，必须带此参数
forcePopup	否	强制此次授权需要用户弹窗确认；默认为false；需要注意的是，若用户命中了特殊场景下的静默授权逻辑，则此参数不生效

4.后端会提供一个接口调用当用户授权完参数会拼在授权完后的地址后面例如：

https://pay.weixin.qq.com/&openid=xxxxxxxxxxxxxxx

只需截取opneid存储到Pina或本地存储中即可授权后拿到opneid直接调用支付方法即可

总结

支付这块还是比较简单的！

文章版权归作者所有，未经允许请勿转载。

THE END

技术教程
# 技术教程