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

1、​​接口文档​​

2、帮助文档


  1. ​小程序开发文档​
  2. ​MDN​
  3. ​阿里巴巴矢量图标库​

3、项目搭建

3.1、新建小程序项目

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


填入自己的appid


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

3.2、搭建项目目录结构



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



搭建项目目录结构

录名

作用

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、引入字体图标



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



选择的图标



添加⾄项⽬
实战:小程序购物商城_数据_12



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



将样式⽂件 由 css 修改为 wxss实战:小程序购物商城_.net_15



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



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



3.5、搭建项目的tabbar结构


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

3.6、基础样式搭建

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

界面调用主题颜色

在index.wxss中使用

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

小程序标题红底白字

在app.json中通过window设置

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

3.7、​​添加服务器接口域名​

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

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

4、首页

4.1、效果

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

4.2、业务逻辑



使⽤tabbar 实现底部导航功能
实战:小程序购物商城_数据_25



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



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



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



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



4.3、接口


  1. 获取⾸⻚轮播图数据


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



获取⾸⻚分类菜单数据

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



获取⾸⻚ 楼层数据

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




4.4、关键技术


  • ⼩程序内置 request API
  • es6的 promise
  • ⼩程序 swiper 组件
  • ⾃定义组件 实现 搜索框

5、分类页面

5.1、效果

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

5.2、业务逻辑



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



点击左侧菜单,右侧数据动态渲染



缓存



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

实战:小程序购物商城_业务逻辑_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、效果

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

7.2、业务逻辑


  1. 渲染商品详情数据
  2. 点击图⽚,​​调出图⽚画廊,进⾏预览​
  3. 点击收藏
  4. 联系客服
  5. 分享功能
  6. 加⼊购物⻋

7.3、接口


  1. 获取详情数据接⼝


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



加⼊购物⻋接⼝ 使⽤本地存储来维护购物⻋数据⽴即购买接⼝ (相当于是 创建订单接⼝)

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

实战:小程序购物商城_.net_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​



创建订单

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



更新订单状态

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




10.5、关键技术

  • 小程序 支付 api

11、授权页面

11.1、效果

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

11.2、特务逻辑

实战:小程序购物商城_.net_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、效果

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

12.2、 业务逻辑


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

12.3. 接⼝


  1. 创建订单

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



查看订单支付状态

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



历史订单查询

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




12.4. 关键技术


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

13、搜索页面

13.1、效果

实战:小程序购物商城_.net_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传递出去

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