微信小程序入门级教程-05

前言

  回顾小程序入门教程04，我们讲解了在么绑定事件在模板上的错误问题，还有navigateTo和redirectTo的区别，还有如何获取URL中的参数问题，但是有一个问题却忘记说了，检查时发现了，这里就先给大家说一下。

目录

https://www.jianshu.com/p/9c9b555b52e8

补充：catchtap和bindtap区别？

  点击

aaa: function(){
  console.log("father");
}
bbb: funtion(){
  console.log("child");
}

这里父元素和子元素都绑定了一个函数，如果点击了子元素，那么控制台会出现以下效果：

child
father

为什么会这样呢？因为点击子元素会出现父元素的点击效果，这个叫做事件冒泡，在一般的web开发中也很容易出现，我们要做的就是阻止冒泡。在小程序中，阻止冒泡很简单，就是将bind改成catch，就可以解决了，例如bindtap事件改成catchtap,大家可以自己修改一下，看看效果就可以理解了~接下来就开始讲解今天的新东西吧，继续代码康次康次的敲吧。

今日课程开始：小程序中的缓存机制

  小程序的缓存机制也是很好用的，共4种操作8种方法，分别为增删改查，每一种都有异步和同步之分。如下所示：

1. 异步增加一个缓存：wx.setStorage(key，string/object)
     将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该key对应的内容，这是一个异步接口。

wx.setStorage({
  key:"key"
  data:"value"
})

2. 同步增加一个缓存：wx.setStorageSync(key，string/object)
     将data存储在本地缓存中指定的key中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

wx.setStorageSync('key', 'value')

3. 异步得到一个缓存：wx.getStorage(key)
     从本地缓存中异步获取指定 key对应的内容。

wx.getStorage({
  key: 'key',
  success: function(data) {
      console.log(data.data)
  } 
})

4. 同步得到一个缓存：wx.getStorageSync(key)
     从本地缓存中同步获取指定key对应的内容。

wx.getStorageSync(key)

5. 异步/同步修改缓存：原理同新增缓存，只不过相同的key，被赋予了新的值而已。

6. 异步移除一个缓存：wx.removeStorage(key)
     从本地缓存中异步移除指定 key 。

wx.removeStorage({
  key: 'key',
  success: function(data) {
    console.log(data.data)
  } 
})

7. 同步移除一个缓存：wx.removeStorageSync(key)
     从本地缓存中异步移除指定 key 。

wx.removeStorageSync(key)

8. 异步和同步清理所有缓存

• wx.clearStorage(key)：异步清除
• wx.clearStorageSync(key)：同步清除

实操：完成文章的收藏功能

1. 根据缓存机制，在页面加载时判断是否存在缓存，如果有，则直接读取赋值，如果没有，就初始化缓存，然后赋值！

2. 每篇文章绑定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

    
    
        
        {{articles.name}}
        发表于
        {{articles.date}}
    
    {{articles.title}}
    
        
            
            
            
        
        
    
    {{articles.content}}

后言

若大家对文章有什么不懂得地方，可以先百度，或者还不会的可以私信我哦。谢谢大家~

项目源码：demigod-liu / douban-movies

说明

原创作品，禁止转载和伪原创，违者必究！