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

如何綁定一個事件

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

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

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

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

輸出了值，這些是頁面參數(shù)的取值。

然后，data-favourite 增加一個新的從參數(shù)，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和三元表達式來實現(xiàn)愛心的變色的，那么怎樣通過點擊事件實現(xiàn)愛心變色呢

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

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

再通過setData，修改isLike的數(shù)據(jù)

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

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

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

轉(zhuǎn)載于:https://juejin.im/post/5ca99e0f51882544191d85dd

總結

以上是生活随笔為你收集整理的小程序学习（一）：点击爱心变色 -- 最简单的事件实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。