【微信小程序】CSS模块化、使用缓存在本地模拟服务器数据库

news2024/12/26 0:32:34

在这里插入图片描述

🏆今日学习目标:第十五期——CSS模块化、使用缓存在本地模拟服务器数据库
😃创作者:颜颜yan_
✨个人主页:颜颜yan_的个人主页
⏰预计时间:25分钟
🎉专栏系列:我的第一个微信小程序


文章目录

  • 前言
  • CSS模块化
  • 应用程序的生命周期
    • Object参数
  • 使用Storage缓存初始化本地数据库
    • 缓存的特点
    • 设置数据缓存(异步)
    • 设置数据缓存(同步)
    • 优化缓存初始化判断
    • 缓存的强制清理及注意事项
  • 总结


前言

哈喽大家好,本期是微信小程序专栏第十五期。本期主要内容是使用缓存在本地模拟服务器数据库。主要包括了解应用程序的生命周期、Storage缓存初始化、设置缓存和清理缓存等。
每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~


CSS模块化

上期我们将wxml模块化了,那么css也应该一起“打包”起来。

如下,将post.wxss中有关于文章列表的CSS样式全部剪切到post-item.wxss中。

在这里插入图片描述

在post.wxss中使用@import "src"进行引用,实现CSS的模块化。
注意:在引入CSS文件时,既可以是相对路径,也可以是绝对路径。

在这里插入图片描述

应用程序的生命周期

当遇到重要的节点时,MINA框架就会给页面一个通知,比如onLoad、onShow、onReady等,这是页面的生命周期。在页面的JS文件中,我们使用Page来注册页面,并在object中指定页面的生命周期函数等等。同样,整个应用程序也有自己的生命周期,我们也可以在app.js中使用App来注册小程序,并在object中指定小程序的生命周期函数等。

Object参数

  1. onLaunch:监听小程序初始化,当小程序初始化完成时,会触发onLaunch(全局只触发一次)。
  2. onShow:监听小程序显示,当小程序启动,或者从后台进入前台显示,会触发onShow。
  3. onHide:监听小程序隐藏,当小程序从前台进入后台,会触发onHide。
  4. onError:错误监听函数,当小程序发生脚本错误,或者API调用失败时,会触发onError并带上错误信息。

除了以上几个MINA框架给予的特定函数,我们也可以添加任意函数或者数据到Object参数中,用“this”可以访问这些函数和数据。

使用Storage缓存初始化本地数据库

初始化数据库的最好时机是在应用程序启动时。接下来我们使用Storage缓存初始化本地数据库。

缓存的特点

缓存让小程序具备了本地存储数据的能力。

以下是缓存的特点

  1. 只要用户不主动清楚缓存,则缓存一直存在。
  2. 缓存以key:value键值对的形式存在,类似于服务器流行的memcache或者redis缓存形数据库。
  3. 小程序提供了一系列API用来操作缓存,包括存储、读取、移除、清楚全部和获取缓存信息。每种操作同时都具有同步和异步两个方法。
  4. 注意移除和清楚的区别。删除某一个key的缓存,使用wx:removeStorage方法;如果想清除所有的缓存就使用wx:clearStorage方法。
  5. 小程序的缓存永久存在,不存在过期时间这个概念,如果想清除缓存,则需要主动调用清除缓存的API。
  6. 小程序的本地缓存有容量上限,最大不允许超过10MB。

设置数据缓存(异步)

我们在app.js中添加如下代码,首先通过require加载data.js文件作为初始化数据,然后在应用程序生命周期函数onLaunch里使用wx.setStorage方法将初始化数据存入到小程序的缓存中。

// app.js
// 加载data.js文件作为初始化数据
var dataObj = require("data/data.js");
App({
    // 监听小程序初始化的函数
    onLaunch:function(){
        // 将初始化数据存入到小程序的缓存中,异步方法
        wx.setStorage({
            // key、data两个object参数
            key:'postList', //缓存的键
            data:dataObj.postList, //缓存的值,可以是js对象或者字符串
            // success、fail、complete通用方法,几乎所有小程序的异步API方法中都包含这3个方法。
            success:function(res){
                // success
            },
            fail:function(){
                // fail
            },
            complete:function(){
                // complete
            }
        })
    },
})

运行代码后,我们来看看调试下的Storage面板吧~

postList就是在代码中设置的key:‘postList’,Array数组就是设置的data对象,也就是要初始化的数据,对应的是data.js文件中的5篇文章数据。
在这里插入图片描述
❗ Storage面板是查看缓存的重要功能,当我们遇到缓存相关的问题时,一定要查看缓存面板。

以上我们就搭建了一个简易本地“数据库”,它具有增、删、改和简单的查询功能。将本地缓存理解为一个简易数据库的思想非常重要,我们应当像在服务器编写数据库访问类一样,编写一组操作自己业务缓存的通用方法。

设置数据缓存(同步)

