小程序开发和学习
一、小程序概念
注：为了更好的学习小程序，建议先学习一下vue的基础再来，支持es6语法，借鉴vue和react(把所有刷新数据的东西给程序员做)。
1.小程序是什么？
它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用。
2.小程序自己总结
- 不是HTML5
- 用即走，随手可得
- 拥有离线能力
- 一次开发，多端兼容
- 依赖微信客户端中(大树底下好乘凉)
3.小程序与传统App区别
小程序:
局限性：必须依赖于微信，不能独立运行。
优势：不需要考虚兼容问题，安装的问题，开发难度小。
传统app(这个兼容性真的恶心)：
优势：独立运行，不需要依赖于谁，可以适合所有的业务需求
局限性：需要用户安装，解决适配(开发兼容问题),开发难度大
4.小程序框架结构(mvvm)
二、申请账号与登录设置
https://mp.weixin.qq.com/
三、开发工具
1.工具介绍
为了帮助开发者简单和高效地开发和调试微信小程序，推出了小程序开发者工具，集成了公众号网页调试和小程序开发与调试两种开发模式。
2.下载安装
直达：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.vscode中小程序插件安装
4.第一个小程序helloworld
项目创建完毕
5.工具相关介绍
dpr3概念：
我简单说明一下，比如原本pc上一个像素代表一个点
dpr3则代表则代表 3x3=9个像素代表一个点
所以 pc上1px 在 手机上dpr2 则 手机上是表示1x2 = 2 px
1px 在 dpr3 则代表 3px
四、小程序的文件结构及配置
1.文件结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 pages。
一个小程序主体部分由三个文件组成，必须放在项目的根目录
| 文件 | 必须 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑 |
| app.json | 是 | 小程序公共设置 |
| app.wxss | 否 | 小程序公共样式表 |
一个小程序page页面由四个文件组成
| 文件类型 | 必须 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| wxss | 否 | 页面样式表 |
| json | 否 | 页面配置 |
json：非必须的可以集成父类的，wxss ：非必须的大不了不美化嘛
2.app.js文件的详解
地址：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
app.json 文件用来对微信小程序进行全局配置，决定小程序，页面数量、窗口表现、设置网络超时时间、设置底部或顶部菜单等等。
注意(要求及其严格)：
app.json中不能添加任何注释，key和value字符串必须用双引号引起来，数组或对象最后一位不能有逗号。
(1).app.json 配置项列表
上面我们也看到了，配置项非常多，我们这里跳几个重点，也是平常用的最多的来分别学习
| 属性 | 类型 | 必须 | 描述 |
|---|---|---|---|
| pages | String Array | 是 | 设置页面路径 |
| window | Object | 否 | 设置默认页面的窗口表现 |
| tabBar | Object | 否 | 设置底部或顶部菜单 |
| networkTimeout | Object | 否 | 设置网络超时时间 |
(2).pages
指定小程序由哪些页面组成。每一项代表对应页面【路径+目录名+文件名(不包含后缀名)】，数组的第一项代表小程序的初始页面(首页/展示页)。小程序中新增/减少页面，都需要对 pages 数组进行修改(变了就要修改)。
(3).window
官方文档，介绍
脑海里现在记住一张图
看演示
下拉刷新三组合
(4).tabBar
设置底部菜单或者顶部菜单
注意点：
当设置 position 为 top 时，将不会显示 icon图标
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个菜单
问题？那我就想搞6个菜单或者7个怎么办呢？
要么你和产品说小程序规定，最多只能5个，超过我实现不了，要么。自己写一个底部菜单。不用官方这个就行了。。
tabbar官方文档中的参数特别多，要一个一个复制特别辛苦，所以前面让vscode安装的插件就起作用。
我们用vscode打开项目，输入tab后就有提示了
效果展示：
代码：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"enablePullDownRefresh":true,
"backgroundColor":"#cccccc",
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#0188fb",
"navigationBarTitleText": "共享xx",
"navigationBarTextStyle":"white"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#000",
"selectedColor": "#f00",
"backgroundColor": "#fff",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/icon/icon_home@3x.png",
"selectedIconPath": "/icon/icon_home_active@3x.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "/icon/icon_me@3x.png",
"selectedIconPath": "/icon/icon_me_active@3x.png"
}
]
}
}
(5).networkTimeout
(6).networkTimeout
五、生命周期
由框架自己触发的一系统事件函数。有什么作用？？了解后，可以知道什么时候从api取数据，才不会有问题，什么时候做什么事最合适。
地址
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
脑海里可以尝试记忆一下这张图，页面 Page 实例的生命周期
1.几个生命周期方法的简单介绍
(1).onLoad(1)
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
(2).onShow(多)
页面显示/切入前台时触发。一个页面可以触发很多次。
(3).onReady（1）
页面初次渲染完成时触发。一个页面只会调用一次。
(4).onHide(多)
页面隐藏/切入后台时触发。一个页面可以触发多次
2.生命周期的完整流程查看
切换后台，则会触发页面隐藏事件
2.查看js文件
新建一个页面
查看结构，默认是全部的方法都给你写了。
一般我们用不到那么多，我们可以只留下一个load事件就可以了
六、视图结构 wxml
1.wxml概述
HTML 是用来描述当前这个页面的结构，同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。
小程序提倡把渲染和逻辑分离，简单来说就是不要再让 JS 直接操控 DOM，JS只需要负责数据的处理，然后再通过一种模板语法来进行界面结构展示。
在视图层中通过 **{{}}**语法把一个变量绑定到视图界面上，称为数据绑定
当然仅仅通过数据绑定还不够的，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。wx:if wx:for
2.数据绑定
(1).简单数据的绑定
(2).对象数据的绑定
3.数据更新
#一定要手动触发
this.setData({key:value})
实现2秒后更新数据
代码
Page({
/**
* 页面的初始数据
*/
data: {
name:'hellworld'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//页面加载2秒后,更改data中 name的值
//
// var _this = this;
// setTimeout(function(){
// _this.setData({
// name:'php'
// });
// },2000);
//
setTimeout(() => {
this.setData({
name:'php'
});
}, 2000);
},
})
4.列表渲染 for
(1).最简单写法
(2).指定变量名称
wx:for-item 可以指定数组当前元素的变量名 默认名为 item
wx:for-index可以指定数组当前下标的变量名 默认名为 index
(3).遍历报错解决
通过上面的遍历发现，小程序开发工具有报错信息
wx:key 可以定义也可以不定义 唯一的标识符 提高性能，解决报错
(4).在不解析的标签上遍历
block标签不解析，效果等同于vue中的template
5.条件渲染
也可以和循环使用的
code
<block wx:if="{{age<=10}}">
<view>儿童</view>
</block>
<block wx:elif="{{age<=20}}">
<view>少年</view>
</block>
<block wx:else>
<view>其它</view>
</block>
6.引用(包含)
(1).模板
把模板定义到外部，然后多个页面间可以共用使用定义的模板WXML结构显示。
单独使用模板有个缺点，在那个wxml定义就只能在那个wxml中使用该模板，所以这个知识点和包含，放在一起记，先学会定义和调用模板，包含就很简单了。
地址：
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html
定义模板语法：
因为这个模板这里用了template了，所以那个不解析的标签被改成block
<template name=”名称”>
wxml语法
</template>
调用
<template is=”模板定义时name名称” [data=”{{传给模板的数据参数}}”] />
(1.1).静态模板的定义和调用
(1.2).动态模板的定义和调用
数据准备
(1.3).三个点语法(es6中参数展开)
官方文档上有这种写法
如何用？看例子
正常解析
(2).import和include
import和include区别?
定义方式不一样
引用的方式不一样，include 相当于复制代码过来，import相当于调用函数
数据的传递不一样 include 直接获取js中的数据，import必须通过template date属性获取
(2.1).include的使用
调用
(2.2).import的使用
七、小程序的样式
1.概述
WXSS 用来决定 WXML 的组件应该怎么显示。说白了就是样式
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
(1).新增了尺寸单位
WXSS 在底层支持新的尺寸单位 rpx 响应式尺寸单位
小程序中全屏尺寸数值是 : 750rpx
问？rpx和rem有什么区别？
rem是css提供的尺寸单位，小程序和htm中都可以使用，rpx是小程序特有单位
(2).提供了全局的样式和局部样式
app.wxss 作为全局样式
局部页面样式 page.wxss 仅对当前页面生效 app.wxss<page.wxss<行级
(3).此外 WXSS 仅支持部分 CSS 选择器
2.选择器
官方提到的支持的选择器有:
.class
#id
element
element, element
::after
::before
实际上我测试后，子类选择器 css3的部分选择器都是可以的，如果小程序项目都是你一个人负责的话，随便，无所谓，如果是公司企业的话，那就最好还是安装微信小程序官方规定的来那就是疯狂的写class 然后写样式
但是有的选择器是绝对不支持的，比如一些伪类选择器 像 :hover 鼠标选择器，用手点的，肯定不支持的
3.样式的导入
使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。
在样式中引入@import 路径;
(1).导入iconfont图标字体
全部复制粘贴
修改图标大小
(2).修改整体背景颜色
在html中修改背景颜色，就是body,小程序中则是page
八、事件
1.事件绑定
地址：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
语法：
bind/catch事件名="方法名"
自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
其中，tab类似html中的click事件
两个问题
1.基础库版本号如何查看？
2.原生组件有哪些？
camera、canvas、input、live-player、live-pusher、map、textarea、video
2.事件基本演示
3.冒泡事件和非冒泡事件
非冒泡
4.事件对象
如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
就可以通过对象属性target或者currentTarget来获取数据
那么target或者currentTarget都可以获取数据为什么微信官方要整两个出来呢？
看这里例子
这种情况只有target才能获取
九、常用组件
1.概念及语法
框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
什么是组件？
组件是视图层的基本组成单元。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
(1)、属性值类型
| 类型 | 描述 | 解释 |
|---|---|---|
| Boolean | 布尔值 | 组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型 |
| Number | 数字 | 1，2 |
| String | 字符串 | “string” |
| Array | 数组 | [ 1, “string” ] |
| Object | 对象 | { key: value } |
| EventHandler | 事件处理函数名 | “handlerName” 是 Page中定义的事件处理函数名 |
注意：除了字符串类型和事件函数名意外都要在外面加上 {{ }}，否则默认当作字符串
具体看测试
<!-- 布尔类型 -->
<view data-name="{{ true }}" bind:tap="click">点击</view>
<!-- number类型 -->
<view data-name="{{ 1 }}" bind:tap="click">点击</view>
<!-- 对象 -->
<view data-name="{{ {name:'hello'} }}" bind:tap="click">点击</view>
<!-- 数组 -->
<view data-name="{{ [1,2,3] }}" bind:tap="click">点击</view>
<!-- 字符串类型 -->
<view data-name="hell ele" bind:tap="click">点击</view>
(2)、公有属性类型
| 名称 | 解释 |
|---|---|
| id | 和html中一样，一个页面只能有一个 |
| class | 可以有多个 |
| style | 组件内联样式，可以动态设置 |
| hidden | 是否显示 |
| data-* | 自定义属性 |
| bind* / catch* | 组件的事件 |
(3)、tab案例
其实工作中，根本就不用我们自己写这些，我们只要用开源的ui框架就行了，学习的时候自己写案例
最开始布局
动态效果，注意这里要实现切换，就不再是html中jq操作样式这种方式来修改了，要用数据控制样式，所以，刚开始接触可能还不太习惯。
实现切换逻辑(以后开发也是这个步骤)
2.视图容器组件
(1)、swiper(滑块视图容器)
地址：
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<swiper autoplay="{{true}}" interval="{{3000}}" circular="{{true}}" indicator-dots="{{true}}">
<block wx:for="{{[1,2,3,4]}}" wx:key="swiper">
<swiper-item>
<image class="image" src="https://placeholder.pics/svg/750x340/FF2030/FFF/lu{{item}}" />
</swiper-item>
</block>
</swiper>
(2)、swiper和tab结合案例
思路总结：点击tab的时候要滑动，下面的页面，滑动页面的时候要更新上面的tab选中节点
(3)、scroll-view回到顶部案例
scroll-view默认是无法滚动的，滚动需要两个条件1.设置高度 2.开启滚动
思路总结：监听scroll-view的滚动事件，获取滚动高度，大于设定的值出现回到顶部按钮，回到顶部按钮绑定tap事件更新data中的数据。
布局
样式
逻辑
(4)、scroll-view加载更多
3.基础内容组件
(1)、富文本显示组件
js中定义一个html(这个可以去今日头条随便找一个带图片的新闻)文本
但是这个有bug，图片会出现裁剪问题，所以我们一般不用，用第三方富文本
(2)、wxparse 第3方组件
地址：https://github.com/icindy/wxParse
同时还支持markdown
TODO
4.表单组件
(1)、按钮 button
(1.1)、按钮开放能力自定义样式思路
因为只有这个按钮才能有开放能力，才能触发这个分享，假如你想用一个分享图标点击弹出分享该如何解决？
解决思路：把按钮放在分享图标上面，然后透明度为0即可
自定义内容
(2)、 input
地址：
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
联想搜索功能实现
(3)、form
注意：html中提交按钮是 type=”submit“ 这里是用form-type=“submit”
5.导航(就是a连接跳转的)
不支持 /admin/user/11 这叫 param方式 因为和定义page冲突了，所以小程序不支持
十、WXS 模块
1.概述
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXS中定义的函数可以在wxml文件中使用，可以用它来当过滤器使用。
WXS以.wxs扩展名结尾，文件中代码写法和JS类似，不支持ES6写法
wxs和js不互通
2.用wxs做一个字符串截取
(1).创建
循环
效果
这一条数据太长了，换行了，我只想保留一行的长度，多余的想用…代替怎么办？
(2).调用
十一、自定义组件
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
说白了，就是为了低耦合高内聚
地址：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
1.创建自定义组件的创建和使用
根路径下新建一个目录components
这样一口气就可以把4个文件全部干出来
然后编写组件内容
在要调用的页面中找到.json结尾的配置文件，然后引入组件
结构页面中直接标签引用即可
2.组件间传值
(1)、父组件向子组件通信
是通过属性的方式传递的
传递
组件中接收
(2)、子组件向父组件通信
第一步，组件中绑定事件
第二步，实现事件把方法发射出去
第三步：父组件实现这个方法
通过evt.detail 接收数据
十二、网络请求
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
- 发起 HTTPS 网络请求,上线时一定要有https服务器，但在本机开发时可以没有https服务器
- 测试支持的并数请求数5个
- HTTPS 证书必须有效 而且是TLS1.2及以上版本
- 最好要设置一下 app.json中request请求的超时时间
1.环境设置要求
(1).本地开发环境
如果是测试环境开发时，可以在小程序官方开发工具中勾选不检查https证书
(2).上线环境
正式环境，一定需要一个https服务器，同时还需要在小程序官方后台设置有效的域名
2.编写后台接口
(1).用户表设计(laravel8.x)
安装laravel(20201004已经到8.x)
composer create-project --prefer-dist laravel/laravel www.api.com
apache虚拟主机配置
<VirtualHost *:80>
# 设置网站目录
DocumentRoot "E:\eamp\www\www.api.com\public"
# 设置网站域名(这里是基于端口的不用设置都行)
ServerName www.api.com
# 一定要设置日志，日志可以访问我们进行系统统计
# 日志是目录不会自动创建需要手动创建，文件是会自动创建
# 错误日志
ErrorLog "E:\eamp\www\www.api.com\logs\error.log"
# 成功日志
CustomLog "E:\eamp\www\www.api.com\logs\access.log" combined
# 设置目录访问权限
<Directory "E:\eamp\www\www.api.com\public">
# 指定目录启用特性
Options Indexes FollowSymLinks
# 是否允许使用.htaccess文件
AllowOverride All
# 访问目录权限 apache2.4
Require all granted
# 默认起始页面
DirectoryIndex index.php
</Directory>
</VirtualHost>
host文件配置域名解析
127.0.0.1 www.api.com
laravel8界面出现
新建一个数据库
配置数据库
执行迁移
创建填充文件
解除模型限制
填写填充文件
数据得到
(2).用户列表
使用restful规范编写相对应的接口
get 获取资源 获取多个资源或单个资源 200
post 添加资源 201
put 修改资源 201/202
delete 删除资源 204 无响应体
定义get获取资源路由
因为web.php 里面写的话，默认有一个中间件，会要求验证csrf验证
创建控制器
创建路由(和laravel7.x版本不一样)
前缀的更改
把前缀省略不写
分页代码
结果
(3).tp5.1实现用户列表
安装tp5.1
composer create-project --prefer-dist topthink/think=5.1.* tp5
配置虚拟主机
<VirtualHost *:80>
# 设置网站目录
DocumentRoot "E:\eamp\www\tp5\public"
# 设置网站域名(这里是基于端口的不用设置都行)
ServerName www.tp5.com
# 一定要设置日志，日志可以访问我们进行系统统计
# 日志是目录不会自动创建需要手动创建，文件是会自动创建
# 错误日志
ErrorLog "E:\eamp\www\tp5\logs\error.log"
# 成功日志
CustomLog "E:\eamp\www\tp5\logs\access.log" combined
# 设置目录访问权限
<Directory "E:\eamp\www\tp5\public">
# 指定目录启用特性
Options Indexes FollowSymLinks
# 是否允许使用.htaccess文件
AllowOverride All
# 访问目录权限 apache2.4
Require all granted
# 默认起始页面
DirectoryIndex index.php
</Directory>
</VirtualHost>
解析域名，然后重启apache服务器，访问即可出现tp熟悉的画面
新建env文件，进行数据库的配置
修改database.php读取env文件的配置
pathinfo不符合restful规范，开启强制路由和完全匹配规则
控制器方法随便写一点东西，例如：读取数据库名称
定义路由
访问
简化路由写法
创建用户模型
修改模型表名
输出数据
修改一下.env文件连接地址输错了
访问，和laravel一样了
如果想直接这样输出json需要去app.php修改配置
3.发起网络请求
学习一下思想，这都是最基本的，到时候要用到项目上，肯定还需要缓存，还有请求头携带token的，因为接口有安全验证，还有项目整体规划，方便以后拓展和维护
(1)、基本的请求
代码：
onLoad(options) {
this.reqData();
},
//发起网络请求
reqData(){
wx.request({
//请求地址
url: 'http://www.api.com/api/v1/users',
//请求的参数
data: {page:1},
// 请求头信息
//header: {'content-type':'application/json'},
//请求方法 GET/HEAD PUT/PATCH POST DELETE
method: 'GET',
//返回格式(默认就是json)
// dataType: 'json',
// responseType: 'text',
//请求成功的回调 解构赋值
success:({data:{data}})=>{console.log(data)},
//请求失败的回调
fail: ()=>{
console.log("记住:请求超时，服务器直接挂了，我会触发哦")
},
//请求完成回调不管成功还是失败
complete: ()=>{}
});
}
app.json中配置请求超时时间
请求成功
结构赋值，快速获取数据，更加专业的写法
请求失败，什么时候触发？(返回404也是请求成功的一种方式)
服务器挂了，或者超过请求时间了，所以上面设置超时时间的目的在这里
(2)、es6模块化+Promise封装请求
//es6模块化
//导出
//export { } 对象,一个页面可以导出N多个
//export default xx 一个页面只能用一次
//导入
//结构赋值 import {xxx } from 路径 export {} 导出方式的使用
//也可以加别名 import {aaa as bbb } from 路径 export {} 导出方式的使用
//通配符 import * as obj from 路径 export {} 导出方式的使用
// inmport xxx from 路径 export default的 导出方式的使用
最开始写法
使用
参数传递问题
我们在使用一些前端框架的时候会发现，别人传递参数的时候是这样
改造
使用，这样和传递顺序无关了，可以随意传递
测试结果同样可以请求成功
再次简短一下语法
export default导出方式，一般类的导出用这种方式(因为一个页面中，函数肯定有N多个，但是一个类中可以包含N多个方法，所以一个页面只需要一个，所以用export default方式)
导出代码
export default class Api{
httpRequest({url, data = {}, method = 'GET'}) {
return new Promise((resolve, reject) => {
wx.request({
url,
data,
// header: { 'content-type': 'application/json' },
method,
success: ret => resolve(ret),
fail: err => reject(err)
});
});
}
}
使用方式：
(3)、模仿tp/laravel/这种mvc框架进行分层网络请求
创建模型文件夹
url也在一个地方统一管理，如果每个页面都写上url那以后有几百个页面那不是要疯啊
测试，依然可以请求数据
再次总结：
自己新建了模型文件夹存放每个模型(每张表)，新建一个config文件夹存放请求路径，等配置，每个页面.js 相当于控制器，调用模型
4.下拉加载更多
设置高度，开启滚动，绑定事件
代码：
loadmore() {
let page = this.data.page;
//这里只负责调用了
userModel.getUserList({
data: { page }
}).then(ret => {
// console.log(ret.data.data);
if (ret.data.data.length > 0) {
page++
this.setData({
users: [...this.data.users, ...ret.data.data],
page
})
}
});
}
<scroll-view class="sview" scroll-y="{{true}}" bindscrolltolower="loadmore" >
<view>
<block wx:for="{{users}}" wx:key="users">
<view>{{item.id}}-{{item.username}}</view>
</block>
</view>
</scroll-view>
十三、数据缓存
每个微信小程序都可以有自己的本地缓存，即对本地缓存进行设置、获取和清理，同一个微信用户，同一个小程序 storage 上限为 10MB
注意：
如果用户储存空间不足，会清空最近最久未使用的小程序的本地缓存(LRU)。我们不建议将关键信息全部缓存起来，以防储存空间不足或用户换设备的情况。
地址：
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html
缓存操作都分为同步和异步
1、设置缓存
wx.setStorage(OBJECT) 异步
wx.setStorageSync(KEY,DATA) 同步
2、获取缓存
wx.getStorage(OBJECT) 异步
wx.getStorageSync(KEY) 同步
3、移除缓存
wx.removeStorage(OBJECT) 异步
wx.removeStorageSync(KEY) 同步
4、清空缓存
wx.clearStorage() 异步
wx.clearStorageSync() 同步
5、缓存工具类
class Cache {
// 构造方法 单位秒
constructor({ expire = 3600 }) {
// 成员属性 过期时间
// 毫秒
this.expire = new Date().getTime() + expire * 1000;
}
// 设置
set(key, value) {
console.log(value);
let data = { expire: this.expire, value };
// 设置缓存
wx.setStorageSync(key, data);
}
// 永久
forever(key, value) {
let expire = new Date().getTime() + 9999999999 * 1000;
let data = { expire, value };
// 设置缓存
wx.setStorageSync(key, data);
}
// 判断是否存在缓存
has(key) {
// 获取当前时间
let time = new Date().getTime();
// 缓存数据
let data = wx.getStorageSync(key);
if (data != '') {
if (time > data.expire) { // 缓存过期
// 删除过期缓存
wx.removeStorageSync(key);
return false;
}
return true;
}
return false;
}
// 获取
get(key) {
if (this.has(key)) {
return wx.getStorageSync(key).value;
}
return null;
}
// 删除
del(key) {
wx.removeStorageSync(key);
}
}
export default new Cache({ expire: 3600 });
使用：
