该文章是学习黑马小程序时所做。

1、接口文档 2、帮助文档
  1. 小程序开发文档
  2. MDN
  3. 阿里巴巴矢量图标库
3、项目搭建

3.1、新建小程序项目

实战:小程序购物商城_小程序

填入自己的appid

实战:小程序购物商城_数据_02

3.2、搭建项目目录结构

  1. 删除初始化项目无用代码
    ① app.json中,删除日志界面log,修改小程序标题
    实战:小程序购物商城_业务逻辑_03
    ② 删除pages文件夹下的logs文件夹
    ③ 清空app.wxss中内容实战:小程序购物商城_小程序_04
    ④ 清空app.js中内容,使用wx-App生成最基础界面模板
    实战:小程序购物商城_.net_05
    ⑤ 清空index.wxml中代码实战:小程序购物商城_数据_06
    ⑥ 清空index.wxss中内容
    ⑦ 清空index.js中代码,使用wx-Page初始化index.js中代码
    实战:小程序购物商城_业务逻辑_07
    ⑧ 修改index.json中代码,单独修改首页标题实战:小程序购物商城_小程序_08
    ⑨ 删除util文件夹。

  2. 搭建项目目录结构

    录名 作用
    styles 存放公共样式
    components 存放组件
    lib 存放第三方库
    utils 自己的工具库
    request 自己的SKD

    实战:小程序购物商城_数据_09

3.3、搭建项目页面

⻚⾯名称 名称
⾸⻚ index
分类⻚⾯ category
商品列表⻚⾯ goods_list
商品详情⻚⾯ goods_detail
购物⻋⻚⾯ cart
收藏⻚⾯ collect
订单⻚⾯ order
搜索⻚⾯ search
个⼈中⼼⻚⾯ user
意⻅反馈⻚⾯ feedback
登录⻚⾯ login
授权⻚⾯ auth
结算⻚⾯ pay

实战:小程序购物商城_数据_10

3.4、引入字体图标

  1. 打开阿⾥巴巴字体图标 ⽹站
    实战:小程序购物商城_加载_11

  2. 选择的图标

  3. 添加⾄项⽬
    实战:小程序购物商城_.net_12

  4. 下载到本地,选择第二个Font Class,并在地址栏打开新地址,复制全部代码到项目中
    实战:小程序购物商城_数据_13实战:小程序购物商城_数据_14

  5. 将样式⽂件 由 css 修改为 wxss实战:小程序购物商城_业务逻辑_15

  6. ⼩程序中引⼊,在全局app.wxss中引入,就可以在每个wxss中使用了实战:小程序购物商城_小程序_16

  7. 测试实战:小程序购物商城_数据_17

3.5、搭建项目的tabbar结构

  1. 目录下新增文件夹icons,将图标文件放到里面实战:小程序购物商城_数据_18
  2. 在app.json中实现tabBar实战:小程序购物商城_业务逻辑_19

3.6、基础样式搭建

实战:小程序购物商城_.net_20

界面调用主题颜色
在index.wxss中使用
实战:小程序购物商城_.net_21
小程序标题红底白字
在app.json中通过window设置
实战:小程序购物商城_数据_22

3.7、添加服务器接口域名

实战:小程序购物商城_业务逻辑_23
在这里将服务器接口域名加上,否则请求不到数据

4、首页

4.1、效果

实战:小程序购物商城_加载_24

4.2、业务逻辑

  1. 使⽤tabbar 实现底部导航功能
    实战:小程序购物商城_.net_25

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

  3. 加载 轮播图 数据
    ① 请求数据实战:小程序购物商城_业务逻辑_26
    ② 渲染数据
    基础版本:实战:小程序购物商城_加载_27
    封装请求版本:实战:小程序购物商城_加载_28

  4. 加载 导航 数据
    实战:小程序购物商城_小程序_29

  5. 加载 楼层 数据
    实战:小程序购物商城_小程序_30

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

实战:小程序购物商城_加载_31

5.2、业务逻辑

  1. 加载分类⻚⾯数据
    接口数据关系映射实战:小程序购物商城_小程序_32
    ① 请求数据并构造数据
    实战:小程序购物商城_数据_33

  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 ,将代码拷⻉进去
  4. 在每⼀个需要使⽤async语法的⻚⾯js⽂件中,都引⼊(不能全局引⼊)
    import regeneratorRuntime from '../../lib/runtime/runtime';
    
