🏍?作者簡介：大家好，我是亦世凡華、渴望知識儲備自己的一名在校大學生

🛵個人主頁：亦世凡華、

🛺系列專欄：uni-app

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

👀引言

?????????經過web前端的學習，相信大家對于前端開發(fā)有了一定深入的了解，今天我開設了uni-app專欄，主要想從移動端開發(fā)方向進一步發(fā)展，而對于我來說寫移動端博文的第二站就是uni-app開發(fā)，希望看到我文章的朋友能對你有所幫助。

今天開始使用 vue3 + uni-app 搭建一個電商購物的小程序，因為文章會將項目的每一個地方代碼的書寫都會講解到，所以本項目會分成好幾篇文章進行講解，我會在最后一篇文章中會將項目代碼開源到我的GitHub上，大家可以自行去進行下載運行，希望本文章對有幫助的朋友們能多多關注本專欄，學習更多前端uni-app知識。然后開篇先簡單介紹一下本項目用到的技術棧都有哪幾個方面（閱讀此次項目實踐文章能夠學習到的技術）：

uni-app：跨平臺的應用開發(fā)框架，基于vue.js可以一套代碼同時構建運行在多個平臺。

pnpm：高性能、輕量級npm替代品，幫助開發(fā)人員更加高效地處理應用程序的依賴關系。

vue3：vue.js最新版本的用于構建用戶界面的漸進式JavaScript框架。

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

pinia：vue3構建的Vuex替代品，具有響應式能力，提供非常簡單的 API，進行狀態(tài)管理。

uni-ui：基于vue.js和uni-app的前端UI組件庫，開發(fā)人員可以快速地構建跨平臺應用程序。

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

目錄

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

基于vscode開發(fā)uni-app項目

配置代碼書寫規(guī)范

安裝uni-ui組件庫

小程序數據持久化設置

配置攔截器請求和請求函數

---

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

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

當我們打開HBuilder X工具時，在顯示區(qū)域頁面點擊新建項目：

點擊新建項目之后，會出現(xiàn)如下的彈框讓我們進行一些基礎配置，配置說明如下：

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

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

基礎代碼項目運行起來之后，我們可以點擊微信開發(fā)者工具當中的分離窗口按鈕，讓運行窗口和微信開發(fā)者工具分離，然后點擊置頂窗口，讓我們的代碼編輯器和運行窗口呈現(xiàn)在同一個頁面上，通過微信開發(fā)者工具的代碼熱更新，在外面書寫代碼時就能實時看到具體的效果：

基于vscode開發(fā)uni-app項目

開發(fā)uni-app項目我們也可以使用我們常用的vscode進行開發(fā)，因為HBuilderX對TS的類型支持暫不完善，有時候不能校驗出屬性值的錯誤，所以此次項目我們采用我們熟悉的vscode進行開發(fā)，如果想了解如何使用HBuilderX進行項目的開發(fā)，可以看看我之前寫的文章。

命令行創(chuàng)建項目：uni-app官網 明確介紹了我們在創(chuàng)建uni-app項目的時候，可以采用命令行的形式進行開發(fā)，這樣就不僅僅只依賴于HBuilderX這一個編輯器進行開發(fā)了，我們也可以通過我們熟悉的vscode編輯器進行開發(fā)uni-app項目了。

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

npx degit dcloudio/uni-preset-vue#vite-ts 項目名稱

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

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

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

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

接下來我們打開微信小程序的開發(fā)者工具，然后將我們生成的dist文件夾中的my-weixin進行導入

接下來我們就可以在vscode中進行項目的書寫了：

安裝所需插件：使用vscode開發(fā)uni-app項目，需要我們先安裝如下三個重要的插件才可以快速便捷的進行開發(fā)uni-app項目的開發(fā)，其插件名稱、相關作用及其相關配置如下：

uni-create-view：快速構建 uni-app 頁面

uni-create-view插件安裝完成之后，需要進行設置一下，點擊該插件中的擴展設置：

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

下面也可以選擇生成文件的模板，因為此項目的vue3，所以這里我勾選vue3項目模板：?

uni-helper：uni-app代碼提示

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

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

安裝完類型聲明文件之后，需要在tsconfig.json中進行如下配置：

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

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

uniapp小程序擴展： 鼠標懸停查看文檔

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

配置代碼書寫規(guī)范

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

配置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：我們雖然已經集成好了我們代碼校驗工具，但是需要每次手動的去執(zhí)行命令才會格式化我們的代碼。如果有人沒有格式化就提交了遠程倉庫中，那這個規(guī)范就沒什么用。所以我們需要強制讓開發(fā)人員按照代碼規(guī)范來提交。

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

在項目中初始化 husky 工具：（需要確保在執(zhí)行如下命令之前，您已經在項目根目錄下初始化了 Git 倉庫，即已經執(zhí)行了git init，否則會報錯）。

pnpm dlx husky-init

在項目中安裝并保存 lint-staged 包為開發(fā)依賴項：

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包管理工具：團隊開發(fā)項目的時候，需要統(tǒng)一包管理器工具,因為不同包管理器工具下載同一個依賴,可能版本不一樣,導致項目出現(xiàn)bug問題,因此包管理器工具需要統(tǒng)一管理！我們可以在根目錄創(chuàng)建 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的時候會觸發(fā)preinstall（npm提供的生命周期鉤子）這個文件里面的代碼。驗證安裝axios如下：

安裝uni-ui組件庫

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

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

pnpm i @dcloudio/uni-ui

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

// pages.json
{"easycom": {"autoscan": true,"custom": {// uni-ui 規(guī)則如下配置"^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在開發(fā)的時候是使用js進行開發(fā)的，并沒有涉及到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的項目，所以我們選擇的狀態(tài)管理工具是pinia，如果不了解該狀態(tài)管理工具，可以參考我之前的文章：探索Pinia：Vue狀態(tài)管理的未來 ，接下來我們開始講解如何在小程序中使用pinia。

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

pnpm i pinia pinia-plugin-persistedstate

安裝完成之后，我們在src文件夾下新建一個store文件夾，在該文件夾下新建index.ts文件，如下：

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'// 創(chuàng)建 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() {// 創(chuàng)建 vue 實例const app = createSSRApp(App)// 使用 piniaapp.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 = {// 攔截前觸發(fā)invoke(options: UniApp.RequestOptions) {// 1. 非 http 開頭需拼接地址if (!options.url.startsWith('http')) {options.url = baseURL + options.url}// 2. 請求超時, 默認 60soptions.timeout = 10000console.log(options)},
}
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)

可以看我們發(fā)送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: stringmsg: stringresult: T
}
// 2.2 添加類型，支持泛型
export const http = <T>(options: UniApp.RequestOptions) => {// 1. 返回 Promise 對象return new Promise<Data<T>>((resolve, reject) => {uni.request({...options,// 響應成功success(res) {// 狀態(tài)碼 2xx， axios 就是這樣設計的if (res.statusCode >= 200 && res.statusCode < 300) {// 2.1 提取核心數據 res.dataresolve(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)},})})
}

配置完成之后，當我們發(fā)起請求的時候只需要進行引入http然后調用即可：

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

顯示的結果是操作成功：

這請求函數中我們也設置了失敗情況出現(xiàn)的狀況，比如說當我們的小程序處于沒網狀態(tài)，結果如下

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