小程序 项目介绍(二)

商品详情页 goods_detai

效果

需要完成的部分

1. 渲染商品详情数据
2. 点击图片
3. 点击收藏
4. 联系客服
5. 分享功能
6. 加入购物车

技术

1. swiper 组件
2. 本地存储实现收藏功能
3. 联系客服 小程序管理后台中直接添加即可
4. 富文本标签 渲染富文本
5. 小程序预览图片接口

具体操作

1. 渲染商品的详情数据中把webp图片格式改为jpg格式的 goods_introduce:goodsObj.goods_introduce.replace(/\.webp/g,'.jpg')

2. 发送请求 获取数据

3. 点击轮播图 预览大图的思路

   用到的方法的具体解析 网址: https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html

    1 给轮播图绑定点击事件
    
    2 调用小程序的api  wx.previewImage({})
   

4. 点击加入购物车的思路

   弹窗提示用到的方法的具体解析 网址: https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

    1 先绑定点击事件
    
    2 获取缓存中的购物车数据 数组格式
    
    3 先判断 当前的商品是否已经存在于购物车
    
    4 已经存在 修改商品数据 执行购物车个数量++ 重新把购物车数据 填充回缓存中
    
    5 不存在于购物车的数组中 直接给购物车数组添加一个新的元素 ,
      新元素带上购