1.

接口文档

2. 帮助文档

• 小程序开发文档

• mdn

• 阿里巴巴字体iconfont

3 项目搭建

3.1. 新建小程序项目

填入自己的appid

3.2. 搭建目录结构

目录名	作用
styles	存放公共样式
components	存放组件
lib	存放第三方库
utils	自己的帮助库
request	自己的接口帮助库

3.3 .搭建项目的页面

页面名称	名称
首页	index
分类页面	category
商品列表页面	goodsjist
商品详情页面	goods_detail
购物车页面	cart
收藏页面	collect
订单页面	order
搜索页面	search
个人中心页面	user
意见反馈页面	feedback
登录页面	login
授权页面	auth
结算页面	pay

3.4. 引入字体图标

1. 打开阿里巴巴字体图标网站

2. 选择的图标

3. 添加至项目

4. 下载到本地

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

6. 小程序中引入

3.5. 搭建项目tabbar

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

4.首页

4.1.

4.2.业务逻辑

1. 使用tabbar实现底部导航功能

2. 使用自定义组件的方式实现头部搜索框

3. 加载轮播图数据

4. 加载导航数据

5. 加载楼层数据

4.3.接口

1. 获取首页轮播图数据

https://api.zbztb.cn/api/public/v1/home/swiperdata

2. 获取首页分类菜单数据

https://api.zbztb.cn/api/public/v1/home/catitems

3. 获取首页楼层数据

https://api.zbztb.cn/api/public/v1/home/floordata

4.4.关键技术

•小程序内置request API

• es6的 promise swiper组件

•自定义组件实现搜索框

5. 分类页面

5.1.效果

5.2.业务逻辑

1. 加载分类页面数据

2. 点击左侧菜单，右侧数据动态渲染

5.3.接口

1. 分类页面数据

https://api.zbztb.cn/api/public/v1/categories

5.4.关键技术

• scroll-view 组件

• es7的 async 和 await

5.5.小程序中支持es7的async语法

es7的 async 号称是解决回调的最终方案

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

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

3. 在小程序目录下新建文件夹lib/runtime/runtime.js ,将代码拷贝进去

4. 在每一个需要使用async语法的页面js文件中，都引入（不能全局引入）

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

6商品列表页面

6.1.效果

6.2.业务逻辑

1. 加载商品列表数据

2. 启用下拉页面功能

3. 页面的json文件中开启设置 enablePullDownRefresh:true

4. 页面的js中，绑定事件onPullDownRefresh

5. 启用上拉页面功能onReachBottom 页面的事件

   6.加载下一页功能

6.3.接口

1. 商品列表搜索

https://api.zbztb.cn/api/public/v1/goods/search

6.4.关键技术

•小程序配置文件中启用上拉和下拉功能

•捜索框和tab栏是小程序的自定义组件（有组件事件和参数交互）

7.商品详情页面

7.1.效果

7.2.业务逻辑

1. 渲染商品详情数据

2. 点击图片，调出图片画廊，进行预览

3. 点击收藏

4. 联系客服

5. 分享功能

6. 加入购物车

7.3.接口

1. 获取详情数据接口

https://api.zbztb.cn/api/public/v1/goods/detail

2. 加入购物车接口使用本地存储来维护购物车数据

3. 立即购买接口（相当于是创建订单接口）

https://api.zbztb.cn/api/public/v1/my/orders/create

7.4.关键技术

・swipeii组件

•本地存储实现收藏功能

・联系客服小程序管理后台中直接添加即可

•富文本标签渲染富文本

・小程序预览图片接口

8.啊页

8.1.效果

海信(Hisense)LED50MU8600UC 50英=

4K超高清智能电观HD躍薄曲面

¥6809

海信(Hisense)LED55MU9S00X3DUC 55

英寸4K超高清星子点弓视ULEDEJ质

¥13999

8.2. 业务逻辑

1. 获取本地存储中的数据进行渲染

2. 点击商品可以跳转到商品详情页面

8.3. 接口

无

8.4.关键技术

•小程序自定义组件

•本地存储加载收藏数据

9.购物车页面

9.1.效果

9.2.业务逻辑

1. 渲染购物车数据

2. 添加收货地址

3. 修改商品数量

4. 单选和全选功能

9.3.接口

1. 获取购物车数据本地存储实现

2. 调用微信的收货地址

9.4.关键技术

・小程序选择收货地址api

•小程序复选框组件

10.支付页面

10.1.效果

iIPhone 6, WiFi 7	页面信急7
	14:15	wo% ISb
<	支忖	*** ®

收货人:张三 020-81167888

广东筍亠艸I市期区新港中路犬7号

冏品结算

合计：¥ 13999HHM

10.2.业务逻辑

1. 获取微信收货地址

2. 渲染购物车中要结算的商品

3. 实现支付

4. 获取微信的登录信息

5. 获取自己后台返回的支付相关参数

6. 调用微信接口实现支付

7. 支付成功创建订单

5.跳转到订单页面

10.3.支付流程

10.4.接口

1. 获取预支付参数

https://api.zbztb.cn/api/public/v1/my/orders/req_unifiedorder

2. 创建订单

https://api.zbztb.cn/api/public/v1/my/orders/create

3. 更新订单状态

https://api.zbztb.cn/api/public/v1/my/orders/chkOrder

10.5.关键技术

•小程序支付api

11.授权页面

11.1.效果

5	23:41	100% is* I
	授权

11.2.业务逻辑

1. 获取用户信息

返回 encryptedData,rawData,iv,signature

2. 小程序登录

返回 code

3. 提交数据到自己的后台执行post请求提交数据

encryptedData,rawData,iv,signature code

4. 将token和用户数据rawData存入本地存储

11.3.接口

1. 提交数据到后台返回token

https://api.zbztb.cn/api/public/v1/users/wxlogin

12.订单列表页面

12.1.嫉

	16:50	100% [Sh
	订单

待付款

叮十心"出

12.2.业务逻辑

1. 根据不同的的状态去加载不同的订单数据

2. 点击标题紧挨着对应数据

12.3.接口

1. 查询订单数据

https://api.zbztb.cn/api/public/v1/my/orders/all

12.4.关键技术

•小程序自定义组件的传参父向子动态传参this ・selectComponent("#tabs");

•时间戳格式化处理

13.搜索页面

13.1.效果

13.2.接口

13.1. 搜索建议查询

https://api.zbztb.cn/api/public/v1/goods/qsearch

13.3. 业务逻辑

1. 获取输入框的值进行搜索和渲染

2. 点击取消按钮时清除输入状态，修改页面模样

13.4. 关键技术

1. 小程序输入框组件

2. 输入值改变时，为了提高性能，使用防抖技术

14.个人中心页面

14.1.效果

14.2. 业务逻辑

1. 获取登录信息

2. 加载收藏信息

3. 查询订单状态

14.3. 接口

1. 获取用户信息

2. 获取收藏数据从本地存储中获取

3. 获取订单数据

https://api.zbztb.cn/api/public/v1/my/orders/all

14.4.关键技术

1. css属性filte啲使用

15.意见反馈页面

15.1. 嫉

15.2. 业务逻辑

1. 点击+可以选择本地图片，并且显示到页面上

2. 点击提交可以上传图片到接口地址新浪图床上

https://images.ac.cn/Home/Index/UploadAction/

3. 点击图片，会移除自己

4. 点击tab栏的标题，可以切换选中效果

15.3. 接口

无

15.4. 关键技术

1.自定义组件tab

2. 自定义组件图片删除组件

3. 小程序上传文件api