目錄
-
- 小程式收藏
- 分享
- 客服功能
小程式收藏
首先是進入頁面
實作思路:首先,我們進入詳情頁的時候需要擷取一下本地存儲收藏的資料,然後拿這個資料根目前擷取到詳情頁的id進行對比,如果有相同的id,我們可以把一個變量變為true,然後我們的收藏圖檔的類名根據這個變量的true/false來改變。
wxml頁面
<text class="iconfont {{flag?'icon-Collection cor':'icon-shoucang1'}} "></text>
// 使用三元運算符,如果這個變量為true,就加第一個,如果為false,就加第二個類名
// 字型圖示來自 案例巴巴矢量圖示庫
js代碼
page({
onLoad: function (options) { // 頁面加載執行
let arr = wx.getStorageSync('collect') || []; // 擷取本地存儲種的資料
app.http.category.getGoodsDetail({ goods_id: options.id }).then(res => {
// 封裝好的wx.request
// 請求詳情頁資料
let data = res.data.message;
this.setData({
flag: arr.some(item => { // 判斷一個數組中有沒有符合條件的,如果有傳回true,否則傳回flase
return item.id == data.goods_id
}),
obj: data,
})
})
},
})
點選的時候
實作思路:當我們點選的時候,擷取一下本地存儲的資料,然後我們可以使用findIndex方法來判斷,如果每一項的id等于我們目前頁的id就會傳回目前項的下标,我們可以根據這個下标進行判斷,如果下标不等于-1,就是本地存儲種有,我們就删除。否則就是沒有,我們就添加。在判斷下面我們那個變量取一下自身的反。在最後把我們的資料存一下本地存儲。
page({
collect() { // 單擊觸發的函數
let title = '收藏成功' // 用于提示資訊
let arr = wx.getStorageSync('collect') || []; //擷取一下本地存儲中的資料
let index = arr.findIndex(item => { // 從資料中找有沒有id相同的
return item.id == this.data.obj.goods_id
})
if (index != -1) { // 不等于-1表示有
title = '取消收藏'; // 提示資訊改為 取消收藏
arr.splice(index, 1); // 删除這一項
} else { // 否則就是沒有
arr.push({ // pushi進一個對象
id: this.data.obj.goods_id,
image: this.data.obj.goods_small_logo,
name: this.data.obj.goods_name,
price: this.data.obj.goods_price,
});
}
wx.showToast({ // 微信封裝的輕提示
title:title // 提示資訊
})
this.setData({ // 這個變量取自身反
flag: !this.data.flag,
})
wx.setStorageSync('collect', arr); // 在存進本地存儲中
},
})
分享
分享,是我們小程式封裝好的,是以直接使用就可以了。
<button open-type="share"> 分享</button> // 這個屬性是我們小程式封裝好的
客服功能
客服功能頁是我們小程式封裝好的。
<button open-type="contact"> 聯系客服</button> // 這個屬性是我們小程式封裝好的