微信小程序商城实例

一、最近学习小程序的设计，于是仿做了一款类似商城的微信小程序(模拟接口用的是微信云函数)，本次先说明整体规划布局

刚接触小程序设计，于是仿照一个商城的小程序，做了一个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()：这种方式专为跳转到底部导航条使用，关闭其他页面（跳转到导航条只能使用这种方式

三、从下篇文章开始，我们将从主页开始详细介绍每个页面的功能点和代码逻辑

相关问题请留言讨论，共同进步！