微信小程序入门【三】：实现简单登录退出和个人信息页面

微信小程序入门【三】：实现简单登录退出和个人信息页面

效果图预览

这个框很是惆怅，但是真机调试没出现过，这个bug下次再解决吧。这次说说登录。

效果图：

附上代码：

home.wxml

<!--pages/scroll/scroll.wxml-->
<view class="body"><!-- 头部 --><view class="top"><view class="userinfo"><view class="userinfo-avatar" ><!-- <block > --><van-image round width="4rem" height="4rem" src="" bindtap="login" wx:if="{{userInfo.length==0}}"/><!-- </block> --><!-- <block wx:if="{{userInfo.length!=0}}"> --><van-image round width="4rem" height="4rem" src="{{userInfo.avatarUrl}}"  wx:else/><!-- </block> --></view><view class="userinfo-nickname"><text bindtap="login" wx:if="{{userInfo.length==0}}">Hi 游客</text><text wx:else>{{userInfo.nickName}}</text><!-- <open-data type="userNickName"></open-data> --></view>    </view><view class="nav"><!-- square 正方形格子--><van-cell-group square inset><!-- direction="horizontal"  横向 --><van-grid clickable column-num="4" border=""><van-grid-item icon="star-o" text="收藏" /><van-grid-item icon="coupon-o" text="优惠" /><van-grid-item icon="gift-o" text="礼物" /><van-grid-item icon="smile-o" text="反馈" /></van-grid></van-cell-group></view></view><!-- 内容 --><view class="content"><van-cell-group inset  class="panel"><van-cell title="任务中心" value="点击查看" is-link /><van-grid square column-num="4" border=""><van-grid-item icon="star-o" text="收藏"/><van-grid-item icon="coupon-o" text="收藏"/><van-grid-item icon="gift-o" text="收藏"/><van-grid-item icon="smile-o" text="收藏"/></van-grid></van-cell-group><van-cell-group inset><van-cell title="任务中心" icon="shop-o" is-link /><van-cell title="活动会场" icon="shop-o"  is-link /><van-cell title="收货地址" icon="shop-o"  is-link /><van-cell title="个人信息" icon="shop-o"  is-link /><van-cell title="账号设置" icon="shop-o"  is-link /><van-cell title="权限设置" icon="shop-o"  is-link url="/pages/button/button"/><van-button  wx:if="{{userInfo.length!=0}}" block  type="danger" bindtap="exitLogin"><text style="font-size: large;">退出登录</text></van-button></van-cell-group></view><!-- 解决底部导航栏遮挡页面内容，自己加一个view --><view class="standView">@技术支持：江阔jk921</view><van-dialog id="van-dialog" /><van-toast id="van-toast" />
</view>

home.wxss

/* pages/scroll/scroll.wxss */.top{width: 100%;height: 400rpx;background-color:seashell;padding-top: 150rpx;
}.userinfo{display: flex;flex-direction: column;align-items: center;
}
.userinfo-avatar {overflow: hidden;}.userinfo-nickname{font-size: large;color: #494949;
}.nav{padding-top:100rpx;}
.content{padding-top: 50rpx;
}
.panel{margin: 50rpx;
}
.standView{width: 100%;height: 300rpx;font-size: x-small;color: #c8c8c9;display: flex;flex-direction: column;justify-content: center;align-items: center;
}

home.js

login登录逻辑处理

login(e) {var that = firm({title: '您还未登录',message: '请先登录之后再进行操作',}).then(() => {//1、判断是否授权wx.getSetting({success(res) { console.log(res.authSetting)if (res.authSetting['scope.userInfo']) {//2、获取用户个人信息UserProfile();} else {//2、向用户发起授权请求wx.authorize({scope: 'scope.userInfo',success() {console.log("授权成功------")//3、获取用户个人信息UserProfile();},fail() {wx.showModal({content: '检测到您没打开用户信息权限，是否去设置打开？',confirmText: "确认",cancelText: "取消",success: function (res) {console.log(res);//3、点击“确认”时打开设置页面，手动让用户授权if (firm) {wx.openSetting({success: (res) => {}})} else {console.log('用户点击取消')}}});}})}}})// on confirm}).catch(() => {// on cancel});},//获取用户个人信息getUserProfile() {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '请先授权登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {var user = res.userInfo;//缓存用户信息wx.setStorageSync('userInfo', user);//全局变量app.globalData.userInfo = user;console.log("全局变量" + JSON.stringify(app.globalData.userInfo))console.log(res.userInfo)this.setData({userInfo: res.userInfo})}})},

exitLogin退出登录

 //退出登录exitLogin: function () {console.log("------------------exit-------")firm({title: '',message: '退出登录？',}).then(() => {// on confirmtry {wx.removeStorageSync('userInfo'); //清除本地缓存app.globalData.userInfo = ''; //清除全局变量console.log("清除全局变量：" + app.globalData.userInfo)this.setData({userInfo: ''})Toast("退出登录成功！")} catch (e) {// Do something when catch error}wx.switchTab({url: '/pages/home/home'});}).catch(() => {// on cancel});},

附上home.js全码：

// pages/scroll/scroll.js
import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast';//在page页面引入app，同时声明变量，获得所需要的全局变量
const app = getApp();Page({/*** 页面的初始数据*/data: {userInfo: {},},login(e) {var that = firm({title: '您还未登录',message: '请先登录之后再进行操作',}).then(() => {//1、判断是否授权wx.getSetting({success(res) { console.log(res.authSetting)if (res.authSetting['scope.userInfo']) {//2、获取用户个人信息UserProfile();} else {//2、向用户发起授权请求wx.authorize({scope: 'scope.userInfo',success() {console.log("授权成功------")//3、获取用户个人信息UserProfile();},fail() {wx.showModal({content: '检测到您没打开用户信息权限，是否去设置打开？',confirmText: "确认",cancelText: "取消",success: function (res) {console.log(res);//3、点击“确认”时打开设置页面，手动让用户授权if (firm) {wx.openSetting({success: (res) => {}})} else {console.log('用户点击取消')}}});}})}}})// on confirm}).catch(() => {// on cancel});},//获取用户个人信息getUserProfile() {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '请先授权登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {var user = res.userInfo;//缓存用户信息wx.setStorageSync('userInfo', user);//全局变量app.globalData.userInfo = user;console.log("全局变量" + JSON.stringify(app.globalData.userInfo))console.log(res.userInfo)this.setData({userInfo: res.userInfo})}})},//退出登录exitLogin: function () {console.log("------------------exit-------")firm({title: '',message: '退出登录？',}).then(() => {// on confirmtry {wx.removeStorageSync('userInfo'); //清除本地缓存app.globalData.userInfo = ''; //清除全局变量console.log("清除全局变量：" + app.globalData.userInfo)this.setData({userInfo: ''})Toast("退出登录成功！")} catch (e) {// Do something when catch error}wx.switchTab({url: '/pages/home/home'});}).catch(() => {// on cancel});},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {TabBar().init();//登录状态缓存let userInfo = wx.getStorageSync("userInfo");console.log("---缓存-----："+userInfo)console.log("----onshow 全局变量----："+app.globalData.userInfo)this.setData({userInfo:userInfo})},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

大功告成！