微信H5：JSAPI支付总结

微信公众号H5网页jsapi支付

说明：

一、使用JSAPI支付具体步骤：

1、需要清楚流程

2、设置JS接口安全域名

  • 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

3、引入JS-SDK（按需，全局）：

npm install weixin-js-sdk
  • 按需引入:适用于sdk调用较少的情况

main.js：

import wx from 'weixin-js-sdk';
Vue.use(wx)

引用页面：

 import wx from "weixin-js-sdk";
 
 //sdk鉴权：此处应注意config里面的key值一定不能写错！
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '', // 必填，公众号的唯一标识
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
      jsApiList: [] // 必填，需要使用的JS接口列表
    });
  • 全局引入:适用于sdk调用较多的情况

main.js：

import wx from 'weixin-js-sdk';
Vue.prototype.$wx = wx;

引用页面：

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

调试的时候将debug设置为true，鉴权成功后会显示：{errMsg: "config:ok"}，此外，微信还提供给了两个验证接口处理的方法，注意他们的使用情景：

//通过ready接口处理成功验证
wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
//通过error接口处理失败验证
wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

4、调用支付sdk

  • 在sdk鉴权成功了之后即可调用支付等一系列接口。需要注意的是：1.调用该接口还需要加上appId。2.注意该接口的timestamp不是驼峰命名，但除了此处调用该支付接口以外的其他地方，timestamp都是驼峰命名（写给后端的-_-!）。所以此处应该避免搞混淆。
wx.chooseWXPay({
  appId:appid, // appId 与 config 中传入的 appId 一致
  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串，不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
  paySign: '', // 支付签名
  success: function (res) {
    // 支付成功后的回调函数
  }
});

二、我遇到的问题及解决方法

微信支付方法都不难，但是细节和配置步骤很多。所以一定要仔细！确保当前步骤正确了再进行下一步。以下是我在开发中遇到过的问题，也欢迎大家补充或者分享自己遇到的一些问题，一起解决

配置相关问题：

调用sdk时的问题：

posted @ 2021-03-05 10:33  四驱兄嘚  阅读(641)  评论(0)    收藏  举报