1. 项⽬搭建
1.1. 新建⼩程序项⽬
填入自己的appid
1.2. 搭建⽬录结构
⽬录名 | 作⽤ |
---|---|
styles | 存放公共样式 |
components | 存放组件 |
lib | 存放第三⽅库 |
utils | ⾃⼰的帮助库 |
request | ⾃⼰的接⼝帮助库 |
1.3. 搭建项⽬的⻚⾯
⻚⾯名称 | 名称 |
---|---|
⾸⻚ | index |
分类⻚⾯ | category |
商品列表⻚⾯ | goods_list |
商品详情⻚⾯ | goods_detail |
购物⻋⻚⾯ | cart |
收藏⻚⾯ | collect |
订单⻚⾯ | order |
搜索⻚⾯ | search |
个⼈中⼼⻚⾯ | user |
意⻅反馈⻚⾯ | feedback |
登录⻚⾯ | login |
授权⻚⾯ | auth |
结算⻚⾯ | pay |
1.4. 引⼊字体图标
-
打开阿⾥巴巴字体图标 ⽹站
-
选择的图标
-
添加⾄项⽬
-
下载到本地
-
将样式⽂件 由 css 修改为 wxss
-
⼩程序中引⼊
1.5. 搭建项⽬tabbar结构
参照之前讲解的基础中的tabbar知识点
2. ⾸⻚
2.1. 效果
2.2. 业务逻辑
- 使⽤tabbar 实现底部导航功能
- 使⽤⾃定义组件的⽅式 实现 头部搜索框
- 加载 轮播图 数据
- 加载 导航 数据
- 加载 楼层 数据
2.3. 接⼝
- 获取⾸⻚轮播图数据
- 获取⾸⻚分类菜单数据
接口
3. 获取⾸⻚ 楼层数据
2.4. 关键技术
⼩程序内置 request API
es6的 promise
⼩程序 swiper 组件
⾃定义组件 实现 搜索框
2.2. 业务逻辑
- 加载分类⻚⾯数据
- 点击左侧菜单,右侧数据动态渲染
2.3. 接⼝
- 分类⻚⾯数据
2.4. 关键技术
scroll-view 组件
es6的 async 和 await
2.5. ⼩程序中⽀持es7的async语法
es6的 async 号称是解决回调的最终⽅案
-
在⼩程序的开发⼯具中,勾选 es6转es5语法
-
下载 facebook的regenerator库中的 regenerator/packages/regenerator-runtime/runtime.js
-
在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js ,将代码拷⻉进去
-
在每一个需要使⽤async语法的⻚⾯js⽂件中,都引⼊(不能全局引⼊)
import regeneratorRuntime from '../../lib/runtime/runtime';
总结:
今天开始小程序的项目,后续会继续更新,以上讲述了项目的初始化搭建,以及首页的效果,遇到的回调地域问题及解决方案,今天的总结到此结束,感谢您的观看.