小白开发微信小程序48--退出登录页面实现

1、js文件

// pages/personal/personal.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isLogined: false,//登录标志，默认未登录
        userInfo: {},//用户信息对象
        useravatarUrl: "",//头像地址
        usernickName: "",//昵称
        userCode: "",//用户code  
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.startLogin();
    },

    //开始登录
    startLogin() {
        let that = this;
        const token = wx.getStorageSync('token');//获取存储的数据
        //判断token
        if (!token) {
            wx.showModal({
                title: "友情提示",
                content: "您同意授权微信登录，才可以进入个人中心",
                confirmText: "同意",
                confirmColor: "rgb(18,194,94)",
                cancelText: "拒绝",
                cancelColor: "darkorange",
                success: (res) => {
                    if (res.confirm) {
                        that.doLogin();
                    } else if (res.cancel) {
                        wx.showToast({
                            title: '您已拒绝',
                            icon: "error",
                            duration: 2000
                        })
                    }
                }
            });
        }
        else {
            const storeuserinfo = wx.getStorageSync('userInfo');
            that.setData({
                userInfo: storeuserinfo,
                isLogined: true
            });
        }
    },
    //开始登录
    doLogin() {
        let that = this;
        //1、获取用户信息:头像，昵称
        wx.getUserProfile({
            desc: 'desc',
            success: (res) => {
                //   console.log(res);
                //设置页面数据变量的值
                that.setData({
                    userInfo: res.userInfo,
                    useravatarUrl: res.userInfo.avatarUrl,
                    usernickName: res.userInfo.nickName
                });
                //存储页面信息 
                wx.setStorageSync('userInfo', res.userInfo);
                //2，获取用户的code
                wx.login({
                    success: (res) => {
                        if (res.code) {
                            //设置页面数据变量的值
                            that.setData({
                                userCode: res.code
                            });
                            //构建登录参数
                            let tempparam = {
                                useravatarUrl: that.data.useravatarUrl,
                                usernickName: that.data.usernickName,
                                userCode: that.data.userCode
                            }
                            //小程序登录
                            that.wxLogin(tempparam);
                        }
                    },
                })
            }
        })
    },

    //微信登录
    wxLogin(loginpara) {
        let that = this;
        // console.log(loginpara);
        wx.request({
            url: 'https://localhost:5601/api/WeiXin/wxUserLogin',
            //必须将Js对象转换成json字符串
            data: JSON.stringify(loginpara),
            method: "POST",
            header: {
                'content-type': 'application/json' // 默认值
            },
            success(res) {
                //console.log(res.data);
                if (res.data != "error") {
                    that.setData({
                        isLogined: true //将登录状态改成已登录
                    });
                    //存储openid
                    wx.setStorageSync('token', res.data);
                    wx.showToast({
                        title: '登录成功!',
                        icon: "success",
                        duration: 2000
                    })
                }

            }
        })
    },
    //退出登录
    logout() {
        let that = this;
        wx.setStorageSync('token', "");
        wx.setStorageSync('userInfo', "");
        that.setData({
            isLogined: false,
            userInfo: {}
        });
        wx.showToast({
            title: '退出成功!',
            icon: "success",
            duration: 2000
        })
    },

    //收货地址
    handleaddress() {
        wx.chooseAddress({
            success: (result) => {

            }
        });
    },
    
    //联系我们
    contactus() {
        wx.navigateTo({
            url: '/pages/we/we',
        })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

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

    },

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

    },

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

    },

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

    },

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

    }
})

2、效果

3、数据中记录