I. Preface

(1) , suitable for people

1. Wechat applet developer
2. Front end Engineer
3. People who want to get started learning applet development
4. People who want to learn more about the front and back development of wechat applets

(2) What do you need to prepare?

1. Be able to actively study, be practical and not impetuous
2. Front end Foundation (HTML, CSS, JS Foundation)
3. A back-end language, such as PHP, Java, C, C ා, etc )I will use PHP, the most friendly language in the world, to talk about the data supply of the back-end interface of the applet

2, Preparatory work

Software environment: wechat developer tool
Official download address: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1. Basic needs.

• Realize users' likes for articles
• Real time dynamic display

2. Case directory structure

3, Specific steps of program implementation

1. Like index.wxml code

<view class="container">
  <view class="list" wx:for="{{list}}" wx:key="key" wx:for-item="item" wx:for-index="index">
    <view class="praise {{item.hasChange? 'changed': ''}}" hover-class="hover_praise" bindtap="praiseThis" data-curIndex="{{index}}">{{item.praise}}</view>
    <view class="author">{{item.author}}</view>
    <view class="info">{{item.info}}</view>
  </view>
</view>

2. Like index.wxss code

.container {
  background: #fff;
  height: 100%;
  font-family: 'Miscrsoft YaHei'
}
 
.list {
  background: #2EB3FF;
  position: relative;
  padding: 10px 10px 10px 70px;
  height: 50px;
  margin-bottom: 10px;
}
 
.praise {
  width: 50px;
  height: 50px;
  background: #999;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  transition: 0.5s;
  color: #000;
  background: #fff;
}
 
.hover_praise, .changed {
  transition: 0.5s;
  background: #ccc;
}
 
.author {
  display: block;
  height: 20px;
  color: #fff;
}
 
.info {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #fff;
}

3. Like index.js logic code

a. Function realization of likes

praiseThis: function (e) {
    var index = e.currentTarget.dataset.curindex;
    if (this.list[index]) {
      var hasChange = this.list[index].hasChange;
      if (hasChange !== undefined) {
        var onum = this.list[index].praise;
        if (hasChange) {
          this.list[index].praise = (onum - 1);
          this.list[index].hasChange = false;
        } else {
          this.list[index].praise = (onum + 1);
          this.list[index].hasChange = true;
        }
        this.setData({
          list: this.list
        })
      }
    }
  }

b. Build data list

list = [{
      'author': 'Sprouting rabbit QAQ',
      'info': 'I found cute rabbit,Really handsome.!',
      'praise': 0,
      'hasChange': false
    },
    {
      'author': 'Sprouting rabbit QAQ',
      'info': 'I found cute rabbit,Really handsome.!',
      'praise': 133,
      'hasChange': false
    },
    {
      'author': 'Sprouting rabbit QAQ',
      'info': 'I found cute rabbit,Really handsome.!',
      'praise': 0,
      'hasChange': false
    },
    {
      'author': 'Sprouting rabbit QAQ',
      'info': 'I found cute rabbit,Really handsome.!',
      'praise': 8,
      'hasChange': false
    },
    {
      'author': 'Sprouting rabbit QAQ',
      'info': 'I found cute rabbit,Really handsome.!',
      'praise': 33,
      'hasChange': false
    }]

4, Case operation rendering

5, Summary and remarks

There is no like function of user list based on wechat applet