正则替换图片后缀: 为什么在ios设备上图片不显示，因为webp这个文件后缀对ios设备支持的力度比较少，所以我们要替换成jpg``
.replace(/webp/g, 'jpg') // 使用字符串的 replace() 方法，将 webp 的后缀名替换为 jpg 的后缀名 res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
- 解决商品价格闪烁的问题
当我们点击到商品详情页的时候,我们的价格会从undefined变为实际的标价
- 导致问题的原因：在商品详情数据请求回来之前，
data 中 goods_info 的值为 {}，因此初次渲染页面时，会导致 商品价格、商品名称 等闪烁的问题。 - 解决方案：判断
goods_info.goods_name属性的值是否存在，从而使用 v-if 指令控制页面的显示与隐藏：
<template> <view v-if="goods_info.goods_name"> <!-- 省略其它代码 --> </view> </template>
(4).渲染详情页底部的商品导航区域
- 渲染商品导航区域的 UI 结构
1.下载如下插件 : https://ext.dcloud.net.cn/plugin?id=865
导入插件之后需要重启小程序，否则不显示
2. 在 data 中，通过 options 和 buttonGroup 两个数组，来声明商品导航组件的按钮配置对象：
<!-- 商品导航组件 --> <view class="goods_nav"> <!-- fill 控制右侧按钮的样式 --> <!-- options 左侧按钮的配置项 --> <!-- buttonGroup 右侧按钮的配置项 --> <!-- click 左侧按钮的点击事件处理函数 --> <!-- buttonClick 右侧按钮的点击事件处理函数 --> <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /> </view> options: [{ icon: 'headphones', text: '客服' }, { icon: 'shop', text: '店铺', info: 2, infoBackgroundColor:'#007aff', infoColor:"red" }, { icon: 'cart', text: '购物车', info: 2 }], buttonGroup: [{ text: '加入购物车', backgroundColor: '#ff0000', color: '#fff' }, { text: '立即购买', backgroundColor: '#ffa200', color: '#fff' } ]
3. 美化商品导航组件，使之固定在页面最底部：
// 商品导航栏目 .goods_nav { position: sticky; bottom: 0; z-index: 999; width: 100%; } //因为这几个按钮的组件的高度为50，所以我们放50避免遮挡试图 .goods-detail-container { padding-bottom: 50px; }
- 点击跳转到购物车
- 点击商品导航组件左侧的按钮，会触发
uni-goods-nav的@click事件处理函数，事件对象e中会包含当前点击的按钮相关的信息：
// 商品导航栏的信息 onClick(e) { console.log(e) }
// 商品导航栏的信息 onClick(e) { console.log(e) if (e.content.text === "购物车") { uni.switchTab({ url: '/pages/cart/cart' }) } }
(5).分支的合并与提交
git add . git commit -m "完成了商品详情页" git push -u origin goodsdetail
git checkout master git add . git commit -m "完成了商品详情页" git merge goodsdetail git push git branch -d goodsdetail
