vue3 uniapp微信登錄功能實(shí)現(xiàn)
更新時(shí)間：2024年04月23日 12:04:14 作者：irisMoon06
根據(jù)最新的微信小程序官方的規(guī)定,uniapp中的uni.getUserInfo方法不再返回用戶(hù)頭像和昵稱(chēng)、以及手機(jī)號(hào),這篇文章主要介紹了vue3 uniapp微信登錄功能實(shí)現(xiàn),需要的朋友可以參考下
根據(jù)最新的微信小程序官方的規(guī)定，uniapp中的uni.getUserInfo方法不再返回用戶(hù)頭像和昵稱(chēng)、以及手機(jī)號(hào)
首先，需獲取appID，appSecret，如下圖
先調(diào)用uni.getUserInfo方法獲取code，然后調(diào)用后臺(tái)的api，傳入code，換取登錄信息比如openid什么的，然后調(diào)用后臺(tái)的例如賬號(hào)密碼或者手機(jī)驗(yàn)證碼等相關(guān)登錄的接口，換取token存入本地，即可。
uni.getUserInfo({
provider: 'weixin',
success: function(info) {
// 獲取用戶(hù)信息成功, info.authResult保存用戶(hù)信息
uni.login({
provider: 'weixin',
success: function(loginRes) {
console.log(loginRes, '---loginRes')
wxLoginApi({
code: loginRes.code
}).then(res => {
if (res.code === '200') {
loginParamObj.value = res.data;
if (loginParamObj.value.bindStatus === '1') {
//已綁定，直接登錄
// userStore.SET_FRESH_TOKEN(res.data.refresh_token)
} else {
// 留在登錄頁(yè)
initLoginStatus.value = true
}
}
})
},
fail: function(err) {
// 登錄授權(quán)失敗
// err.code是錯(cuò)誤碼
}
});
}
})登錄后要配合pinia，將token存入本地即可
import {
defineStore
} from 'pinia'
const user = defineStore(
'user', () => {
const token = ref(''); // 登錄token
const fresh_token = ref('');
const SET_TOKEN = (value : string) => {
token.value = value
};
const SET_FRESH_TOKEN = (value : string) => {
fresh_token.value = value
};
return {
token,
fresh_token,
}
}, {
unistorage: true // 開(kāi)啟后對(duì) state 的數(shù)據(jù)讀寫(xiě)都將持久化
})
// const user = ()=>{
// }
export default user到此這篇關(guān)于vue3 uniapp微信登錄的文章就介紹到這了,更多相關(guān)vue3 uniapp微信登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
控件cloneNode（）方法的使用 實(shí)例代碼。2009-07-07
這篇文章主要給大家介紹了關(guān)于JavaScript深拷貝的一些踩坑記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
一文熟練掌握J(rèn)avaScript中Object.keys()與Object.values()的實(shí)用技巧
本文詳細(xì)介紹了JavaScript中Object.keys()和Object.values()方法的使用方法、功能及應(yīng)用場(chǎng)景,通過(guò)實(shí)例展示了如何使用這些方法進(jìn)行對(duì)象的遍歷、復(fù)制、比較和屬性計(jì)算等操作,需要的朋友可以參考下2025-01-01
javascript實(shí)現(xiàn)的textarea運(yùn)行框效果代碼 不用指定id批量指定
今天在寫(xiě)一個(gè)網(wǎng)頁(yè)的時(shí)候用到了N多嵌套在textarea標(biāo)簽里的代碼，定義雙擊運(yùn)行其內(nèi)的代碼段。但是每次創(chuàng)建一個(gè)這樣的可運(yùn)行的實(shí)例都要給textarea元素自定義一個(gè)id值和寫(xiě)入雙擊事件，好不麻煩。2009-12-12
純JS實(shí)現(xiàn)旋轉(zhuǎn)圖片3D展示效果
本文給大家分享的是純js實(shí)現(xiàn)的類(lèi)似flash里的圖片環(huán)繞旋轉(zhuǎn)效果，非常炫酷，有需要的小伙伴可以參考下。2015-04-04
使用JavaScript獲取當(dāng)前URL的多種方式
在現(xiàn)代 Web 前端開(kāi)發(fā)中,動(dòng)態(tài)獲取和解析當(dāng)前頁(yè)面的 URL 是一項(xiàng)基礎(chǔ)但至關(guān)重要的技能,無(wú)論是實(shí)現(xiàn)路由跳轉(zhuǎn)、權(quán)限校驗(yàn)、埋點(diǎn)上報(bào)、第三方登錄回調(diào)處理,還是進(jìn)行 SEO 優(yōu)化,本文將深入探討 JavaScript 獲取當(dāng)前 URL 的多種方式,需要的朋友可以參考下2025-08-08
這篇文章主要介紹了JS對(duì)象深度克隆,結(jié)合實(shí)例形式分析了JavaScript對(duì)象深度克隆的實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03
JavaScript是解釋型語(yǔ)言是毋庸置疑的，但它是不是僅在運(yùn)行時(shí)自上往下一句一句地解析的呢？2009-10-10
我寫(xiě)JavaScript代碼已經(jīng)很久了，都記不起是什么年代開(kāi)始的了。本文給大家分享javascript七大技巧(二)，對(duì)javascript技巧相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了uniapp,微信小程序中使用 MQTT的問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07