微信小程序商品详情页面怎么制作?

时间：2023-07-01 14:05 阅读数：196 人阅读分类：知识百科

　　微信小程序商品详情页面怎么制作?微信小程序的开发和发展，让很多的程序开发者开始接触起了微信小程序，那微信小程序商品详情页面怎么制作呢?下面小编给大家整理了微信小程序商品详情页面的交互源码，希望对想要开发微信小程序商品详情页面的用户有所帮助。

　　1、微信小程序商品详情页面效果图

　　2、微信小程序商品详情页面wxml代码

    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">






{{good.good_name}}

    {{good.good_mark}}


      ¥{{goodPrice}}/{{good.good_unit}}


          ¥{{goodOrinPrice}}




      销量:{{good.good_sell}}


选择花色:
    {{flowerNameSelect}}

class="catalog_area bg_fff {{isHidden == 1 ? 'display-block':'display-none'}}">



        ¥{{goodPrice}}
        {{flowerNameSelect}}




        花型


                            class="{{item.flower_id == flowerSelect ? 'active':''}} catalog_item"
                bindtap="chooseFlower">{{item.flower_name}}






            购买数量


            -
                {{goodNum}}
                +







      加入购物车
      立即购买



      商品详情
      商品参数


    加入购物车
    立即购买

　　3、微信小程序商品详情页面js代码

