前言
-
在一些场景中需要小程序具备“记忆力”（如：设置功能，收藏功能），为了实现“记忆”效果，可以使用服务器后端提供的接口读写“记忆数据”，也可以使用小程序的本地缓存读写“记忆数据”。使用本地缓存可以减轻服务端的压力，缺点是同一个微信用户同一个小程序 storage 上限为 10MB，且以用户维度进行了数据隔离，即A用户只能看到自己的本地缓存数据，无法访问B用户的。
-
这篇文章将介绍使用本地缓存功能实现“个人转盘功能”，进一步完善“可配置转盘”项目。
-
作者能力有限，可能会有所缺漏或者部分错误，欢迎读者指出。
-
代码已在github开源：github.com/Spute/fun-t…
-
效果如下（也可微信搜索“易趣转盘”体验完整功能）：
需求分析
- 先看选择转盘页原型，
- 顶部是个菜单栏，包含“热门转盘”和“个人转盘”两个选项。
- 被选中的选项背景变蓝（其他选项背景置白）
- 个人转盘
- 选择：选择当前转盘，跳转到首页
- 删除：删除当前转盘
- 编辑：选择当前转盘，跳转到编辑页
- 展开&收缩：展开&收缩当前转盘选项内容
- 新增：新增一个选项转盘
- 编辑页原型
- 编辑功能
- 删除
- 新增选项
需求实现
- “热门转盘”功能的默认数据目前是写死的，后期可以通过实时调用服务端接口获取。
- “个人转盘”功能的数据使用本地缓存存储，微信小程序提供了同步和异步版的本地缓存读写功能，这次读写都使用同步版的，如下示例，当页面显示时，读取本地缓存保存到页面data中，当卸载或隐藏页面时将页面data中的数据保存到本地缓存中。
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log('select onshow', this.data)
const personSelect = wx.getStorageSync('personSelect') || []
this.setData({
'hotSelect': this.data.hotSelect,
'personSelect': personSelect,
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
console.log('select page onHide')
app.menuID = this.data.menuID
wx.setStorageSync('personSelect', this.data.personSelect)
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
console.log('select page onUnload')
app.menuID = this.data.menuID
wx.setStorageSync('personSelect', this.data.personSelect)
},
知识点
- setData中键名key中使用变量
- ES6 允许声明在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法
- 使用[]语法直接获取变量对象的值
var tabName = "hotSelect"
var tabData = 1
var titleIndex = event.currentTarget.dataset.titleindex
this.setData({
[tabName]: tabData,
})
-
动态展示&隐藏组件
- 通过wx:if语法，如下当title.display为true展示，为false是隐藏
<view class="sub-item" wx:if="{{title.display}}"><view/>- 通过增加一个css样式，控制是否隐藏组件
// .wxml <view class="sub-item {{title.display?'':'hide'}}"><view/> // .wxss .hide { display: none; } -
js列表操作
| 方法 | 效果 |
|---|---|
| splice | 从第n个元素开始，选取x个元素，截取 |
| push | 从列表右侧插入元素 |
| pop | 从列表右侧取出元素 |
| unshift | 从列表左侧插入元素 |
| shift | 从列表左侧取出元素 |
>>>b
[4, 5, 6, 7, 8, 9]
>>>b.splice(1,1)
[5]
>>>b
(5) [4, 6, 7, 8, 9]
>>>b.splice(1,0)
[]
>>>b
(5) [4, 6, 7, 8, 9]
>>>b.push(1)
6
>>>b
(6) [4, 6, 7, 8, 9, 1]
>>>b.pop()
1
>>>b
(5) [4, 6, 7, 8, 9]
>>>b.unshift(1)
6
>>>b
(6) [1, 4, 6, 7, 8, 9]
>>>b.shift()
1
>>>b
(5) [4, 6, 7, 8, 9]