同步方法wx.setStorageSync是在异步方法名wx.setStorage加了一个后缀“Sync”,不仅仅是setStorage,小程序中几乎所有的同步方法的方法名都是在异步方法名后增加了“Sync”
同步方法的参数非常简单,它接收wx.setStorageSync(key,data)两个参数,同步方法没有success、fail、complete等回调函数。

选取异步方法会增加代码风险率和调试难度,如果没有必要,建议优先考虑同步方法。

// app.js
// 加载data.js文件作为初始化数据
var dataObj = require("data/data.js");
App({
    // 监听小程序初始化的函数
    onLaunch:function(){
        // 将初始化数据存入到小程序的缓存中,同步方法
        wx.setStorageSync('postList', dataObj.postList);
    },
})

优化缓存初始化判断

上述代码将在小程序每次启动时,都会执行一次,但是缓存如果不主动清除,就一直存在。如果每次启动时都重新初始化存储,那么对数据库的修改就会被初始化的数据覆盖。接着我们来进行优化。

思路
1、使用wx.getStorageSync(key)方法获取指定key的缓存内容。
2、添加判断,如果指定的key缓存不存在,说明数据库还没有初始化。先使用wx.clearStorageSync();清除所有的缓存数据,接着再重新读取并设置初始化数据。

// app.js
App({
    // 监听小程序初始化的函数
    onLaunch:function(){
        var storageData = wx.getStorageSync('postList');
        if(!storageData){
        // 如果postList缓存不存在

            //1、加载data.js文件作为初始化数据
            var dataObj = require("data/data.js");
            wx.clearStorageSync();
            // 2、将初始化数据存入到小程序的缓存中,同步方法
            wx.setStorageSync('postList', dataObj.postList);
        }
    },
})

缓存的强制清理及注意事项

除了使用wx.clearStorageSync();清除所有的缓存数据,我们也可以使用开发工具的【缓存】来清理缓存。
在这里插入图片描述
在这里插入图片描述

注意:真机上没有类似于开发工具这样的强制清理缓存的按钮,微信自带的缓存清理并不是用来清除小程序缓存的。

如果不想做是否有缓存的判断,那就每次应用程序重启都强制更新一次初始化的数据,从而保证数据一直是最新的状态。


总结

以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏,持续更新呢~
咱们下期再见~
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/51119.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【这款神器可以有】3DMAX一键墙体门洞窗洞插件使用教程

3DMAX一键墙体门洞窗洞插件,只需导入户型图,单/双面墙体一键生成。 【主要功能】 --一键生成墙体 --一键门洞 --一键窗洞 --支持单/双面墙体生成 【安装方法】 无需安装,直接拖动插件脚本到3dmax窗口即可打开插件。 【快速开始】 将3dm…

11.我为 Netty 贡献源码 | 且看 Netty 如何应对 TCP 连接的正常关闭,异常关闭,半关闭场景

我为 Netty 贡献源码 | 且看 Netty 如何应对 TCP 连接的正常关闭,异常关闭,半关闭场景 本系列Netty源码解析文章基于 4.1.56.Final版本 写在前面..... 本文是笔者肉眼盯 Bug 系列的第三弹,前两弹分别是: 抓到Netty一个Bug,顺带来…

【Spring(七)】带你手写一个Spring容器

有关Spring的所有文章都收录于我的专栏:👉Spring👈 目录 前置准备 第一步、创建我们自定的注解 第二步、创建我们自己的容器类 测试 总结 相关文章 【Spring(一)】如何获取对象(Bean)【Spring&a…

CSS伪类使用详解

基本描述 CSS伪类是很常用的功能,主要应用于选择器的关键字,用来改变被选择元素的特殊状态下的样式。 伪类类似于普通CSS类的用法,是对CSS选择器的一种扩展,增强选择器的功能。 目前可用的伪类有大概40多个,少部分有兼…

Spring Bean的生命周期理解

一、Spring Bean的生命周期大的概括起来有四个阶段: 1、实例化 2、属性填充注入 3、初始化使用 4、Bean的销毁 二、如流程图所示 三、步骤说明 1、实例化 实例化一个Bean,即new 2、IOC依赖注入 按照Spring上下文对实例化的Bean进行属性填充注入 3、setB…

昆船智能上市:预计年营收19亿到22.5亿 市值48亿

雷递网 雷建平 11月30日昆船智能技术股份有限公司(简称:“昆船智能”,证券代码:301311)今日在深交所创业板上市。昆船智能本次发行股票6000万股,发行价为13.88元,募资8.33亿元。昆船智能开盘价为…

2022CTF培训(七)逆向专项练习

附件下载链接 babyre 首先是一个迷宫&#xff0c;由于答案不唯一&#xff0c;因此到 dfs 求出所有路径。 #include <bits/stdc.h>constexpr char s[] "**************.****.**s..*..******.****.***********..***..**..#*..***..***.********************.**..*…

springMVC01,springMVC的执行流程【第一个springMVC例子(XML配置版本):HelloWorld】

