微信小程序—仿写京东购物商城带源码

商品分类界面 

搜索界面 

代码：

首页wxml：
<!--顶部搜素框-->
 
<view class="search">
 
  <view class="searchlong">
 
    <image class="searchico" src="/images/index/16.png"></image>
 
    <input class="searchkuang" type="text" placeholder="窗帘遮光"/>
 
    <image class="photoico" src="/images/index/17.png"></image>
 
    <button class="searchbutton">搜索</button>
 
  </view>
 
  <image class="doudou" src="/images/index/15.jpg"></image>
 
  <view class="daohanglan">
 
    <block wx:for="{{daohang}}">
 
    <text class="daohangstyle">{{item}}</text>
 
  </block>
 
  <image class="xiala" src="/images/index/18.png"></image>
 
  </view>
 
</view>
 
 <!--顶部轮播图-->
 
 <view class="luobotu">
 
  <swiper autoplay="{{autoplay}}" interval="{{interval}}">
 
  <block wx:for="{{imgUrls}}">
 
    <swiper-item>
 
      <image class = "lunboimg" src="{{item}}"></image>
 
    </swiper-item>
 
  </block>
 
</swiper>
 
 </view>
 
 
 
<!--10个京东图标-->
 
<view class="content">
 
  <block wx:for="{{elements}}">
 
    <view class="content-item">
 
      <view>
 
        <image src="{{item.image}}" style="width:86rpx;height:78rpx;"></image>
 
      </view>
 
      <view>
 
        {{item.name}}
 
      </view>
 
    </view>
 
  </block>
 
</view>
 
<view class="shenquan">
 
  <image class="shenquanimg" src="/images/index/11.jpg"></image>
 
</view>
 
<!--商品展示-->
 
<view class="hr"></view>
 
<view class="footer">
 
  <text class="jd">京东秒杀</text>
 
  <image class="footerimg" src="/images/index/12.png"></image>
 
  <text class="wenzi">9.9元抢翻天</text>
 
  <text class="jiantou">＞</text>
 
  
 
  <view class="content1">
 
  <block wx:for="{{elements2}}">
 
    <view class="botton">
 
      <view>
 
        <image src="{{item.image}}" style="width:170rpx;height:200rpx;"></image>
 
        <text class="money">
 
        {{item.name}}
 
      </text>
 
      </view>
 
    </view>
 
  </block>
 
</view>
 
</view>
 
 

首页wxss:
/*顶部图片大小*/
 
swiper image {
 
  width: 100%;
 
  height: 300rpx;
 
}
 
.search{
 
  position: absolute;
 
  width: 750rpx;
 
  height: 300rpx;
 
  background-color: #FF0000;
 
  
 
}
 
.kongge{
 
  width: 20px;
 
  height: 20px;
 
}
 
.searchbutton{
 
  background-color: rgb(201,52,35);
 
  width: 50px;
 
  height: 55rpx;
 
  margin-top: 2rpx;
 
  border-radius: 10px 10px 10px 10px;
 
  font-size: 9px;
 
  color: #f4f5f6;
 
}
 
.doudou{
 
  width: 60rpx;
 
  height:60rpx;
 
  position: absolute;
 
  right: 20rpx;
 
  top: 5rpx;
 
}
 
.searchico{
 
  margin-top: 5px;
 
  margin-left: 10px;
 
  margin-right: 7px;
 
  width: 20px;
 
  height: 20px;
 
  border-radius: 10px 10px 10px 10px;
 
}
 
.daohanglan{
 
  position: relative;
 
  top: 5px;
 
}
 
.luobotu{
 
  position: relative;
 
  top: 70px;
 
}
 
.shenquan{
 
  margin-top: 23px;
 
  width: auto;
 
  height: 130rpx;
 
}
 
.shenquanimg{
 
  margin-left: 20rpx;
 
  margin-right: 20rpx;
 
  height: 130rpx;
 
  width: 700rpx;
 
}
 
.lunboimg{
 
  height: 100px;
 
  width: 700rpx;
 
  margin-left: 25rpx;
 
  margin-right: 25rpx;
 
  border-radius: 10px 10px 10px 10px;
 
}
 
.xiala{
 
  position: relative;
 
  top: 5px;
 
  right: 0px;
 
  width: 20px;
 
  height: 20px;
 
 
 
}
 
.daohangstyle{
 
  font-size: 13px;
 
  color: #f4f5f6;
 
  margin: 17rpx;
 
}
 
.photoico{
 
  margin-top: 5px;
 
  margin-left: 10px;
 
  margin-right: 2px;
 
  width: 20px;
 
  height: 20px;
 
  border-radius: 10px 10px 10px 10px;
 
}
 
