微信小程序开发一个小型商城（五、商品详情）

上一篇文章：微信小程序开发一个小型商城（四、商品列表）
在从上一个界面跳转过来，会看到商品详情这个界面goods_detail ：如下图所示：

页面分析：从上到下：一个轮播图+一个view标签存储商品名和价格等信息，再下面就是把数据渲染出来的图片，最后面就是几个按钮组成的一个绝对定位的view。

轮播图组件

轮播图组件在先前已经使用过了，在这里也就不做过多的介绍；轮播图，单击前往

<view class="detail_swiper"><swiper autoplay circular indicator-dots interval="2000"><!--给轮播图的子选项绑定事件。--><swiper-item wx:for="{{goodsObj.pics}}" wx:key="pics_id" data-url="{{item.pics_mid}}" bindtap="handlePrevewImage"><image src="{{item.pics_mid}}" mode="widthFix" /></swiper-item></swiper>
</view>

添加样式：是的图片宽占据全屏，同样是使用less文件进行编辑

page{padding-bottom: 90rpx;
}
.detail_swiper{swiper{height: 70vw;text-align: center;image{height: 60%;}}
}

商品名称+价格
先使用 view标签对其进行包裹，里面的收藏是需要引入外部图标，

<!--商品数据-->
<view class="goods_price">￥{{goodsObj.goods_price}}</view>
<view class="goods_name_row"><view class="goods_name">{{goodsObj.goods_name}}</view><view class="goods_collect" bindtap = "handlecollect"><text class="iconfont  {{isCollect?'icon-xingzhuanggongnengtubiao-':'icon-shoucang'}}"><view class="collect_test">收藏</view></text></view>
</view>

给其加上定位和样式：

