0x0、布局实战：写个抠腚优鲜的首页
看那么多，总得练下手，随手找个小程序参(chao)考(xi)下吧，这里选择的是每日优鲜，利用上一节学到的姿势反编译一波，拿下图片素材。如果不知道如何反编译微信小程序，可自行查阅上一节：《我写小程序像菜虚鲲——2、鸡你太美》，反编译后的文件如下：
打开images文件夹，可以看到小程序里用到的一些图标：
试下把反编译后的项目导入到微信开发者工具中，设置记得关下域名检验
这已经不算是开卷考试了，而是拿着参考答案来做题了，行吧，开始干活，实现下这个页面~
① 设置标题与底部tab选项卡
把标题设置为抠腚优鲜，打开app.json 进行如下配置：
"navigationBarTitleText": "抠腚优鲜",
接着是底部tab选项卡，关于tabBar的详细介绍可自行查阅官方文档：
developers.weixin.qq.com/miniprogram…
把反编译后的项目里的images目录直接拷贝到项目中，打开app.json，添加下述配置：
"tabBar": { "color": "#969696", "selectedColor": "#ff4891", "borderStyle": "white", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/tab-bar-home.png", "selectedIconPath": "images/tab-bar-home-active.png" }, { "pagePath": "pages/index/index", "text": "赚钱", "iconPath": "images/tab-bar-group-sign.png", "selectedIconPath": "images/tab-bar-group-sign-active.png" }, { "pagePath": "pages/index/index", "text": "分类", "iconPath": "images/tab-bar-category.png", "selectedIconPath": "images/tab-bar-category-active.png" }, { "pagePath": "pages/index/index", "text": "购物车", "iconPath": "images/tab-bar-cart.png", "selectedIconPath": "images/tab-bar-cart-active.png" }, { "pagePath": "pages/index/index", "text": "我的", "iconPath": "images/tab-bar-mine.png", "selectedIconPath": "images/tab-bar-mine-active.png" } ] },
接着运行看下效果：
② 页面区域划分
写界面之前先划分一下区域，如图，划分成六个：
- ① 顶部栏：定位部分 + 搜索部分
- ② Banner轮播图
- ③ 新人福利
- ④ 信息标签
- ⑤ 商品分类
- ⑥ 悬浮提醒
划分完，接着一个个来实现~
③ 顶部栏
页面结构如下：
<!-- index.wxml --> <view class="container"> <!-- 顶部栏 --> <view class="top-wrapper"> <!-- 定位部分 --> <view class="location_box"> <image class="location_icon" src="{{yx.location_icon_url}}"></image> <image class="express_icon" src="{{yx.express_icon_url}}"></image> </view> <!-- 搜索部分 --> <view class="search-wrapper"> <image class="search_icon" src="{{yx.search_icon_url}}"></image> <text class="search_text">搜索</text> </view> </view> </view>
样式调整顺序如下：
- 定位图片宽高44rpx * 44rpx，快速图片宽高120rpx * 30rpx；
- 搜索字体大小28rxp，字体颜色#969696；
- 顶部栏宽度占满100%，高度88rpx，flex布局，space-between两端占满，垂直居中；
- 定位部分左侧偏移16rpx；
- 搜索部分，flex布局，宽高534rpx * 60rpx，圆角12rpx，背景颜色#f5f5f5，
Item水平居中，垂直居中；
- 搜索部分右侧偏移16rpx；
- 搜索文字右侧偏移16rpx；
对应样式文件如下：
.top-wrapper { display: flex; width: 100%; height: 88rpx; align-items: center; justify-content: space-between; } .location_box { margin-left: 16rpx; } .location_icon { width: 44rpx; height: 44rpx; } .express_icon { width: 120rpx; height: 30rpx; } .search-wrapper { display: flex; width: 534rpx; height: 60rpx; border-radius: 12rpx; background-color: #f5f5f5; align-items: center; justify-content: center; margin-right: 16rpx; } .search_icon { width: 26rpx; height: 26rpx; margin-right: 16rpx; } .search_text { font-size: 28rpx; color: #969696; }
运行结果如下：
