vue 授權(quán)獲取微信openId操作
1、獲取url中參數(shù)code; 根據(jù)code 獲取openId;調(diào)用后臺接口獲取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傳遞給后臺接口換取opend getOpenIdApi(code).then(res=>{ console.log(res); }).catch(res=>{}) }else{ getCodeApi("123"); } } }
補(bǔ)充知識:vue 微信公眾號支付 jssdk jsapi實現(xiàn)微信支付(完整版)
是自己項目里支付功能測試成功后的代碼參考,希望能幫助到曾和我一樣想找到有效參考借鑒的朋友們,
廢話不多說,直接講具體的操作規(guī)程及完整代碼
代碼部份:
一、vue的環(huán)境配置:
1. 先在當(dāng)前項目的命令行工具里安裝npm install weixin-jsapi
2. 在當(dāng)前支付頁面引用該weixin-jsapi
import wx from 'weixin-jsapi'
二、調(diào)用后臺接口,正式使用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('**此處寫后臺提供獲取jsapi相關(guān)配置的接口**',{ encodeUrl:Encrypt(url.split("#")[0]) //直接丟棄#及后面的字符串 注意這里Encrypt因為我的項目里使用了ase加密解密,所以這么寫的 }) .then(function(response) { if(response.data.flag == true){ var data = JSON.parse(Decrypt(response.data.data));//將解密后的字符串轉(zhuǎn)為對象 Decrypt這里是解密,不需要的就直接過濾悼 console.log(data); //下列的data.均為后臺接口返回的字段,比如我的項里里返回的是 appid,timestamp,nonceStr,signature wx.config({ debug: ture,//這里一般在測試階段先用ture,等打包給后臺的時候就改回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失敗,請重試' }); }); }, //報名繳費 ( 支付按鈕綁定@click="toapply()"事件) toapply(id){ var $this = this; this.$http.post('**此處寫后臺提供的獲取支付json數(shù)據(jù)接口**',{ encodeStr:Encrypt(id)//項目里的加密 }) .then(function(response) { if(response.data.flag == true){ var data = JSON.parse(Decrypt(response.data.data));//將解密后的字符串轉(zhuǎn)為對象 console.log(data); wx.ready(function(){ wx.chooseWXPay({ appId:data.appId, timestamp: data.timeStamp, // 支付簽名時間戳,注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺生成簽名使用的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)到支付成功頁面有這個頁面 $this.$router.push({ path: "/success_page", name:"success_page" }) console.log(res); }, cancel: function (res) {//提示引用的是mint-UI里toast Toast('已取消支付'); }, fail: function (res) { Toast('支付失敗,請重試'); } }) }) }else{ Toast({ message: '獲取支付信息失敗,請重試', }); } }).catch(function(error){ Toast({ message: '獲取訂單信息失敗,請重試', }); console.log(error); }); }, }
這里代碼部份完成后,就支付測試看看提示,如若彈出以下提示說明簽名是正確的
二、商戶和公眾號后臺配置
1.先去商戶號后臺里配置url域名:商戶平臺–>產(chǎn)品中心–>開發(fā)配置
然后到微信公眾號后臺,公眾號設(shè)置/功能設(shè)置里配置url域名
ps:這里要與商戶后臺里的配置域名同步
代碼和配置都完成后,測試結(jié)果如下:
最后,講講我在支付過程中遇到的問題:
因為微信支付眾所周知的測試麻煩,我是直接完成代碼后打包給后臺發(fā)布正式環(huán)境測試的,測試過程中一直出現(xiàn)以下的彈窗提示信息:
排除法,代碼里的簽名沒有bug的情況下,還一直出現(xiàn)這個提示,那就只有一個問題,url路徑配置,網(wǎng)上查了很多說url路徑中不能帶# ,說是需要把把路由的hash模式改為hostry模式,如下:
還說讓后臺也需要做去悼#相應(yīng)的改動,按這個方法打包給后臺測試 ,結(jié)果頁面就出現(xiàn)404了,行不通,所以我是利用處理如下:
url.split("#")[0]直接丟棄#及后面的字符串
后臺沒有作#處理,后面就發(fā)現(xiàn)我們是商戶后臺沒有配置url域名這個問題,是這里面的域名配置不能帶有#, 配置好后臺之后,測試就成功了,還別說,測試成功的那一刻,倍兒有成功感了
以上這篇vue 授權(quán)獲取微信openId操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue如何實現(xiàn)左右滑動tab(vue-touch)
這篇文章主要介紹了vue如何實現(xiàn)左右滑動tab(vue-touch),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07Vue2.0 給Tab標(biāo)簽頁和頁面切換過渡添加樣式的方法
下面小編就為大家分享一篇Vue2.0 給Tab標(biāo)簽頁和頁面切換過渡添加樣式的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03基于Vue2實現(xiàn)移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能
這篇文章主要介紹了基于Vue2實現(xiàn)移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01簡單實現(xiàn)Vue的observer和watcher
這篇文章主要教大家如何簡單實現(xiàn)Vue的observer和watcher,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12vue中v-for和v-if不能在同一個標(biāo)簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個標(biāo)簽的最新解決方案,這里描述了兩種解決方案,結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07解決VUE mounted 鉤子函數(shù)執(zhí)行時 img 未加載導(dǎo)致頁面布局的問題
這篇文章主要介紹了解決VUE mounted 鉤子函數(shù)執(zhí)行時 img 未加載導(dǎo)致頁面布局的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue——解決報錯 Computed property "****" was assigned to but it ha
這篇文章主要介紹了Vue——解決報錯 Computed property "****" was assigned to but it has no setter.的方法,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12