uni-app--》基于小程序开发的电商平台项目实战（一）

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：uni-app

🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第二站就是uni-app开发，希望看到我文章的朋友能对你有所帮助。

今天开始使用 vue3 + uni-app 搭建一个电商购物的小程序，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的GitHub上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端uni-app知识。然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（阅读此次项目实践文章能够学习到的技术）：

uni-app：跨平台的应用开发框架，基于vue.js可以一套代码同时构建运行在多个平台。

pnpm：高性能、轻量级npm替代品，帮助开发人员更加高效地处理应用程序的依赖关系。

vue3：vue.js最新版本的用于构建用户界面的渐进式JavaScript框架。

typescript：JavaScript的超集，提供了静态类型检查，使得代码更加健壮。

pinia：vue3构建的Vuex替代品，具有响应式能力，提供非常简单的 API，进行状态管理。

uni-ui：基于vue.js和uni-app的前端UI组件库，开发人员可以快速地构建跨平台应用程序。

如果是第一次接触uni-app并且想学习uni-app的朋友，我是不建议直接从此次实战项目开始看起，可以先阅读一下我以前的基础文章：什么是uniapp？如何开发uniapp？按部就班的学习可以让学习变得更轻松更容易上手哦，闲话少说我们直接开始今天的uni-app实战篇。

目录

uni-app项目创建

基于vscode开发uni-app项目

配置代码书写规范

安装uni-ui组件库

小程序数据持久化设置

配置拦截器请求和请求函数

---

uni-app项目创建

注意：本次项目并没有采用HBuilderX进行项目开发，这里仅仅是简单回顾介绍一下如何使用该工具进行创建项目而已，如果已经了解过的朋友可以直接跳过此介绍，直接进入下一个基于vscode开发uni-app项目的讲解。

当我们打开HBuilder X工具时，在显示区域页面点击新建项目：

点击新建项目之后，会出现如下的弹框让我们进行一些基础配置，配置说明如下：

如果是第一次在uni-app中使用vue3创建项目的话，需要安装一个插件。 点击HBuilder X的菜单栏中的工具选项，选择插件安装，安装如下的插件即可。

接下来我们就可以点击菜单栏中的运行，选择运行到小程序模拟器，然后选择使用微信开发者工具即可，最终得到的画面如下：

基础代码项目运行起来之后，我们可以点击微信开发者工具当中的分离窗口按钮，让运行窗口和微信开发者工具分离，然后点击置顶窗口，让我们的代码编辑器和运行窗口呈现在同一个页面上，通过微信开发者工具的代码热更新，在外面书写代码时就能实时看到具体的效果：

基于vscode开发uni-app项目

开发uni-app项目我们也可以使用我们常用的vscode进行开发，因为HBuilderX对TS的类型支持暂不完善，有时候不能校验出属性值的错误，所以此次项目我们采用我们熟悉的vscode进行开发，如果想了解如何使用HBuilderX进行项目的开发，可以看看我之前写的文章。

命令行创建项目：uni-app官网 明确介绍了我们在创建uni-app项目的时候，可以采用命令行的形式进行开发，这样就不仅仅只依赖于HBuilderX这一个编辑器进行开发了，我们也可以通过我们熟悉的vscode编辑器进行开发uni-app项目了。

这里我们采用能够创建ts项目的命令进行安装

npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

可以看到我们的项目已经创建成功了

创建完成之后，将项目拖到vscode编辑器当中，执行 pnpm i 安装项目依赖：

安装完依赖之后，接下来我们需要在manifest.json中填写我们微信小程序中的appid属性值：

接下来我们执行如下命令进行微信小程序的编译 pnpm dev:mp-weixin ，可以看到我们的项目中出现了dist文件夹，文件夹中就是我们微信小程序所需的相关文件：

接下来我们打开微信小程序的开发者工具，然后将我们生成的dist文件夹中的my-weixin进行导入

接下来我们就可以在vscode中进行项目的书写了：

安装所需插件：使用vscode开发uni-app项目，需要我们先安装如下三个重要的插件才可以快速便捷的进行开发uni-app项目的开发，其插件名称、相关作用及其相关配置如下：

uni-create-view：快速构建 uni-app 页面

uni-create-view插件安装完成之后，需要进行设置一下，点击该插件中的扩展设置：

然后勾选创建同名的文件夹即可，下面也可以设置创建与文件夹同步的文件，这里我们采用默认的index名称即可，当然看个人的选择：

下面也可以选择生成文件的模板，因为此项目的vue3，所以这里我勾选vue3项目模板：

uni-helper：uni-app代码提示

安装完插件之后，我们需要再在终端执行如下命令安装相关的类型声明文件：

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

安装完类型声明文件之后，需要在tsconfig.json中进行如下配置：

在vscode中使用uni-app创建的项目会出现json注释问题，这里我们需要进行配置一下：

这样我们就可以在json文件中设置注释了，这里建议就设置manifest.json和pages.json两个文件：

