黑马优购项目答辩

项目大致流程

  • 前言
  • 一、首要操作
    • 1、配路由
    • 2、封装wx.request
    • 3、封装频繁使用的组件
  • 二、首页
  • 三、分类页面
  • 四、列表详情页
    • 1、下拉刷新
    • 2、上拉加载
  • 五、商品详情页
    • 1、收藏
    • 2、加入购物车
    • 3、分享
    • 4、客服功能
  • 六、购物车页面
    • 1、获取收货地址
    • 2、计算总价
    • 3、全选
    • 4、复选框和全选交互
    • 5、增加/减少数量
    • 6、支付
  • 七、我的页面
  • 八、项目发布
    • 1、上传代码
    • 2、提交审核
    • 3、发布版本


前言

本人根据黑马优购项目进行总的概括,可能还不够全面,仅供参考


一、首要操作

1、配路由

在位于根目录下的app.json里把页面路由配置好
在tabbar里把底部tab切换配置好,实现页面切换
黑马优购项目答辩_第1张图片

2、封装wx.request

在根目录下创建request文件夹,基于promise进行封装
封装详情

3、封装频繁使用的组件

我们项目中用的次数比较频繁的功能可以封装起来,比如搜索功能、标签栏功能等。在根目录下创建components文件夹用于存放封装组件。
在这里插入图片描述

二、首页

首页分三部分,其中搜索框是一个导航跳转按钮,跳转到搜索页面,首页用封装好的wx.request()方法请求接口,渲染页面即可。
黑马优购项目答辩_第2张图片

三、分类页面

到了分类页面分左右两个部分作为盒子使用都有各自的滚动条,不会相互影响。用小程序内置标签和属性即可实现。
黑马优购项目答辩_第3张图片
由于页面头部有搜索组件,所以盒子高度不能设置为100%。
这时我们可以使用css中的一个计算方法calc()方法来计算高度。
黑马优购项目答辩_第4张图片

设置完盒子高度后,接着就是给所有内容绑定一个点击事件进行跳转页面。跳转的时候我们需要把当前点击的id通过路由传参发送出去。
一般常用的两种路由传参方式:
黑马优购项目答辩_第5张图片

四、列表详情页

1、下拉刷新

思路:我们小程序有封装好的下拉刷新,开启后,使用小程序内置的监听函数onPullDownRefresh,在里面重新请求第一页的数据
在列表详情页的json页面中写入

黑马优购项目答辩_第6张图片

接着是js页面中写入
黑马优购项目答辩_第7张图片

下拉刷新完成!

2、上拉加载

思路:当我们滚动条到底部的时候,我们就去请求下一页的数据,然后把请求过来的数据和原数据进行一个合并。
在这里用小程序内置的对上拉触底事件的处理函数 onReachBottom
在js文件中写入
黑马优购项目答辩_第8张图片
小程序中有一个生命周期函数可以监听用户的滚动条是否触底。
我们可以在全局定义一个num,表示当前页数,然后我们在页面显示的时候后台肯定会给我们返回一个数据的总条数。
我们根据这个总条数计算出一共需要多少页。
公式:总页数 / 每页多少条数据 = 一共有多少页
let page = Math.ceil(total / 每页条数); 如果除不尽需要向上取整
我们在监听到用户触底的时候,首先让当前页num+1,然后判断一下是否大于我们计算出来的总页数,超过就提示已经到底。
我们最后给每一条数据绑定一个点击事件,然后传过去一个id即可。

五、商品详情页

根据详情列表页传过来的id去请求接口,然后使用返回的数据去渲染。
详情页大概分为收藏、加入购物车、分享、联系客服等功能

1、收藏

在我们进入页面时,需要判断我们这条数据有没有收藏过,如果收藏过,就让收藏的星星变亮。
当我们单击收藏时,我们肯定要判断当前这条数据有没有被收藏,如果被收藏是要取消收藏的,如果每有收藏就收藏。最后存入本地存储。
黑马优购项目答辩_第9张图片

2、加入购物车

当我们点击加入购物车时,首先判断我们购物车内有没有这个商品,如果有就让这个商品的数量+1,如果没有就添加。最后存入本地存储。

3、分享

分享 // 这个属性是小程序封装好的,直接使用即可

4、客服功能

联系客服 // 这个属性是小程序封装好的,直接使用即可

六、购物车页面

1、获取收货地址

首先给元素一个点击事件,然后js里写入
黑马优购项目答辩_第10张图片

2、计算总价

执行思路:首先我们可以筛选出商品中所有状态为true的。然后我们在计算这个数组的总价。
黑马优购项目答辩_第11张图片

3、全选

我们添加购物车的时候,给每一条数据都加上一个flag,表述当前复选框的checked存在不存在。点击全选,我们把这个flag属性全部变为true,然后在点一下就变为flag。

4、复选框和全选交互

黑马优购项目答辩_第12张图片

5、增加/减少数量

都注册一个点击事件,当我们点击减号时,我们传入一个下标,让后让当前下标的num数量-1,判断当前数量是否小于1,如果小于1就提示是否删除。
当我们点击加号时,我们还是传入一个下标,让当前下标的num属性+1
黑马优购项目答辩_第13张图片

6、支付

点击支付时,我们需要判断用户有没有登录呢,如果没有登录就让他去登录。查看详情
如果已经登录,我们就需要准备数据,把价格、用户购买的物品、用户都购买了哪些物品都发送到后台。然后我们先发送请求创建一个订单号,接着发起预支付接口,然后发起微信支付,支付完成后我们就手动删除掉用户购买的商品,然后跳转到订单页面。
在这里插入图片描述
首先我们肯定是判断用户有没登录,一般都是判断本地有没有token。
如果没有,让用户取登录。
如果有,写入以下步骤
黑马优购项目答辩_第14张图片

七、我的页面

我们需要先判断本地存储中有没有登录过,如果没有登录过,就提示让用户去登录。
登录:我们写好登录页面后,给一个登录按钮,然后写一个点击事件,在这个事件中使用
在这里插入图片描述
黑马优购项目答辩_第15张图片

八、项目发布

发布流程详情点此查看

1、上传代码

注意:发布之前配置服务器域名白名单
小程序右上角点击上传

2、提交审核

接下来前往微信公众平台
点击版本管理——>开发管理——>提交审核
首次提交审核会提示填写信息
填写小程序基本信息
添加开发者(最多15人)还有体验成员(最多15人)
再次点击提交
审核分加急和不加急
加急速度贼快,一年只能使用一次!
不加急大概1—7天不等
审核通过后前往发布

3、发布版本

微信公众平台——>点击版本管理——>开发管理——>提交审核
点击提交发布
弹出二维码,通过手机扫描进行发布
到这里发布就完成了
接下来微信小程序搜索就可以直接使用了

你可能感兴趣的:(小程序)