.searchkuang{
 
  font-size: 12px;
 
  width: 335rpx;
 
  height: 30px;
 
}
 
.searchlong{
 
  position: relative;
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
  width: 640rpx;
 
  height: 25px;
 
  border-radius: 20px 20px 20px 20px;
 
  font-weight: 100;
 
  background-color: #f4f5f6;
 
  left: 20rpx;
 
}
 
/*10个京东图标外部容器布局*/
 
.content {
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
  position: relative;
 
  top: 20px;
 
}
 
/*10个京东图标内部容器样式*/
 
.content-item {
 
  width: 20%;
 
  text-align: center;
 
  font-size: 24rpx;
 
  margin: 8rpx 0;
 
}
 
/*分割线样式*/
 
.hr {
 
  width: 100%;
 
  height: 30rpx;
 
  background-color: #f4f5f6;
 
}
 
.content1{
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
  height: 400rpx;
 
}
 
/*页面底部外部容器布局
 
.footer {
 
  display: flex;
 
  flex-direction: row;
 
  justify-content: space-between;
 
  padding: 20rpx 40rpx;
 
}*/
 
/*"京东拼购"字体样式*/
 
.jd {
 
  margin: 20rpx;
 
}
 
.footerimg{
 
  margin-top: 20rpx;
 
  width: 200rpx;
 
  height: 50rpx;
 
}
 
.wenzi {
 
  margin-left: 130rpx;
 
  font-size: 12px;
 
  color: darkgrey;
 
}
 
.jiantou{
 
  font-size: 20px;
 
  margin-top: 20rpx;
 
  position: absolute;
 
  right: 0rpx;
 
  font-weight: bolder;
 
}
 
.botton{
 
  margin-top: 10rpx;
 
  width: 150rpx;
 
  margin-left: 10rpx;
 
  margin-right: 10rpx;
 
  height: 230rpx;
 
}
 
.money{
 
  color: #FF0000;
 
  font-size: 14px;
 
  font-weight: bolder;
 
}
 

 
首页js：
Page({
 
  data: {
 
    autoplay: true,
 
    interval: 5000,
 
    imgUrls: [
 
      "/images/haibao/haibao-1.png",
 
      "/images/haibao/haibao-3.jpg",
 
      "/images/haibao/haibao-2.png"
 
    ],
 
    daohang: [
 
      "首页",
 
      "补贴爆品",
 
      "女鞋",
 
      "宠物",
 
      "爱车",
 
      "箱包皮具"
 
    ],
 
    elements: [{
 
        image: "/images/index/1.png",
 
        name: "京东超市",
 
      }, {
 
        image: "/images/index/2.png",
 
        name: "京东家电",
 
      },
 
      {
 
        image: "/images/index/3.png",
 
        name: " 京东服饰",
 
      },
 
      {
 
        image: "/images/index/4.png",
 
        name: "京东手机",
 
      },
 
      {
 
        image: "/images/index/5.png",
 
        name: "京喜",
 
      },
 
      {
 
        image: "/images/index/6.jpg",
 
        name: "一元疯抢",
 
      }, {
 
        image: "/images/index/7.jpg",
 
        name: "领京豆",
 
      }, {
 
        image: "/images/index/8.jpg",
 
        name: "   领优惠券",
 
      }, {
 
        image: "/images/index/9.jpg",
 
        name: "免费水果",
 
      }, {
 
        image: "/images/index/10.jpg",
 
        name: "充值中心",
 
      },
 
    ],
 
    elements2: [{
 
      image: "/images/index/19.jpg",
 
      name: "京东超市",
 
    }, {
 
      image: "/images/index/20.jpg",
 
      name: "京东家电",
 
    },
 
    {
 
      image: "/images/index/21.jpg",
 
      name: " 京东服饰",
 
    },
 
    {
 
      image: "/images/index/22.jpg",
 
      name: " 京东服饰",
 
    },
 
  ],
 
  }
 
})

 
搜索wxml:
<view class="total">
 
  <view class="search">
 
    <image class="searchicon" src="/images/index/45.png"></image>
 
    <view class="searchtext">手机x</view>
 
  </view>
 
  <view class="tiaojian">
 
    <view class="zonghe">综合<image class="xiala" src="/images/index/46.png"></image></view>
 
    <view class="xiaoliang">销量</view>
 
    <view class="price">价格<image class="priceimg" src="/images/index/47.png" ></image></view>
 
    <view class="hour"><image class="houtimg" src="/images/index/48.png" ></image>小时达</view>
 
  </view>
 
  <view class="biaoji">
 
    <view class="bggray">京东物流</view>
 
    <view class="bggray">新品</view>
 
    <view class="bggray">品牌<image class="pinpai" src="/images/index/46.png"></image></view>
 
    <view class="bggray">拍拍二手</view>
 
    <view class="choose">筛选<image class="shalou" src="/images/index/49.png"></image></view>
 
  </view>
 
  <block wx:for="{{elements}}">
 
    <view class="goodsbox1">
 
    <image class="iponeimg" src="{{item.image}}"></image>
 
    <view class="goodstext">
 
      <view class="goodstitle">{{item.goodstitle}}</view>
 
      <view class="canshu">
 
        <view class="goodscanshu1"> {{item.chicun}}英寸</view>
 
        <view class="goodscanshu1">{{item.neicun}}GB内存</view>
 
      </view>
 
    <view class="goodsprice">￥{{item.price}}</view>
 
    <view class="goodsbox">
 
        <view class="pingjia">{{item.pingjia}}条评价</view>
 
        <view class="pingjia">{{item.haoping}}好评</view>
 
    </view>
 
    <view class="goodsbox">
 
      <view class="pingjia">{{item.dianpu}}</view>
 
      <view class="jindian">进店<image style="width: 16rpx;height: 16rpx;" src="/images/index/50.png"></image></view>
 
    </view>
 
  </view>
 
  </view>
 
  </block>
 
 
 
