微信小程序圖片點擊切換和收藏功能是非常常用的！有更好寫法的請留言，喜歡小程序和web前端開發的請加我微信Angelo_Sifan
效果圖如下
1 <image catchtap='onCollectionTap' wx:if="{{collected}}" src="/images/icon/collect1.png"></image> 2 <image wx:else catchtap='onCollectionTap' src="/images/icon/collect.png"></image>
首先對Image綁定相應變量，選用catchxxx而不選用bindxxx進行綁定是因為，catch不會出發冒泡事件就不會向父節點傳遞，寫的過程中一定要用wx:if和wx:else來進行判斷。然后我們還需要在JS中對onCollectionTap變量進行定義，最后當組件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件對象。
/*這是對應的JS文件*/
2 Page({
3 data: {
4
5 },
6 onLoad: function (option) {
7 var postId = option.id;//要先在對應的數據文本中對每個欄目定義postId、比如postId: 0 postId:1
8 this.data.currentPostId = postId; //借助頂部data作為中轉，拿到上面這行postid后，將它放到下面var postCollected = postsCollected[]中
9 //將這個postId從onLoad中傳遞到下面的onCollectionTap中
10 var postData = postsData.postList[postId];//定義每個新聞列表對應順序是哪個新聞內容
11
12 //用戶收藏功能
14 var postsCollected = wx.getStorageSync('posts_collected') //從緩存中讀取所有的緩存狀態
15 if (postsCollected) { //postsCollected為真的情況，在緩存中存在
16 var postCollected = postsCollected[postId]//讀取其中一個緩存狀態
17 this.setData({
18 collected: postCollected //將是否被收藏的狀態上綁定到collected這個變量上
19 })
20 }
21 else { //為假的情況，緩存中為空的情況
22 var postsCollected = { }; //對postsCollected進行一個賦值操作，從而防止為空，從而省掉后面對它是否為空進行測試的步驟
23 postsCollected[postId] = false; // 讓當前的這篇文章狀態為false，從而收藏星星不點亮
24 wx.setStorageSync('posts_collected', postsCollected);//將postsCollected對象放到緩存中
25 }
26 },
27 onCollectionTap: function (event) { // 定義onCollectionTap事件用來確定文章是否收藏，如果沒收藏就能點亮星星進行收藏
28 var postsCollected = wx.getStorageSync('posts_collected'); //獲取緩存的方法
29 var postCollected = postsCollected[this.data.currentPostId]; //確定當前文章是否有緩存的狀態，傳遞參數方法、借助其他參數來傳遞變量，如上的data
30 postCollected = !postCollected;// 取反操作，收藏變成未收藏、未收藏變為收藏
31 postsCollected[this.data.currentPostId] = postCollected;//整體緩存的某一篇文章的緩存值等於postCollected從而更新一個變量
32 wx.setStorageSync('posts_collected', postsCollected);//更新文章是否收藏的緩存值,相當於在數據庫中做了一次更新。
33 //更新Data的數據綁定變量,從而實現圖片切換
34 this.setData({
35 collected: postCollected //當前的collected為postCollected
36 })
37 }
38 )}