一、最近学习小程序的设计，于是仿做了一款类似商城的微信小程序(纯前端，没有接入后台)，本次先说明整体规划布局
刚接触小程序设计，于是仿照一个商城的小程序，做了一个demo，代码已上传到github，有兴趣的小伙伴可以下载并star一下哦（引用请注明出处，谢谢）！
git地址：https://github.com/736755244/FlowerHouse
二、整体设计，不涉及具体代码（之后会分块进行详细的代码说明）
1、底部导航条tabbar，一般3~4个，本次我们设计四部分：首页、店铺、预约、我的(个人中心)
2、目录结构
3、我们打开app.json，写入对应的基础设置（相关注释见以下代码）
示例代码如下：
{//注意，app.json中不能写注释，否则报错
"pages": [
"pages/index/index",//首页
"pages/custom/custom",//店铺
"pages/booking/index/booking",//预约
"pages/user/user"//我的
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",//顶部导航条的背景颜色
"navigationBarTitleText": "zm的微信小程序",//顶部页面名称（默认）
"navigationBarTextStyle": "black"//顶部导航条的文字颜色
},
"sitemapLocation": "sitemap.json",
"tabBar": {//底部导航条相关设置
"backgroundColor": "#fff",//背景颜色
"color": "#666",/文字颜色
"selectedColor": "#F5B43E",//选中时的颜色
"list": [//四个导航
{
"pagePath": "pages/index/index",//页面路径
"iconPath": "images/icon/1.png",//未选中时的图片(图片可没有)
"selectedIconPath": "images/icon/1_1.png",//选中时的图片
"text": "首页"//导航名称
},
{
"pagePath": "pages/custom/custom",
"iconPath": "images/icon/2.png",
"selectedIconPath": "images/icon/2_1.png",
"text": "店铺"
},
{
"pagePath": "pages/booking/index/booking",
"iconPath": "images/icon/3.png",
"selectedIconPath": "images/icon/3_1.png",
"text": "预约"
},
{
"pagePath": "pages/user/user",
"iconPath": "images/icon/4.png",
"selectedIconPath": "images/icon/3_1.png",
"text": "我的"
}
]
}
}4、在pages下新建四个文件夹，对应配置好的四个导航，注意路径要匹配
每个文件目录下新建4个文件：.js/.json/.wxml/.wxss（除了json之外，其它与我们一般构件网站的方式一致）
①js文件中主要用于处理页面的一些操作逻辑、请求接口、获取数据（类似于一般的js文件）；
②json文件主要用于配置页面的公共样式、配置引入的组件等；
③wxml主要用于画页面（类似于html文件）；
④wxss主要用于写页面的样式（类似于css文件）
5、相关语法和官方组件可以参照官方文档，地址为：https://developers.weixin.qq.com/miniprogram/dev/framework/
6、整体设计如下（图比较长，压缩了一下）：
- 首页大致分为：搜索框、滚动的banner、图文介绍、店长信息等
- 店铺页面介绍大致分为：店铺信息介绍、室内照片、养花文章、店铺的人员信息等
- 预约页面大致分为：顶部tab选项卡，商品简略信息，商品详细信息、可点击预定（预定之后进入订单部分，之前的文章详细说明）
- 我的页面大致分为：用户信息、订单信息、最新的物流消息/订单信息
- 订单页面大致分为：全部订单、订单状态管理、订单详情、取消订单等
下面做出几点基础说明和注意点：
①页面布局最好采用flex布局，优点不必多说，省去了浮动的困扰，对这种横向、纵向的模块排版有着很好的效果
②小程序中背景图属性(background-iamge不支持本地图片，可以采用网络图片或者转成base64)
③顶部搜索框采用搜索控件SearchBar（可自行搜索，有多种样式、多种功能的demo）
④滚动采用swiper/swiper-item、scroll-view等官方组件
⑤小程序中的页面跳转方式基本分为以下几种：
- wx.navigateTo()：这种方式跳转后，页面左上角会有一个返回按钮，可返回上一页
- wx.redirectTo()：这种方式跳转后，会关闭当前页，跳转到一个新的页面，没有返回上一页的按钮
- wx.switchTab()：这种方式专为跳转到底部导航条使用，关闭其他页面（跳转到导航条只能使用这种方式
三、从下篇文章开始，我们将从主页开始详细介绍每个页面的功能点和代码逻辑
相关问题请留言讨论，共同进步！