微信小程序?qū)崿F(xiàn)授權(quán)登錄之獲取用戶(hù)信息
更新時(shí)間：2022年05月22日 11:18:53 作者：我啊困的唉
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)授權(quán)登錄之獲取用戶(hù)信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)獲取用戶(hù)信息的具體代碼，供大家參考，具體內(nèi)容如下
小程序登錄
小程序可以通過(guò)微信官方提供的登錄能力方便地獲取微信提供的用戶(hù)身份標(biāo)識(shí)，快速建立小程序內(nèi)的用戶(hù)體系。
登錄流程時(shí)序
效果展示：
功能實(shí)現(xiàn)：
新建一個(gè)login頁(yè)面
login.js：
wx.getUserProfile用于獲取用戶(hù)信息
wx.getStorageSync（）用于獲取緩存，進(jìn)入小程序時(shí)調(diào)用
wx.setStorageSync（）用于保存緩存，保存登錄信息，下次進(jìn)入小程序自動(dòng)登錄
Page({
? data:{
? ? userInfo:'',
??
? },
? onLoad(){
? ? ?let user=wx.getStorageSync('user')
? ? ?this.setData({
? ? ? ?userInfo:user
? ? ?})
? },
? login(){
? ??
? ? console.log('點(diǎn)擊事件執(zhí)行了')
? ? wx.getUserProfile({
? ? ? desc: '必須授權(quán)才能使用',
? ? ? success:res=>{
? ? ? ? let user=res.userInfo
? ? ? ? wx.setStorageSync('user', user)
? console.log('成功',res)
? this.setData({
? ? userInfo:user
? })
? },
? ? ? fall:res=>{
? ? ? ? console.log('失敗',res)
? ? ? }
? ? })
??
? },
? nologin(){
? ?this.setData({
? ? ?userInfo:''
? ?})
? ?wx.setStorageSync('user', null)
? }
})login.wxml:
<!--登錄-->
? <button ?wx:if="{{!userInfo}}" bindtap="login">登錄</button>
? <view wx:else class="root">
? ? <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
? ? <text class="nicheng">{{userInfo.nickName}}</text>
? </view>
<!--退出登錄-->
<view ?wx:if="{{userInfo}}">
? ? ? ? <button bindtap="nologin" >
? ? ? ? ? ? <text>退出登錄</text>
? ? ? ? </button>
</view>login.wxss:
.touxiang {
? width: 150rpx;
? height: 150rpx;
? border-radius: 50%;
? margin-top: 20rpx;
? margin-bottom: 10rpx;
? margin-left: 40%;
}
.nicheng{
? color:white;
}json文件無(wú)需更改。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用HTML5+Boostrap打造簡(jiǎn)單的音樂(lè)播放器
這篇文章主要介紹了使用HTML5+Boostrap打造簡(jiǎn)單的音樂(lè)播放器 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
JavaScript常見(jiàn)數(shù)組方法之如何轉(zhuǎn)置矩陣
這篇文章主要給大家介紹了關(guān)于JavaScript常見(jiàn)數(shù)組方法之如何轉(zhuǎn)置矩陣的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
JS實(shí)現(xiàn)設(shè)置ff與ie元素絕對(duì)位置的方法
這篇文章主要介紹了JS實(shí)現(xiàn)設(shè)置ff與ie元素絕對(duì)位置的方法,涉及JavaScript針對(duì)頁(yè)面元素及元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了JavaScript異步編程之Promise的初步使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
Immutable 在 JavaScript 中的應(yīng)用
在 JavaScript 中，對(duì)象是引用類(lèi)型的數(shù)據(jù)，其優(yōu)點(diǎn)在于頻繁的修改對(duì)象時(shí)都是在原對(duì)象的基礎(chǔ)上修改，并不需要重新創(chuàng)建，這樣可以有效的利用內(nèi)存，不會(huì)造成內(nèi)存空間的浪費(fèi)，對(duì)象的這種特性可以稱(chēng)之為 Mutable，中文的字面意思是「可變」2016-05-05
這篇文章主要給大家介紹了關(guān)于微信小程序template模版的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕后修改顏色
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕后修改顏色,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)教程
這篇文章主要介紹了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)教程的相關(guān)資料,需要的朋友可以參考下2016-03-03
下面小編就為大家?guī)?lái)一篇基于js粘貼事件paste簡(jiǎn)單解析以及遇到的坑。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JavaScript 中的 `forEach` 無(wú)法退出循環(huán)的解決方案
在 JavaScript 中,forEach 是一個(gè)數(shù)組方法,它用來(lái)對(duì)數(shù)組中的每個(gè)元素執(zhí)行指定的回調(diào)函數(shù),為了更好地理解這個(gè)問(wèn)題,本文將通過(guò)實(shí)際項(xiàng)目代碼示例,并結(jié)合詳細(xì)的目錄結(jié)構(gòu)來(lái)進(jìn)行講解,感興趣的朋友跟隨小編一起看看吧2024-12-12