微信小程序?qū)崿F(xiàn)授權(quán)登錄之獲取用戶信息
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)獲取用戶信息的具體代碼,供大家參考,具體內(nèi)容如下
小程序登錄
小程序可以通過微信官方提供的登錄能力方便地獲取微信提供的用戶身份標(biāo)識(shí),快速建立小程序內(nèi)的用戶體系。
登錄流程時(shí)序

效果展示:



功能實(shí)現(xiàn):
新建一個(gè)login頁面

login.js:
wx.getUserProfile用于獲取用戶信息
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文件無需更改。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
uniapp中解析markdown支持網(wǎng)頁和小程序?qū)崿F(xiàn)示例
這篇文章主要為大家介紹了uniapp中解析markdown支持網(wǎng)頁和小程序?qū)崿F(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
詳談js中數(shù)組(array)和對(duì)象(object)的區(qū)別
下面小編就為大家?guī)硪黄斦刯s中數(shù)組(array)和對(duì)象(object)的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
Bootstrap 3 進(jìn)度條的實(shí)現(xiàn)
這篇文章主要介紹了Bootstrap 3 進(jìn)度條的實(shí)現(xiàn),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
javascript 拖動(dòng)表格行實(shí)現(xiàn)代碼
用js實(shí)現(xiàn)的拖動(dòng)表格的tr行的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-05-05
javascript 分號(hào)總結(jié)及詳細(xì)介紹
這篇文章主要介紹了javascript 分號(hào)總結(jié)及詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
使用typescript改造koa開發(fā)框架的實(shí)現(xiàn)
這篇文章主要介紹了使用typescript改造koa開發(fā)框架的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JS腳本實(shí)現(xiàn)動(dòng)態(tài)給標(biāo)簽控件添加事件的方法
這篇文章主要介紹了JS腳本實(shí)現(xiàn)動(dòng)態(tài)給標(biāo)簽控件添加事件的方法,結(jié)合實(shí)例形式分析了javascript添加事件監(jiān)聽的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-06-06

