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

已于 2022-05-08 01:23:03 修改
阅读量6.7k 收藏 189
点赞数 17
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
于 2022-05-08 00:54:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shanxiu_/article/details/124641412
版权
这篇博客详细介绍了在微信小程序中实现登录和退出登录的逻辑，包括使用Dialog组件提示用户登录，调用wx.getUserProfile获取用户信息，将信息存储在本地及全局变量，并在退出登录时清除相关信息。此外，代码还展示了如何处理用户权限授权和异常情况。
摘要由CSDN通过智能技术生成

效果图预览

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

效果图：

fa3760a0331344f2a15be924d348b2f5.png

 

6bcfd391b13645e2b060acd42d5c31bd.png

71d8befb8b2a46c1919cd849b0b13a12.png

77a557bf3104487090323b6317a0e7e6.png

 

附上代码：

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 = this;
        Dialog.confirm({
                title: '您还未登录',
                message: '请先登录之后再进行操作',
            })
            .then(() => {
                //1、判断是否授权
                wx.getSetting({
                    success(res) { 
                        console.log(res.authSetting)
                        if (res.authSetting['scope.userInfo']) {
                            //2、获取用户个人信息
                            that.getUserProfile();
                        } else {
                            //2、向用户发起授权请求
                            wx.authorize({
                                scope: 'scope.userInfo',
                                success() {
                                    console.log("授权成功------")
                                    //3、获取用户个人信息
                                    that.getUserProfile();
                                },
                                fail() {
                                    wx.showModal({
                                        content: '检测到您没打开用户信息权限，是否去设置打开？',
                                        confirmText: "确认",
                                        cancelText: "取消",
                                        success: function (res) {
                                            console.log(res);
                                            //3、点击“确认”时打开设置页面，手动让用户授权
                                            if (res.confirm) {
                                                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-------")
        Dialog.confirm({
                title: '',
                message: '退出登录？',
            })
            .then(() => {
                // on confirm
                try {
                    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 = this;
        Dialog.confirm({
                title: '您还未登录',
                message: '请先登录之后再进行操作',
            })
            .then(() => {
                //1、判断是否授权
                wx.getSetting({
                    success(res) { 
                        console.log(res.authSetting)
                        if (res.authSetting['scope.userInfo']) {
                            //2、获取用户个人信息
                            that.getUserProfile();
                        } else {
                            //2、向用户发起授权请求
                            wx.authorize({
                                scope: 'scope.userInfo',
                                success() {
                                    console.log("授权成功------")
                                    //3、获取用户个人信息
                                    that.getUserProfile();
                                },
                                fail() {
                                    wx.showModal({
                                        content: '检测到您没打开用户信息权限，是否去设置打开？',
                                        confirmText: "确认",
                                        cancelText: "取消",
                                        success: function (res) {
                                            console.log(res);
                                            //3、点击“确认”时打开设置页面，手动让用户授权
                                            if (res.confirm) {
                                                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-------")
        Dialog.confirm({
                title: '',
                message: '退出登录？',
            })
            .then(() => {
                // on confirm
                try {
                    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() {
        this.getTabBar().init();

        //登录状态缓存
        let userInfo = wx.getStorageSync("userInfo");
        console.log("---缓存-----："+userInfo)
        console.log("----onshow 全局变量----："+app.globalData.userInfo)
        this.setData({
        	userInfo:userInfo
          })
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

 

大功告成！

 

 

 

 

 

 

山岫
关注
  • 17
    点赞
  • 踩
  • 189
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
微信小程序实现 登录 退出功能 以及简单的我的页面附上源代码拷贝直接用
weixin_50656154的博客
11-15 1万+
1:首先声明：对于小白可能还是有点用 我也是入门不久，欢迎指出问题。 2:先上效果图： 3:index(我的)页面wxml： <!--用户信息：头像，呢称/登录--> <viewclass="xx"> <view><imagesrc="{{avatarUrl}}"class="tx"></image></view> <viewclass="mz">{{name}}&l...
小程序登录和退出登陆
qq_44832096的博客
09-01 865
wxml: <viewclass="login"> <viewwx:if="{{userinof.nickName}}"class="img"> <imagesrc="{{userinof.avatarUrl}}"></image> <text>{{userinof.nickName}}</text> <button...
【微信小程序独立开发 3】个人资料页面编写
qq_41481924的博客
01-15 3858
这一节完成用户个人信息昵称的填写和获取
微信小程序个人信息页面demo
07-27
此案例为微信小程序用户个人信息填写表单，昵称、手机号、性别、所在城市，还行增加别的可自行添加。
微信小程序——【微信授权登录和退出】
最新发布
2302_78057255的博客
07-04 999
在components文件夹内创建toubu文件夹。在toubu文件夹内创建以下四个文件：toubu.wxml：组件的结构和布局。toubuwxss：组件的样式。toubu.js：组件的逻辑和交互。toubu json：组件的配置文件，可选但推荐使用。
【微信小程序】个人信息页面/我的页面
bai_langtao的博客
11-10 2万+
个人信息页面/我的页面、flex布局
【微信小程序】制作个人信息页面
Minf的博客
11-04 4万+
题外：也许前端学习也应包括审美。在我学习前端路上，以前模仿视频内容，现在模仿别人成品…我曾想过作为前端是不是也应学习UI设计方向的美术知识，再不济也应具备页面布局的审美。但这个想法被一位大佬否定了，所以这个想法也只好放在心里成为另一种可能。 正题： 先上成品图 1.架构 进行编程前，我们要架构。对整体项目叫架构，对一个页面而言不如说叫整理思路 以本图为例，除去底部 tabBar，头部 navigationStyle 是小程序特有配置，其他都是“前端三剑客”的基础内容。 于是可以简单的划分为两部分： 蓝色
微信小程序个人中心-我的界面
热门推荐
wy313622821的博客
04-24 5万+
个人中心-我的界面 简介 我们在开发微信小程序的时候，基本上都会有一个个人中心的界面，简称我的界面，里面有保存每个用户的个人信息，个人设置，个人的数据记录。所以本文主要针对这个页面做了一个自己熟练的界面，下面来看看效果图： 效果图 . . . 这种效果的整体布局固定不变，如果想要更好看的效果，可以修改里面的图片小图标，还有背景颜色，又或者加上动图都是可以的，但是整体的框架基本就是这样，所以下面来...
微信小程序个人简历界面（编辑版）
weixin_45465881的博客
06-04 6742
微信小程序个人简历界面、可编辑修改（包含全部源码） 1、微信小程序实现简单的个人简历界面，包含基本信息、教育背景、获奖证书、兴趣爱好等，简历信息支持修改编辑内容。 2、通过此文章，希望能带给更多学习微信小程序的伙伴们一点点经验，示例简洁，布局简单，喜欢的小伙伴，可以进我主页，分享更多学习经验和示例界面呦。 3、本界面主要是以布局和可编辑个人简历为主，具体完整的简历信息界面还需自己添加，关注博主，后期将分享保存提交后，生成一个完整不可编辑的简历界面哦。 4、代码中若存在不恰当的地方，还请批评指正，非常感谢！
驾考宝典微信小程序的设计与实现代码
05-03
驾考宝典微信小程序的设计与实现 这个小程序是一款互联网综合驾照考试学车软件，适用于驾考科目一，科目四考题的练习，覆盖驾驶证和资格证的考试，界面前端主要功能是展示程序主界面以及各子界面，提供使用者可视化...
基于微信小程序的课堂签到系统代码.rar
04-12
②教师功能模块 ，教师可以添加课程，生成课程的临时的二维码，同时规定签到的地理范围和时间，让学生在规定的地理范围内通过进行扫码签到 ，查看学生的签到情况，最好能导出签到信息表。 ③学生功能模块 ，搜索...
微信小游戏消灭星星的设计与实现
05-03
1.毕设题目微信小游戏消灭星星的设计与实现，基于微信开发者平台进行开发编码，主页面设置四个按钮：新游戏 排行榜 设置 退出。 点击开始游戏首先选择游戏难度，游戏分简单普通困难三个个难度，布局参考扫雷分别为10...
微信自动答题小工具，Pycharm运行
12-29
2. **页面解析**：利用BeautifulSoup或lxml解析微信小程序答题页面，提取题目和选项。 3. **答案选择**：编写算法决定答案，可能的方式有随机选择、基于规则的选择（如选择最常见的选项）等。 4. **模拟提交**：...
微信小程序-番茄时钟，帮助你管理好自己的时间，高效完成自己工作，平衡工作学习和休息，保持一个高效集中的状态
03-01
微信小程序-番茄时钟，帮助你管理好自己的时间...作为学习工具，本程序代码简单，结构清晰，代码质量高，非常适合微信小程序初学者进行参考学习，在使用番茄工具的同时，提升你的编程能力，有助于快速入门微信小程序。
微信小程序个人中心、我的界面（示例一）
weixin_45465881的博客
04-26 2万+
微信小程序个人中心、我的界面，使用button按钮实现界面布局。
【页面案例汇总】微信小程序个人信息管理页面
weixin_42317757的博客
06-21 2276
【页面案例汇总】微信小程序个人信息管理页面
微信小程序个人中心页面 案例
shi450561200的博客
12-05 1万+
微信小程序 开发，经常会遇到个人中心页面 的需求，为了方便大家使用，决定将个人总想页面进行开源，以供大家参考交流。
【小白专用】微信小程序个人中心、我的界面（示例一）23.11.04
zgscwxd的博客
11-04 1万+
微信小程序个人中心、我的界面（示例一）
写一个小程序个人信息页面
04-06
我作为AI语言模型，无法编写具体的代码，但可以提供思路和框架。 1. 页面布局 个人信息页面一般包括头像、昵称、基本信息、联系方式等，可以采用表格、列表或卡片等形式进行布局。 2. 头像 头像是个人信息页面的重要组成部分，可以选择上传本地图片或通过调用第三方API获取网络图片。 3. 昵称 昵称是个人信息页面的重要标识，可以采用文本框或标签等形式进行展示，同时可以提供修改昵称的功能。 4. 基本信息 可以根据个人需求设置不同的基本信息，如姓名、性别、年龄、出生日期、教育背景、工作经历等，采用表格或列表等形式进行展示。 5. 联系方式 包括电话、邮箱、微信号、QQ号等，也可以提供修改联系方式的功能。 6. 其他功能 可以根据个人需求添加其他功能，如上传个人证件、修改密码等。 总之，个人信息页面应该简洁明了，方便用户查看和编辑自己的信息。同时，要注意保护用户的隐私和安全。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值