过年有大把的时光，为何一直宅在家里不出家门看着电脑，这究竟是道德的沦丧还是人性的泯灭...这一切都还得从一只蝙蝠说起...
咳咳，好了不皮了，言归正传。微信推出的小程序可谓是轻量又强大，所以最近我也开始了小程序的学习，学了挺多也看了很多文档，但总觉得自己没学到什么，感觉很迷茫。正所谓实践出真知，所以我选择了从高仿别人的小程序开始，选来选去最后选择了京东优选这个小程序(绝对不是因为它的界面清爽！)。
开发工具
效果速览
废话不多说，咱先来搞一波图片看看，点这里查看更多图片
项目结构
这个项目我使用的是普通的开发，把所有的数据都放在了json-server中模拟。
可能很多人会觉得很奇怪，但这是因为我发现easy mock的网站经常打不开请求失败非常的不方便，所以我暂时没有选择mock数据，后期有时间我会把数据挪到easy mock上。
|-jd_recommend 项目名 |-api 模拟数据接口 |-db.json 模拟的数据 |-assets 资源文件 |-icons 图标资源 |-images 图片资源 |-components 组件模块 |-navigationBar 自定义导航栏 |-toast 自定义toast |-stepper 有赞vant步进器组件 |-... 其他小程序所需组件 |-pages 项目页面 |-about 关于页面 |-account 我的订单页面 |-afterMarket 售后类型页面 |-appointment 我的预约页面 |-buy 填写订单信息页面 |-commentDetail 评论详情页面 |-discount 优惠券页面 |-explore 发现页面 |-feedback 反馈页面 |-fix 售后页面 |-goodsDetail 值得买优惠详情页面 |-index 首页 |-jd 京东商品详情页面 |-login 登录页面 |-orderDetail 订单详情页面 |-seller 客服页面 |-service 退换/售后页面 |-shopCart 购物车页面 |-user 个人中心页面 |-style 公共样式 |-comment.wxss 评论区样式 |-goodsCard.wxss 商品卡片样式 |-nav.wxss 导航栏样式 |-orderCard.wxss 订单卡片样式 |-popright.wxss 筛选框样式 |-popup.wxss 上拉菜单样式 |-utils 公共模块 |-util.js promise封装接口 app.js 全局js app.json 全局json配置 app.wxss 全局wxss
自定义组件
大部分人写小程序肯定要涉及修改navigationBar的title，微信小程序开发内置了这个组件，可以直接在app.json中配置。但是，自带的navigationBar的样子是固定的，你肯定见过长成下面这样的navigationBar：
相比平时常见的navigationBar，它左上角多了一个返回主页的按钮，这对于有多级页面的小程序来说是非常必要的，不然访问的层级太深用户不知道怎么返回主页。然而，小程序开发自带并没有这个样子的，好在可以自定义，接下来我们就来自定义一个。
navigationBar
首先，我们构建一下页面的结构：
<!-- components/navigationBar/index.wxml --> <view> <!-- 导航栏 中间的标题 --> <view>{{navbarData.title}}</view> <view> <!-- 导航栏 左上角的返回按钮和home按钮 --> <!-- 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示 --> <view wx:if='{{navbarData.showCapsule}}'> <!-- 左上角的返回按钮，wx:if='{{!share}}'空制返回按钮显示 --> <view bindtap='_navback'> <image src='' mode='aspectFill'></image> </view> <view wx:if='{{!share}}'></view> <view bindtap='_backhome'> <image src='' mode='aspectFill'></image> </view> </view> </view> </view>
这就是一个很普通的页面结构，值得注意的是，它的高度是根据获取的设备的高度来确定的。
接下来又到了切图仔上线的时候了(误)：
/* components/navigationBar/index.wxss */ /* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */ .nav-wrap { position: fixed; width: 100%; top: 0; background: #fff; color: #000; z-index: 9999999; border-bottom: 1rpx solid #EFEFF4; } /* 标题要居中 */ .nav-title { position: absolute; text-align: center; max-width: 400rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 36rpx; color: #2c2b2b; /* font-weight: 600; */ } .nav-capsule { display: flex; align-items: center; margin-left: 30rpx; width: 140rpx; justify-content: space-between; height: 100%; } .navbar-v-line { width: 1px; height: 32rpx; background-color: #e5e5e5; } .back-pre, .back-home { width: 32rpx; height: 36rpx; margin-top: 4rpx; padding: 10rpx; } .nav-capsule .back-home { width: 36rpx; height: 40rpx; margin-top: 3rpx; }