jssdk支付流程
获取签名
import wx from 'weixin-js-sdk'
/*获取微信配置文件*/
export const wxConfig=(fn)=>{
let config = {
debug: false,
appId: '',
timestamp: 0,
nonceStr: '',
signature: '',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
}
let res = http.post('/pay/wxGetsign.json', {url: encodeURIComponent(window.location.href.split('#')[0])})
res.then((value) => {
if (value.code == 1) {
config.appId = value.data.appid;
config.timestamp = value.data.timestamp;
config.nonceStr = value.data.nonceStr;
config.signature = value.data.signature;
wx.config(config);
wx.ready(function () {
console.log('config:ok')
return fn(wx)
});
wx.error(function(err){
console.log('config:error')
return fn(null)
})
}else{
console.log('获取配置文件失败')
return fn(null)
}
})
}
需要后台提供一个接口,返回appid``````timestamp``````nonceStr``````signature
4个参数,用于wx.config方法。
这里导出了wxconfig(fn)方法,参数是一个fn方法,这个方法需要在wx.ready回调执行,因为wx初始化需要时间
wxconfig回调方法
wxConfig(function (wx) {
if (wx) {
/*获取支付配置文件*/
let res = payConfig({
channel: this_.payMethod,
orderCode: this_.orderCode,
openId: getCookie('openId')
})
this_.$vux.loading.hide()
res.then((con) => {
if (con.code == 1) {
/*sdk支付接口*/
wx.chooseWXPay({
timestamp: con.data.timeStamp,
nonceStr: con.data.nonceStr,
package: con.data.package,
signType: con.data.signType,
paySign: con.data.sign,
success: function (res) {
/*成功:跳转到成功页面*/
this_.$router.replace({
path: 'payResults',
query: { orderCode: this_.orderCode}
})
},
fail: function (res) {
alert(JSON.stringify(res))
this_.$vux.toast.text('支付失败')
}
});
} else {
this_.$vux.toast.text(con.message)
}
})
}
})
这里有一个payConfig()方法,它是后台提供的第2个接口,需要openID参数,openID是走微信静默授权,微信返回的,由前端保存在cookie或者sessionStorage里,返回timeStamp``````nonceStr``````package``````signType``````sign
,这几个值都是用来调微信支付的apiwx.chooseWXPay()
,到这里就成功调起了微信支付
流程:静默授权拿到openID->执行wxConfig(fn),调后台接口,获取支付签名,完成wx.config(),初始化wx->调后台接口,获取支付配置文件,调起支付窗口
静默授权链接(https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx0e3173583c676805&redirect_uri=http://dfub.staff.xdf.cn/wx/logon.json?type=lecture&response_type=code&scope=snsapi_base&state=http%3A%2F%2Fdfub.staff.xdf.cn%2Fhtml%2Fgzh%2Findex.html%2F%23%2FclassCenter%3Fquarter%3D20194%26activity%3DHBHD184001%26partner%3DHB1811151038855183%26#wechat_redirect) 由微信调后台接口logon.json接口,返回openID到重定向的地址
需要配置项
1、在微信商户平台(pay.weixin.qq.com)设置您的JSAPI支付支付目录,请确保实际支付时的请求目录与后台配置的目录一致
2、在公众平台设置授权域名,用于获取openId
tips: 安卓版微信直接调用系统浏览器内核,它是用chrome改造做的一套WKwebView,概念上类似是一套组建, iOS则是调用safari。ios的微信不支持localStorage,可以用cookie代替,但是微信退出以后cookie失效