小程序入门与实战

给组件添加点击事件

属性	解析
if-else	条件

<!--pages/post-detail/post-detail.wxml-->
<view class="container">
  <image class="head_image" src="{{post.postImg}}"></image>
  <text class="title">{{post.title}}</text>
  <view class="author-date">
    <view class="avatar_box">
      <image class="avatar" src="{{post.avatar}}"></image>
      <text class="author">{{post.author}}</text>
    </view>
    <text class="date">{{post.dateTime}}</text>
  </view>
  <text class="detail">{{post.detail}}</text>
  <view class="tool">
    <view class="tool-item" catchtap="onUpTab" data-post-id="{{post.postId}}">
      <image wx:if="{{post.upStatus}}"       src="/images/icon/wx_app_liked.png"></image>
      <image wx:else src="/images/icon/wx_app_like.png"></image>
      <text class="count">{{post.upNum}}</text>
    </view>
    <view class="tool-item comment">
      <image src="/images/icon/wx_app_message.png"></image>
      <text class="count">{{post.commentNum}}</text>
    </view>
    <view class="tool-item" catchtap="onCollectionTab" data-post-id="{{post.postId}}">
      <image wx:if="{{post.collectionStatus}}" src="/images/icon/wx_app_collected.png"></image>
      <image wx:else src="/images/icon/wx_app_collect.png"></image>
      <text class="count">{{post.collectionNum}}</text>
    </view>
  </view>
</view>

处理点击事件

属性	解析
upDatePostData	更新内存数据
setData	刷新局部界面
showToast	交互反馈提示
duration	提醒自动消失事件
icon	小图标
mask	是否显示透明蒙层

// pages/post-detail/post-detail.js
import {
  DBPost
} from '../../db/DBPost.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var postId = options.id;
    this.dbPost = new DBPost(postId);
    this.postData = this.dbPost.getPostItemById().data;
    this.setData({
      post: this.postData
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    wx.setNavigationBarTitle({
      title: this.postData.title,
    })
  },
  onCollectionTab: function(event) {
    var newPostData = this.dbPost.upDatePostData('collect');
    this.setData({
      'post.collectionStatus': newPostData.collectionStatus,
      'post.collectionNum': newPostData.collectionNum
    })
    wx.showToast({
      title: newPostData.collectionStatus ? "收藏成功" : "取消收藏",
      duration: 1000,
      icon: "success",
      mask: true
    })
  },
  onUpTab:function(event){
    console.log("up");
    var newPostData = this.dbPost.upDatePostData('up');
    this.setData({
      'post.upStatus': newPostData.upStatus,
      'post.upNum': newPostData.upNum,
    })
  
  },

})

更新内存数据

属性	解析
switch-case	条件语句

class DBPost {
  constructor(postId) {
    this.postId = postId;
    this.storageKeyName = 'postList';
  }
  getAllPostData() {
    var res = wx.getStorageSync(this.storageKeyName);
    if (!res) {
      res = require('../data/data.js').postList;
    }
    return res;
  }
  //获取指定id号的文章数据
  getPostItemById() {
    var postData = this.getAllPostData();
    var len = postData.length;
    for (var i = 0; i < len; i++) {
      if (this.postId == postData[i].postId) {
        return {
          //文章数组的下标
          index: i,
          data: postData[i]
        }
      }
    }
  }
  upDatePostData(category) {
    var postDatas = this.getAllPostData();
    var itemData = this.getPostItemById();
    var postData = itemData.data;
    switch (category) {
      //处理收藏
      case "collect":
        //已收藏 点击收藏取消收藏
        if (postData.collectionStatus) {
          postData.collectionNum--;
          postData.collectionStatus = false;
        } else {
          console.log('加');
          postData.collectionNum++;
          postData.collectionStatus = true;
        }
        break;
        //处理点赞
      case 'up':
        if (postData.upStatus) {
          postData.upNum--;
          postData.upStatus = false;
        } else {
          postData.upNum++;
          postData.upStatus = true;
        }
        break;
      default:
        break;

    }
    postDatas[itemData.index] = postData;
    this.execSetStorageSync(postDatas);
    return postData;
  }
  //同步存储数据
  execSetStorageSync(data) {
    wx.setStorageSync(this.storageKeyName, data);
  }
}

export {
  DBPost
}