微信小程序保持登录状态(使用缓存)

这篇具有很好参考价值的文章主要介绍了微信小程序保持登录状态(使用缓存)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        一般来说,一个app在第一次进入时需要进行注册和登录的操作,之后再打开无需再登录即可直接进入app,即保持登录状态。此处使用微信小程序的数据缓存来做到登陆状态的保持。

1 相关API

        首先需要了解几个关于微信小程序数据缓存的API

          wx.setStorage(Object object) | 微信开放文档 (qq.com)

1.1 wx.setStorageSync

        wx.setStorageSync将指定的数据替换到指定的key中,即对数据缓存进行更新。这里表示将1存储在“key”为关键字表示的数据缓存中。

wx.setStorageSync("key",1)

        第一个参数为指定的key值,第二个参数为更新后的值。这一API用来更新登陆状态。

1.2 wx.getStorage

         wx.getStorage从本地数据缓存中获取指定key的内容,用来获取当前的更新状态并判断是否跳转到正式界面。

2 逻辑实现

        在本例中,用以“key”为关键字的数据缓存代表标记量,1为登录状态,0为离线状态。其他缓存信息可以用不同的关键字存储。

        将登录界面(输入账号密码)的界面作为微信小程序的初始界面。在登录界面第一次展示时时候(onLoad函数中)判断标记量为0还是为1。如果处在登录状态则通过wx.switchTab或wx.navigateTo跳转到真正的首页。如果处在非登录状态,即需要输入账号密码,则不做处理。

        在处理登录和退出账号的操作时,要实时更新数据缓存中的标记量,即登录状态。

3 登录界面的js代码

const db = wx.cloud.database()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    id:"",
    key:"",
  },//登录时要用到data中的数据,与本例无关,为了完整性而写出

  denglu(){//处理登录业务的函数
    var that=this

    db.collection('scs_user').where({
      id: this.data.id
    }).get({//此处为利用微信小程序云开发数据库进行密码判断的操作 与本例无关
      success(res) {
        
        if(res.data[0].key==that.data.key)//登录成功
        {
          //保存信息到缓存 更新状态
          wx.setStorageSync("key",1)

          //跳转页面
          wx.switchTab({
            url: '/pages/index/index',//url后为实际的主页
          })


         
        }
        else{//登录失败
          wx.showModal({
            title: '密码错误',
            content:'密码错误'
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getStorage({ 
      key:"key",
      success: function(res) {   
        if(res.data==1)//曾经登录过 直接通过
        {
          wx.switchTab({
            url: '/pages/index/index',
          })
        } 
      } 
     })
  },

  
})

注:

1 可以在微信开发者工具的Storage中查看实时的数据缓存

微信小程序保持登录状态(使用缓存)

 2 当跳转后的页面为底部导航栏中的页面时,要用wx.switchTab

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

到了这里,关于微信小程序保持登录状态(使用缓存)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【微信小程序】使用微信API获取用户信息实现登录

    实现步骤 1. 通过定义button按钮点击事件,点击登录后触发事件 2. 通过 wx.getUserProfile API 调用用户信息 3. 获取成功就将数据存储到本地存储中,使用 wx.setStorageSync(\\\'user\\\', user) 4. 存储完获取本地数据 wx.getStorageSync(\\\'user\\\') 5. 页面渲染数据 实现登录 wxml页面 js页面  wxss页面

    2024年02月05日
    浏览(43)
  • 2023最新使用微信小程序完成一键授权登录

    前言: 使用开发工具:小程序。在我这一篇已经详细介绍了小程序的安装介绍今天我给大家带来的是微信的一键授权登录,保存用户信息,退出的功能!!!希望看完了这篇博客能够对你有帮助!!! 效果: 登录获取到用户信息: 思路 :点击按钮获取到用户信息(调用方

    2024年02月08日
    浏览(59)
  • 网站使用微信小程序扫码登录的实现方法

    传统网站一般都会使用账号密码登录,但这种方式总有用户会忘记密码,找回密码需要一系列验证,也挺麻烦的,于是学习了一下扫码登录,这种方式不仅不会有忘记密码的烦恼,登录还十分快捷。用户体验较好. 网站端点击小程序图片,弹出小程序码 小程序端授权页面 1、

    2024年02月16日
    浏览(40)
  • .NET6使用微信小程序授权登录,获取手机号

    1.在appsettings配置你的小程序配置信息 2.请求接口时先获取Access_token 3.授权时获取手机号 4.微信接口要求必须使用Post请求方法 //小程序官方文档 https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html

    2024年02月13日
    浏览(37)
  • Uniapp写微信小程序时,如何获取用户头像和昵称使用微信用户信息登录?

    实现效果如下: 首先使用uni.login获取用户登录凭证code: 官方代码: success返回参数如下: 头像选择: 需要将 button 组件  open-type  的值设置为  chooseAvatar ,当用户选择需要使用的头像之后,可以通过  bindchooseavatar  事件回调获取到头像信息的临时路径。 从基础库2.24.4版本

    2024年02月04日
    浏览(37)
  • 微信小程序激活账号时,提示“此帐号已激活,请使用帐号密码直接登录”

    最近准备研究下微信小程序,先去申请个小程序账号。于是乎,在通过邮件中的链接激活账号时,遇到了这个问题。 你没看错,就是字面的意思, 去登录页,点击使用账号登录 , 千万不要扫码登录 。 用之前注册的邮箱和密码登录,登录后就可以继续完成信息登记了! 在未

    2024年02月11日
    浏览(117)
  • mpVue 微信小程序授权登录流程(即登录鉴权流程)及获取手机号一键登录教程(getPhoneNumber使用)

    微信小程序登录 鉴权流程 如下: 因 wx.getUserProfile 与 wx.getUserInfo 接口被收回了,都不能弹出授权窗口,只能使用头像昵称填写能力去获取微信用户信息。 在鉴权页面如下操作 : 1、在 onShow 中调用微信登录 wx.login 获取到唯一的code(用来获取 openid ); 2、根据 wx.login 获取的c

    2024年02月12日
    浏览(49)
  • 使用binary-wang开发微信小程序的登录和微信支付

    贴个官网,建议down下来他的源码,对照着开发更方便,因为备注很详尽。 其它不多废话了,我直接写步骤了。 1. Maven引入 时间2023年5月,目前最新版本是4.5.0 2. 微信小程序参数配置 考虑到多微信小程序和微信支付多商户的问题,我们的配置将会是以集合的形式存在 2.1 prop

    2024年02月04日
    浏览(44)
  • 微信小程序一键登录功能,使用uni-app和springboot(JWT鉴权)

    目录 概述 微信登录接口说明  关于获取微信用户的信息 前端代码(uni-app) 后端代码(SpringBoot) 配置文件:application.yml  配置文件:Pom.xml  类:WeChatModel    类:WeChatSessionModel  类:UserInfoController 业务层实现类:UserInfoServiceImpl 工具类:JWTUtils 拦截器配置-自定义拦截器

    2024年02月09日
    浏览(52)
  • 微信小程序之会议OA首页数据交互,会议状态,会议人数转换,会议室交互,WXS的使用

    前言: 本篇博客使用结合了SpringMVC,mybatis,maven,小程序,如果不熟悉使用可以翻看我之前的博客,以便大家可以更好的学习!!! 这是我们今天完成后的效果: 1.1启动开发工具,导入后台 导入框架: 配置maven 注意数据库的名称: 启动 1.2导入数据表 1.3前台页面的编码(

    2024年02月08日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包