因?yàn)楦鞣N原因吧，我們?cè)谧鲆苿?dòng)端開(kāi)發(fā)的時(shí)候，涉及到money例证，我們經(jīng)常要做微信支付芍躏。如果是做小程序開(kāi)發(fā)欠气，我們可以直接用小程序的原生接口惜颇，一鍵搞定宪彩，如果是h5網(wǎng)頁(yè)的話垂寥，那我們就需要使用微信提供的js-sdk了督禽。
注：使用了jssdk不是所有的環(huán)境都可以調(diào)用微信來(lái)支付脆霎，它只是單純的微信環(huán)境下支付，如果要想支持非微信瀏覽器內(nèi)支付狈惫，需要開(kāi)通微信h5支付功能睛蛛，我們現(xiàn)在用的都是微信的JSAPI支付，而微信的h5支付是要求商戶已有H5商城網(wǎng)站胧谈，并且已經(jīng)過(guò)ICP備案玖院。哈哈哈哈，是不是很驚訝第岖！太坑了呀！
雖然坑试溯，還得用蔑滓，那咱就搞一下它。
首先遇绞，打開(kāi)我們的微信公眾平臺(tái)键袱，閱讀一下網(wǎng)頁(yè)開(kāi)發(fā)的基本要求https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/iOS_WKWebview.html
然后我們了解到，使用js-sdk摹闽，我們先要
也就是我們先要把你們的后臺(tái)有效訪問(wèn)地址給放到微信里蹄咖，然后我們?cè)偻ㄟ^(guò)npm或者cdn的方式，引入js-sdk付鹿。
這里我是用npm安裝的weixin-js-sdk,也可以自行根據(jù)需要去cdn鏈接澜汤。
npm install weixin-js-sdk --save
然后呢，這里給你們講一下舵匾，我們接下來(lái)要做的事情俊抵。
首先呢，我們要先要獲得網(wǎng)頁(yè)授權(quán)坐梯，然后我們跳轉(zhuǎn)我們項(xiàng)目中的業(yè)務(wù)頁(yè)面徽诲。
window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?
appid=你的APPID&
redirect_uri=${encodeURIComponent('你的業(yè)務(wù)頁(yè)面地址?params='你可能需要傳遞的參數(shù)，沒(méi)有不寫(xiě)吵血，')}
&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
這里主要是appid和重定向頁(yè)面谎替，至于是否彈出授權(quán)頁(yè)面（scope=snsapi_userinfo/snsapi_base ）等等，根據(jù)你自己需求來(lái)蹋辅。然后呢钱贯，我們通過(guò)這個(gè)來(lái)進(jìn)入頁(yè)面的時(shí)候，在當(dāng)前你支付頁(yè)面的url上會(huì)有授權(quán)后返回的code參數(shù)晕翠。
如果提示：調(diào)用支付jsapi缺少參數(shù): 這是由于沒(méi)拿到openid導(dǎo)致喷舀，可以把window.location.href 替換成window,location.replace() 砍濒，這是因?yàn)槲⑿啪W(wǎng)頁(yè)授權(quán)會(huì)2次刷新頁(yè)面，我們這樣做能有效避免錯(cuò)誤硫麻。
然后呢爸邢，我們定義一個(gè)方法
//獲取網(wǎng)頁(yè)url？后面的參數(shù)值
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;
}
通過(guò) let code = this.getQueryString('code'),我們?nèi)フ{(diào)用后端提供的接口拿愧，來(lái)獲取openId杠河。我們的支付不需要我去另外獲取openId了，同學(xué)們自行卑微的通過(guò)接口用code換取openId吧
要注意的是浇辜，每次用戶授權(quán)帶上的code將不一樣券敌，code只能使用一次，5分鐘未被使用自動(dòng)過(guò)期 柳洋。
然后我們接下來(lái)就是我們真正進(jìn)行支付操作的時(shí)刻了
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) {
//服務(wù)端進(jìn)行簽名
let data = {
url: encodeURIComponent(url)
}
//服務(wù)端簽名接口
getWxConfig(data).then(res => {
if (res.status == 1000) {
if (res.data) {
//如果報(bào)config:invalid signature 錯(cuò)誤待诅，而signature簽名
//和微信校驗(yàn)工具簽名是一樣的
//那么可能是公眾號(hào)后臺(tái)沒(méi)有配置接口域名白名單或者配置錯(cuò)誤
wx.config({
debug: false,// 開(kāi)啟調(diào)試模式,查看調(diào)用的所有api的返回值
appId: res.data.appId,// 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: res.data.timestamp,// 必填熊镣，生成簽名的時(shí)間戳
nonceStr: res.data.nonceStr,//必填卑雁，生成簽名的隨機(jī)串
signature: res.data.signature,// 必填，簽名
jsApiList: [
'checkJsApi',
'chooseWXPay'
]//必填绪囱，需要使用的JS接口列表测蹲，具體使用那些sdk接口根據(jù)自己需要來(lái)填寫(xiě)
});
//配置完成后，再執(zhí)行分享等功能
if (callback) {
callback(res.data);
}
}
}
}).catch(err => {})
},
//在需要微信支付頁(yè)面調(diào)用
weixinPay: function(orderId,url) {
url = url ? url : window.location.href.split('#')[0];
this.initJssdk(function(callback) {
wx.ready(function() {
//我們自己需要傳遞的支付參數(shù)
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);
//如果你在調(diào)用支付時(shí)扣甲，錯(cuò)誤提示為： 支付返回簽名錯(cuò)誤
//可能是由于后臺(tái)生成簽名時(shí)參數(shù)大小寫(xiě)沒(méi)有按照官方文檔
//大小寫(xiě)來(lái)生成簽名。故一定要嚴(yán)格按照官方文檔要求開(kāi)發(fā)
wx.chooseWXPay({
timestamp:timestamp, // 支付簽名時(shí)間戳齿椅，
//注意微信jssdk中的所有使用timestamp字段均為小寫(xiě)
nonceStr:res.data.nonce_str, // 支付簽名隨機(jī)串琉挖，不長(zhǎng)于 32 位
package: packagea, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值
//提交格式如：prepay_id=***）
signType: 'MD5', // 簽名方式，默認(rèn)為'SHA1'涣脚，使用新版支付需傳入'MD5'
paySign:paySign, // 支付簽名
success(res) {
// 支付成功后的回調(diào)函數(shù)
if(res.errMsg == "chooseWXPay:ok"){
let url = '/pages/templates/user-list'
//我自己的跳轉(zhuǎn)方法粹排，可以忽略去寫(xiě)你們自己的成功后回調(diào)業(yè)務(wù)
this.$navTo.togo(url,param)
}
},
fail(res) {
//失敗后的操作
}
});
})
});
}, url);
},
}
到這里，我們的微信支付基本就是完成了.其實(shí)整體做下來(lái)我們發(fā)現(xiàn)涩澡，無(wú)非是比把大象裝冰箱里多兩步而已
步驟一：綁定域名
步驟二：引入jssdk
步驟三：通過(guò)config接口注入權(quán)限驗(yàn)證配置
wx.config({
debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)顽耳，若要查看傳入的參數(shù)，可以在pc端打開(kāi)妙同，參數(shù)信息會(huì)通過(guò)log打出射富，僅在pc端時(shí)才會(huì)打印。
appId: '', // 必填粥帚，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填胰耗，生成簽名的時(shí)間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填芒涡，簽名
jsApiList: [] // 必填柴灯，需要使用的JS接口列表
});
步驟四：通過(guò)ready接口處理成功驗(yàn)證
wx.ready(function(){
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法卖漫，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，
//config是一個(gè)客戶端的異步操作赠群，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口羊始，則須把相關(guān)接口放在ready函數(shù)
//中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口查描，則可以直接調(diào)用突委，不需要放在ready函數(shù)中。
});
步驟五：調(diào)用支付接口冬三，over
然后我們把我們封裝的接口用起來(lái)
//在入口文件main.js中
import wechat from './common/wechat'
if(wechat.isWechat()){
Vue.prototype.$wechat =wechat;
}
//頁(yè)面使用
let url = 定義的url或者空匀油，方法里可以自己獲取當(dāng)前頁(yè)面url;
this.$wechat.isWechat //判斷一下是否微信環(huán)境，然后做出相對(duì)業(yè)務(wù)操作
this.$wechat.weixinPay(this.orderForm.orderId,url);
到此勾笆，一個(gè)完整的h5微信支付就完成了敌蚜。下一次，我們把微信分享也添加進(jìn)來(lái)窝爪。這樣钝侠，一個(gè)我們常用的基于微信SDK的支付分享功能就被我們完成了。如果覺(jué)得對(duì)你有幫助的話酸舍，幫作者點(diǎn)個(gè)贊吧，碼文不易里初，點(diǎn)一下支持支持啃勉！謝謝您嘞！