Page({
data: {
    //商品信息，假装请求到的信息
    orinGoodMsg: { "good": { "visible": "101", "tourist_dis_price": 510, "good_identity": "00204", "good_sell": "100", "good_brand": "", "last_modify_time": "2017-08-08 20:10:05", "good_place": "101", "good_type": "2", "good_display_img": "../../image/swiper.jpg", "dealer_price": 0, "last_modify_id": "1", "good_id": "17", "good_fill": "", "good_number": 35, "good_status": "9001", "good_unit": "套", "good_format": "", "good_column": "100902", "wholesaler_dis_price": 255, "dealer_dis_price": 265, "tourist_price": 0, "good_name": "绚彩活*棉提花四件套", "wholesaler_price": 0, "good_mark": "床单270x270cm被套200x230cm枕套48x74+6cm" }, "goodflowers": [{ "flower_name": "朝花夕拾", "flower_id": "11d75c6a560a4345b232706f7642de22", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "美丽相约", "flower_id": "3994afdb0427425d93bbba6e881601c3", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "清水佳人", "flower_id": "3ebc1032eb5d477b9e2bf508918f3d2b", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "意境幽蓝", "flower_id": "425cc030c0574344a62be9674c854ee6", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "出水芙蓉", "flower_id": "4ea02d08e2464ba681e4861451a7a2f7", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "国色天香", "flower_id": "5501ed259aa6476eafff940e9cf16e5a", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "春日畅想", "flower_id": "85d540c79c244e40bb88744cdd1aa5ce", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "花叶细雨", "flower_id": "877e01699f30449ebf99bfe689711159", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "琪花摇曳", "flower_id": "979e579413ea467fb363a1c85f36f092", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "絮语飘香", "flower_id": "ba7ef47a8fec4ec192d958d3c400bf7b", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "凝香雨露", "flower_id": "d24fa5772f754cfbb6650df587167c2f", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "花开柔情", "flower_id": "dbd7f42a97c04c0aa1bc24b27d2546d3", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "幻彩花园", "flower_id": "eff884ebeb7c42008f38a58785818031", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }], "roleType": "2", "isAdmin": true },
    good: {//商品
    },
    mainImg: '',//主图
    goodPrice: 99.99,//商品价格
    goodOrinPrice: 999.99,
    goodflowers: [
    ],
    imgUrls: [//轮播图
    ],
    chooseFlowers: [//选中的花色
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    flowerImgSelect: '',//选中的花色图片
    flowerNameSelect: "",//
    flowerSelect: 0,//判断是否选中
    isHidden: 0,
    animationData: {},//选择动画
    showModalStatus: false,//显示遮罩
    goodNum: 1,//商品数量
    select: 0,//商品详情、参数切换
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
    var that = this;
    if (wx.showLoading) {
      wx.showLoading({
        title: '加载中',
      })
    }
    var data = that.data.orinGoodMsg;//写死的商品信息
    var goodBaseMsg = data.good;//商品基本信息
    var goodflowersMsg = data.goodflowers;//商品花色信息
    var swiperAy = [];//伦比途

    var goodPrice = 999.99;//显示价格
    var goodOrinPrice = 999.99;//划线价格

    for (var i = 0; i < goodflowersMsg.length; i++) {
      var jo = {
        flower_image: goodflowersMsg[i].flower_image,
        flower_id: goodflowersMsg[i].flower_id,
      }

      swiperAy.push(jo);
    };
    that.setData({//商品
      mainImg: goodBaseMsg.good_display_img,
      flowerImgSelect: goodBaseMsg.good_display_img,
      good: goodBaseMsg,
      goodflowers: goodflowersMsg,
      imgUrls: swiperAy,
      goodPrice: goodPrice,
      goodOrinPrice: goodOrinPrice,

    });
    if (wx.hideLoading()) {
      wx.hideLoading()
    }
},
/**选择花色 */
chooseFlower: function (data) {
    var that = this;
    var flower_id = data.currentTarget.dataset.select;
    var flower_name = data.currentTarget.dataset.flowerName;

    that.setData({//把选中值，放入判断值中
      flowerNameSelect: flower_name,
      flowerSelect: flower_id
    })
    var str = flower_id + ',' + flower_name;
    var chooseFlowers = that.data.chooseFlowers;
    chooseFlowers = [];
    chooseFlowers.push(str);
    that.setData({
      chooseFlowers: chooseFlowers,
      flowerImgSelect: data.currentTarget.dataset.img
    })
},
/**点击选择花色按钮、显示页面 */
viewFlowerArea: function (data) {
    var that = this;
    var animation = wx.createAnimation({//动画
      duration: 500,//动画持续时间
      timingFunction: 'linear',//动画的效果动画从头到尾的速度是相同的
    })
    animation.translateY(0).step()//在Y轴偏移tx，单位px

    this.animation = animation
    that.setData({
      showModalStatus: true,//显示遮罩
      animationData: animation.export()
    })
    that.setData({//把选中值，放入判断值中
      isHidden: 1,
    })
},
/**隐藏选择花色区块 */
hideModal: function (data) {

    var that = this;
    that.setData({//把选中值，放入判断值中
      showModalStatus: false,//显示遮罩
      isHidden: 0,
    })

},
goodAdd: function (data) {

    var that = this;
    var goodCount = that.data.goodNum + 1;
    that.setData({//商品数量+1
      goodNum: goodCount
    })

},
goodReduce: function (data) {

    var that = this;
    var goodCount = that.data.goodNum - 1;
    that.setData({//商品数量+1
      goodNum: goodCount
    })

},
/**商品详情、参数切换 */
changeArea: function (data) {
    var that = this;
    var area = data.currentTarget.dataset.area;
    that.setData({ "select": area });

},
/**
* 加入购物车
*/
addCart: function (data) {
    var that = this;
    var thatData = that.data;
    var ja = thatData.chooseFlowers;//选中的花色id
    var good_id = thatData.good.good_id;//good_id
    var good_name = thatData.good.good_name;//good_name
    var gn = thatData.goodNum;//数量
    var good_price = thatData.goodPrice;//价格

    if (ja.length > 0) {
      wx.showToast({
        title: '成功！',
        duration: 2000,
      })

    } else {
      wx.showToast({
        title: '您还没有选择花色哦~',
        duration: 2000,
      })
    }

},
/**
   * 生成订单
   */
saveOrder: function (data) {
    var that = this;
    var thatData = that.data;
    var ja = thatData.chooseFlowers;//选中的花色
    var good_id = thatData.good.good_id;//good_id
    var good_name = thatData.good.good_name;//good_name
    var gn = thatData.goodNum;//数量
    var good_price = thatData.goodPrice;//价格v
    var goodDisplayImg = thatData.mainImg;//主图

    if (ja.length > 0) {

      wx.showToast({
        title: '成功！',
        duration: 2000,
      })
    } else {
      wx.showToast({
        title: '您还没有选择花色哦~',
        duration: 2000,

      })

    }
},
/**
   * 查看轮播图片
   */
seeSwiperAll: function (e) {
    this.seePreviewImg(0, e.currentTarget.dataset.img)
},
/**
* 查看花色图片
* */
seeFlowersAll: function (e) {
    this.seePreviewImg(1, e.currentTarget.dataset.img)
},
/**
   * 预览图片
   *
   * 无法显示本地图片！！！！！！！
   * 无法显示本地图片！！！！！！！
   * 无法显示本地图片！！！！！！！
   *
   * @pd 0表示轮播图、 1表示花色
   */
seePreviewImg: function (pd, showImg) {
    var array = [];
    var that = this;
    if (pd == 0) {
      var imgArray = that.data.imgUrls;
      for (var i = 0; i < imgArray.length; i++) {
        array.push(imgArray[i].flower_image)
      }
    } else if (pd == 1) {
      var imgArray = that.data.imgArray;
      for (var i = 0; i < imgArray.length; i++) {
        array.push(imgArray[i].url)
      }
    }

    wx.previewImage({
      current: showImg, // 当前显示图片的链接
      urls: array // 需要预览的图片链接列表
    })
},
})

　　4、微信小程序商品详情页面wxss代码

.width50{
width:50% !important;
}
.width100{
width:100%
}
.fl{
float: left;
}
.fr{
float: right;
}

.display-flex-row{
display:flex;
flex-direction:row;
}
.display-flex-column{
display:flex;
flex-direction:column;
}
.display-ib{
display:inline-block !important;
}
.display-block{
display:block !important;
}
.display-none{
display: none !important;
}

.bg_fff{
background-color: #ffffff;

}
.bg_ff0036{
background-color:#ff0036;/**红**/
}
.bg_ff6700{
background-color:#ff6700;/**橘**/
}
.bg_09bb07{
background-color: #09bb07;/**绿**/
}
.bg_888{
background-color: #888888;/**灰**/
}
.color_ff6700{
color:#ff6700;
}
.color_888888{
color:#888888;
}
.swiper_area,.swiper_area swiper{
height: 400rpx;
}
.swiper-item{
display: block;
}
.slide-image {
width: 100%;
}
swiper {
width: 100%;
}
.goods_title {
color: #535353;
padding: 20rpx 20rpx 10rpx 20rpx;
line-height: 1.2;
font-weight: bold;
}
.good_description{
font-size: 0.7em;
padding:0 20rpx;
color: #b0b0b0;
}
.goods_infor_top {
background-color: #FFF;
margin-bottom:20rpx;
}
.good_info_bottom{
justify-content:space-between;
padding:20rpx 20rpx;
}
.good_dis_price {
color: #ff6700;
font-weight: bold;
}
.good_info_bottom .good_orin_price {
font-size: 0.7em;
margin-left: 10rpx;
text-decoration: line-through;
color: #b0b0b0;
}
.good_info_bottom .good_sale_count {
font-size: 0.7em;
}
.admin_good_price{
padding:20rpx;
}
.admin_good_price .admin_price_box{
justify-content: space-between;
}
.admin_good_price .admin_orin_price{
font-size: 0.8em
}
.goods_deliver {
padding: 10px;
border-top: 1px solid #E5E5E5;
color: #676767;
}
.goods_collect_btn {
height: 40px;
width: 70px;
position: absolute;
right: 0;
top: 10px;
border-left: 1px solid #E5E5E5;
text-align: center;
font-size: 12px;
line-height: 14px;
}
.goods_collect_img {
width: 24px;
height: 24px;
}
.choose_catalog_area{
font-size:0.9em;
justify-content:space-between;
padding:20rpx;
margin-bottom:20rpx;
height:60rpx;
line-height: 60rpx;
}
.choose_catalog_area .arrow_right{
margin-top:14rpx;
width:30rpx;
height:30rpx;
}
modity_screen{
background-color:rgba(0,0,0,0.5);
width: 100%;
height: 100%;
opacity:0.5;
position: fixed;
z-index: 666;
bottom:0;
}
.catalog_area{
min-height: 900rpx;
max-height: 900rpx;
padding:20rpx;
position: fixed;
z-index: 888;
bottom:0;
}
.catalog_area .info_tip{
margin-top:50rpx;
margin-left: 220rpx;
}
.catalog_area .catalog_title{
position: fixed;
top: 0;
width: 710rpx;
height: 160rpx;
border-bottom:1px solid #e5e5e5;
padding-bottom: 20rpx;
}
.catalog_area .catalog_title .thumbnails{
width: 200rpx;
height:200rpx;
position: absolute;
top:-40rpx;
border:#b0b0b0;
}
.catalog_area .catalog_title .cancel{
width: 40rpx;
height:40rpx;
position: absolute;
top:20rpx;
right:0;
}
.catalog_area .choosed_catalog{
font-size: 0.8em;
}
.catalog_area .info_choose{
width:710rpx;
}
.catalog_area .info_choose .catalog_name{
padding:10rpx 0;
font-weight: bold;
}

.catalog_area .info_choose .catalog_name_desc{
margin-top:10rpx !important;
}
.catalog_area .info_choose .borderTop{
margin-top:25rpx;
border-top:1px solid #e5e5e5;
}
.catalog_area .info_choose .catalog_items{
font-size: 0.8em;
flex-wrap:wrap;
}
.catalog_area .info_choose .catalog_items .catalog_item{
padding:15rpx;
border:1px dashed #b0b0b0;
margin-top:15rpx;
margin-right: 20rpx;
}
.catalog_area .info_choose .catalog_items .active{
border:1px solid #ff6700;
color:#ff6700 !important;
}
.catalog_area .catalog_count{
justify-content:space-between;
height:100rpx;
line-height: 100rpx;
}
.catalog_area .catalog_count .catalog_name{
font-weight: bold;
padding:12.5rpx 0 0 0;
}
.catalog_area .catalog_count .count_control{
margin-top:20rpx;
height:80rpx;
}
.catalog_area .btn_area{
width: 100%;
margin:0 -20rpx;
position: fixed;
bottom: 0;
}
.catalog_area .item_btn {
    display: inline-block;
    width: 80rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    border: 2rpx solid #b0b0b0;
}

.catalog_area .item_num {
    display: inline-block;
    width: 80rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    border-top: 2rpx solid #b0b0b0;
    border-bottom: 2rpx solid #b0b0b0;
    font-size: 28rpx;
    color: #929292;
}
.tab{

width:710rpx;
padding:0 20rpx;
height: 80rpx;
line-height: 80rpx;
}
.tab .tab-content{
display:flex;
flex-direction:row;
justify-content:space-between;
}
.container {
margin-top:25rpx;
}
.tab .btn{
width:353rpx;
color: #888888;
text-align: center;
border-bottom:2rpx solid #f5f5f5;
}
.tab .right_btn{
   border-right:2rpx solid #f5f5f5;
}
.tab .left_btn{
   border-left:2rpx solid #f5f5f5;
}
.tab .active{
color: #ff6700 !important;
border-bottom:4rpx solid #ff6700 !important;
}
.goods_infor_pre {
margin-top: 20rpx;
background-color: #FFF;
padding: 10px;
min-height: 40px;
}
.goods_infor_txt {
position: relative;
padding-left: 50px;
font-size: 13px;
line-height: 18px;
}
.goods_infor_brand {
position: absolute;
width: 40px;
height: 40px;
background-image: url(../../image/brand.png);
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center;
left: 0px;
top: 10px;
}
.goods_infor_raw {
margin-top: 20rpx;
background-color: #FFF;
padding: 10px;
}
.goods_infor_item {
font-size: 13px;
line-height: 18px;
}
.goods_infor_item text {
display: inline-block;
width: 90px;
}
.goods_detail {
padding: 0 10px;
margin-top: 20rpx;
background-color: #FFF;
}
.goods_detail_title {
padding: 10px 0;
font-size: 14px;
}
.goods_bottom {
height: 50px;
}
.goods_bottom_btn {
width: 100%;
position: fixed;
bottom: 0;
height: 50px;
z-index: 99;
background-color: #FFF;
border-top: 1px solid #E5E5E5;
}
.goods_one {
width:50%;
height: 50px;
}
.goods_half_half {
width:50%;
height: 50px;
font-size: 12px;
line-height: 50px;
text-align: center;
color: #FFF;
}
.goods_car_num {
width: 30px;
height: 30px;
margin: 0 auto;
margin-top: 10px;
font-size: 10px;
background-image: url(../../image/car1.png);
background-size: 26px;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.goods_car_num span {
position: absolute;
right: -5px;
display: inline-block;
width: 14px;
height: 14px;
border-radius: 14px;
background-color: #FF0000;
color: #FFF;
text-align: center;
line-height: 14px;
}

　　以上就是小编给大家介绍的微信小程序商品详情页面源代码，希望大家用了小编介绍的微信小程序商品详情页面源代码可以成功的开发微信小程序商品详情页，如果你还想要了解更多关于微信小程序开发代码请关注微信小程序商店微小乔。

　　微信小程序自定义属*有哪些？怎么开发？

　　怎样实现微信小程序搜索优化?

　　微信小程序空格代码，小程序实用代码大全

上一篇：腾讯小程序关键词申请怎么弄？小程序关键词申请有什么作用？

下一篇：附近的小程序功能升级，非管理员也能登录小程序