小程序收藏
首先是进入页面
实现思路:首先,我们进入详情页的时候需要获取一下本地存储收藏的数据,然后拿这个数据根当前获取到详情页的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> // 这个属性是我们小程序封装好的