电商小程序08调用缓存

目录

  • [1 将信息存入缓存中](#1 将信息存入缓存中)
  • [2 获取登录信息](#2 获取登录信息)
  • [3 退出登录](#3 退出登录)
  • [4 发布预览](#4 发布预览)
  • 总结

小程序的登录功能里,如果只是将登录信息保存到全局变量中,存在的问题是如果小程序重新打开,用户的登录状态就丢失了。为了解决这个问题,我们需要用到微搭的缓存的功能,本篇就介绍一下如何加载缓存。

1 将信息存入缓存中

切换到我们的登录页面,打开我们的登录方法

在全局变量赋值的后边,增加一个缓存存入的动作

javascript 复制代码
$w.utils.setStorage({ key: "user", data: $w.app.dataset.state.user });

api的调用要参考官方文档

key相当于给我们存入的信息起了一个名字,后续在获取的时候就可以根据这个名字来取。而data相当于我们需要存入的数据,这里我们存入了全局变量

完整的代码

javascript 复制代码
export default async function ({ event, data }) {
  const username = $w.input1.value
  const password = $w.input2.value
  const agree = $w.radio1.value
  console.log('agree', agree, typeof (agree))
  if (agree == '1') {
    const user = await $w.cloud.callDataSource({
      dataSourceName: "zcyhxx_7diyeuv",
      methodName: "wedaGetItemV2",
      params: {
        // 筛选内容,筛选内容推荐使用编辑器数据筛选器生成
        filter: {
          where: {
            $and: [
              {
                zh: {
                  $eq: username, // 获取单条时,推荐传入_id数据标识进行操作
                },
              },
              {
                mm: {
                  $eq: password, // 获取单条时,推荐传入_id数据标识进行操作
                },
              },
            ],
          },
        },
        select: {
          $master: true, // 常见的配置,返回主表
        },
      },
    });
    console.log('user', user)
    if (user._id) {
      $w.app.dataset.state.user = user
      $w.utils.setStorage({ key: "user", data: $w.app.dataset.state.user });
      //wx.setStorageSync('user', $w.app.dataset.state.user)
      $w.utils.redirectTo({
        pageId: "index", // 页面 Id
        packageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录
        params: { key: "value" },
      });
    } else {
      $w.utils.showToast({
        title: "用户名或者密码错误",
        icon: "error",
        duration: 2000, // 2秒
      });
    }
  } else {
    $w.utils.showToast({
      title: "请勾选用户协议",
      icon: "error",
      duration: 2000, // 2秒
    });
  }
}

2 获取登录信息

在登录时候已经将用户信息存入了缓存中,在首页我们就需要从缓存中获取。在代码区,点击新建,创建一个自定义方法,命名为Load

输入如下代码

javascript 复制代码
export default async function ({ event, data }) {
  try {
    const user = await $w.utils.getStorage({ key: "user" }); 
    console.log('user', user)
    if (user && Object.keys(user.data).length > 0) {
      $w.app.dataset.state.user = user.data
    }
    console.log(user);
  } catch (err) {
    console.error(err);
  }


}

首先调用了微搭获取缓存的方法,官方文档如下

通过key可以获取到我们存入的对象,这里要注意的是,返回的对象要继续获取data属性才是我们真正需要的内容

获取到之后我们就判断对象是否有值,如果有值我就赋值给全局变量。

然后选中页面组件,设置加载方法,调用我们的自定义方法

3 退出登录

有登录就需要有退出,退出的逻辑就是删除我们的缓存,在我的页面,我们添加一个按钮用来实现退出的功能

在代码区,添加一个自定义方法,起名字叫logout,写入如下代码

javascript 复制代码
export default async function ({ event, data }) {
  $w.utils.removeStorage({ key: "user" });
  $w.app.dataset.state.user = {}
  $w.utils.redirectTo({
    pageId: "index", // 页面 Id
    packageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录
    params: { key: "value" },
  });
}

这里先调用了删除缓存的api,官方文档如下

通过key来删除缓存,我们在登录的时候存入的key是user,这里也需要通过这个key删除缓存。删除完缓存之后将全局变量赋值为空对象,保证跳转回首页的时候显示的是登录按钮

4 发布预览

因为这几个api其实是对微信小程序的api的封装,我们需要发布一下,在手机上看到具体的效果

真机体验的时候,记得把小程序销毁,然后再次打开,看看具体的效果。如果只是关掉小程序,他还是在后台运行,你再点击的时候只是重新显示了。

总结

本篇我们介绍了微搭缓存的使用,存入用户信息只是一个方面的应用,在后续实现购物车的功能时,还需要借助缓存的能力,敬请期待。

相关推荐
Daniel 大东20 分钟前
idea 解决缓存损坏问题
java·缓存·intellij-idea
起飞的风筝1 小时前
【redis】—— 环境搭建教程
数据库·redis·缓存
shitian08111 小时前
用轻量云服务器搭建一个开源的商城系统,含小程序和pc端
服务器·小程序·开源
计算机-秋大田2 小时前
基于微信小程序的农场管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
古人诚不我欺3 小时前
Redis设置密码认证,以及不重启服务情况下设置临时密码
数据库·redis·缓存
说私域9 小时前
私域流量圈层在新消费时代的机遇与挑战:兼论开源 AI 智能名片、2 + 1 链动模式、S2B2C 商城小程序的应用
人工智能·小程序
亥时科技12 小时前
相亲小程序(源码+文档+部署+讲解)
java·小程序·开源·源代码管理
wayuncn12 小时前
网站小程序app怎么查有没有备案?
小程序
2401_8441379513 小时前
PHP中小学优校管理系统小程序源码
微信·微信小程序·小程序·微信公众平台·微信开放平台
iSee85716 小时前
美团代付微信小程序 read.php 任意文件读取漏洞复现
微信小程序·小程序·php