微信小程序学习笔记（四）

在小程序使用自定义属性data-

event——框架给你的事件对象；
currentTarget——当前事件目标；
dataset——所有自定义属性数据的集合；
postId——自定义的变量;

js无法识别css的减号标签（连字符），会自动转化为驼峰命名法
js会自动转化css标签中的大写字母为小写
示例：

xwml：
<view catchtap="onPostTap"data-postId="{{item.postId}}"> 注意data-postId
      <template is="postItem"data="{{...item}}"/>
</view>
js：var postId =event.currentTarget.dataset.postid; 无法识别，js必须写成postid

只有连字符能大写（驼峰命名法）：

xwml：
<view catchtap="onPostTap" data-postId-name="{{item.postId}}">
      <templateis="postItem" data="{{...item}}"/>
</view>
js：var postId = event.currentTarget.dataset.postidName;

---

跨页面传递参数

向另外一个页面传递参数
可以拼接多个参数，就像请求get一样

onPostTap:function(event){
var postId = event.currentTarget.dataset.postid;
console.log(postId)
wx.navigateTo({
url: 'post-detail/post-detail?id=' + postId
})
},

接受从另一个页面传进来参数
在生命周期初始化onload 监听页面加载的方法中var xx=options.obj

onLoad: function(option) {
    var postId = option.id;// option传入/获取本页文章ID
    this.data.currentPostId = postId; //把本页文章ID赋值给currentPostId
    var postData = postsData.postList[postId]; //从脚本文件获取本页文章数据
    // 异步数据绑定，把从脚本文件获取本页文章数据与postData关联
    this.setData({
        postData: postData
    })

---

数据缓存wx.setStorage

在小程序里，如果用户不去主动提供removeStorage或clearStorage方法来清除缓存，那么这个缓存是永久存在的；
缓存不是以数目为上限，而是以体积为上限，不能超过10M。

• setStorage异步方法，setStorageSync同步方法

小程序里的缓存总共有四类操作、八种方法，每类操作同时具备着同步和异步两种方法——set、get、remove、clear

添加缓存：wx.setStorageSync('xxx')
获取缓存：wx.getStorageSync('xxx')
删除缓存：wx.removeStorageSync('xxx')
清除所有：wx.clearStorageSync()

• 在你成为高手前，推荐无论何时都使用异步数据绑定方法（不是异步缓存）

设置缓存示例：

var postsData = require('../../../data/posts-data.js')
Page({
/**
 * 页面的初始数据
 */
data: {
    // postData:[

    // ]
},

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function(option) {
    var postId = option.id;// 获取本页文章ID
    this.data.currentPostId = postId; //把本页文章ID赋值给currentPostId
    var postData = postsData.postList[postId]; //从脚本文件获取本页文章数据

    // 异步数据绑定，把从脚本文件获取本页文章数据与postData关联
    this.setData({
        postData: postData
    })

    // 获取本地储存键名
    var postsCollected = wx.getStorageSync('posts_Collected')
    if(postsCollected){ // 检测当前页是否存在键名
        var postCollected = postsCollected[postId] // 获取键名ID
        // 异步数据绑定，把文章键名ID与collected关联
        this.setData({ 
            collected: postCollected
        })
    }
    else{
        // 如果当前页不存在键名，则新建一个空的对象，并默认为false
        //表示未收藏
        var postsCollected = {};
        postsCollected[postId] = false;
        // 为当前页设置空对象储存
        wx.setStorageSync('posts_collected', postsCollected);
    }
},

//点击切换收藏状态
onColletionTap:function(event) {
    // 设置本地储存键名
    var postsCollected = wx.getStorageSync('posts_Collected');
    // 获取本页文章ID与键名，并赋值给变量postCollected
    var postCollected = postsCollected[this.data.currentPostId];
    // 取反，切换储存状态（备注：没有设置储存状态ture或false，则默认为假）
    postCollected = !postCollected;
    // 更新文章的缓存值
    postsCollected[this.data.currentPostId] = postCollected; 
    // 更新数据绑定变量，从而实现切换图片
    wx.setStorageSync('posts_Collected', postsCollected);
    // 异步数据绑定，把文章键名ID与collected按钮关联
    this.setData({
        collected: postCollected
    })

    // wx.showToast({
    //     title: postCollected?"收藏成功":"取消成功",
    //     duration: 1000
    // })
},
},

在设置数据储存时遇到的BUG
1. 获取文章ID与键名应使用中括号[]
2. 注意键名大小写
3. 留心console.log提示的Bug，使用联想推理，同时对于较长字符串的对象，尽量使用复制黏贴
4. 昨晚做好，第二天又出bug你敢信？