uniapp小程序扩展： 鼠标悬停查看文档

因为上面的这些插件，版本非常的新最近的也就在几个月前更新过一次，如果你的vscode编辑器版本比较老的话，可能会和这些新版本的插件不兼容的，这里我们就需要重新更新一下vscode编辑器的版本，博主这里也是更新的(原本的版本还是一年前的版本)，更新vscode也是很简单，点击左下角的设置按钮，选择设置选项，找到应用程序下的更新选项设置检查更新，然后再点击菜单栏中的帮助选项，下拉框当中就会出现检查更新的选项，点击检查更新就会自动更新然后重启编辑器即可（如果你的编辑器版本很高，可以忽略）：

配置代码书写规范

配置代码规范的目的是为了保证代码的一致性、可读性和可维护性。通过统一的代码规范，可以使团队成员之间的协作更加高效，并且降低代码出错的概率。所以这里我们进行相关代码规范配置：

配置eslint+prettier：安装如下命令进行下载相应的第三方包：

pnpm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig

在项目根目录当中新建 .eslintrc.cjs 文件，添加以下 eslint 配置：

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  // 小程序全局变量
  globals: {
    uni: true,
    wx: true,
    WechatMiniprogram: true,
    getCurrentPages: true,
    getApp: true,
    UniApp: true,
    UniHelper: true,
    App: true,
    Page: true,
    Component: true,
    AnyObject: true,
  },
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: false,
        printWidth: 100,
        trailingComma: 'all',
        endOfLine: 'auto',
      },
    ],
    'vue/multi-word-component-names': ['off'],
    'vue/no-setup-props-destructure': ['off'],
    'vue/no-deprecated-html-element-is': ['off'],
    '@typescript-eslint/no-unused-vars': ['off'],
  },
}

在package.json进行如下配置：

{
  "script": {
    // ... 省略 ...
    "lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore"
  }
}

接下来在终端运行 pnpm lint ，至此我们配置的eslint+prettier生效并在项目中正式启用了，当我们在项目中随便一处代码打出一个空格，编辑器提示错误，然后我们点击错误给出修改的按钮：

配置husky：我们虽然已经集成好了我们代码校验工具，但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中，那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。

要做到这件事情，就需要利用husky在代码提交之前触发git hook(git在客户端的钩子)，然后执行 pnpm run format 来自动的格式化我们的代码。 注意：你要先进行 git init 创建本地库然后这个插件才会起作用。接下来执行如下命令安装 husky：

在项目中初始化 husky 工具：（需要确保在执行如下命令之前，您已经在项目根目录下初始化了 Git 仓库，即已经执行了git init，否则会报错）。

pnpm dlx husky-init

在项目中安装并保存 lint-staged 包为开发依赖项：

pnpm i -D lint-staged

配置package.json文件：

{
  "script": {
    // ... 省略 ...
  },
  "lint-staged": {
    "*.{vue,ts,js}": ["eslint --fix"]
  }
}

修改生成的 .husky/pre-commit 文件，修改的内容如下：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm run lint-staged

强制使用pnpm包管理工具：团队开发项目的时候，需要统一包管理器工具,因为不同包管理器工具下载同一个依赖,可能版本不一样,导致项目出现bug问题,因此包管理器工具需要统一管理！我们可以在根目录创建 scripts/preinstall.js 文件，添加下面的内容：

if (!/pnpm/.test(process.env.npm_execpath || '')) {
  console.warn(
    `\u001b[33mThis repository must using pnpm as the package manager ` +
      ` for scripts to work properly.\u001b[39m\n`,
  )
  process.exit(1)
}

然后我们需要在 package.json 中配置scripts命令 ，如下：

"scripts": {
	"preinstall": "node ./scripts/preinstall.js"
}

配置完命令之后，当我们使用npm或者yarn来安装包的时候，就会报错了。原理就是在install的时候会触发preinstall（npm提供的生命周期钩子）这个文件里面的代码。验证安装axios如下：

安装uni-ui组件库

uni-app有自己特有的一套uni-ui组件库，所以这里我们开始使用该组件库进行创建项目，其相关安装和配置命令在 官网 已经讲解的非常清楚了，博主也在这里进行简单的讲解与使用吧。

终端执行如下命令进行安装uni-app组件库：

pnpm i @dcloudio/uni-ui

配置easycom：使用 pnpm 安装好 uni-ui 之后，需要配置 easycom 规则，让 pnpm 安装的组件支持 easycom，打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	// 其他内容
	pages:[
		// ...
	]
}

因为uni-ui使用sass来管理其样式，因此在您使用 uni-ui 并进行主题自定义时，建议安装 sass：

pnpm i sass

安装配置完成之后，我们随便复制uni-ui官网提供的ui组件进行使用，验证如下表明引入成功：

