《微信小程序》
实验三报告
1. 实验名称:仿京东购物商城
2. 实验目的:熟悉使用微信小程序开发工具，开发微信小程序项目。仿京东购物商城。首页按分块显示商品。点击“分类”tab，跳转到商品的分类页面。
3. 实验要求:手工编写的项目。
具体要求：根据列表式布局、多面板布局、标签式布局的实现技术，参照“京东购物”小程序，实现“首页，分类，详细内容”3个页面。
实现这3个页面的布局结构，图片及其位置要保持“京东购物”小程序展示的原样。
(1)粘贴“首页、分类、详细内容”3个页面的显示效果。提供截图。
(2)源代码，包括：每个页面的wxml、wxss、js三个代码文件。还有app.json代码文件。共10个代码文件。
特别要求：不能破坏实验报告的文档格式，否则一律0分处理。
4. 实验结果：将正确的答案（操作结果的屏幕截图，中文描述的用例描述的步骤）写在本报告上。
首页界面
商品分类界面
搜索界面
代码：
首页wxml：<!--顶部搜素框--><viewclass="search"><viewclass="searchlong"><imageclass="searchico"src="/images/index/16.png"></image><inputclass="searchkuang"type="text"placeholder="窗帘遮光"/><imageclass="photoico"src="/images/index/17.png"></image><buttonclass="searchbutton">搜索</button></view><imageclass="doudou"src="/images/index/15.jpg"></image><viewclass="daohanglan"><blockwx:for="{{daohang}}"><textclass="daohangstyle">{{item}}</text></block><imageclass="xiala"src="/images/index/18.png"></image></view></view><!--顶部轮播图--><viewclass="luobotu"><swiperautoplay="{{autoplay}}"interval="{{interval}}"><blockwx:for="{{imgUrls}}"><swiper-item><imageclass="lunboimg"src="{{item}}"></image></swiper-item></block></swiper></view><!--10个京东图标--><viewclass="content"><blockwx:for="{{elements}}"><viewclass="content-item"><view><imagesrc="{{item.image}}"style="width:86rpx;height:78rpx;"></image></view><view>{{item.name}}</view></view></block></view><viewclass="shenquan"><imageclass="shenquanimg"src="/images/index/11.jpg"></image></view><!--商品展示--><viewclass="hr"></view><viewclass="footer"><textclass="jd">京东秒杀</text><imageclass="footerimg"src="/images/index/12.png"></image><textclass="wenzi">9.9元抢翻天</text><textclass="jiantou">＞</text><viewclass="content1"><blockwx:for="{{elements2}}"><viewclass="botton"><view><imagesrc="{{item.image}}"style="width:170rpx;height:200rpx;"></image><textclass="money">{{item.name}}</text></view></view></block></view></view>首页wxss:/*顶部图片大小*/swiperimage{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:10px10px10px10px;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:10px10px10px10px;}.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:10px10px10px10px;}.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:10px10px10px10px;}.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:20px20px20px20px;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:8rpx0;}/*分割线样式*/.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:20rpx40rpx;}*//*"京东拼购"字体样式*/.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:<viewclass="total"><viewclass="search"><imageclass="searchicon"src="/images/index/45.png"></image><viewclass="searchtext">手机x</view></view><viewclass="tiaojian"><viewclass="zonghe">综合<imageclass="xiala"src="/images/index/46.png"></image></view><viewclass="xiaoliang">销量</view><viewclass="price">价格<imageclass="priceimg"src="/images/index/47.png"></image></view><viewclass="hour"><imageclass="houtimg"src="/images/index/48.png"></image>小时达</view></view><viewclass="biaoji"><viewclass="bggray">京东物流</view><viewclass="bggray">新品</view><viewclass="bggray">品牌<imageclass="pinpai"src="/images/index/46.png"></image></view><viewclass="bggray">拍拍二手</view><viewclass="choose">筛选<imageclass="shalou"src="/images/index/49.png"></image></view></view><blockwx:for="{{elements}}"><viewclass="goodsbox1"><imageclass="iponeimg"src="{{item.image}}"></image><viewclass="goodstext"><viewclass="goodstitle">{{item.goodstitle}}</view><viewclass="canshu"><viewclass="goodscanshu1">{{item.chicun}}英寸</view><viewclass="goodscanshu1">{{item.neicun}}GB内存</view></view><viewclass="goodsprice">￥{{item.price}}</view><viewclass="goodsbox"><viewclass="pingjia">{{item.pingjia}}条评价</view><viewclass="pingjia">{{item.haoping}}好评</view></view><viewclass="goodsbox"><viewclass="pingjia">{{item.dianpu}}</view><viewclass="jindian">进店<imagestyle="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:40rpx40rpx40rpx40rpx;}.searchtext{text-align:center;background-color:gray;font-size:12px;height:30rpx;border-radius:30rpx30rpx30rpx30rpx;padding:20rpx20rpx;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:30rpx30rpx30rpx30rpx;padding:20rpx20rpx;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.5px0px0px0pxgray;padding-left:10rpx;}.iponeimg{height:300rpx;width:300rpx;border-radius:20rpx20rpx20rpx20rpx;}.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:15rpx15rpx15rpx15rpx;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:"荣耀Play5TPro6400万双摄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<!--分割线--><viewclass="hr"></view><!--输入框--><inputplaceholder="请输入商品名称"></input><viewclass="hr"></view><viewclass="content"><viewclass="left"><!--左侧部分--><scroll-viewscroll-y="true"><blockwx:for="{{list}}"><viewclass="cedaohang">{{item}}</view></block></scroll-view></view><viewclass="right"><!--右侧部分--><viewclass="order"><!--分类部分--><view>热门搜索</view></view><viewclass="content1"><blockwx:for="{{elements}}"><viewclass="botton"><view><imageclass="img"bindtap="clickchoose"src="{{item.image}}"></image><viewclass="texts"><textclass="money">{{item.name}}</text></view></view></view></block></view></view></view>商品分类wxss:/*分割线样式*/.hr{border:1pxsolid#EEE9E9;width:100%;opacity:0.6;}/*输入框样式*/input{margin:15rpx30rpx;border:1pxsolid#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%;}/*左边元素样式*/.leftview{text-align:center;height:100rpx;line-height:100rpx;}/*右边样式*/.right{width:75%;}/*分类样式*/.order{display:flex;flex-direction:row;text-align:center;padding:20rpx;}.orderview{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"}