</view>

 
搜索wxss:
/* page/jd-goods/jd-goods.wxss */
 
.search{
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
  margin: 20rpx;
 
  width: 720rpx;
 
  height: 80rpx;
 
  background-color: lightgray;
 
  border-radius: 40rpx 40rpx 40rpx 40rpx;
 
}
 
.searchtext{
 
  text-align: center;
 
  background-color: gray;
 
  font-size: 12px;
 
  height: 30rpx;
 
  border-radius: 30rpx 30rpx 30rpx 30rpx;
 
  padding: 20rpx 20rpx;
 
  padding-top: 10rpx;
 
  margin-top: 10rpx;
 
  color: aliceblue;
 
}
 
.searchicon{
 
  width: 50rpx;
 
  height: 50rpx;
 
  margin-top: 15rpx;
 
  margin-left: 20rpx;
 
}
 
 
 
.tiaojian{
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
}
 
.zonghe{
 
  height: 80rpx;
 
  font-size: 14px;
 
  margin-left: 50rpx;
 
  margin-right: 50rpx;
 
  margin-top: 10rpx;
 
}
 
.xiala{
 
  position: relative;
 
  top: 15rpx;
 
  width: 50rpx;
 
  height: 50rpx;
 
}
 
.xiaoliang{
 
  font-weight: bolder;
 
  height: 80rpx;
 
  font-size: 14px;
 
  margin-left: 50rpx;
 
  margin-right: 50rpx;
 
  margin-top: 25rpx;
 
}
 
.price{
 
  font-weight: bolder;
 
  height: 80rpx;
 
  font-size: 14px;
 
  margin-left: 50rpx;
 
  margin-right: 50rpx;
 
  margin-top: 25rpx;
 
  color: darkgrey;
 
}
 
.priceimg{
 
  width: 20rpx;
 
  height: 20rpx;
 
}
 
.hour{
 
  font-weight: bolder;
 
  height: 80rpx;
 
  font-size: 14px;
 
  font-style: oblique;
 
  margin-left: 30rpx;
 
  margin-top: 25rpx;
 
}
 
.houtimg{
 
  position: relative;
 
  top: 10rpx;
 
  width: 40rpx;
 
  height: 40rpx;
 
}
 
.biaoji{
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
}
 
.bggray{
 
  text-align: center;
 
  background-color: lightgray;
 
  font-size: 12px;
 
  height: 30rpx;
 
  border-radius: 30rpx 30rpx 30rpx 30rpx;
 
  padding: 20rpx 20rpx;
 
  padding-top: 10rpx;
 
  margin-left: 30rpx;
 
}
 
.pinpai{
 
  width: 30rpx;
 
  height: 30rpx;
 
}
 
.shalou{
 
  width: 30rpx;
 
  height: 30rpx;
 
}
 
.choose{
 
  position: relative;
 
  top: 6rpx;
 
  text-align: center;
 
  height: 60rpx;
 
  font-size: 14px;
 
  box-shadow:-0.5px 0px 0px 0px gray ;
 
  padding-left: 10rpx;
 
}
 
.iponeimg{
 
  height: 300rpx;
 
  width: 300rpx;
 
  border-radius: 20rpx 20rpx 20rpx 20rpx;
 
}
 
