• 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 配置：

    1. /* eslint-env node */
    2. require('@rushstack/eslint-patch/modern-module-resolution')
    3.  
    4. module.exports = {
    5.   root: true,
    6.   extends: [
    7.     'plugin:vue/vue3-essential',
    8.     'eslint:recommended',
    9.     '@vue/eslint-config-typescript',
    10.     '@vue/eslint-config-prettier',
    11.   ],
    12.   // 小程序全局变量
    13.   globals: {
    14.     uni: true,
    15.     wx: true,
    16.     WechatMiniprogram: true,
    17.     getCurrentPages: true,
    18.     getApp: true,
    19.     UniApp: true,
    20.     UniHelper: true,
    21.     App: true,
    22.     Page: true,
    23.     Component: true,
    24.     AnyObject: true,
    25.   },
    26.   parserOptions: {
    27.     ecmaVersion: 'latest',
    28.   },
    29.   rules: {
    30.     'prettier/prettier': [
    31.       'warn',
    32.       {
    33.         singleQuote: true,
    34.         semi: false,
    35.         printWidth: 100,
    36.         trailingComma: 'all',
    37.         endOfLine: 'auto',
    38.       },
    39.     ],
    40.     'vue/multi-word-component-names': ['off'],
    41.     'vue/no-setup-props-destructure': ['off'],
    42.     'vue/no-deprecated-html-element-is': ['off'],
    43.     '@typescript-eslint/no-unused-vars': ['off'],
    44.   },
    45. }

    在package.json进行如下配置：

    1. {
    2.   "script": {
    3.     // ... 省略 ...
    4.     "lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore"
    5.   }
    6. }

    接下来在终端运行 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文件：

    1. {
    2.   "script": {
    3.     // ... 省略 ...
    4.   },
    5.   "lint-staged": {
    6.     "*.{vue,ts,js}": ["eslint --fix"]
    7.   }
    8. }

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

    1. #!/usr/bin/env sh
    2. . "$(dirname -- "$0")/_/husky.sh"
    3.  
    4. pnpm run lint-staged

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

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

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

    1. "scripts": {
    2. 	"preinstall": "node ./scripts/preinstall.js"
    3. }

    配置完命令之后，当我们使用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 节点：

    1. // pages.json
    2. {
    3. 	"easycom": {
    4. 		"autoscan": true,
    5. 		"custom": {
    6. 			// uni-ui 规则如下配置
    7. 			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    8. 		}
    9. 	},
    10. 	// 其他内容
    11. 	pages:[
    12. 		// ...
    13. 	]
    14. }

    因为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文件，如下：

    1. import { createPinia } from 'pinia'
    2. import persist from 'pinia-plugin-persistedstate'
    3.  
    4. // 创建 pinia 实例
    5. const pinia = createPinia()
    6. // 使用持久化存储插件
    7. pinia.use(persist)
    8.  
    9. // 默认导出，给 main.ts 使用
    10. export default pinia

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

    1. import { createSSRApp } from 'vue'
    2. import App from './App.vue'
    3. // 导入 pinia 实例
    4. import pinia from './store'
    5.  
    6. export function createApp() {
    7.   // 创建 vue 实例
    8.   const app = createSSRApp(App)
    9.   // 使用 pinia
    10.   app.use(pinia)
    11.   return {
    12.     app,
    13.   }
    14. }

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

    1. {
    2.   // 网页端配置
    3.   // persist: true,
    4.   // 小程序端配置
    5.   persist: {
    6.     storage: {
    7.       getItem(key) {
    8.         return uni.getStorageSync(key)
    9.       },
    10.       setItem(key, value) {
    11.         uni.setStorageSync(key, value)
    12.       },
    13.     },
    14.   },
    15. }

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

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

    1. const baseURL = '测试网址'
    2.  
    3. // 添加拦截器
    4. const httpInterceptor = {
    5.   // 拦截前触发
    6.   invoke(options: UniApp.RequestOptions) {
    7.     // 1. 非 http 开头需拼接地址
    8.     if (!options.url.startsWith('http')) {
    9.       options.url = baseURL + options.url
    10.     }
    11.     // 2. 请求超时, 默认 60s
    12.     options.timeout = 10000
    13.     console.log(options)
    14.   },
    15. }
    16. uni.addInterceptor('request', httpInterceptor)
    17. uni.addInterceptor('uploadFile', httpInterceptor)

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

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

    1. /**
    2.  * 请求函数
    3.  * @param  UniApp.RequestOptions
    4.  * @returns Promise
    5.  *  1. 返回 Promise 对象
    6.  *  2. 获取数据成功
    7.  *    2.1 提取核心数据 res.data
    8.  *    2.2 添加类型，支持泛型
    9.  *  3. 获取数据失败
    10.  *    3.1 401错误  -> 清理用户信息，跳转到登录页
    11.  *    3.2 其他错误 -> 根据后端错误信息轻提示
    12.  *    3.3 网络错误 -> 提示用户换网络
    13.  */
    14. type Data = {
    15.   code: string
    16.   msg: string
    17.   result: T
    18. }
    19. // 2.2 添加类型，支持泛型
    20. export const http = (options: UniApp.RequestOptions) => {
    21.   // 1. 返回 Promise 对象
    22.   return new Promise<Data>((resolve, reject) => {
    23.     uni.request({
    24.       ...options,
    25.       // 响应成功
    26.       success(res) {
    27.         // 状态码 2xx， axios 就是这样设计的
    28.         if (res.statusCode >= 200 && res.statusCode < 300) {
    29.           // 2.1 提取核心数据 res.data
    30.           resolve(res.data as Data)
    31.         } else if (res.statusCode === 401) {
    32.           // 401错误  -> 清理用户信息，跳转到登录页
    33.           const memberStore = useMemberStore()
    34.           memberStore.clearProfile()
    35.           uni.navigateTo({ url: '/pages/login/login' })
    36.           reject(res)
    37.         } else {
    38.           // 其他错误 -> 根据后端错误信息轻提示
    39.           uni.showToast({
    40.             icon: 'none',
    41.             title: (res.data as Data).msg || '请求错误',
    42.           })
    43.           reject(res)
    44.         }
    45.       },
    46.       // 响应失败
    47.       fail(err) {
    48.         uni.showToast({
    49.           icon: 'none',
    50.           title: '网络错误，换个网络试试',
    51.         })
    52.         reject(err)
    53.       },
    54.     })
    55.   })
    56. }

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

    1. import { http } from '@/utils/http'
    2. // 测试请求
    3. const getData = async () => {
    4.   const res = await http({
    5.     method: 'GET',
    6.     url: '/home/banner',
    7.   })
    8.   console.log(res)
    9. }

    显示的结果是操作成功：

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

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

  • 相关阅读:
    计算机毕业设计uniapp+python餐厅菜品点餐系统小程序51988+
    C# .Net 多进程同步 通信 共享内存
    树状数组——数组两种初始化方式+单点增加+查询前缀和+插入
    如何解决3d max渲染效果图全白这类异常问题？
    【ping】在Linux服务器上ping某个主机时，出现(DUP!)，一般是什么原因？
    java毕业设计——基于java+JSP+Tomcat的农产品销售管理系统设计与实现（毕业论文+程序源码）——农产品销售管理系统
    细数SkyEye异构仿真的5大特色
    [网鼎杯 2018]Comment-1|SQL注入||二次注入
    macOS 中 聚焦搜索 的使用教程
    五年之后超过10000订阅者
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/132782228