黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块

黑马 小兔鲜儿 uniapp 小程序开发- 01项目起步_软工菜鸡的博客-CSDN博客

本课程是全网首套用 vue3 加 TS 写的 uniapp 项目, 里面大量封装自己的组件库,课程从 uni-app 基础入手,按照9大电商业务模块逐步实现完整的电商购物流程业务;涵盖了猜你喜欢、热门推荐、商品分类、商品详情、微信登录、用户管理、地址管理、购物车管理、订单管理等功能。包含微信登录,微信支付等业务。一套代码多端全面覆盖微信小程序端、H5端、APP端。

学完本课程能够收获:使用 uni-app + Vue3 开发中型项目的能力

小兔鲜儿 - 首页模块

涉及知识点:组件通信、组件自动导入、数据渲染、触底分页加载、下拉刷新等。

自定义导航栏

参考效果:自定义导航栏的样式需要适配不同的机型。

黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块_第1张图片

操作步骤

  1. 准备组件
  2. 隐藏默认导航栏,修改文字颜色
  3. 样式适配 -> 安全区域

静态结构

新建业务组件:src/pages/index/componets/CustomNavbar.vue





安全区域

不同手机的安全区域不同,适配安全区域能防止页面重要内容被遮挡。

可通过 uni.getSystemInfoSync() 获取屏幕边界到安全区的距离。

黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块_第2张图片

核心代码参考

自定义导航配置

// src/pages.json
{
  "path": "pages/index/index",
  "style": {
    "navigationStyle": "custom", // 隐藏默认导航
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "首页"
  }
}

组件安全区适配




通用轮播组件

参考效果

小兔鲜儿项目中总共有两处广告位,分别位于【首页】和【商品分类页】。

轮播图组件需要在首页和分类页使用,需要封装成通用组件。

黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块_第3张图片

静态结构

首页广告布局为独立的组件 XtxSwiper ,位于的 src/components 目录中。

该组件定义了 list 属性接收外部传入的数据,内部通过小程序内置组件 swiper 展示首页广告的数据。

轮播图组件

静态结构:src/components/XtxSwiper.vue





自动导入全局组件

参考配置

{
  // 组件自动引入规则
  "easycom": {
    // 是否开启自动扫描 @/components/$1/$1.vue 组件
    "autoscan": true,
    // 以正则方式自定义组件匹配规则
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      // 以 Xtx 开头的组件,在 components 目录中查找
      "^Xtx(.*)": "@/components/Xtx$1.vue"
    }
  }
}

全局组件类型声明

Volor 插件说明:Vue Language Tools

// src/types/components.d.ts
import XtxSwiper from './XtxSwiper.vue’
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    XtxSwiper: typeof XtxSwiper
  }
}

获取数据

接口调用

该业务功能对于前端来说比较简单,只需调用后端提供的接口将获得的数据展现,结合运营人员的营销策略跳转到对应的链接地址即可。

接口地址:/home/banner

请求方式:GET

请求参数:

Query:

字段名

必须

默认值

备注

distributionSite

1

活动 banner 位置,1 代表首页,2 代表商品分类页,默认为 1

请求封装

// 存放路径: src/services/home.ts
import type { BannerItem } from '@/types/home'

/**
 * 首页-广告区域-小程序
 * @param distributionSite 广告区域展示位置(投放位置 投放位置,1为首页,2为分类商品页) 默认是1
 */
export const getHomeBannerAPI = (distributionSite = 1) => {
  return http({
    method: 'GET',
    url: '/home/banner',
    data: {
      distributionSite,
    },
  })
}

类型声明

存放路径:src/types/home.d.ts

/** 首页-广告区域数据类型 */
export type BannerItem = {
  /** 跳转链接 */
  hrefUrl: string
  /** id */
  id: string
  /** 图片链接 */
  imgUrl: string
  /** 跳转类型 */
  type: number
}

最后,将获得的数据结合模板语法渲染到页面中。

参考代码

轮播图组件:src\components\XtxSwiper.vue



首页分类

参考效果

黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块_第4张图片

准备工作

  1. 准备组件,只有首页使用
  2. 导入并使用组件
  3. 设置首页底色为 #F7F7F7

静态结构

前台类目布局为独立的组件 CategoryPanel属于首页的业务组件,存放到首页的 components 目录中。





获取数据

接口调用

该业务功能对于前端来说比较简单,只需调用后端提供的接口将获得的数据展现。

接口地址:/home/category/mutli

请求方式:GET

请求参数:无

请求封装

// services/home.ts
/**
 * 首页-前台分类-小程序
 */
export const getHomeCategoryAPI = () => {
  return http({
    method: 'GET',
    url: '/home/category/mutli',
  })
}

数据类型

/** 首页-前台类目数据类型 */
export type CategoryItem = {
  /** 图标路径 */
  icon: string
  /** id */
  id: string
  /** 分类名称 */
  name: string
}

最后,将获得的数据结合模板语法渲染到页面中。

参考代码

src\pages\index\components\CategoryPanel.vue



热门推荐

热门推荐功能,后端根据用户的消费习惯等信息向用户推荐的一系列商品,前端负责展示这些商品展示给用户。

参考效果

黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块_第5张图片

静态结构

热门推荐布局为独立的组件 HotPanel,属于首页的业务组件,存放到首页的 components 目录中。





获取数据

接口调用

该业务功能对于前端来说比较简单,只需调用后端提供的接口将获得的数据展现。

