🏍?作者簡(jiǎn)介：大家好，我是亦世凡華、渴望知識(shí)儲(chǔ)備自己的一名在校大學(xué)生

🛵個(gè)人主頁(yè)：亦世凡華、

🛺系列專(zhuān)欄：uni-app

🚲座右銘：人生亦可燃燒，亦可腐敗，我愿燃燒，耗盡所有光芒。

👀引言

?????????經(jīng)過(guò)web前端的學(xué)習(xí)，相信大家對(duì)于前端開(kāi)發(fā)有了一定深入的了解，今天我開(kāi)設(shè)了uni-app專(zhuān)欄，主要想從移動(dòng)端開(kāi)發(fā)方向進(jìn)一步發(fā)展，而對(duì)于我來(lái)說(shuō)寫(xiě)移動(dòng)端博文的第二站就是uni-app開(kāi)發(fā)，希望看到我文章的朋友能對(duì)你有所幫助。

今天開(kāi)始使用 vue3 + uni-app 搭建一個(gè)電商購(gòu)物的小程序，因?yàn)槲恼聲?huì)將項(xiàng)目的每一個(gè)地方代碼的書(shū)寫(xiě)都會(huì)講解到，所以本項(xiàng)目會(huì)分成好幾篇文章進(jìn)行講解，我會(huì)在最后一篇文章中會(huì)將項(xiàng)目代碼開(kāi)源到我的GitHub上，大家可以自行去進(jìn)行下載運(yùn)行，希望本文章對(duì)有幫助的朋友們能多多關(guān)注本專(zhuān)欄，學(xué)習(xí)更多前端uni-app知識(shí)。然后開(kāi)篇先簡(jiǎn)單介紹一下本項(xiàng)目用到的技術(shù)棧都有哪幾個(gè)方面（閱讀此次項(xiàng)目實(shí)踐文章能夠?qū)W習(xí)到的技術(shù)）：

uni-app：跨平臺(tái)的應(yīng)用開(kāi)發(fā)框架，基于vue.js可以一套代碼同時(shí)構(gòu)建運(yùn)行在多個(gè)平臺(tái)。

pnpm：高性能、輕量級(jí)npm替代品，幫助開(kāi)發(fā)人員更加高效地處理應(yīng)用程序的依賴(lài)關(guān)系。

vue3：vue.js最新版本的用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架。

typescript：JavaScript的超集，提供了靜態(tài)類(lèi)型檢查，使得代碼更加健壯。

pinia：vue3構(gòu)建的Vuex替代品，具有響應(yīng)式能力，提供非常簡(jiǎn)單的 API，進(jìn)行狀態(tài)管理。

uni-ui：基于vue.js和uni-app的前端UI組件庫(kù)，開(kāi)發(fā)人員可以快速地構(gòu)建跨平臺(tái)應(yīng)用程序。

如果是第一次接觸uni-app并且想學(xué)習(xí)uni-app的朋友，我是不建議直接從此次實(shí)戰(zhàn)項(xiàng)目開(kāi)始看起，可以先閱讀一下我以前的基礎(chǔ)文章：什么是uniapp？如何開(kāi)發(fā)uniapp？按部就班的學(xué)習(xí)可以讓學(xué)習(xí)變得更輕松更容易上手哦，閑話(huà)少說(shuō)我們直接開(kāi)始今天的uni-app實(shí)戰(zhàn)篇。

目錄

uni-app項(xiàng)目創(chuàng)建

基于vscode開(kāi)發(fā)uni-app項(xiàng)目

配置代碼書(shū)寫(xiě)規(guī)范

安裝uni-ui組件庫(kù)

小程序數(shù)據(jù)持久化設(shè)置

配置攔截器請(qǐng)求和請(qǐng)求函數(shù)

---

uni-app項(xiàng)目創(chuàng)建

注意：本次項(xiàng)目并沒(méi)有采用HBuilderX進(jìn)行項(xiàng)目開(kāi)發(fā)，這里僅僅是簡(jiǎn)單回顧介紹一下如何使用該工具進(jìn)行創(chuàng)建項(xiàng)目而已，如果已經(jīng)了解過(guò)的朋友可以直接跳過(guò)此介紹，直接進(jìn)入下一個(gè)基于vscode開(kāi)發(fā)uni-app項(xiàng)目的講解。

當(dāng)我們打開(kāi)HBuilder X工具時(shí)，在顯示區(qū)域頁(yè)面點(diǎn)擊新建項(xiàng)目：

