最近在學習小程序，想通過寫文章來記錄自己的學習歷程，希望能做到每周都寫……

如何綁定一個事件

微信小程序中，綁定事件要在標簽內寫入這兩段代碼：

bindtap="fnActive"
data-favourite = "{{isLike}}"
復制代碼

bindtap 有兩層含義，tap 代表這是一個點擊事件，bind 代表這個事件能被監聽，同時 bindtap 是一個縮寫，bind:tap 才是它完全的寫法。tap 還有許多兄弟姐妹，我們可以在 這里 找到并認識他們，使用他們有助于我們實現更多的交互功能。

在確定了一個可被監聽的事件后，自然是要提供一個js函數，來處理這個事件，這里我們提供了一個名為 fnActive 的函數。順帶一提，這個函數是寫在js的 methods 里面的。既然有監聽，那當然是要傳參的啦，我們在 methods 中寫一個 fnActive(e){ } , 這里的 e 是自定義的，但推薦寫 event 或者 簡寫為 e ，如果你在函數中寫一個 console.log(e); 就會看到如圖：

輸出了值，這些是頁面參數的取值。

然后，data-favourite 增加一個新的從參數，data- 后面的名稱是自定義的，這里我命名為 favourite ，它的值就隨便定啦，但是我們不能把它寫成 data - favourite（有空格），或者 data-favouriteLike（駝峰命名），這樣是拿不到值的。寫好之后就可以在控制臺看到啦。它的位置是 target.dataset

如何寫一個能點擊變色的小愛心

怎樣在頁面中加入一個小愛心就不講了，用圖片或者iconfont都行。但值得一提的是，如果你的小愛心是一個組件的話，可以通過組件的形式引用 (試過幾個方法，感覺 這個 最好)。

我使用方法是上述推薦的iconfont引入，直接貼代碼啦

<view><iconfont type = "{{icon}}" bind:tap="fnActive"data-favourite = "{{isLike}}"class = "beforeSelected {{isLike === true ? 'active' : ''}}"></iconfont>
</view>
復制代碼

我是通過css和三元表達式來實現愛心的變色的，那么怎樣通過點擊事件實現愛心變色呢

很簡單，先在data中定義好我們的isLike

 data: {isLike:false,},
復制代碼

再通過setData，修改isLike的數據

  methods: {fnActive(e){this.setData({isLike:!e.target.dataset.favourite})},}
復制代碼

寫到這里，愛心變色功能就十分簡單地完成了（本來就很簡單），之后會給這個功能加上計數器，以及簡單的動畫，讓它變得更好康。

最后，本人是剛開始學代碼的小白，若是大佬看到寫的有錯誤，plz及時指正，勿噴，蟹蟹QAQ