接口地址:/home/hot/mutli

请求方式:GET

请求参数:

Headers:

字段名称

是否必须

默认值

备注

source-client

后端程序区分接口调用者,miniapp 代表小程序端

成功响应结果:

字段名称

数据类型

备注

id

string

ID

title

string

推荐标题

type

number

推荐类型

alt

string

推荐说明

pictures

array[string]

图片集合[ 图片路径 ]

类型声明

/** 首页-热门推荐数据类型 */
export type HotItem = {
  /** 说明 */
  alt: string
  /** id */
  id: string
  /** 图片集合[ 图片路径 ] */
  pictures: string[]
  /** 跳转地址 */
  target: string
  /** 标题 */
  title: string
  /** 推荐类型 */
  type: string
}

接口封装

// services/home.ts
/**
 * 首页-热门推荐-小程序
 */
export const getHomeHotAPI = () => {
  return http({
    method: 'GET',
    url: '/home/hot/mutli',
  })
}

最后将获得的数据结合模板语法渲染到页面中。

参考代码

src\pages\index\components\HotPanel.vue



猜你喜欢(重点难点)

参考效果

猜你喜欢功能,后端根据用户的浏览记录等信息向用户随机推荐的一系列商品,前端负责把商品在多个页面中展示

黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块_第6张图片

准备工作

  1. 准备组件 (通用组件,多页面使用)
  2. 定义组件类型
  3. 准备 scroll-view 滚动容器
  4. 设置 pagescroll-view 样式

静态结构

猜你喜欢是一个通用组件 XtxGuess,多个页面会用到该组件,存放到 src/components 目录中。





全局组件类型

// types/components.d.ts
import XtxSwiper from '@/components/XtxSwiper.vue'
import XtxGuess from '@/components/XtxGuess.vue'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    XtxSwiper: typeof XtxSwiper
    XtxGuess: typeof XtxGuess
  }
}

// 组件实例类型
export type XtxGuessInstance = InstanceType

获取数据

接口调用

该业务功能对于前端来说比较简单,只需调用后端提供的接口将获得的数据展现。

接口地址:/home/goods/guessLike

请求方式:GET

请求参数:

Query:

字段名称

是否必须

默认值

备注

page

1

分页的页码

pageSize

10

每页数据的条数

请求封装

// src/services/home.ts
/**
 * 猜你喜欢-小程序
 */
export const getHomeGoodsGuessLikeAPI = (data?: PageParams) => {
  return http>({
    method: 'GET',
    url: '/home/goods/guessLike',
    data,
  })
}

类型声明

通用分页结果类型如下,新建 src/types/global.d.ts 文件:

/** 通用分页结果类型 */
export type PageResult = {
  /** 列表数据 */
  items: T[]
  /** 总条数 */
  counts: number
  /** 当前页数 */
  page: number
  /** 总页数 */
  pages: number
  /** 每页条数 */
  pageSize: number
}

猜你喜欢-商品类型如下,存放到 src/types/home.d.ts 文件:

/** 猜你喜欢-商品类型 */
export type GuessItem = {
  /** 商品描述 */
  desc: string
  /** 商品折扣 */
  discount: number
  /** id */
  id: string
  /** 商品名称 */
  name: string
  /** 商品已下单数量 */
  orderNum: number
  /** 商品图片 */
  picture: string
  /** 商品价格 */
  price: number
}

通用分页参数类型如下,存放到 src/types/global.d.ts 文件:

/** 通用分页参数类型 */
export type PageParams = {
  /** 页码:默认值为 1 */
  page?: number
  /** 页大小:默认值为 10 */
  pageSize?: number
}

核心业务

  1. 子组件内部获取数据
  2. 父滚动触底需加载分页
  3. 组件通讯,子调父

参考代码

项目首页

// pages/index/index.vue


猜你喜欢组件

// src/components/XtxGuess.vue


下拉刷新

下拉刷新实际上是在用户操作下拉交互时重新调用接口,然后将新获取的数据再次渲染到页面中。

操作步骤

基于 scroll-view 组件实现下拉刷新,需要通过以下方式来实现下拉刷新的功能。

  • 配置 refresher-enabled 属性,开启下拉刷新交互
  • 监听 @refresherrefresh 事件,判断用户是否执行了下拉操作
  • 配置 refresher-triggered 属性,关闭下拉状态

参考代码

猜你喜欢组件定义重置数据的方法

// src/components/XtxGuess.vue
// 重置数据
const resetData = () => {
  pageParams.page = 1
  guessList.value = []
  finish.value = false
}
// 暴露方法
defineExpose({
  resetData,
})

首页触发下拉刷新

// src/pages/index/index.vue




  …省略

骨架屏

骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。

参考效果

骨架屏作用是缓解用户等待时的焦虑情绪,属于用户体验优化方案。

黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块_第7张图片

生成骨架屏

微信开发者工具提供了自动生成骨架屏代码的能力,使用时需要把自动生成的 xxx.skeleton.vuexxx.skeleton.wxss 封装成 vue 组件。

黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块_第8张图片

非常感谢您阅读到这里,创作不易!如果这篇文章对您有帮助,希望能留下您的点赞 关注 收藏 评论感谢支持!!!

听说 三连能够给人 带来好运!更有可能年入百w,进入大厂,上岸

黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块_第9张图片

你可能感兴趣的:(前端,javascript,uni-app)