6、商品列表界面

6.1、效果

实战:小程序购物商城_.net_34

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

实战:小程序购物商城_业务逻辑_35

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

实战:小程序购物商城_数据_36

8.2、业务逻辑

  1. 获取本地存储中的数据进⾏渲染
  2. 点击商品可以跳转到商品详情⻚⾯

8.3、接口

8.4、关键技术

  • ⼩程序 ⾃定义组件
  • 本地存储 加载收藏数据
9、购物车页面

9.1、效果

实战:小程序购物商城_数据_37

9.2、业务逻辑

  1. 渲染购物⻋数据
  2. 添加收货地址
  3. 修改商品数量
  4. 单选和全选功能

9.3、接口

  1. 获取购物⻋数据 本地存储实现
  2. 调用微信的收货地址

9.4、关键技术

  • ⼩程序 选择收货地址 api
  • ⼩程序 复选框 组件
10、支付页面

10.1、效果

实战:小程序购物商城_业务逻辑_38

10.2、业务逻辑

  1. 获取微信收货地址
  2. 渲染购物⻋中要结算的商品
  3. 实现⽀付
    ① 获取微信的登录信息
    ② 获取⾃⼰后台返回的⽀付相关参数
    ③ 调⽤微信接⼝实现 ⽀付
    ④ ⽀付成功创建订单
    ⑤ 跳转到订单⻚⾯

10.3、支付流程

实战:小程序购物商城_业务逻辑_39

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

实战:小程序购物商城_数据_40

11.2、特务逻辑

实战:小程序购物商城_加载_41

  1. 获取⽤⼾信息 返回 encryptedData,rawData,iv,signature
  2. ⼩程序登录 返回 code
  3. 提交数据到⾃⼰ 的后台 执⾏post请求 提交数据 encryptedData,rawData,iv,signature code
  4. token 和⽤⼾数据 rawData存⼊本地存储

11.3、接口

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

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

12、订单列表界面

12.1、效果

实战:小程序购物商城_加载_42

12.2、 业务逻辑

  1. 根据不同的的状态去加载不同的订单数据
  2. 点击标题紧挨着对应数据

12.3. 接⼝

  1. 创建订单

    https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create

  2. 查看订单支付状态

    https://api-hmugo-web.itheima.net/api/public/v1/my/orders/chkOrder

  3. 历史订单查询

    https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all

12.4. 关键技术

  • ⼩程序 ⾃定义组件的 传参 ⽗向⼦动态传参 this.selectComponent("#tabs");
  • 时间戳 格式化处理
13、搜索页面

13.1、效果

实战:小程序购物商城_数据_43

13.2、接⼝

  1. 搜索建议查询

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

13.3、业务逻辑

  1. 获取输⼊框的值进⾏搜索和渲染
  2. 点击 取消 按钮时 清除输⼊状态,修改⻚⾯模样

13.4、关键技术

  • ⼩程序 输⼊框组件
  • 输⼊值改变时,为了提⾼性能,使⽤ 防抖 技术
14. 个⼈中⼼⻚⾯

14.1、效果

实战:小程序购物商城_小程序_44

14.2、业务逻辑

  1. 获取登录信息
  2. 加载收藏信息

14.3、接⼝

  1. 获取⽤⼾信息
  2. 获取收藏数据 从本地存储中获取
  3. 获取订单数据

    https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all

14.4、关键技术

css的filter属性的使用

15、意见与反馈页面

15.1、效果

实战:小程序购物商城_加载_45

15.2、业务逻辑

  1. 点击 + 可以选择本地图⽚,并且显⽰到⻚⾯上
  2. 点击 提交 可以上传图⽚到 接⼝ 地址 新浪图床 上
    https://www.muzijuping.com/Home/Index/UploadAction/
  3. 点击图⽚,会移除⾃⼰
  4. 点击 tab栏的标题,可以切换选中效果

15.3、接口

15.4 关键技术

  1. 自定义组件tab
  2. 自定义组件 图片 删除组件
  3. 小程序上传文件api
16、知识点

16.1、封装网络请求

将wx-request封装为promise,参数通过params传递,并将结果通过resolve和reject传递出去
实战:小程序购物商城_业务逻辑_46