點(diǎn)擊新建項(xiàng)目之后，會(huì)出現(xiàn)如下的彈框讓我們進(jìn)行一些基礎(chǔ)配置，配置說(shuō)明如下：

如果是第一次在uni-app中使用vue3創(chuàng)建項(xiàng)目的話(huà)，需要安裝一個(gè)插件。 點(diǎn)擊HBuilder X的菜單欄中的工具選項(xiàng)，選擇插件安裝，安裝如下的插件即可。

接下來(lái)我們就可以點(diǎn)擊菜單欄中的運(yùn)行，選擇運(yùn)行到小程序模擬器，然后選擇使用微信開(kāi)發(fā)者工具即可，最終得到的畫(huà)面如下：

基礎(chǔ)代碼項(xiàng)目運(yùn)行起來(lái)之后，我們可以點(diǎn)擊微信開(kāi)發(fā)者工具當(dāng)中的分離窗口按鈕，讓運(yùn)行窗口和微信開(kāi)發(fā)者工具分離，然后點(diǎn)擊置頂窗口，讓我們的代碼編輯器和運(yùn)行窗口呈現(xiàn)在同一個(gè)頁(yè)面上，通過(guò)微信開(kāi)發(fā)者工具的代碼熱更新，在外面書(shū)寫(xiě)代碼時(shí)就能實(shí)時(shí)看到具體的效果：

基于vscode開(kāi)發(fā)uni-app項(xiàng)目

開(kāi)發(fā)uni-app項(xiàng)目我們也可以使用我們常用的vscode進(jìn)行開(kāi)發(fā)，因?yàn)镠BuilderX對(duì)TS的類(lèi)型支持暫不完善，有時(shí)候不能校驗(yàn)出屬性值的錯(cuò)誤，所以此次項(xiàng)目我們采用我們熟悉的vscode進(jìn)行開(kāi)發(fā)，如果想了解如何使用HBuilderX進(jìn)行項(xiàng)目的開(kāi)發(fā)，可以看看我之前寫(xiě)的文章。

命令行創(chuàng)建項(xiàng)目：uni-app官網(wǎng) 明確介紹了我們?cè)趧?chuàng)建uni-app項(xiàng)目的時(shí)候，可以采用命令行的形式進(jìn)行開(kāi)發(fā)，這樣就不僅僅只依賴(lài)于HBuilderX這一個(gè)編輯器進(jìn)行開(kāi)發(fā)了，我們也可以通過(guò)我們熟悉的vscode編輯器進(jìn)行開(kāi)發(fā)uni-app項(xiàng)目了。

這里我們采用能夠創(chuàng)建ts項(xiàng)目的命令進(jìn)行安裝

npx degit dcloudio/uni-preset-vue#vite-ts 項(xiàng)目名稱(chēng)

可以看到我們的項(xiàng)目已經(jīng)創(chuàng)建成功了

創(chuàng)建完成之后，將項(xiàng)目拖到vscode編輯器當(dāng)中，執(zhí)行 pnpm i 安裝項(xiàng)目依賴(lài)：

安裝完依賴(lài)之后，接下來(lái)我們需要在manifest.json中填寫(xiě)我們微信小程序中的appid屬性值：

接下來(lái)我們執(zhí)行如下命令進(jìn)行微信小程序的編譯?pnpm dev:mp-weixin ，可以看到我們的項(xiàng)目中出現(xiàn)了dist文件夾，文件夾中就是我們微信小程序所需的相關(guān)文件：

接下來(lái)我們打開(kāi)微信小程序的開(kāi)發(fā)者工具，然后將我們生成的dist文件夾中的my-weixin進(jìn)行導(dǎo)入

接下來(lái)我們就可以在vscode中進(jìn)行項(xiàng)目的書(shū)寫(xiě)了：

安裝所需插件：使用vscode開(kāi)發(fā)uni-app項(xiàng)目，需要我們先安裝如下三個(gè)重要的插件才可以快速便捷的進(jìn)行開(kāi)發(fā)uni-app項(xiàng)目的開(kāi)發(fā)，其插件名稱(chēng)、相關(guān)作用及其相關(guān)配置如下：

uni-create-view：快速構(gòu)建 uni-app 頁(yè)面

uni-create-view插件安裝完成之后，需要進(jìn)行設(shè)置一下，點(diǎn)擊該插件中的擴(kuò)展設(shè)置：

然后勾選創(chuàng)建同名的文件夾即可，下面也可以設(shè)置創(chuàng)建與文件夾同步的文件，這里我們采用默認(rèn)的index名稱(chēng)即可，當(dāng)然看個(gè)人的選擇：?