.goodsbox1{
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
  margin-top: 20rpx;
 
}
 
.goodsbox{
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
}
 
.goodstext{
 
  
 
  margin-left: 10rpx;
 
  width: 430rpx;
 
  height: 300rpx;
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
}
 
.goodstitle{
 
  font-weight: bolder;
 
  font-size: 12px;
 
}
 
.goodsprice{
 
  color: red;
 
  font-weight: 600;
 
  font-size: 14px;
 
  width: 400rpx;
 
}
 
.canshu{
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
  width: 400rpx;
 
}
 
.goodscanshu1{
 
  font-weight: bolder;
 
  text-align: center;
 
  height: 25rpx;
 
  border-radius: 15rpx 15rpx 15rpx 15rpx;
 
  font-size: 8px;
 
  color: gray;
 
  background-color: lightgrey;
 
  padding: 5rpx;
 
  margin-top: 20rpx;
 
  margin-bottom: 20rpx;
 
  margin-left: 0rpx;
 
  margin-right: 10rpx;
 
}
 
.pingjia{
 
  font-size: 8px;
 
  color: gray;
 
  margin-right: 20rpx;
 
}
 
.jindian{
 
  font-size: 8px;
 
  font-weight: bolder;
 
}

 
搜索js:
Page({
 
  data: {
 
    elements: [{
 
      image:"/images/index/51.jpg",
 
      goodstitle:"华为HMS超薄便宜智能手机学生价游戏长续航大屏百元机",
 
      neicun:"8",
 
      chicun:"6.6",
 
      price:"599.00",
 
      pingjia:"5000+",
 
      haoping:"97%",
 
      dianpu:"百事乐手机官方旗舰店",
 
    }, {
 
      image:"/images/index/52.jpg",
 
      goodstitle:"荣耀Play5T Pro 6400万双摄6.6英寸全视屏22.5W超级快充4000mAh大电池",
 
      neicun:"8",
 
      chicun:"6.6",
 
      price:"1099.00",
 
      pingjia:"20万+",
 
      haoping:"96%",
 
      dianpu:"荣耀京东自营旗舰店",
 
    },
 
    {
 
      image:"/images/index/53.jpg",
 
      goodstitle:"荣耀Play5 活力版 66W超级快充 120Hz全速屏 6400万超清摄像 全网通版8GB+128GB",
 
      neicun:"8",
 
      chicun:"6.67",
 
      price:"599.00",
 
      pingjia:"5万+",
 
      haoping:"97%",
 
      dianpu:"百事乐手机官方旗舰店",
 
    },
 
  ],
 
  }
 
})

商品分类wxml
<!--分割线-->
 
<view class="hr"></view>
 
<!--输入框-->
 
<input placeholder="请输入商品名称"></input>
 
<view class="hr"></view>
 
<view class="content">
 
  <view class="left">
 
    <!--左侧部分-->
 
    <scroll-view scroll-y="true">
 
      <block wx:for="{{list}}">
 
        <view class="cedaohang">{{item}}</view>
 
      </block>
 
    </scroll-view>
 
  </view>
 
  <view class="right">
 
    <!--右侧部分-->
 
    <view class="order">
 
      <!--分类部分-->
 
      <view>热门搜索</view>
 
    </view>
 
    <view class="content1">
 
  <block wx:for="{{elements}}">
 
    <view class="botton">
 
      <view>
 
        <image class="img" bindtap="clickchoose" src="{{item.image}}"></image>
 
        <view class="texts">
 
         <text class="money">
 
          {{item.name}}
 
        </text>
 
        </view>
 
       
 
      </view>
 
    </view>
 
  </block>
 
</view>
 
  </view>
 
</view>

商品分类wxss:
/*分割线样式*/
 
.hr {
 
  border: 1px solid #EEE9E9;
 
  width: 100%;
 
  opacity: 0.6;
 
}
 
/*输入框样式*/
 
input {
 
  margin: 15rpx 30rpx;
 
  border: 1px solid #ccc;
 
  border-radius: 50rpx;
 
  text-align: center;
 
  font-size: 32rpx;
 
}
 
/*布局样式*/
 
.content {
 
  display: flex;
 
  flex-direction: row;
 
}
 
/*左边样式*/
 
.left {
 
  width: 25%;
 
  font-size: 30rpx;
 
}
 
scroll-view {
 
  height: 90%;
 
}
 
/*左边元素样式*/
 
.left view {
 
  text-align: center;
 
  height: 100rpx;
 
  line-height: 100rpx;
 
}
 
/*右边样式*/
 
