vue 授權(quán)獲取微信openId操作
1、獲取url中參數(shù)code; 根據(jù)code 獲取openId;調(diào)用后臺(tái)接口獲取openId 。
參考文檔:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
function getUrlKey(name){//獲取url 參數(shù)
return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
}
function getCodeApi(state){//獲取code
let urlNow=encodeURIComponent(window.location.href);
let scope='snsapi_base'; //snsapi_userinfo //靜默授權(quán) 用戶無感知
let appid='wx4cc5d5c123123123';
let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
window.location.replace(url);
}
//注意代碼放置位置
export default {
created(){
let code=getUrlKey("code");//獲取url參數(shù)code
if(code){ //拿到code, code傳遞給后臺(tái)接口換取opend
getOpenIdApi(code).then(res=>{
console.log(res);
}).catch(res=>{})
}else{
getCodeApi("123");
}
}
}
補(bǔ)充知識(shí):vue 微信公眾號(hào)支付 jssdk jsapi實(shí)現(xiàn)微信支付(完整版)
是自己項(xiàng)目里支付功能測試成功后的代碼參考,希望能幫助到曾和我一樣想找到有效參考借鑒的朋友們,
廢話不多說,直接講具體的操作規(guī)程及完整代碼
代碼部份:
一、vue的環(huán)境配置:
1. 先在當(dāng)前項(xiàng)目的命令行工具里安裝npm install weixin-jsapi
2. 在當(dāng)前支付頁面引用該weixin-jsapi
import wx from 'weixin-jsapi'
二、調(diào)用后臺(tái)接口,正式使用jssdk:
created(){
this.userId = JSON.parse(Cookie.get("user")).id;//這是在我頁面需要獲取的userid,不需要的可自行刪悼,不在支付代碼范圍
this.getConfig();,
},
methods: {
getConfig(){
console.log(window.location.href);
var url = window.location.href;
this.$http.post('**此處寫后臺(tái)提供獲取jsapi相關(guān)配置的接口**',{
encodeUrl:Encrypt(url.split("#")[0]) //直接丟棄#及后面的字符串 注意這里Encrypt因?yàn)槲业捻?xiàng)目里使用了ase加密解密,所以這么寫的
})
.then(function(response) {
if(response.data.flag == true){
var data = JSON.parse(Decrypt(response.data.data));//將解密后的字符串轉(zhuǎn)為對(duì)象 Decrypt這里是解密,不需要的就直接過濾悼
console.log(data);
//下列的data.均為后臺(tái)接口返回的字段,比如我的項(xiàng)里里返回的是 appid,timestamp,nonceStr,signature
wx.config({
debug: ture,//這里一般在測試階段先用ture,等打包給后臺(tái)的時(shí)候就改回false,
appId: data.appid,
timestamp: data.timestamp,
nonceStr: data.noncestr,
signature: data.signature,
jsApiList: ['chooseWXPay']
})
wx.ready(function(){
wx.checkJsApi({
jsApiList: ['chooseWXPay'],
success:function(res){
console.log("seccess")
console.log(res)
},
fail:function(res){
console.log("fail");
console.log(res)
}
})
})
}else{
Toast({
message: response.data.detailMsg
});
}
}).catch(function(error){
Toast({//提示引用的是mint-UI里toast
message: '獲取config失敗,請(qǐng)重試'
});
});
},
//報(bào)名繳費(fèi) ( 支付按鈕綁定@click="toapply()"事件)
toapply(id){
var $this = this;
this.$http.post('**此處寫后臺(tái)提供的獲取支付json數(shù)據(jù)接口**',{
encodeStr:Encrypt(id)//項(xiàng)目里的加密
})
.then(function(response) {
if(response.data.flag == true){
var data = JSON.parse(Decrypt(response.data.data));//將解密后的字符串轉(zhuǎn)為對(duì)象
console.log(data);
wx.ready(function(){
wx.chooseWXPay({
appId:data.appId,
timestamp: data.timeStamp, // 支付簽名時(shí)間戳,注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫其中的S字符
nonceStr: data.nonceStr, // 支付簽名隨機(jī)串,不長于 32
package: data.package, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值,提交格式如:prepay_id=\*\*\*)
signType: data.signType, // 簽名方式,默認(rèn)為'SHA1',使用新版支付需傳入'MD5'
paySign: data.paySign, // 支付簽名
success: function (res) {
//跳轉(zhuǎn)到支付成功頁面有這個(gè)頁面
$this.$router.push({
path: "/success_page",
name:"success_page"
})
console.log(res);
},
cancel: function (res) {//提示引用的是mint-UI里toast
Toast('已取消支付');
},
fail: function (res) {
Toast('支付失敗,請(qǐng)重試');
}
})
})
}else{
Toast({
message: '獲取支付信息失敗,請(qǐng)重試',
});
}
}).catch(function(error){
Toast({
message: '獲取訂單信息失敗,請(qǐng)重試',
});
console.log(error);
});
},
}
這里代碼部份完成后,就支付測試看看提示,如若彈出以下提示說明簽名是正確的