下面也可以選擇生成文件的模板，因?yàn)榇隧?xiàng)目的vue3，所以這里我勾選vue3項(xiàng)目模板：?

uni-helper：uni-app代碼提示

安裝完插件之后，我們需要再在終端執(zhí)行如下命令安裝相關(guān)的類(lèi)型聲明文件：

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

安裝完類(lèi)型聲明文件之后，需要在tsconfig.json中進(jìn)行如下配置：

在vscode中使用uni-app創(chuàng)建的項(xiàng)目會(huì)出現(xiàn)json注釋問(wèn)題，這里我們需要進(jìn)行配置一下：

這樣我們就可以在json文件中設(shè)置注釋了，這里建議就設(shè)置manifest.json和pages.json兩個(gè)文件：

uniapp小程序擴(kuò)展： 鼠標(biāo)懸停查看文檔

因?yàn)樯厦娴倪@些插件，版本非常的新最近的也就在幾個(gè)月前更新過(guò)一次，如果你的vscode編輯器版本比較老的話(huà)，可能會(huì)和這些新版本的插件不兼容的，這里我們就需要重新更新一下vscode編輯器的版本，博主這里也是更新的(原本的版本還是一年前的版本)，更新vscode也是很簡(jiǎn)單，點(diǎn)擊左下角的設(shè)置按鈕，選擇設(shè)置選項(xiàng)，找到應(yīng)用程序下的更新選項(xiàng)設(shè)置檢查更新，然后再點(diǎn)擊菜單欄中的幫助選項(xiàng)，下拉框當(dāng)中就會(huì)出現(xiàn)檢查更新的選項(xiàng)，點(diǎn)擊檢查更新就會(huì)自動(dòng)更新然后重啟編輯器即可（如果你的編輯器版本很高，可以忽略）：

配置代碼書(shū)寫(xiě)規(guī)范

配置代碼規(guī)范的目的是為了保證代碼的一致性、可讀性和可維護(hù)性。通過(guò)統(tǒng)一的代碼規(guī)范，可以使團(tuán)隊(duì)成員之間的協(xié)作更加高效，并且降低代碼出錯(cuò)的概率。所以這里我們進(jìn)行相關(guān)代碼規(guī)范配置：

配置eslint+prettier：安裝如下命令進(jìn)行下載相應(yīng)的第三方包：

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

在項(xiàng)目根目錄當(dāng)中新建 .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進(jìn)行如下配置：

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

接下來(lái)在終端運(yùn)行 pnpm lint ，至此我們配置的eslint+prettier生效并在項(xiàng)目中正式啟用了，當(dāng)我們?cè)陧?xiàng)目中隨便一處代碼打出一個(gè)空格，編輯器提示錯(cuò)誤，然后我們點(diǎn)擊錯(cuò)誤給出修改的按鈕：

配置husky：我們雖然已經(jīng)集成好了我們代碼校驗(yàn)工具，但是需要每次手動(dòng)的去執(zhí)行命令才會(huì)格式化我們的代碼。如果有人沒(méi)有格式化就提交了遠(yuǎn)程倉(cāng)庫(kù)中，那這個(gè)規(guī)范就沒(méi)什么用。所以我們需要強(qiáng)制讓開(kāi)發(fā)人員按照代碼規(guī)范來(lái)提交。

要做到這件事情，就需要利用husky在代碼提交之前觸發(fā)git hook(git在客戶(hù)端的鉤子)，然后執(zhí)行 pnpm run format 來(lái)自動(dòng)的格式化我們的代碼。 注意：你要先進(jìn)行 git init 創(chuàng)建本地庫(kù)然后這個(gè)插件才會(huì)起作用。接下來(lái)執(zhí)行如下命令安裝 husky：

在項(xiàng)目中初始化 husky 工具：（需要確保在執(zhí)行如下命令之前，您已經(jīng)在項(xiàng)目根目錄下初始化了 Git 倉(cāng)庫(kù)，即已經(jīng)執(zhí)行了git init，否則會(huì)報(bào)錯(cuò)）。

pnpm dlx husky-init

在項(xiàng)目中安裝并保存 lint-staged 包為開(kāi)發(fā)依賴(lài)項(xiàng)：

pnpm i -D lint-staged

配置package.json文件：

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

修改生成的 .husky/pre-commit 文件，修改的內(nèi)容如下：

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

