h5微信支付

Posted 2022-12-16 五花肉三七分

这篇文章讲了如何h5项目中使用微信支付，包括微信内置浏览器调起支付、外部浏览器调起支付、微信支付方式等内容。

一：问题梳理

1：如何判断是否是微信内置浏览器？

2：如果是外部浏览器调起支付该如何实现？

3：微信内支付的方式有哪些？

二：问题解决

1：判断浏览器类型

不同浏览器调用微信支付方式不同，所以先开始要判断浏览器类型：

         isWX()
          var wx = window.navigator.userAgent.toLowerCase();
          if (wx.match(/MicroMessenger/i) == 'micromessenger')
            return true;
           else 
            return false;
          
        ,

2：外部浏览器调起支付

外部浏览器调起支付比较简单，通过访问接口调用，然后根据会拿到接口返回的一个url，然后跳转到这个url就可以进行支付。

let res = await wxPay(params)
            if(res.code==200)
              window.location.replace(res.url)//res.url支付地址
            

3：微信浏览器调起支付

微信浏览器调起支付有两种方式：使用js-sdk；使用jsapi

方式一：使用js-sdk

1：安装：jssdk：

npm install weixin-js-sdk -S

2：挂载：

import jssdk from "weixin-js-sdk"
//可全局，可局部，根据具体情况来引入

3：通过接口获取校验信息，这里访问获取校验信息的后端接口拿到校验信息。

4：通过config接口注入权限验证配置（需要同步进行，在获取到校验信息后方可注入config，否则校验失败）

wx.config(

  debug: true, // 开启调试模式

  appId: '', // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: '', // 必填，生成签名的随机串

signature: '', // 必填，签名

jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表

);

5：微信支付

wx.ready(function () 
        // 进行微信支付
        wx.chooseWXPay(
          appId: '',
          timestamp: '', // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: '', // 支付签名随机串，不长于 32 位
          package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
          signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: '', // 支付签名
          success: function (res) 
            // 支付成功后的回调函数
            if (res.errMsg == 'chooseWXPay:ok') 
             else 
              Notify( type: 'error', message: '支付失败',duration:2000 );
            
          ,
          cancel: function (res) 
          ,
          fail: function (res) 
            Notify( type: 'error', message: '支付失败',duration:2000 );
          
        )
      )
//Success：接口调用成功时执行的回调函数。
//Fail：接口调用失败时执行的回调函数。
//Cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
//Complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
//Trigger：监听menu中的按钮点击时触发的方法，该方法仅支持menu中的相关接口。

方式二：使用JSAPI

function onBridgeReady()
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
            "appId": "appId", //公众号名称，由商户传入     
            "timeStamp": "timeStamp", //时间戳，自1970年以来的秒数     
            "nonceStr": "nonceStr", //随机串     
            "package": "package",
            "signType": "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            "paySign": "paySign" //微信签名  
        ,
        function(res) 
            // 支付成功
            if (res.err_msg == "get_brand_wcpay_request:ok") 
            
            // 支付过程中用户取消
            if (res.err_msg == "get_brand_wcpay_request:cancel") 

            
            // 支付失败
            if (res.err_msg == "get_brand_wcpay_request:fail") 

            
            /**
             * 其它
             * 1、请检查预支付会话标识prepay_id是否已失效
             * 2、请求的appid与下单接口的appid是否一致
             * */
            if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") 

            
        )

// 检测支付环境中的 WeixinJSBridge
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 
    this.onBridgeReady();

三：结尾

借鉴文章：下落香樟树 (cnblogs.com)https://www.cnblogs.com/zxk5211/p/14040310.html