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

这篇具有很好参考价值的文章主要介绍了小白开发微信小程序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、效果

微信小程序退出登录代码,小白开发微信小程序,微信小程序,小程序,javascript,登录,Powered by 金山文档
微信小程序退出登录代码,小白开发微信小程序,微信小程序,小程序,javascript,登录,Powered by 金山文档

3、数据中记录

微信小程序退出登录代码,小白开发微信小程序,微信小程序,小程序,javascript,登录,Powered by 金山文档
微信小程序退出登录代码,小白开发微信小程序,微信小程序,小程序,javascript,登录,Powered by 金山文档

文章来源地址https://www.toymoban.com/news/detail-562507.html

到了这里,关于小白开发微信小程序48--退出登录页面实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小白开发微信小程序23--开放接口API

    wx.login 登录 wx.getUserInfo 获取用户信息 wx.chooseAddress 获取用户收货地址 wx.requestPayment 发起微信支付 wx.addCard 添加卡券 wx.openCard 打开卡券 ....................................................... 获取用户信息。页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹

    2024年02月15日
    浏览(31)
  • 小白开发微信小程序50--云服务器部署测试小程序

    在前面49节的操作证明了操作正确的,但这只是在本地测试部署成功,还差一步就是前台和后台的程序都必须运行在internet上才行,而不可能运行在本地机器服务器上,方式是先在本地部署测试,然后再云服务器上部署测试,所以接下继续搞,继续干。 只要是云服务器都可以

    2024年02月11日
    浏览(39)
  • 小白开发微信小程序49--本地服务器部署测试小程序

    相信大家对微信小程序的基础和项目应该没有太大问题了,如果还有对微信小程序开发有一些问题,请查看回顾...微信小程序开发者开发好一款微信小程序后,怎么才能发布呢?如何将其提交给微信审核呢? 在前面的【领航教育】项目开发中,后台采用的是C#开发语言,提供的

    2024年02月09日
    浏览(40)
  • 小白开发微信小程序21--网络API(asp.net core版)

    在一个网站里面发起https请求是很常见的,但是,由于微信小程序是腾讯内部的产品,不能直接打开一个外部的链接,例如,您在微信小程序里面无法直接打开网站,但是,在做小程序开发的时候,如果想调用这个网站的一个接口,这时,如何使用?因为,微信小程序里面不

    2024年02月09日
    浏览(57)
  • uniapp开发微信小程序之登录

    最近开发了一个关于订餐的小程序,记录一下开发过程中运到的问题。 小程序登录实现流程: (1)调用微信登录方法获取code (2)后端接口根据code查询该用户是否手机号授权,已绑定openID (3)若绑定过,则直接跳入页面;若没有,则进入授权页面,进行手机号授权 (4)

    2024年02月15日
    浏览(40)
  • Java开发微信小程序授权登录

    最近对接开发微信小程序,需要获取用户的openid使用支付,所以记下这篇通用小程序授权笔记。 这里使用到开源工具Wx-Java 此致 致敬 binarywang 大佬  maven引入如下 准备参数,application配置文件需配置参数 编写WxMaProperties.java文件获取配置文件中的字段 创建配置类WxMaConfigurat

    2024年02月16日
    浏览(35)
  • 快速开发微信小程序之一登录认证

    记得11、12年的时候大家一窝蜂的开始做客户端Android、IOS开发,我是14年才开始做Andoird开发,干了两年多,然后18年左右微信小程序火了,我也做了两个小程序,一个是将原有牛奶公众号的功能迁移到小程序,用户体验得到极大的提升,另外一个是给XX做的一个简单的卖蜂蜜的

    2024年02月06日
    浏览(24)
  • uniapp开发微信小程序-2.页面制作

    往期文章: uniapp开发微信小程序-1.工具和本地环境 uniapp开发微信小程序-2.页面制作 一、项目配置 开发层级结构: 左侧是基础开发,右侧是uniapp开发。经过对比,我们只需要掌握了vue框架就可以直接开发,通过uniapp运行到微信开发者工具即可自动编译成微信小程序基础开发

    2024年02月09日
    浏览(32)
  • 微信小程序实现的一个登录页面Demo

    微信小程序登录页面示例代码,包括了获取验证码按钮等30秒点一次功能和勾选同意用户条款的功能,仅供参考,效果图如下 *.wxml文件: *.wxss文件: *.js文件: 这个示例代码实现了一个登录页面,并且包括了输入手机号和验证码,获取验证码按钮,勾选同意用户条款,登录按

    2024年02月03日
    浏览(32)
  • uniapp开发微信小程序问题笔记-页面跳转传参

    页面跳转传参,一般都是字符串类型,传bool类型也会被当做字符串处理 举例:点击页面跳转并传参,跳转页面从onLoad中的option接收参数 isgas 父子组件的数据交互 在之前的博客里简单介绍过父子通信方法:父传子props,子传父$emit 这里再补充一个父调用子组件的方法 $refs 子组件

    2024年02月11日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包