強(qiáng)制使用pnpm包管理工具：團(tuán)隊(duì)開(kāi)發(fā)項(xiàng)目的時(shí)候，需要統(tǒng)一包管理器工具,因?yàn)椴煌芾砥鞴ぞ呦螺d同一個(gè)依賴(lài),可能版本不一樣,導(dǎo)致項(xiàng)目出現(xiàn)bug問(wèn)題,因此包管理器工具需要統(tǒng)一管理！我們可以在根目錄創(chuàng)建 scripts/preinstall.js 文件，添加下面的內(nèi)容：

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"
}

配置完命令之后，當(dāng)我們使用npm或者yarn來(lái)安裝包的時(shí)候，就會(huì)報(bào)錯(cuò)了。原理就是在install的時(shí)候會(huì)觸發(fā)preinstall（npm提供的生命周期鉤子）這個(gè)文件里面的代碼。驗(yàn)證安裝axios如下：

安裝uni-ui組件庫(kù)

uni-app有自己特有的一套u(yù)ni-ui組件庫(kù)，所以這里我們開(kāi)始使用該組件庫(kù)進(jìn)行創(chuàng)建項(xiàng)目，其相關(guān)安裝和配置命令在 官網(wǎng) 已經(jīng)講解的非常清楚了，博主也在這里進(jìn)行簡(jiǎn)單的講解與使用吧。

終端執(zhí)行如下命令進(jìn)行安裝uni-app組件庫(kù)：

pnpm i @dcloudio/uni-ui

配置easycom：使用 pnpm 安裝好 uni-ui 之后，需要配置 easycom 規(guī)則，讓 pnpm 安裝的組件支持 easycom，打開(kāi)項(xiàng)目根目錄下的 pages.json 并添加 easycom 節(jié)點(diǎn)：

// pages.json
{"easycom": {"autoscan": true,"custom": {// uni-ui 規(guī)則如下配置"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"}},// 其他內(nèi)容pages:[// ...]
}

因?yàn)閡ni-ui使用sass來(lái)管理其樣式，因此在您使用 uni-ui 并進(jìn)行主題自定義時(shí)，建議安裝 sass：

pnpm i sass

安裝配置完成之后，我們隨便復(fù)制uni-ui官網(wǎng)提供的ui組件進(jìn)行使用，驗(yàn)證如下表明引入成功：

因?yàn)閡ni-ui在開(kāi)發(fā)的時(shí)候是使用js進(jìn)行開(kāi)發(fā)的，并沒(méi)有涉及到ts，所以u(píng)ni-ui提供的組件庫(kù)并沒(méi)有對(duì)應(yīng)的類(lèi)型聲明文件，但是我們可以通過(guò)安裝第三方包來(lái)對(duì)uni-ui的類(lèi)型聲明文件進(jìn)行配置，其對(duì)應(yīng)的 包平臺(tái)說(shuō)明 已經(jīng)對(duì)其講解的非常清楚了，博主還是對(duì)其使用講解一下：

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

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

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

配置完成之后，接下來(lái)當(dāng)鼠標(biāo)懸停到ui組件標(biāo)簽的時(shí)候，其對(duì)應(yīng)的ts類(lèi)型會(huì)自動(dòng)識(shí)別，比沒(méi)有ts類(lèi)型檢測(cè)的相對(duì)來(lái)說(shuō)更加安全：

小程序數(shù)據(jù)持久化設(shè)置

因?yàn)槲覀兊捻?xiàng)目目前使用的是vue3的項(xiàng)目，所以我們選擇的狀態(tài)管理工具是pinia，如果不了解該狀態(tài)管理工具，可以參考我之前的文章：探索Pinia：Vue狀態(tài)管理的未來(lái) ，接下來(lái)我們開(kāi)始講解如何在小程序中使用pinia。

Pinia Plugin PersistedState 是 Pinia 的一個(gè)插件，它提供了狀態(tài)持久化的功能。

pnpm i pinia pinia-plugin-persistedstate

安裝完成之后，我們?cè)趕rc文件夾下新建一個(gè)store文件夾，在該文件夾下新建index.ts文件，如下：

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'// 創(chuàng)建 pinia 實(shí)例
const pinia = createPinia()
// 使用持久化存儲(chǔ)插件
pinia.use(persist)// 默認(rèn)導(dǎo)出，給 main.ts 使用
export default pinia

在main.ts文件中我們進(jìn)行導(dǎo)入 pinia 實(shí)例 ：