.goods_price{padding: 15rpx;
font-size: 32rpx;
font-weight: 600;
color: var(--themeColor);
}
.goods_name_row{border-top: 5px solid #dedede;border-bottom: 5px solid #dedede;display: flex;padding: 10rpx 0;.goods_name{flex: 5;color: black;font-size: 30rpx;padding: 0 10rpx;display: -webkit-box;overflow: hidden;-webkit-box-orient:vertical;-webkit-line-clamp: 2;}.goods_collect{flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;border-left: 1px solid #000;.icon-xingzhuanggongnengtubiao-{color: red;   }}}

图文详情
对接口获取过来的数据直接进行渲染，使用富文本标签使其不解析，直接在页面上显示效果：

<view class="goods_info"><view class="goods_info_title">图文详情</view><view class="goods_info_content"><rich-text nodes="{{goodsObj.goods_introduce}}"></rich-text></view>
</view>

加上样式：

.goods_info{.goods_info_title{font-size: 32rpx;color: var(--themeColor);font-weight: 600;padding: 20rpx;}
}

按钮
在最下方的客服、分享、立即购买的组件，嫁过来的外部图标根据自己所选择的图标需要有所修改：比如 icon-fenxiang 是在style文件夹下的iconfont.wxss当中可以看到的

<view class="btm_tool"><view class="toll_item"><view class="iconfont icon-htmal5icon31"></view><view>客服</view><button open-type="contact"></button></view><view class="toll_item"><view class="iconfont icon-fenxiang"></view><view>分享</view><button open-type="share"></button></view><!--使用open-type="switchTab"表示允许跳转到tabar页面--><navigator url="/pages/cart/index" class="toll_item" open-type="switchTab"><view class="iconfont icon-gouwuche2"></view><view>购物车</view></navigator><view class="tool_item btn_cart" bindtap = "handleCartAdd">加入购物车</view><view class="tool_item btn_buy">立即购买</view>
</view>

给下方的view加上样式：使用绝对定位将其固定在最下方；

.btm_tool{border-top: 1px solid #ccc;position: fixed;left: 0;bottom: 0;width: 100%;height: 90rpx;background-color: #fff;display: flex;.toll_item{flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 24rpx;position: relative;button{position: absolute;top: 0;left: 0;height: 100%;width: 100%;opacity: 0; //透明度}}.btn_cart{flex: 2;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #ffa500;color: #fff;font-size: 30rpx;font-weight: 600;}.btn_buy{flex: 2;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: red;color: #fff;font-size: 32rpx;font-weight: 600;}
}

获取接口数据进行动态渲染
在先前的基础上发送请求获取数据，现在data下面定义存储数据的变量：

goodsObj: [], //存储数据的数组
isCollect: false,//表示是否被收藏过。

以及一个全局变量：

  GoodsInfo: {},   //商品对象

发送请求获取接口返回的数据，并且将数据给goodsObj赋值：在这里使用了es7语法和外部的resquest文件，需要在最前面进行引入：使用代码段：import { request } from "../../request/index.js"; import regeneratorRuntime from "../../lib/runtime/runtime"; 获取接口的时候需要传递参数，商品id

  async getGoodsDetail(goods_id) {const goodsObj = await request({url: "/goods/detail",data: { goods_id },});console.log(goodsObj);this.GoodsInfo = goodsObj;//获取缓存中收藏的数组let collect = wx.getStorageSync("collect") || [];let isCollect = collect.some((v) => v.goods_id === this.GoodsInfo.goods_id);this.setData({goodsObj: {goods_name: goodsObj.goods_name,goods_price: goodsObj.goods_price,//在获取返回的数据当中存在webp图片格式，将其转化为jpg格式goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, ".jpg"),pics: goodsObj.pics,},});},

怎么获取id呢？在onShow方法当中的形参options当中即带有goods_id的值，因此，我们在onShow方法当中给一个变量goods_id进行赋值获取options的值，再调用getGoodsDetail的方法，给其一个goods_id的值即可；

  onShow: function (options) {//获取去页面栈的options值传给变量currentlet pages = getCurrentPages();const current = pages[pages.length - 1].options;const { goods_id } = current;console.log(goods_id);this.getGoodsDetail(goods_id);},

在完成上述步骤之后，在APPdata当中就可以看到goodsObj的值：图下图所示：

单击轮播图预览大图
单击前往：预览大图
本质上就是获取单击轮播图图片之后获取图片的url，再传递js，根据jd当中的方法预览图片；

收藏商品事件
在appdata当中可以看到isCollect的值还是false，这时候是没有收藏，给收藏按钮绑定一个单击事件，被单击后修改isCollect的值（每一此单击后进行取反），并且修改图标的背景颜色（在less文件中已定义）。以及使用一个交互的api showToast进行给出提示：

  handlecollect(e) {//获取isCollect的值，设置为flase，在后面修改值let isCollect = false;//获取缓存当中的商品收藏数组let collect = wx.getStorageSync("collect") || [];//判断是否被选中收藏过let index = collect.findIndex((v) => v.goods_id === this.GoodsInfo.goods_id);//index!=-1的时候表示收藏过了if (index !== -1) {//表示可以找到这个商品，即被收藏过了collect.splice(index, 1);isCollect = false;wx.showToast({title: "取消收藏",mask: true,});} else {//没有收藏过，collect.push(this.GoodsInfo);isCollect = true;wx.showToast({title: "收藏成功",mask: true,});}//将数组存入缓存wx.setStorageSync("collect", collect);//修改isCollect的值，并且填充到data中this.setData({isCollect,});},

加入购物车
在单击购物车图标的时候给其绑定一个单击事件，使用缓存对其进行存放，

  handleCartAdd(e) {console.log("添加到购物车");//获取缓存数据let cart = wx.getStorageSync("cart") || []; //数据类型转换//判断 商品对象是否存在于购物车数组内let index = cart.findIndex((v) => v.goods_id === this.GoodsInfo.goods_id);if (index === -1) {//不存在，第一次添加this.GoodsInfo.num = 1;//第一次添加的时候，给定一个复选框的默认值为truethis.GoodsInfo.checked = true;cart.push(this.GoodsInfo);} else {//已经存在cart[index].num++;}//把数据重新缓存到数据当中wx.setStorageSync("cart", cart);wx.showToast({title: "加入成功",icon: "sucess",mask: true,//给定时间间隔});},

到后面可以在network当中看到缓存值：如下图：cart

文章持续更新中…

下一篇：微信小程序开发一个小型商城（六、购物车页面）单击前往

微信小程序开发一个小型商城（五、商品详情）相关推荐

微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...
微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...
微信小程序开发一个小型商城（七、支付页面）
上一篇:微信小程序开发一个小型商城(六.购物车页面) 在这里,基本上是与购物车页面相似的: 在从购物车页面跳转过来,在购物车界面对购物车商品会进行合法判断,是否有收货人的信息和是否存在商品,而在订单页 ...
微信小程序开发一个小型商城（一、准备工作）
文章根据b站视频零基础玩转微信小程序教程(黑马) 最开始我们需要在app.json文件当中声明所有使用到的界面.代码如下所示: "pages": ["pages/in ...
微信小程序开发教程：项目五导航组件课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题简述如何动态设置窗口的背景色. 六.编程题 1.设计一款 ...
微信小程序开发一个多少钱
小程序开发是当前比较流行的一项技术服务,能够为企业和个人带来巨大的商业价值和社会价值,但是小程序开发费用也是潜在的成本之一.在选择小程序开发服务时,了解开发费用如何计算.影响价格的因素以及如何降低成本 ...
用微信小程序开发一个计算器
今天我们用微信小程序来写一个计算器的案例页面布局首先我们需要对页面进行一个简单的规划,计算器一般在页面中都分为两部分,一部分是上面的结果显示区,另一部分就是下面的数字按钮及其运算符按钮,整体页面布 ...
【愚公系列】2022年11月微信小程序-优购电商项目-商品详情页面
文章目录前言一.商品详情⻚⾯ 1.业务逻辑 2.涉及的接口数据 3. 关键技术二.商品详情⻚⾯相关代码 1.页面代码 2.效果前言商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流 ...
【微信小程序】黑马优购--05商品详情
7.商品详情页面接口文档 7.1效果 7.2获取分类id 在商品列表页面wxml中加个超链接把id传过去 <view class="first_tab"><na ...

微信小程序开发一个小型商城（五、商品详情）

微信小程序开发一个小型商城（五、商品详情）相关推荐

最新文章

热门文章