因为各种原因吧，我们在做移动端开发的时候，涉及到money，我们经常要做微信支付。如果是做小程序开发，我们可以直接用小程序的原生接口，一键搞定，如果是h5网页的话，那我们就需要使用微信提供的js-sdk了。
注：使用了jssdk不是所有的环境都可以调用微信来支付，它只是单纯的微信环境下支付，如果要想支持非微信浏览器内支付，需要开通微信h5支付功能，我们现在用的都是微信的JSAPI支付，而微信的h5支付是要求商户已有H5商城网站，并且已经过ICP备案。哈哈哈哈，是不是很惊讶！太坑了呀！
虽然坑，还得用，那咱就搞一下它。
首先，打开我们的微信公众平台，阅读一下网页开发的基本要求https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/iOS_WKWebview.html
然后我们了解到，使用js-sdk，我们先要
QQ截图20201111101304.png
也就是我们先要把你们的后台有效访问地址给放到微信里，然后我们再通过npm或者cdn的方式，引入js-sdk。
这里我是用npm安装的weixin-js-sdk,也可以自行根据需要去cdn链接。
npm install weixin-js-sdk --save
然后呢，这里给你们讲一下，我们接下来要做的事情。
首先呢，我们要先要获得网页授权，然后我们跳转我们项目中的业务页面。
QQ截图20201111105322.png
window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?
appid=你的APPID&
redirect_uri=${encodeURIComponent('你的业务页面地址?params='你可能需要传递的参数，没有不写，')}
&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
这里主要是appid和重定向页面，至于是否弹出授权页面（scope=snsapi_userinfo/snsapi_base ）等等，根据你自己需求来。然后呢，我们通过这个来进入页面的时候，在当前你支付页面的url上会有授权后返回的code参数。
如果提示：调用支付jsapi缺少参数: 这是由于没拿到openid导致，可以把window.location.href 替换成window,location.replace() ，这是因为微信网页授权会2次刷新页面，我们这样做能有效避免错误。
然后呢，我们定义一个方法
//获取网页url？后面的参数值
export function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
通过 let code = this.getQueryString('code'),我们去调用后端提供的接口，来获取openId。我们的支付不需要我去另外获取openId了，同学们自行卑微的通过接口用code换取openId吧
要注意的是，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期 。
然后我们接下来就是我们真正进行支付操作的时刻了
import { getWxConfig } from 'api/index/index.js';
import { wxPay } from 'api/index/index.js';
import md5 from 'js-md5';
import wx from 'weixin-js-sdk'
export default {
//判断是否在微信中
isWechat: function() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
// console.log('是微信客户端')
return true;
} else {
// console.log('不是微信客户端')
return false;
}
},
//初始化sdk配置
initJssdk: function(callback, url) {
//服务端进行签名
let data = {
url: encodeURIComponent(url)
}
//服务端签名接口
getWxConfig(data).then(res => {
if (res.status == 1000) {
if (res.data) {
//如果报config:invalid signature 错误，而signature签名
//和微信校验工具签名是一样的
//那么可能是公众号后台没有配置接口域名白名单或者配置错误
wx.config({
debug: false,// 开启调试模式,查看调用的所有api的返回值
appId: res.data.appId,// 必填，公众号的唯一标识
timestamp: res.data.timestamp,// 必填，生成签名的时间戳
nonceStr: res.data.nonceStr,//必填，生成签名的随机串
signature: res.data.signature,// 必填，签名
jsApiList: [
'checkJsApi',
'chooseWXPay'
]//必填，需要使用的JS接口列表，具体使用那些sdk接口根据自己需要来填写
});
//配置完成后，再执行分享等功能
if (callback) {
callback(res.data);
}
}
}
}).catch(err => {})
},
//在需要微信支付页面调用
weixinPay: function(orderId,url) {
url = url ? url : window.location.href.split('#')[0];
this.initJssdk(function(callback) {
wx.ready(function() {
//我们自己需要传递的支付参数
let dataId={
orderId:orderId，
//这里你们可能有openId
}
wxPay(dataId).then(res=>{
let packagea = "prepay_id=" + res.data.prepay_id;
let timestamp = new Date().getTime();
let paySign=`appid=你的appId×tamp=${timestamp}
&nonceStr=${res.data.nonce_str}&package=${packagea}&signType=MD5`;
paySign = md5(paySign);
//如果你在调用支付时，错误提示为： 支付返回签名错误
//可能是由于后台生成签名时参数大小写没有按照官方文档
//大小写来生成签名。故一定要严格按照官方文档要求开发
wx.chooseWXPay({
timestamp:timestamp, // 支付签名时间戳，
//注意微信jssdk中的所有使用timestamp字段均为小写
nonceStr:res.data.nonce_str, // 支付签名随机串，不长于 32 位
package: packagea, // 统一支付接口返回的prepay_id参数值
//提交格式如：prepay_id=***）
signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign:paySign, // 支付签名
success(res) {
// 支付成功后的回调函数
if(res.errMsg == "chooseWXPay:ok"){
let url = '/pages/templates/user-list'
//我自己的跳转方法，可以忽略去写你们自己的成功后回调业务
this.$navTo.togo(url,param)
}
},
fail(res) {
//失败后的操作
}
});
})
});
}, url);
},
}
到这里，我们的微信支付基本就是完成了.其实整体做下来我们发现，无非是比把大象装冰箱里多两步而已
步骤一：绑定域名
步骤二：引入jssdk
步骤三：通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
步骤四：通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
//config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数
//中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
步骤五：调用支付接口，over
然后我们把我们封装的接口用起来
//在入口文件main.js中
import wechat from './common/wechat'
if(wechat.isWechat()){
Vue.prototype.$wechat =wechat;
}
//页面使用
let url = 定义的url或者空，方法里可以自己获取当前页面url;
this.$wechat.isWechat //判断一下是否微信环境，然后做出相对业务操作
this.$wechat.weixinPay(this.orderForm.orderId,url);
到此，一个完整的h5微信支付就完成了。下一次，我们把微信分享也添加进来。这样，一个我们常用的基于微信SDK的支付分享功能就被我们完成了。如果觉得对你有帮助的话，帮作者点个赞吧，码文不易，点一下支持支持！谢谢您嘞！
网友评论