1. 获取商品id
- 在商品列表页面中的
navigator标签中使用url属性配置选项跳转路径。传递商品id。
url="/pages/goods_detail/index?goods_id={{item.goods_id}}"
获取商品id
- 在跳转到的商品详情页面的
onLoad页面加载函数中获取传递的商品id：
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
const { goods_id } = options;
console.log(goods_id);
},
2. 获取详情数据
-
注意这里传递参数的写法，因为使用了解构的方式所以需要注意这里的写法。
注意这里传递参数的写法，因为使用了解构的方式
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
const { goods_id } = options;
// 注意这里的写法
this.getGoodsDetail({ goods_id });
},
/**
* 获取商品详情
*/
async getGoodsDetail(goods_id) {
const goodObj = await request({ url: "/goods/detail", data: goods_id });
this.setData({
goodObj
})
},
3. 页面动态渲染
3.1 轮播图渲染
- 页面结构：
<view class="good_detail">
<swiper indicator-dots="{{true}}" autoplay interval="2000" duration="1000" circular >
<swiper-item
wx:for="{{goodObj.pics}}">
<!-- 由于轮播图存在默认的样式需要进行修改 -->
<image src="{{item.pics_mid}}" mode="widthFix" />
</swiper-item>
</swiper>
</view>
- 页面样式:
.good_detail {
swiper {
// 高度等于 70% 视口的宽度
height: 70vw;
text-align: center;
image {
width: 60%;
}
}
}
3.2 商品描述信息渲染
- 页面结构：
<view class="good_price">
￥{{goodObj.goods_price}}
</view>
<view class="goods_name_row">
<view class="good_name">
{{goodObj.goods_name}}
</view>
<view class="good_collect">
<view class="iconfont icon-shoucang"></view>
<!-- text标签不能敲多余的空格 -->
<text class="collect_text">收藏</text>
</view>
</view>
<view class="good_info">
<view class="good_info_title">图文详情</view>
<view class="good_info_content">
<rich-text nodes="{{goodObj.goods_introduce}}"></rich-text>
</view>
</view>
- 页面样式：
.good_price {
color: var(--themeColor);
font-size: 32rpx;
font-weight: 600;
padding: 15rpx;
}
.goods_name_row {
display: flex;
.good_name {
flex:5;
font-size: 30rpx;
// 文字超出两行的部分使用省略号代替
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
// 第几行开始
-webkit-line-clamp: 2;
padding: 0 26rpx
}
.good_collect {
flex:1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 28rpx;
border-left: 1rpx solid #ccc;
.iconfont {
}
.collect_text {
}
}
}
.good_info {
.good_info_title {
color: var(--themeColor);
font-size: 30rpx;
font-weight: 600;
padding: 20rpx;
}
}
3.3 优化动态渲染
- 优化页面需要渲染的属性。
优化页面渲染属性
- 小程序中有部分格式是 IPhone 暂不支持的。需要临时替换为
jpg格式。
4. 浏览大图功能
- 定义一个点击事件，并传递当前点击所需要展示的图片的链接。
定义一个点击事件，并传递当前点击所需要展示的图片的链接
- 编写代码处理单击事件的逻辑：
/**
* 放大预览图
*/
previewImageHandle(e) {
// GoodsInfo 是一个全局的对象 用于接收请求完成获取的商品对象
const urls = this.GoodsInfo.pics.map(v => v.pics_mid);
const current = e.currentTarget.dataset.url;
// 解构赋值的方式
wx.previewImage({
current, // 当前显示图片的http链接
urls // 需要预览的图片http链接列表
})
},
5. 底部工具栏
- 页面结构：
<!-- 底部工具栏 开始 -->
<view class="btm_tool">
<view class="tool_item">
<view class="iconfont icon-lianxikefu"></view>
<view>客服</view>
<!-- 小技巧：这里联系客服是一个按钮的打开类型需要使用按钮，但是这里的按钮有很多默认的样式 -->
<button open-type="contact"></button>
</view>
<view class="tool_item">
<view class="iconfont icon-ico"></view>
<view>分享</view>
<button open-type="share"></button>
</view>
<view class="tool_item">
<view class="iconfont icon-gouwuchezhengpin"></view>
<view>购物车</view>
</view>
<view class="tool_item btn_cart">
加入购物车
</view>
<view class="tool_item btn_buy">
立即购买
</view>
</view>
<!-- 底部工具栏 结束 -->
- 页面样式 ：
.btm_tool {
display: flex;
position: fixed;
left: 0;
bottom: 0;
// 定位的元素一定要指定一个宽度不然其宽度就是内容的宽度
width: 100%;
height: 90rpx;
background-color: #ffffff;
.tool_item {
flex: 1;
display: flex;
position: relative;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 24rpx;
button {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
.btn_cart {
flex: 2;
background-color: #FFA400;
color: #ffffff;
}
.btn_buy{
flex: 2;
background-color: #F8544C;
color: #ffffff;
}
}
5.1 联系客服和分享按钮
- 由于打开联系客服和分享都需要使用默认的按钮组件实现，但是按钮存在很多默认的样式不是很好处理。使用如下技巧：
联系客服和分享按钮处理小技巧
将按钮绝对定位到其中，设置透明度为0
5.2 跳转购物车按钮
- 购物车按钮使用
navigator标签实现: 在非tabBar内打开tabBar页面需要使用switchTab类型。
<!-- open-type="switchTab" 在非tabBar内打开 tabBar 页面需要使用switchTab类型 -->
<navigator url="/pages/cart/index" open-type="switchTab" class="tool_item">
<view class="iconfont icon-gouwuchezhengpin"></view>
<view>购物车</view>
</navigator>
5.3 添加到购物车
- 先绑定点击事件。
<view class="tool_item btn_cart" bindtap="addCartHandle">
加入购物车
</view>
- 获取缓存中的购物车数据，数组形式。
// 1. 获取缓存中的购物车数据判断是否存在？
let cart = wx.getStorageSync("cart") || []; // 确保返回的是一个数组类型
- 先判断当前的商品是否存在与购物车中。
// 判断商品对象在购物车数组中是否存在
let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id); // 判断该是否存在good_id相同的对象 index
if (index === -1) { // 不存在
// 不存在表示第一次添加
this.GoodsInfo.num = 1; // 当前商品在购物车中的数量
// 将当前商品添加到购物车数组中
cart.push(this.GoodsInfo);
} else {
// 否则就是存在 将对象在购物车中的数量加 1
cart[index].num++;
}
已经存在修改商品的数据执行购物车数量++ 重新将购物车数据填会到缓存中。
不存在与购物车的数组中直接给购物车数组添加一个新元素带上购物车数量属性
num重新将购物车数组填充会缓存中。
// 最终都需要将购物车数组重新添加到缓存中
wx.setStorageSync("cart", cart);
- 弹出提示。
// 添加成功给出提示
wx.showToast({
title: '加入购物车成功~~',
icon: 'none',
mask: true
});
