商品详情页新篇章开启！先看酷炫效果图，代码君教你实现

电商平台核心模块之一是商品详情页微信写文章的小程序，它的设计跟用户购买决策直接关联着，并且和平台转化率也有着直接关系。

详情页布局构成

商品详情页时常有着多个功能区域，以微信小程序来说，常见的模块哈，有轮播图展示区，设有商品标题与价格，有规格可供挑选，有用户评价，有商品详情图文解说，以及底部固定操作栏，这些模块共同组成了一个完整的商品信息展示页面。在这个页面当中呢，底部悬浮导航栏由于需始终处于视图内，还要适配各异的屏幕，故而在实现层面具备较高的复杂度。

样式文件的模块化管理

  
    
      
    
  


  
    LANCOME兰蔻小黑瓶精华肌底液
    ￥500
  
  
  
  请选择购买数量
  
  商品评价
  东西还可以，好评~
  
  商品详情
  
    
  
  



  
  
  
  加入购物车
  立即购买

在进行样式编写的时候，代码复用这件事情是非常关键的 ，借助 @import 规则来导入外部样式文件 ，不妨事把这些公共样式写置于独立，的 WXSS 文件当中 ，然后在需要使用的页面 ，按 @import "common.wxss" 展开引入操作 ，这种方法既可以避免代码重复情况出现 ，又能够保持样式结构的清晰程度 ，和那些把所有公共样式都堆积在 app.wxss 内去比较 ，更有利于维护 。

交互反馈组件的应用

当用户开展操作，存在即时反馈需求之际，wx.showToast API能够达成该功能，此接口能够呈现半透明提示框，它支持对图标、内容以及显示时长予以设置，举例来说，当用户点击收藏按钮时，调用这个接口能够展示“收藏成功”提示，进而增强操作确认感，提升用户体验流畅度 。

page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 直接设置swiper属性 */
swiper {
  height: 500rpx;
}
swiper-item image {
  width: 100%;
  height: 100%;
}
.detail {
  display: flex;
  flex-direction: column;
  margin-top: 15rpx;
  margin-bottom: 0rpx;
}
.detail .title {
  font-size: 40rpx;
  margin: 10rpx;
  color: black;
  text-align: justify;
}
.detail .price {
  color: red;
  font-size: 40rpx;
  margin: 10rpx;
}
.line_flag {
  width: 80rpx;
  height: 1rpx;

  display: inline-block;
  margin: 20rpx auto;
  background-color: gainsboro;
  text-align: center;
}
.line {
  width: 100%;
  height: 2rpx;
  display: inline-block;
  margin: 20rpx 0rpx;
  background-color: gainsboro;
  text-align: center;
}
.detail-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  float: left;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100rpx;
}
.button-green {
  background-color: #4caf50; /* Green */
}
.button-red {
  background-color: #f44336; /* 红色 */
}
.image_detail {
  width: 100%;
}
button {
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30rpx;
  border-radius: 0rpx;
  width: 50%;
  height: 100%;
  line-height: 100rpx;
}
.detail-nav image {
  width: 70rpx;
  height: 50rpx;
  margin: 20rpx 40rpx;
}
.line_nav {
  width: 5rpx;
  height: 100%;
  background-color: gainsboro;
}
/* 占位 */
.temp {
  height: 100rpx;
}
text {
  display: block;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  margin: 10rpx;
}
.text-remark {
  display: block;
  font-size: 25rpx;
  margin: 10rpx;
}

页面跳转的不同场景

小程序给出了多种页面跳转方式,x.switchTab专门用于跳转到tabBar页面,如从商品页切换到购物车页,它与wx.navigateTo的主要区别在于,后者适用于普通页面跳转且会保留当前页面,而wx.switchTab会重新加载目标tab页面。

Page({
  data: {
    isLike: true,
    // banner
    imgUrls: [
      "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
      "http://mz.djmall.xmisp.cn/files/product/20161201/148057922659_middle.jpg",
      "http://mz.djmall.xmisp.cn/files/product/20161201/148057923813_middle.jpg",
      "http://mz.djmall.xmisp.cn/files/product/20161201/148057924965_middle.jpg",
      "http://mz.djmall.xmisp.cn/files/product/20161201/148057925958_middle.jpg"
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //	滑动动画时长1s
    // 商品详情介绍
    detailImg: [
      "http://7xnmrr.com1.z0.glb.clouddn.com/detail_1.jpg",
      "http://7xnmrr.com1.z0.glb.clouddn.com/detail_2.jpg",
      "http://7xnmrr.com1.z0.glb.clouddn.com/detail_3.jpg",
      "http://7xnmrr.com1.z0.glb.clouddn.com/detail_4.jpg",
      "http://7xnmrr.com1.z0.glb.clouddn.com/detail_5.jpg",
      "http://7xnmrr.com1.z0.glb.clouddn.com/detail_6.jpg",
    ],
  },
  //预览图片
  previewImage: function (e) {
    var current = e.target.dataset.src;
    wx.previewImage({
      current: current, // 当前显示图片的http链接  
      urls: this.data.imgUrls // 需要预览的图片http链接列表  
    })
  },
  // 收藏
  addLike() {
    this.setData({
      isLike: !this.data.isLike
    });
  },
  // 跳到购物车
  toCar() {
    wx.switchTab({
      url: '/pages/cart/cart'
    })
  },
  // 立即购买
  immeBuy() {
    wx.showToast({
      title: '购买成功',
      icon: 'success',
      duration: 2000
    });
  },
})

组件化开发的优势

把页面里那部分拆分，使其成为独立组件，这能显著提升开发效率，举个例子，将底部导航栏、商品评价区域等封装成自定义组件，如此做不仅能在多个页面复用，还可让代码结构更清晰，组件化开发便于团队协作，对后续功能迭代及维护也有益处 。

性能优化的注意事项

页面加载时间跟转化率是有关联的，经统计，页面加载时间每多1秒，转化率或许会降低7%，这说明性能优化对商业效益有着极大冲击影响，页面加载时间会因转化率降低而受影响，转化率降低又会因页面加载时间增加而有变化，页面加载时间和转化率之间存在紧密联系，这种联系与商业效益相互干扰微信写文章的小程序，相互作用，相互影响，相互制约，相互牵扯，相互纠缠，相互交织，相互映衬，相互映照，相互映射，详情页作为资源密集型页面要特别留意性能优化，图片懒加载、合理运用缓存机制、避免过多数据进行setData都是有效办法

麻烦通过点赞来支持！