微信小程序（黑马优购项目）

iaz999

已于 2023-11-09 17:03:09 修改

阅读量3.1k

点赞数 4

分类专栏：实战文章标签：小程序

于 2023-04-21 00:51:43 首次发布

本文链接：https://blog.youkuaiyun.com/iaz999/article/details/130221198

版权

本文档详细介绍了微信小程序（黑马优购项目）的开发过程，包括项目效果展示、技术栈（vue2+uni-app）、新建项目、配置、页面创建、网络请求、轮播图、分包、分类导航、楼层区域、商品列表、搜索功能、购物车、收货地址、结算区域、登录与支付等各个功能的实现和细节。通过实例讲解，帮助开发者掌握微信小程序的开发技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目效果

项目技术栈

vue2+uni-app

新建项目

填写自己的微信小程序的 AppID：

运行一下

配置`.gitignore` 忽略文件

# 忽略 node_modules 目录
/node_modules
/unpackage/dist

在 unpackage 目录下创建一个叫做 `.gitkeep` 的文件进行占位

把本地项目上传到码云对应的空白仓库

创建 tabBar 页面

在 pages 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面

`static 文件夹` 拷贝一份

去page.json中设置tabbar

删除默认的 index 首页

在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉
同时，把 page.json 中记录的 index 首页 路径删除掉

重新运行

修改导航条的样式效果

打开 pages.json 这个全局的配置文件

删掉单个页面的自定义标题

home页面

配置网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

cnpm i @escook/request-miniprogram

main.js中

// 按需导入 $http 对象
import { $http } from '@escook/request-miniprogram'

// 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用
wx.$http = $http

// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http

// 请求拦截器
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 响应拦截器
$http.afterRequest = function () {
  uni.hideLoading()
}

// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'
// $http.baseUrl = 'https://api-hmugo-web.itheima.net'

轮播图

请求轮播图的数据

渲染轮播图的 UI 结构

调整样式

indicator-color="yellow"，表示未播放的图片的小圆圈的颜色

indicator-active-color="yellow"，表示正在播放的图片的小圆圈的颜色

配置小程序分包

分包可以减少小程序首次启动时的加载时间

为此，我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。在 uni-app 项目中，配置分包的步骤如下：

在项目根目录中，创建分包的根目录，命名为 subpkg

在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：

subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息：

点击轮播图跳转到商品详情页面

将view改成navigator，并添加url属性

路径

'/subpkg/goods_detail/goods_detail?goods_id='

封装 uni.$showMsg() 方法

当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下：

在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法：

分类导航区域

#3.3.1 获取分类导航的数据

实现思路：

定义 data 数据
在 onLoad 中调用获取数据的方法
在 methods 中定义获取数据的方法

渲染分类导航的 UI 结构

点击分类导航跳转到分类页面

wx.navigateTo（）跳转到非tabbar页

uni.switchTab（）跳转到tabbar页

楼层区域

#3.4.1 获取楼层数据

实现思路：

定义 data 数据
在 onLoad 中调用获取数据的方法
在 methods 中定义获取数据的方法

渲染楼层里的图片

定义楼层图片区域的 UI 结构：

 <!-- 楼层区 -->
        <view class="floor-list">
            <view class="floor-item" v-for="(item, i) in floorList" :key="i">
                <!-- 楼层标题 -->
                <img :src="item.floor_title.image_src" class="floor-title" alt="">
                <!-- 楼层图片 -->
                <view class="floor-img-box">
                    <!-- 左侧大图 -->
                    <view class="left-img-box"></view>
                    <!-- 右侧四小图 -->
                    <view class="right-img-box"></view>
                </view>
            </view>
        </view>