❤微信小程序项目(一)❤

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. 引⼊字体图标

1. 打开阿⾥巴巴字体图标 ⽹站

2. 选择的图标

3. 添加⾄项⽬

4. 下载到本地

5. 将样式⽂件 由 css 修改为 wxss

6. ⼩程序中引⼊

1.5. 搭建项⽬tabbar结构

参照之前讲解的基础中的tabbar知识点

2. ⾸⻚

2.1. 效果

2.2. 业务逻辑

1. 使⽤tabbar 实现底部导航功能
2. 使⽤⾃定义组件的⽅式 实现 头部搜索框
3. 加载 轮播图 数据
4. 加载 导航 数据
5. 加载 楼层 数据

2.3. 接⼝

1. 获取⾸⻚轮播图数据

接口

2. 获取⾸⻚分类菜单数据

接口
3. 获取⾸⻚ 楼层数据

接口

2.4. 关键技术

⼩程序内置 request API
es6的 promise

⼩程序 swiper 组件

⾃定义组件 实现 搜索框

2.2. 业务逻辑

1. 加载分类⻚⾯数据
2. 点击左侧菜单，右侧数据动态渲染

2.3. 接⼝

1. 分类⻚⾯数据

接口

2.4. 关键技术

scroll-view 组件
es6的 async 和 await

2.5. ⼩程序中⽀持es7的async语法

es6的 async 号称是解决回调的最终⽅案

1. 在⼩程序的开发⼯具中，勾选 es6转es5语法

2. 下载 facebook的regenerator库中的 regenerator/packages/regenerator-runtime/runtime.js

3. 在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js ，将代码拷⻉进去

4. 在每一个需要使⽤async语法的⻚⾯js⽂件中，都引⼊（不能全局引⼊）

import regeneratorRuntime from '../../lib/runtime/runtime';

总结:

今天开始小程序的项目,后续会继续更新,以上讲述了项目的初始化搭建,以及首页的效果,遇到的回调地域问题及解决方案,今天的总结到此结束,感谢您的观看.