一、最近学习小程序的设计,于是仿做了一款类似商城的微信小程序(模拟接口用的是微信云函数),本次先说明整体规划布局
刚接触小程序设计,于是仿照一个商城的小程序,做了一个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():这种方式专为跳转到底部导航条使用,关闭其他页面(跳转到导航条只能使用这种方式
三、从下篇文章开始,我们将从主页开始详细介绍每个页面的功能点和代码逻辑
相关问题请留言讨论,共同进步!