springMVC01,springMVC的执行流程【第一个springMVC项目&#xff1a;HelloWorld】springMVC的简介springMVC的执行流程第一个springMVC项目&#xff08;XML配置版本&#xff09;1.创建项目1.1 新建maven项目&#xff1a;1.2 添加web支持1.3 在pom.xml中导入依赖1.4 配置tomcat2…

【云享·人物】华为云AI高级专家白小龙:AI如何释放应用生产力,向AI工程化前行?

摘要&#xff1a;AI技术发展&#xff0c;正由应用落地阶段向效率化生产阶段演进&#xff0c;AI工程化能力将会不断深入业务&#xff0c;释放企业生产力。本文分享自华为云社区《【云享人物】华为云AI高级专家白小龙&#xff1a;AI如何释放应用生产力&#xff0c;向AI工程化前行…

[附源码]Python计算机毕业设计Django飞越青少儿兴趣培训机构管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

旅游景区地图导览系统,传统导览智慧新升级

地图在景区导览中一直扮演着重要角色。 从传统导览的纸质地图&#xff0c;再到智慧导览的电子地图&#xff0c;游客都可以从景区地图上了解到景点名称、游玩路线、服务设施等内容&#xff0c;帮助游客更好地游览景区。 相比传统的纸质地图导览&#xff0c;电子地图导览系统有哪…

计算机组成原理习题课第四章-4(唐朔飞)

计算机组成原理习题课第四章-4&#xff08;唐朔飞&#xff09; ✨欢迎关注&#x1f5b1;点赞&#x1f380;收藏⭐留言✒ &#x1f52e;本文由京与旧铺原创&#xff0c;csdn首发&#xff01; &#x1f618;系列专栏&#xff1a;java学习 &#x1f4bb;首发时间&#xff1a;&…

TIA博途中通用函数库指令FIFO先入先出的具体使用方法

TIA博途中通用函数库指令FIFO先入先出的具体使用方法 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 如下图所示,在TIA博途中添加通用函数库指令,然后在库指令中找到FIFO,鼠标直接拖拽到程序段中,系统会自动生成一…

【毕业设计】10-基于单片机的车站安检门_磁性霍尔传感器系统设计(原理图+源码+仿真工程+答辩论文)

【毕业设计】10-基于单片机的车站安检门/磁性霍尔传感器系统设计&#xff08;原理图源码仿真工程答辩论文&#xff09; 文章目录【毕业设计】10-基于单片机的车站安检门/磁性霍尔传感器系统设计&#xff08;原理图源码仿真工程答辩论文&#xff09;任务书设计说明书摘要设计框架…

https加密解密过程二、名词解析及文件生成

https加密解密过程二、名词解析及文件生成 密钥仓库keystore文件 Keytool是一个Java数据证书的管理工具 &#xff0c;Keytool将密钥(key)和证书(certificates)存在一个称为keystore的文件中 keystore文件的内容其实就是把私钥、公钥以及公钥对应的地址等信息输出为json格式的…

git的基础操作

git的基础操作 一、Git理论 &#xff08;一&#xff09;工作区域 基本概念&#xff1a; 工作区&#xff1a;平时存放项目代码的地方。 暂存区(Stage/Index)&#xff1a;暂存区&#xff0c;用于临时存放你的改动&#xff0c;事实上它只是一个文件&#xff0c;保存即将提交到…

(四)DepthAI-python相关接口:OAK Messages

消息快播&#xff1a;OpenCV众筹了一款ROS2机器人rae&#xff0c;开源、功能强、上手简单。来瞅瞅~ 编辑&#xff1a;OAK中国 首发&#xff1a;oakchina.cn 喜欢的话&#xff0c;请多多&#x1f44d;⭐️✍ 内容可能会不定期更新&#xff0c;官网内容都是最新的&#xff0c;请查…

mapstruct常见错误及解决方案

1 问题集合 mapstruct-jdk8 编译报错 我以前项目使用的是mapstruct-jdk8<1.3.1.Final &#xff0c;现在做改造升级&#xff0c;比如springboot升级等&#xff0c;但是报错了 我们去mvn仓库去看下&#xff1a; Deprecated MapStruct artifact containing annotations to …

Postman之CSV或JOSN文件实现数据驱动

目录 一、适用场景 二、接口信息 三、数据驱动实现 3.1.data.文件设置 3.1.1.data.csv文件设置 3.1.2.data.json文件设置 3.3.接口传参设置 3.4.断言设置 四、执行结果 4.1.data.csv执行脚本上传设置 4.2.data.json执行脚本上传设置​ 4.3.执行结果展示 一、适用场…

12 【操作mongodb数据库】

12 【操作mongodb数据库】 1.简介 1.Mongoose是一个让我们可以通过Node来操作MongoDB的模块。2.Mongoose是一个对象文档模型(ODM)库,它对Node原生的MongoDB模块进行了进一步的优化封装&#xff0c;并提供了更多的功能。在大多数情况下&#xff0c;它被用来把结构化的模式应用…