import { createSSRApp } from 'vue'
import App from './App.vue'
// 導(dǎo)入 pinia 實(shí)例
import pinia from './store'export function createApp() {// 創(chuàng)建 vue 實(shí)例const app = createSSRApp(App)// 使用 piniaapp.use(pinia)return {app,}
}

今后如果想使用持久化的話(huà)，只需要在相應(yīng)的倉(cāng)庫(kù)進(jìn)行如下的配置即可：

{// 網(wǎng)頁(yè)端配置// persist: true,// 小程序端配置persist: {storage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {uni.setStorageSync(key, value)},},},
}

配置攔截器請(qǐng)求和請(qǐng)求函數(shù)

接下來(lái)簡(jiǎn)單的對(duì)項(xiàng)目進(jìn)行一個(gè)簡(jiǎn)單的攔截器請(qǐng)求的配置，具體的參數(shù)設(shè)置可以參考官方文檔：

const baseURL = '測(cè)試網(wǎng)址'// 添加攔截器
const httpInterceptor = {// 攔截前觸發(fā)invoke(options: UniApp.RequestOptions) {// 1. 非 http 開(kāi)頭需拼接地址if (!options.url.startsWith('http')) {options.url = baseURL + options.url}// 2. 請(qǐng)求超時(shí), 默認(rèn) 60soptions.timeout = 10000console.log(options)},
}
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)

可以看我們發(fā)送get請(qǐng)求成功，接下來(lái)我們可以設(shè)置請(qǐng)求頭和token標(biāo)識(shí)：

請(qǐng)求函數(shù)的配置文件如下：

/*** 請(qǐng)求函數(shù)* @param  UniApp.RequestOptions* @returns Promise*  1. 返回 Promise 對(duì)象*  2. 獲取數(shù)據(jù)成功*    2.1 提取核心數(shù)據(jù) res.data*    2.2 添加類(lèi)型，支持泛型*  3. 獲取數(shù)據(jù)失敗*    3.1 401錯(cuò)誤  -> 清理用戶(hù)信息，跳轉(zhuǎn)到登錄頁(yè)*    3.2 其他錯(cuò)誤 -> 根據(jù)后端錯(cuò)誤信息輕提示*    3.3 網(wǎng)絡(luò)錯(cuò)誤 -> 提示用戶(hù)換網(wǎng)絡(luò)*/
type Data<T> = {code: stringmsg: stringresult: T
}
// 2.2 添加類(lèi)型，支持泛型
export const http = <T>(options: UniApp.RequestOptions) => {// 1. 返回 Promise 對(duì)象return new Promise<Data<T>>((resolve, reject) => {uni.request({...options,// 響應(yīng)成功success(res) {// 狀態(tài)碼 2xx， axios 就是這樣設(shè)計(jì)的if (res.statusCode >= 200 && res.statusCode < 300) {// 2.1 提取核心數(shù)據(jù) res.dataresolve(res.data as Data<T>)} else if (res.statusCode === 401) {// 401錯(cuò)誤  -> 清理用戶(hù)信息，跳轉(zhuǎn)到登錄頁(yè)const memberStore = useMemberStore()memberStore.clearProfile()uni.navigateTo({ url: '/pages/login/login' })reject(res)} else {// 其他錯(cuò)誤 -> 根據(jù)后端錯(cuò)誤信息輕提示uni.showToast({icon: 'none',title: (res.data as Data<T>).msg || '請(qǐng)求錯(cuò)誤',})reject(res)}},// 響應(yīng)失敗fail(err) {uni.showToast({icon: 'none',title: '網(wǎng)絡(luò)錯(cuò)誤，換個(gè)網(wǎng)絡(luò)試試',})reject(err)},})})
}

配置完成之后，當(dāng)我們發(fā)起請(qǐng)求的時(shí)候只需要進(jìn)行引入http然后調(diào)用即可：

import { http } from '@/utils/http'
// 測(cè)試請(qǐng)求
const getData = async () => {const res = await http({method: 'GET',url: '/home/banner',})console.log(res)
}

顯示的結(jié)果是操作成功：

這請(qǐng)求函數(shù)中我們也設(shè)置了失敗情況出現(xiàn)的狀況，比如說(shuō)當(dāng)我們的小程序處于沒(méi)網(wǎng)狀態(tài)，結(jié)果如下

本項(xiàng)目的一些基本功能的搭建就講解到這，下一篇文章將正式講解項(xiàng)目的實(shí)際代碼，關(guān)注博主學(xué)習(xí)更多前端uni-app知識(shí)，您的支持就是博主創(chuàng)作的最大動(dòng)力！