wx小程序学习Day6 商品详情页-获取数据、渲染轮播图、放大预览图片、点击加入购物车

今天是学习小程序的第6天

---

---

1. 商品详情-获取数据

现在来实现点击商品跳转商品详情页：
在我们的商品navigator标签上加上url属性，同时还要传递参数

在pages/goods_detail/index.js的onLoad()函数中，可以获取到这个传递过来的参数

接下来要发送请求，获取商品详情数据
这两种方法都能用

onLoad()中调用getGoodsDetail()并把商品id传过去

成功获取到数据

---

2. 商品详情-轮播图渲染

分析一下获得的商品数据，找到关于轮播图的数据是哪部分

---

3. 商品详情-价格、名称、图文详情

商品价格、名称这部分很简单，就设置一下样式就好

图文详情里的图片不是我们自己通过标签写的，获取的商品数据里面就有对应的标签内容

这时候就要用<rich-text>标签，可以将字符串解析为对应html内容

---

4. 商品详情-优化动态渲染

我们获取到的商品数据保存在了goodsObj中，但是实际上用到的并没有那么多，这样会影响小程序的性能

---

5. 商品详情-放大预览图片

要实现的功能是点击轮播图，可以预览大图
预览功能主要是调用了小程序的一个api： previewImage()
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html

先给swiper-item绑定一下点击事件handlePreview
urls属性是要预览的图片的url数组，就在我们前面获取的商品数据里
current是当前显示的图片的url

这里current先放第一张图试试

现在已经可以正常预览，也可以往后翻
但是如果我们点击了轮播图的第一张图之后的图，一开始先显示的也是第一张

所以点击轮播图的时候，我们要传参，从而得知点击了哪一张图，就让预览的时候先显示哪一张图

---

6. 商品详情-底部工具栏

样式不放了，慢慢调哈

这里注意底部栏定位在最下方之后会挡住一部分页面

给page设置一个padding-bottom为底部栏的高度即可

之后实现一些点击底部栏的功能：
点击客服，要打开客服对话，这个可以通过设置<button>的open-type为contact 实现
可以把我们的view标签改成button标签，但是button应该有一些默认样式，我们也可以直接加一个button标签，在样式部分设置button标签绝对定位，高度宽度100%，透明度为0

点击分享，可以转发当前小程序给微信朋友，通过设置<button>的open-type为share 实现。这里和客服的实现基本相同就不放图了

点击购物车，可以跳转到购物车页面
这里的实现不能用<navigator>标签的url属性，也不能调用wx.navigateTo()
这两种方法都不支持跳到tabbar页面，而我们的购物车就属于tabbar页面
我们应该要用wx.switchTab()方法（或者设置<navigator>标签的open-type为switchTab也可以）

---

7. 商品详情-点击加入购物车

我们使用本地存储技术来缓存购物车数据

新增了一个全局对象goodsInfo，在获取商品数据的时候赋值：
注意这里要赋值为res.data.message

给加入购物车按钮绑定addToCart()事件
圈起来的这一步一定不能漏掉|| []，因为第一次的时候本地存储中的购物车数据是空的，不是数组就调用不了findIndex()方法
这里的判断用find()也可以，但是因为后面再次添加商品的时候，需要找到商品在本地存储数组中的索引，所以用findIndex()
num属性记录商品被添加进购物车的次数

---

商品详情页-完