因为uni-ui在开发的时候是使用js进行开发的，并没有涉及到ts，所以uni-ui提供的组件库并没有对应的类型声明文件，但是我们可以通过安装第三方包来对uni-ui的类型声明文件进行配置，其对应的 包平台说明 已经对其讲解的非常清楚了，博主还是对其使用讲解一下：

安装如下命令安装第三方包：

pnpm i -D @uni-helper/uni-ui-types

配置 tsconfig.json，确保 compilerOptions.types 中含有 @dcloudio/types 和 @uni-helper/uni-ui-types，如下：

配置完成之后，接下来当鼠标悬停到ui组件标签的时候，其对应的ts类型会自动识别，比没有ts类型检测的相对来说更加安全：

小程序数据持久化设置

因为我们的项目目前使用的是vue3的项目，所以我们选择的状态管理工具是pinia，如果不了解该状态管理工具，可以参考我之前的文章：探索Pinia：Vue状态管理的未来 ，接下来我们开始讲解如何在小程序中使用pinia。

Pinia Plugin PersistedState 是 Pinia 的一个插件，它提供了状态持久化的功能。

pnpm i pinia pinia-plugin-persistedstate

安装完成之后，我们在src文件夹下新建一个store文件夹，在该文件夹下新建index.ts文件，如下：

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)

// 默认导出，给 main.ts 使用
export default pinia

在main.ts文件中我们进行导入 pinia 实例 ：

import { createSSRApp } from 'vue'
import App from './App.vue'
// 导入 pinia 实例
import pinia from './store'

export function createApp() {
  // 创建 vue 实例
  const app = createSSRApp(App)
  // 使用 pinia
  app.use(pinia)
  return {
    app,
  }
}

今后如果想使用持久化的话，只需要在相应的仓库进行如下的配置即可：

{
  // 网页端配置
  // persist: true,
  // 小程序端配置
  persist: {
    storage: {
      getItem(key) {
        return uni.getStorageSync(key)
      },
      setItem(key, value) {
        uni.setStorageSync(key, value)
      },
    },
  },
}

配置拦截器请求和请求函数

接下来简单的对项目进行一个简单的拦截器请求的配置，具体的参数设置可以参考官方文档：

const baseURL = '测试网址'

// 添加拦截器
const httpInterceptor = {
  // 拦截前触发
  invoke(options: UniApp.RequestOptions) {
    // 1. 非 http 开头需拼接地址
    if (!options.url.startsWith('http')) {
      options.url = baseURL + options.url
    }
    // 2. 请求超时, 默认 60s
    options.timeout = 10000
    console.log(options)
  },
}
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)

可以看我们发送get请求成功，接下来我们可以设置请求头和token标识：

请求函数的配置文件如下：

/**
 * 请求函数
 * @param  UniApp.RequestOptions
 * @returns Promise
 *  1. 返回 Promise 对象
 *  2. 获取数据成功
 *    2.1 提取核心数据 res.data
 *    2.2 添加类型，支持泛型
 *  3. 获取数据失败
 *    3.1 401错误  -> 清理用户信息，跳转到登录页
 *    3.2 其他错误 -> 根据后端错误信息轻提示
 *    3.3 网络错误 -> 提示用户换网络
 */
type Data<T> = {
  code: string
  msg: string
  result: T
}
// 2.2 添加类型，支持泛型
export const http = <T>(options: UniApp.RequestOptions) => {
  // 1. 返回 Promise 对象
  return new Promise<Data<T>>((resolve, reject) => {
    uni.request({
      ...options,
      // 响应成功
      success(res) {
        // 状态码 2xx， axios 就是这样设计的
        if (res.statusCode >= 200 && res.statusCode < 300) {
          // 2.1 提取核心数据 res.data
          resolve(res.data as Data<T>)
        } else if (res.statusCode === 401) {
          // 401错误  -> 清理用户信息，跳转到登录页
          const memberStore = useMemberStore()
          memberStore.clearProfile()
          uni.navigateTo({ url: '/pages/login/login' })
          reject(res)
        } else {
          // 其他错误 -> 根据后端错误信息轻提示
          uni.showToast({
            icon: 'none',
            title: (res.data as Data<T>).msg || '请求错误',
          })
          reject(res)
        }
      },
      // 响应失败
      fail(err) {
        uni.showToast({
          icon: 'none',
          title: '网络错误，换个网络试试',
        })
        reject(err)
      },
    })
  })
}

配置完成之后，当我们发起请求的时候只需要进行引入http然后调用即可：

import { http } from '@/utils/http'
// 测试请求
const getData = async () => {
  const res = await http({
    method: 'GET',
    url: '/home/banner',
  })
  console.log(res)
}

显示的结果是操作成功：

这请求函数中我们也设置了失败情况出现的状况，比如说当我们的小程序处于没网状态，结果如下

本项目的一些基本功能的搭建就讲解到这，下一篇文章将正式讲解项目的实际代码，关注博主学习更多前端uni-app知识，您的支持就是博主创作的最大动力！