【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序中如何實(shí)現(xiàn)收藏與取消收藏圖片功能

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序中如何實(shí)現(xiàn)收藏與取消收藏圖片功能

這篇文章主要介紹了微信小程序中如何實(shí)現(xiàn)收藏與取消收藏圖片功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。wxml界面使用image標(biāo)簽<image

wx:if="{{collected}}"

catchtap='onCollectionTap'

src='/images/icon/collection.png'></image>

<image

wx:else

src='/images/icon/collection-anti.png'

catchtap='onCollectionTap'></image>js文件上的腳本：//

pages/post_detail/post_detail.js

var

postData

=

require("../../data/posts_data.js")

Page({

/**

*

頁(yè)面的初始數(shù)據(jù)

*/

data:

{

},

/**

*

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載

*/

onLoad:

function(options)

{

var

postId

=

options.id;

this.data.currentPostId

=

postId

var

postsData

=

postData.postList[postId];

console.log(postsData);

//

this.data.postData=postsData;

this.setData({

post_key:

postsData

})

//

var

postsCollected={

//

1:"true",

//

2:"false",

//

3:"true",

//

}

//

console.log(postData);

//

從緩存中讀取所有的緩存狀態(tài)

var

postsCollected

=

wx.getStorageSync("posts_Collected")

//如果緩存為真，執(zhí)行以下代碼

if

(postsCollected)

{

//讀取其中一個(gè)緩存狀態(tài)

var

postsCollected

=

postsCollected[postId]

this.setData({

//將是否被收藏的狀態(tài)上綁定到collected這個(gè)變量上

collected:

postsCollected

})

}

else

{

var

postsCollected

=

{};

postsCollected[postId]

=

false;

wx.setStorageSync("posts_Collected",

postsCollected)

}

},

onCollectionTap:

function(event)

{

//獲取緩存的方法

var

postsCollected

=

wx.getStorageSync('posts_Collected');

var

postCollected

=

postsCollected[this.data.currentPostId];

console.log(postCollected);

//取反操作，收藏的話，點(diǎn)擊變成未收藏，反之，變成收藏。

postCollected

=

!postCollected;

postsCollected[this.data.currentPostId]

=

postCollected;

//

//更新文章是否收藏的緩存值。

//

wx.setStorageSync('posts_Collected',

postsCollected)

//

//更新數(shù)據(jù)綁定變量,從而實(shí)現(xiàn)切換圖片。

//

this.setData({

//

collected:

postCollected

//

})

this.showModal(postsCollected,

postCollected)

//

wx.showToast({

//

title:

postCollected

?

"收藏成功"

:

"取消收藏",

//

duration:

800,

//

icon:

"success"

//

})

//

wx.showModal({

//

title:

'確定收藏',

//

content:

'這是一個(gè)模態(tài)彈窗',

//

success:

function

(res)

{

//

if

(res.confirm)

{

//

console.log('用戶點(diǎn)擊確定')

//

}

else

if

(res.cancel)

{

//

console.log('用戶點(diǎn)擊取消')

//

}

//

}

//

})

console.log("onCollectionTap");

},

//使用showModal

API來(lái)實(shí)現(xiàn)界面上邏輯操作。

showModal:

function(postsCollected,

postCollected)

{

//這個(gè)注意一下，由于this是在page下調(diào)用的方法，這里是在自定義函數(shù)下，所有必須重新賦值到一個(gè)新的變量，才能重新使用，不明白的同學(xué)們，記住就行。

var

ts

=

this;

wx.showModal({

title:

'收藏',

content:

postCollected

?

"收藏該文章"

:

"取消收藏該文章",

success:

function(res)

{

if

(res.confirm)

{

wx.setStorageSync('posts_Collected',

postsCollected)

//更新數(shù)據(jù)綁定變量,從而實(shí)現(xiàn)切換圖片。

ts.setData({

collected:

postCollected

})

console.log('用戶點(diǎn)擊確定')

}

else

if

(res.cancel)

{

console.log('用戶點(diǎn)擊取消')

}

}

})

},

//

onCollectionTap:

function(event)

{

//

var

baoxue

=

wx.getStorageSync("key");

//

console.log(baoxue);

//

},

onShareTap:

function(event)

{

//

wx.removeStorageSync("key")

//緩存的上限最大不能超過(guò)10MB

wx.clearStorageSync();

console.log("onShareTap");

},

/**

*

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成

*/

onReady:

function()

{

},

/**

*

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示

*/

onShow:

function()

{

},

/**

*

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏

*/

onHide:

function()

{

},

/**

*

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載

*/

onUnload:

function()

{

},

/**

*

頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作

*/

onPullDow