二、商戶和公眾號(hào)后臺(tái)配置
1.先去商戶號(hào)后臺(tái)里配置url域名:商戶平臺(tái)–>產(chǎn)品中心–>開發(fā)配置

然后到微信公眾號(hào)后臺(tái),公眾號(hào)設(shè)置/功能設(shè)置里配置url域名
ps:這里要與商戶后臺(tái)里的配置域名同步

代碼和配置都完成后,測試結(jié)果如下:

最后,講講我在支付過程中遇到的問題:
因?yàn)槲⑿胖Ц侗娝苤臏y試麻煩,我是直接完成代碼后打包給后臺(tái)發(fā)布正式環(huán)境測試的,測試過程中一直出現(xiàn)以下的彈窗提示信息:

排除法,代碼里的簽名沒有bug的情況下,還一直出現(xiàn)這個(gè)提示,那就只有一個(gè)問題,url路徑配置,網(wǎng)上查了很多說url路徑中不能帶# ,說是需要把把路由的hash模式改為hostry模式,如下:

還說讓后臺(tái)也需要做去悼#相應(yīng)的改動(dòng),按這個(gè)方法打包給后臺(tái)測試 ,結(jié)果頁面就出現(xiàn)404了,行不通,所以我是利用處理如下:
url.split("#")[0]直接丟棄#及后面的字符串
后臺(tái)沒有作#處理,后面就發(fā)現(xiàn)我們是商戶后臺(tái)沒有配置url域名這個(gè)問題,是這里面的域名配置不能帶有#, 配置好后臺(tái)之后,測試就成功了,還別說,測試成功的那一刻,倍兒有成功感了
以上這篇vue 授權(quán)獲取微信openId操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 前端實(shí)現(xiàn)登陸攔截及axios 攔截器的使用
這篇文章主要介紹了Vue 前端實(shí)現(xiàn)登陸攔截及axios 攔截器的使用,通過這個(gè)項(xiàng)目學(xué)習(xí)如何實(shí)現(xiàn)一個(gè)前端項(xiàng)目中所需要的 登錄及攔截、登出、token失效的攔截及對(duì)應(yīng) axios 攔截器的使用。需要的朋友可以參考下2019-07-07
基于Vue實(shí)現(xiàn)人民幣小寫轉(zhuǎn)為大寫功能
在金融類應(yīng)用中,經(jīng)常需要將金額從小寫數(shù)字轉(zhuǎn)換為大寫形式,這種轉(zhuǎn)換主要用于正式票據(jù)、合同等場合,以增加文本的專業(yè)性和可讀性,本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中實(shí)現(xiàn)這一功能,并提供多個(gè)示例和詳細(xì)的代碼說明,需要的朋友可以參考下2024-09-09
Element-plus封裝搜索組件的實(shí)現(xiàn)
在后臺(tái)管理系統(tǒng)中,經(jīng)常需要在多個(gè)頁面中使用搜索功能,本文就來介紹一下Element-plus封裝搜索組件的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
Vue?FileManagerPlugin?報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Vue?FileManagerPlugin?報(bào)錯(cuò)問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue如何對(duì)一個(gè)數(shù)據(jù)過濾出想要的item
這篇文章主要介紹了vue如何對(duì)一個(gè)數(shù)據(jù)過濾出想要的item問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vs-code/WebStorm中構(gòu)建Vue項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了在Vs-code/WebStorm中構(gòu)建Vue項(xiàng)目,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
VUE前端實(shí)現(xiàn)token的無感刷新方式
這篇文章主要介紹了VUE前端實(shí)現(xiàn)token的無感刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue + any-touch實(shí)現(xiàn)一個(gè)iscroll 實(shí)現(xiàn)拖拽和滑動(dòng)動(dòng)畫效果
這篇文章主要介紹了vue + any-touch實(shí)現(xiàn)一個(gè)iscroll實(shí)現(xiàn)拖拽和滑動(dòng)動(dòng)畫效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
詳解vue中引入stylus及報(bào)錯(cuò)解決方法
這篇文章主要介紹了詳解vue中引入stylus及報(bào)錯(cuò)解決方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
element?ui?日期選擇器el-date-picker如何修改指定日期背景(點(diǎn)擊指定背景色日期變深色)
這篇文章主要介紹了element?ui?日期選擇器el-date-picker?修改指定日期背景,點(diǎn)擊指定背景色日期變深色,本文通過實(shí)例效果展示給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07

