实战：小程序购物商城

3.4、引入字体图标

---

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

2. 选择的图标

3. 添加⾄项⽬

4. 下载到本地，选择第二个Font Class，并在地址栏打开新地址，复制全部代码到项目中

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

6. ⼩程序中引⼊，在全局app.wxss中引入，就可以在每个wxss中使用了

7. 测试

3.5、搭建项目的tabbar结构

---

1. 目录下新增文件夹icons，将图标文件放到里面

2. 在app.json中实现tabBar

3.6、基础样式搭建

---

界面调用主题颜色

在index.wxss中使用

小程序标题红底白字

在app.json中通过window设置

3.7、添加服务器接口域名

---

在这里将服务器接口域名加上，否则请求不到数据

4、首页

===============================================================

4.1、效果

---

4.2、业务逻辑

---

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

2. 使⽤⾃定义组件的⽅式 实现 头部搜索框

3. 加载 轮播图 数据

① 请求数据

② 渲染数据

基础版本：

封装请求版本：

4. 加载 导航 数据

5. 加载 楼层 数据

4.3、接口

---

1. 获取⾸⻚轮播图数据

https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata

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

https://api-hmugo-web.itheima.net/api/public/v1/home/catitems

3. 获取⾸⻚ 楼层数据

https://api-hmugo-web.itheima.net/api/public/v1/home/floordata

4.4、关键技术

---

• ⼩程序内置 request API

• es6的 promise

• ⼩程序 swiper 组件

• ⾃定义组件 实现 搜索框

5、分类页面

=================================================================

5.1、效果

---

5.2、业务逻辑

---

1. 加载分类⻚⾯数据

接口数据关系映射

① 请求数据并构造数据

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

3. 缓存

5.3、接口

---

1. 分类⻚⾯数据

https://api-hmugo-web.itheima.net/api/public/v1/categories

5.4、关键技术

---

• scroll–view 组件

• es7的 async 和 await

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

---

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

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

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

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

import regeneratorRuntime from ‘…/…/lib/runtime/runtime’;

6、商品列表界面

===================================================================

6.1、效果

---

6.2、业务逻辑

---

1. 加载商品列表数据

2. 启⽤下拉⻚⾯功能

① ⻚⾯的json⽂件中开启设置 enablePullDownRefresh:true

② ⻚⾯的js中，绑定事件 onPullDownRefresh

3. 启⽤上拉⻚⾯功能 onReachBottom ⻚⾯触底事件

4. 加载下⼀⻚功能

6.3、接口

---

1. 商品列表搜索

https://api-hmugo-web.itheima.net/api/public/v1/goods/search

6.4、关键技术

---

• ⼩程序配置⽂件中 启⽤上拉 和下拉功能

• 搜索框和tab栏是⼩程序的⾃定义组件(有组件事件和参数交互)

7、商品详情界面

===================================================================

7.1、效果

---

7.2、业务逻辑

---

1. 渲染商品详情数据

2. 点击图⽚，调出图⽚画廊，进⾏预览

3. 点击收藏

4. 联系客服

5. 分享功能

6. 加⼊购物⻋

7.3、接口

---

1. 获取详情数据接⼝

https://api-hmugo-web.itheima.net/api/public/v1/goods/detail

2. 加⼊购物⻋接⼝ 使⽤本地存储来维护购物⻋数据

3. ⽴即购买接⼝ (相当于是 创建订单接⼝)

https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch

7.4、关键技术

---

• swiper组件

• 本地存储实现 收藏功

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

• 富⽂本标签 渲染 富⽂本

• ⼩程序 预览图⽚接⼝

8、收藏页

================================================================

8.1、效果

---

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、效果

---

10.2、业务逻辑

---

1. 获取微信收货地址

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

3. 实现⽀付

① 获取微信的登录信息

② 获取⾃⼰后台返回的⽀付相关参数

③ 调⽤微信接⼝实现 ⽀付

④ ⽀付成功创建订单

⑤ 跳转到订单⻚⾯

10.3、支付流程

---

10.4、接口

---

1. 获取预⽀付参数

https://api-hmugo-web.itheima.net/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、效果

---

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

---

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• [外链图片转存中…(img-LlXt4g0r-1714652262566)]

常用算法面试题：

• [外链图片转存中…(img-ECqj9cv4-1714652262566)]

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

•