快捷導(dǎo)航

微信小程序使用uni-app一鍵獲取用戶信息

更新時(shí)間：2023年01月26日 13:38:07 作者：Nanchen_42

這篇文章主要介紹了微信小程序使用uni-app一鍵獲取用戶信息,需要的朋友可以參考下

用戶不想輸入賬號密碼，一鍵登錄

<label for="" @click="LoginDL">一鍵登陸</label>

uni.getUserProfile(只支持微信小程序)

獲取用戶信息。每次請求都會(huì)彈出授權(quán)窗口，用戶同意后返回 userInfo。

參數(shù)說明：

uni.getUserProfile({ //獲取微信信息
	desc: '用于獲取您的個(gè)人信息', // 聲明獲取用戶個(gè)人信息后的用途，不超過30個(gè)字符
	success: res1 => { //接口調(diào)用成功的回調(diào)
		uni.showLoading({
			title: '登錄中'
		})
		setTimeout(() => {
			uni.hideLoading(); //關(guān)閉登陸中狀態(tài)
			uni.switchTab({
				url: '../myfile/myfile'
			})
			uni.$emit('updateCart') //為了同步渲染購物車數(shù)量
		}, 1000)
		var wxfor = {
			wx: res1.userInfo
		}
		//寫成鍵值對形勢添加到數(shù)據(jù)庫中
		res.data.data = Object.assign(res.data.data, wxfor)
		this.login(res.data.data)
		console.log(res1);
	}

})

LoginDL() {
    // 傳用戶名和信息的接口
	getLogin(this.username, this.password).then(res => {
		console.log(11111111111);
		console.log(res);
		uni.getUserProfile({ //獲取微信信息
			desc: '用于獲取您的個(gè)人信息', // 聲明獲取用戶個(gè)人信息后的用途，不超過30個(gè)字符
			success: res1 => {  //接口調(diào)用成功的回調(diào)
				uni.showLoading({
					title: '登錄中'
				})
				setTimeout(() => {
					uni.hideLoading(); //關(guān)閉登陸中狀態(tài)
					uni.switchTab({
						url: '../myfile/myfile'
					})
					uni.$emit('updateCart') //為了同步渲染購物車數(shù)量
				}, 1000)
				var wxfor = {
					wx: res1.userInfo
				}
				//寫成鍵值對形勢添加到數(shù)據(jù)庫中
				res.data.data = Object.assign(res.data.data, wxfor)
				this.login(res.data.data)
				console.log(res1);
			}
		})
	})
},

在要獲取頭像的頁面接收新增的wx數(shù)據(jù)，渲染即可，效果如下：（點(diǎn)擊一鍵登錄 ——出現(xiàn)彈窗，點(diǎn)擊允許——獲取成功）

到此這篇關(guān)于微信小程序使用uni-app一鍵獲取用戶信息的文章就介紹到這了,更多相關(guān)微信小程序使用uni-app一鍵獲取用戶信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解如何搭建mpvue框架搭配vant組件庫的小程序項(xiàng)目
這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫的小程序項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05
Vue2?與?Vue3?的數(shù)據(jù)綁定原理及實(shí)現(xiàn)
這篇文章主要介紹了Vue2與Vue3的數(shù)據(jù)綁定原理及實(shí)現(xiàn)，數(shù)據(jù)綁定是一種把用戶界面元素的屬性綁定到特定對象上面并使其同步的機(jī)制，使開發(fā)人員免于編寫同步視圖模型和視圖的邏輯
2022-09-09
Vue組件的Prop命名約定詳解
這篇文章主要為大家介紹了Vue組件的Prop命名約定詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
Vue-router結(jié)合transition實(shí)現(xiàn)app前進(jìn)后退動(dòng)畫切換效果的實(shí)例
下面小編就為大家?guī)硪黄猇ue-router結(jié)合transition實(shí)現(xiàn)app前進(jìn)后退動(dòng)畫切換效果的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
Vue 2.0學(xué)習(xí)筆記之使用$refs訪問Vue中的DOM
這篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之使用$refs訪問Vue中的DOM，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
Vue3路由配置createRouter、createWebHistory、useRouter和useRoute詳解
Vue3和Vue2基本差不多,只不過需要將createRouter、createWebHistory從vue-router中引入,再進(jìn)行使用,下面這篇文章主要給大家介紹了關(guān)于Vue3路由配置createRouter、createWebHistory、useRouter和useRoute的相關(guān)資料,需要的朋友可以參考下
2023-02-02
Vue中靈活拖拽的前端神器VueDraggablePlus的用法詳解
這篇文章主要介紹了一款功能強(qiáng)大、靈活易用的前端組件VueDraggablePlus,作為前端工程師,我們經(jīng)常會(huì)遇到需要實(shí)現(xiàn)拖拽功能的場景,而VueDraggablePlus正是為了解決這一痛點(diǎn)而誕生的,讓我們一起來看看它的特點(diǎn)和用法吧
2024-03-03
vue+webpack實(shí)現(xiàn)異步加載三種用法示例詳解
這篇文章主要介紹了vue+webpack實(shí)現(xiàn)異步加載的三種用法，文中給大家提到了vue+webpack實(shí)現(xiàn)異步組件加載的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-04-04
vue3+vite項(xiàng)目跨域配置踩坑實(shí)戰(zhàn)篇
vue3是一個(gè)流行的前端框架,vite是一個(gè)快速的構(gòu)建工具,下面這篇文章主要給大家介紹了關(guān)于vue3+vite項(xiàng)目跨域配置踩坑實(shí)戰(zhàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
vue3中ref獲取子組件的值代碼示例
這篇文章主要給大家介紹了關(guān)于vue3中ref獲取子組件值的相關(guān)資料,在Vue3中父組件獲取子組件的值可以通過使用'ref'和'$refs'來實(shí)現(xiàn),文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08