小程序之收藏,分享,客服

本文介绍了微信小程序中的收藏功能实现,包括前端点击事件处理、本地存储管理、数据状态切换,以及后端数据对比与同步。重点讲解了如何通过`wx.getStorageSync`操作和数组操作来控制收藏图标和数据更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

收藏功能

收藏前

在这里插入图片描述
在收藏的标签上设置点击事件 并且在js文件中设置一个 Collent = false 来控制收藏图标是否高亮 Collent=true 就是收藏后
在这里插入图片描述
点击shoucang时 通过wx.getStorageSync 来看本地存储里是否有收藏的商品 如果没有 就创建一个空的数组 然后判断当前被收藏的商品是否被收藏过 通过 findIndex 来判断数组里是否有相等的商品如果有就返回该商品的下标 把Collent的值改为true 通过push把被收藏的商品添加到本地储存里 如果有 就把Collent的值改为false 通过splice删除商品 最后通过this.setData把修改之后的值传给data 和本地储存

收藏后

在这里插入图片描述

js中的代码块

在这里插入图片描述
当加载数据时通过some方法对该商品的id对本地储存里的id进行比对 如果有就让Collent = true 如果没有 就让 Collent = false 最后把修改的值通过 this.setData传到data

个人中心页面

在这里插入图片描述
直接获取本地储存里的收藏商品数组 用length来显示 有多少被收藏的商品

收藏页面

把本地储存里的数据放到一个数组中 然后通过 wx:for渲染到页面中去
在这里插入图片描述

分享

在微信小程序中有自带的一个属性 是 button 的一个属性 open-tyep=“share”

在这里插入图片描述
分享是通过button的一个属性来完成的open-type=“share” 微信小程序自带的

在这里插入图片描述
客服也是通过button的一个属性来完成的open-type=“contact”

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值