前言
回顾小程序入门教程04，我们讲解了在么绑定事件在模板上的错误问题，还有navigateTo和redirectTo的区别，还有如何获取URL中的参数问题，但是有一个问题却忘记说了，检查时发现了，这里就先给大家说一下。
目录
https://www.jianshu.com/p/9c9b555b52e8
补充：catchtap和bindtap区别？
<view bindtap="aaa">
<view bindtap="bbb">点击</view>
</view>
aaa: function(){
console.log("father");
}
bbb: funtion(){
console.log("child");
}
这里父元素和子元素都绑定了一个函数，如果点击了子元素，那么控制台会出现以下效果：
child
father
为什么会这样呢？因为点击子元素会出现父元素的点击效果，这个叫做事件冒泡，在一般的web开发中也很容易出现，我们要做的就是阻止冒泡。在小程序中，阻止冒泡很简单，就是将bind改成catch，就可以解决了，例如bindtap事件改成catchtap,大家可以自己修改一下，看看效果就可以理解了~接下来就开始讲解今天的新东西吧，继续代码康次康次的敲吧。
今日课程开始：小程序中的缓存机制
小程序的缓存机制也是很好用的，共4种操作8种方法，分别为增删改查，每一种都有异步和同步之分。如下所示：
- 异步增加一个缓存：
wx.setStorage(key，string/object)
将数据存储在本地缓存中指定的key中，会覆盖掉原来该key对应的内容，这是一个异步接口。
wx.setStorage({
key:"key"
data:"value"
})
- 同步增加一个缓存：
wx.setStorageSync(key，string/object)
将data存储在本地缓存中指定的key中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
wx.setStorageSync('key', 'value')
- 异步得到一个缓存：
wx.getStorage(key)
从本地缓存中异步获取指定key对应的内容。
wx.getStorage({
key: 'key',
success: function(data) {
console.log(data.data)
}
})
- 同步得到一个缓存：
wx.getStorageSync(key)
从本地缓存中同步获取指定key对应的内容。
wx.getStorageSync(key)
-
异步/同步修改缓存：原理同新增缓存，只不过相同的
key，被赋予了新的值而已。 -
异步移除一个缓存：
wx.removeStorage(key)
从本地缓存中异步移除指定key。
wx.removeStorage({
key: 'key',
success: function(data) {
console.log(data.data)
}
})
- 同步移除一个缓存：
wx.removeStorageSync(key)
从本地缓存中异步移除指定key。
wx.removeStorageSync(key)
- 异步和同步清理所有缓存
-
wx.clearStorage(key)：异步清除 -
wx.clearStorageSync(key)：同步清除
实操：完成文章的收藏功能
-
根据缓存机制，在页面加载时判断是否存在缓存，如果有，则直接读取赋值，如果没有，就初始化缓存，然后赋值！
-
每篇文章绑定data中的一个判断标识符，true就显示红色的收藏，false就显示灰色的收藏。
3.wx: if和wx:else和vue，angular的模板用法很相似，大家可以了解一下MVVM。
talk-details.js
let details = require("../talk/talk-data/talk-data");
Page({
data: {
articles: {}
},
onLoad: function(options){
let aid = options.aid;
this.setData({
articles: details.articleList[--aid]
})
let colBool = wx.getStorageSync(`colList[${aid}]`);
if(!colBool){
wx.setStorageSync(`colList[${aid}]`, false);
}
this.setData({
col: wx.getStorageSync(`colList[${aid}]`)
})
},
collect: function(event){
let id = event.currentTarget.dataset.id;
if(this.data.col){
this.setData({
col: false
})
wx.setStorageSync(`colList[${--id}]`, false);
}else{
this.setData({
col: true
})
wx.setStorageSync(`colList[${--id}]`, true);
}
},
share: function(){
// 功能同上，只是简单介绍下缓存的应用，这里就不赘述了。
}
});
talk-details.wxml
<view class="container">
<image class="banner" src="{{articles.thumbnail}}" alt="slt"></image>
<view class="authorData">
<image class="avatar" src="{{articles.avatar}}"></image>
<text class="nickname">{{articles.name}}</text>
<text class="constText">发表于</text>
<text class="releaseData">{{articles.date}}</text>
</view>
<text class="title">{{articles.title}}</text>
<view class="option">
<view class="icon">
<image wx:if="{{col}}" class="collection" bindtap="collect" data-id="{{articles.id}}" src="../../images/icon/sca.jpg"></image>
<image wx:else class="collection" bindtap="collect" data-id="{{articles.id}}" src="../../images/icon/sc.jpg"></image>
<image class="share" bindtap='share' src="../../images/icon/fx.jpg"></image>
</view>
<view class="hr"></view>
</view>
<text class="content">{{articles.content}}</text>
</view>
后言
若大家对文章有什么不懂得地方，可以先百度，或者还不会的可以简书私信我哦。谢谢大家~
项目源码：demigod-liu / douban-movies
说明
原创作品，禁止转载和伪原创，违者必究！
网友评论