《微信小程序》
实验三报告
1. 实验名称: 仿京东购物商城
2. 实验目的: 熟悉使用微信小程序开发工具，开发微信小程序项目。仿京东购物商城。首页按分块显示商品。点击“分类”tab，跳转到商品的分类页面。
3. 实验要求: 手工编写的项目。
具体要求：根据列表式布局、多面板布局、标签式布局的实现技术，参照“京东购物”小程序，实现“首页，分类，详细内容”3个页面。
实现这3个页面的布局结构，图片及其位置要保持“京东购物”小程序展示的原样。
(1)粘贴“首页、分类、详细内容”3个页面的显示效果。提供截图。
(2)源代码，包括：每个页面的wxml、wxss、js三个代码文件。还有app.json代码文件。共10个代码文件。
特别要求：不能破坏实验报告的文档格式，否则一律0分处理。
4. 实验结果：?将正确的答案（操作结果的屏幕截图，中文描述的用例描述的步骤）写在本报告上。
首页界面
商品分类界面
搜索界面
- 代码：
-
首页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" }
