记录小程序学习(1)(缓存，点赞收藏功能，this 指代)

记录小程序学习(1)

缓存

清除所有缓存：
wx.clearStorageSync();
清除指定缓存：
wx.clearStorageSync(‘key’);
设置缓存：覆盖
wx.setStorageSync(‘key’,‘value’);
获取缓存：
wx.getStorageSync(‘key’);
缓存上限10MB;
总共有四类操作，都有同步异步 所以八种方法
如不设置清除 则不会自动清除

实用点：
模拟用户收藏，点赞功能

collected为真 显示点赞 亮起来的图片
else显示暗的图片
然后在js 中onLoad编写代码

前面获取了id
var postsCollected = wx.getStorageSync(‘postsCollected’)
获取所有缓存

判断postsCollected是不是存在
指定 id的缓存
this.setData进行数据绑定，绑定后{{collected
}}才会生效

else保证逻辑完整性
然后设置点击事件

遇到的问题1：
Cannot create property ‘0’ on boolean ‘true’
自已摸索解决方法 ：
在调试器中找到Storage，将 true 改为false

交互反馈

查找文档

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

取消收藏的时候 应该弹出取消收藏 所以需要进行判断 代码如下
wx.showToast({
title: postCollected?“收藏成功”:“取消收藏”

showToast的逻辑

先判断缓存值最后在界面交互显示

showModal逻辑是 先让用户确认是否收藏，才做出相应的图片切换和缓存值

自定义 showModal:function方法 ；
success function 否 接口调用成功的回调函数；
res.confirm为ture表示用户点击确认按钮
然后在onColletionTap:function(event)中调用

遇到的问题2：postsCollected与postCollected未定义，定义后需要传进来

**遇到的问题3：this指代问题
因为这个地方在success函数里面，这时this 的指代就不是page 下面的结构体了，所以就没有showModal，showToast的方法。
解决方法 在showModal中 将this保存到另外一个变量里面var that =this;
showModal 方法的调用方式是onColletionTap，onColletionTap是事件处理函数，事件处理函数是由page 来调用。this是函数调用上下文环境，所以this一直到showModal中还没有改变。而在success中 并不是由page来调用了 **
完善逻辑问题

content: postCollected?“收藏文章？”:“取消收藏?”,
postCollected为真时 收藏

模拟分享

要清除真机缓存，新的缓存才能设置进去

缓存小练习：
利用缓存 每次查看一次文章，浏览量+1