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

《微信小程序》

实验三报告

1. 实验名称: 仿京东购物商城

2. 实验目的: 熟悉使用微信小程序开发工具，开发微信小程序项目。仿京东购物商城。首页按分块显示商品。点击“分类”tab，跳转到商品的分类页面。

3. 实验要求: 手工编写的项目。

具体要求：根据列表式布局、多面板布局、标签式布局的实现技术，参照“京东购物”小程序，实现“首页，分类，详细内容”3个页面。

实现这3个页面的布局结构，图片及其位置要保持“京东购物”小程序展示的原样。

(1)粘贴“首页、分类、详细内容”3个页面的显示效果。提供截图。

(2)源代码，包括：每个页面的wxml、wxss、js三个代码文件。还有app.json代码文件。共10个代码文件。

特别要求：不能破坏实验报告的文档格式，否则一律0分处理。

4. 实验结果： 将正确的答案（操作结果的屏幕截图，中文描述的用例描述的步骤）写在本报告上。

首页界面

商品分类界面

搜索界面

• 代码：

• 首页wxml：
  
  
  
  
    
  
      
  
      
  
      
  
      搜索
  
    
  
    
  
    
  
      
  
      {{item}}
  
    
  
    
  
    
  
  
  
   
  
   
  
    
  
    
  
      
  
        
  
      
  
    
  
  
  
   
  
  
  
  
  
  
  
    
  
      
  
        
  
          
  
        
  
        
  
          {{item.name}}
  
        
  
      
  
    
  
  
  
  
  
    
  
  
  
  
  
  
  
  
  
    京东秒杀
  
    
  
    9.9元抢翻天
  
    ＞
  
    
  
    
  
    
  
      
  
        
  
          
  
          
  
          {{item.name}}
  
        
  
        
  
      
  
    
  
  
  
  
  
  
  
  首页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:
  
  
    
  
      
  
      手机x
  
    
  
    
  
      综合
  
      销量
  
      价格
  
      小时达
  
    
  
    
  
      京东物流
  
      新品
  
      品牌
  
      拍拍二手
  
      筛选
  
    
  
    
  
      
  
      
  
      
  
        {{item.goodstitle}}
  
        
  
           {{item.chicun}}英寸
  
          {{item.neicun}}GB内存
  
        
  
      ￥{{item.price}}
  
      
  
          {{item.pingjia}}条评价
  
          {{item.haoping}}好评
  
      
  
      
  
        {{item.dianpu}}
  
        进店
  
      
  
    
  
    
  
    
  
   
  
  
  
  
  
  搜索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
  
  
  
  
  
  
  
  
  
  
  
  
    
  
      
  
      
  
        
  
          {{item}}
  
        
  
      
  
    
  
    
  
      
  
      
  
        
  
        热门搜索
  
      
  
      
  
    
  
      
  
        
  
          
  
          
  
           
  
            {{item.name}}
  
          
  
          
  
         
  
        
  
      
  
    
  
  
  
    
  
  
  
  
  
  商品分类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"
  
  }