.right {
 
  width: 75%;
 
}
 
/*分类样式*/
 
.order {
 
  display: flex;
 
  flex-direction: row;
 
  text-align: center;
 
  padding: 20 rpx;
 
}
 
.order view {
 
  width: 33%;
 
  font-size: 32rpx;
 
}
 
.content1{
 
  display: flex;
 
  flex-direction: row;
 
  flex-wrap: wrap;
 
  height: 400rpx;
 
}
 
.cedaohang{
 
  color: gray
 
}
 
.botton{
 
  text-align: center;
 
  margin-left: 10px;
 
  width: 150rpx;
 
}
 
.texts{
 
  width: 150rpx;
 
  text-align: center;
 
}
 
.img{
 
  height: 140rpx;
 
  width: 100rpx;
 
}
 
.money{
 
  width: 150rpx;
 
  text-align: center;
 
  font-size: 12px;
 
  margin-left: 40px;
 
}
 

 
商品分类js：
Page({
 
  data: {
 
    list: ["热搜推荐", "食品酒水", "生鲜果蔬", "美妆护肤", "个护清洁", "精品男装", "精品女装", "内衣配饰", "鞋靴箱包", "手机数码", "家用电器", "电脑办公", "运动户外"],
 
    elements: [{
 
      image: "/images/index/31.png",
 
      name: "手机",
 
    }, {
 
      image: "/images/index/32.png",
 
      name: "冰箱",
 
    },
 
    {
 
      image: "/images/index/33.png",
 
      name: " 华为",
 
    },
 
    {
 
      image: "/images/index/34.jpg",
 
      name: "白酒",
 
    },
 
    {
 
      image: "/images/index/35.jpg",
 
      name: "电饭煲",
 
    },
 
    {
 
      image: "/images/index/36.jpg",
 
      name: "电风扇",
 
    }, {
 
      image: "/images/index/37.jpg",
 
      name: "方便面",
 
    }, {
 
      image: "/images/index/38.png",
 
      name: "   空调",
 
    }, {
 
      image: "/images/index/39.png",
 
      name: "口红",
 
    }, {
 
      image: "/images/index/40.jpg",
 
      name: "蓝牙耳机",
 
    },{
 
      image: "/images/index/41.png",
 
      name: "   跑步鞋",
 
    }, {
 
      image: "/images/index/42.jpg",
 
      name: "平板电视",
 
    }, {
 
      image: "/images/index/43.jpg",
 
      name: "洗衣机",
 
    },{
 
      image: "/images/index/44.jpg",
 
      name: "香水",
 
    },
 
  ],
 
  },
 
  clickchoose:function(){
 
    wx.navigateTo({
 
      url: '../jd-goods/jd-goods',
 
    })
 
  }
 
})
 
 
 
App.json：
{
 
  "pages": [
 
    "pages/jd-index/jd-index",
 
    "page/jd-fenlei/jd-fenlei",
 
    "page/jd-goods/jd-goods"
 
    
 
    
 
  ],
 
  "window": {
 
    "backgroundTextStyle": "light",
 
    "navigationBarBackgroundColor": "#FF0000",
 
    "navigationBarTitleText": "京东购物",
 
    "navigationBarTextStyle": "white"
 
  },
 
  "tabBar": {
 
    "color": "#4D4D4D",
 
    "selectedColor": "#FF0000",
 
    "borderStyle": "black",
 
    "list": [
 
      {
 
        "selectedIconPath": "icon/index0.png",
 
        "iconPath": "icon/index.png",
 
        "pagePath": "pages/jd-index/jd-index",
 
        "text": "首页"
 
      },
 
      {
 
        "selectedIconPath": "icon/sort0.png",
 
        "iconPath": "icon/sort.png",
 
        "pagePath": "page/jd-fenlei/jd-fenlei",
 
        "text": "分类"
 
      },
 
      {
 
        "selectedIconPath": "icon/shop0.png",
 
        "iconPath": "icon/shop.png",
 
        "pagePath": "pages/jd-index/jd-index",
 
        "text": "购物圈"
 
      },
 
      {
 
        "selectedIconPath": "icon/cart0.png",
 
        "iconPath": "icon/cart.png",
 
        "pagePath": "pages/jd-index/jd-index",
 
        "text": "购物车"
 
      },
 
      {
 
        "selectedIconPath": "icon/me0.png",
 
        "iconPath": "icon/me.png",
 
        "pagePath": "pages/jd-index/jd-index",
 
        "text": "我的"
 
      }
 
    ]
 
  },
 
  "sitemapLocation": "sitemap.json"
 
}
 

结尾：

    源码成品获取：v18634371151