快捷導(dǎo)航

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

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

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

用戶(hù)不想輸入賬號(hào)密碼，一鍵登錄

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

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

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

參數(shù)說(shuō)明：

uni.getUserProfile({ //獲取微信信息
	desc: '用于獲取您的個(gè)人信息', // 聲明獲取用戶(hù)個(gè)人信息后的用途，不超過(guò)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') //為了同步渲染購(gòu)物車(chē)數(shù)量
		}, 1000)
		var wxfor = {
			wx: res1.userInfo
		}
		//寫(xiě)成鍵值對(duì)形勢(shì)添加到數(shù)據(jù)庫(kù)中
		res.data.data = Object.assign(res.data.data, wxfor)
		this.login(res.data.data)
		console.log(res1);
	}

})

LoginDL() {
    // 傳用戶(hù)名和信息的接口
	getLogin(this.username, this.password).then(res => {
		console.log(11111111111);
		console.log(res);
		uni.getUserProfile({ //獲取微信信息
			desc: '用于獲取您的個(gè)人信息', // 聲明獲取用戶(hù)個(gè)人信息后的用途，不超過(guò)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') //為了同步渲染購(gòu)物車(chē)數(shù)量
				}, 1000)
				var wxfor = {
					wx: res1.userInfo
				}
				//寫(xiě)成鍵值對(duì)形勢(shì)添加到數(shù)據(jù)庫(kù)中
				res.data.data = Object.assign(res.data.data, wxfor)
				this.login(res.data.data)
				console.log(res1);
			}
		})
	})
},

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

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

您可能感興趣的文章:

相關(guān)文章

詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目
這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
Vue2?與?Vue3?的數(shù)據(jù)綁定原理及實(shí)現(xiàn)
這篇文章主要介紹了Vue2與Vue3的數(shù)據(jù)綁定原理及實(shí)現(xiàn)，數(shù)據(jù)綁定是一種把用戶(hù)界面元素的屬性綁定到特定對(duì)象上面并使其同步的機(jī)制，使開(kāi)發(fā)人員免于編寫(xiě)同步視圖模型和視圖的邏輯
2022-09-09
Vue組件的Prop命名約定詳解
這篇文章主要為大家介紹了Vue組件的Prop命名約定詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
Vue-router結(jié)合transition實(shí)現(xiàn)app前進(jìn)后退動(dòng)畫(huà)切換效果的實(shí)例
下面小編就為大家?guī)?lái)一篇Vue-router結(jié)合transition實(shí)現(xiàn)app前進(jìn)后退動(dòng)畫(huà)切換效果的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
Vue 2.0學(xué)習(xí)筆記之使用$refs訪問(wèn)Vue中的DOM
這篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之使用$refs訪問(wèn)Vue中的DOM，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
Vue3路由配置createRouter、createWebHistory、useRouter和useRoute詳解
Vue3和Vue2基本差不多,只不過(guò)需要將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)拖拽功能的場(chǎng)景,而VueDraggablePlus正是為了解決這一痛點(diǎn)而誕生的,讓我們一起來(lái)看看它的特點(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)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
vue3中ref獲取子組件的值代碼示例
這篇文章主要給大家介紹了關(guān)于vue3中ref獲取子組件值的相關(guān)資料,在Vue3中父組件獲取子組件的值可以通過(guò)使用'ref'和'$refs'來(lái)實(shí)現(xiàn),文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08