黑馬程序員前端項目uniapp小兔鮮兒微信小程序項目視頻教程，基于Vue3+Ts+Pinia+uni-app的最新組合技術棧開發的電商業務全流程_嗶哩嗶哩_bilibili
參考
有代碼，還有app、h5頁面、小程序的演示
小兔鮮兒-vue3+ts-uniapp-一套代碼多端部署: 小兔鮮兒-vue3+ts-uniapp 項目已上線，小程序搜索《小兔鮮兒》即可體驗。🎉🎉🎉 <br/> 配套項目接口文檔，配套筆記。
接口文檔
說明 - 小兔鮮兒-小程序版
創建uni-app項目?
有HbuilderX創建項目和命令行創建項目兩種方式
這里要創建uniapp項目，然后使用vscode開發
項目配置
微信小程序appid
安裝依賴，運行?
pnpm i安裝依賴，多個node_modules文件夾
然后運行pnpm dev:mp-weixin，mp表示mini program，微信小程序
編譯完成的結果在dis目錄下
打開微信小程序，導入mp-weixin
分離窗口
分離窗口，方便查看
使用uni-create-view插件
安裝后進行設置?
配置好后，直接創建uniapp頁面?
前一個是頁面，后一個是頁面路由pages路徑名稱?
完善ts類型校驗
安裝最新版本ts類型聲明文件?
pnpm i -D miniprogram-api-typings@latest @uni-helper/uni-app-types@latest// tsconfig.json
{"extends": "@vue/tsconfig/tsconfig.json","compilerOptions": {"sourceMap": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"lib": ["esnext", "dom"],// 類型聲明文件"types": ["@dcloudio/types", // uni-app API 類型"miniprogram-api-typings", // 原生微信小程序類型"@uni-helper/uni-app-types" // uni-app 組件類型]},// vue 編譯器類型，校驗標簽類型"vueCompilerOptions": {// 原配置 experimentalRuntimeMode 已廢棄，請升級 Vue - Official 插件至最新版本"plugins": ["@uni-helper/uni-app-types/volar-plugin"] },"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
tsconfig報錯
方法一：加上"ignoreDeprecations":"5.0"后重啟
在 TypeScript 5.0 及以上版本中，importsNotUsedAsValues 和 preserveValueImports 選項已被棄用，并將在 TypeScript 5.5 中停止支持。取而代之的是使用 verbatimModuleSyntax 選項
如果希望繼續使用舊版本的配置，可以在 tsconfig.json 中添加 ignoreDeprecations 選項，使編譯器忽略棄用警告
"ignoreDeprecations":"5.0"
方法二：更新@vue/tsconfig?
使用命令查看vue/tsconfig版本
我的版本是0.1.3
pnpm list @vue/tsconfig升級后重啟
pnpm update @vue/tsconfig@^0.7.0允許pages.json和manifest.json允許注釋
在uniapp項目中，允許pages.json和manifest.json允許注釋
但是vscode默認嚴格json?
只有這兩個json文件允許注釋
值jsonc，表示允許注釋
manifest.json中兩個值已棄用
兩個值已棄用，所以默認false和0?
不用管
安裝uni-ui
文檔
uni-app官網
pnpm安裝
配置easycom完成組件自動導入
開啟自動掃描，在components文件夾是否有符合uniapp標準的組件，有就自動導入
但我們通過pnpm包管理器的方式下載，組件在node_modules里
所以這個配置走的是第二個custom正則的規則?
^表示開頭，用()包裹.*，表示提取出這個組件的名字，()表示提取，提取的內容會把后面的$1替換
?// 組件自動引入規則"easycom": {// 是否開啟自動掃描"autoscan": true,// 以正則方式自定義組件匹配規則"custom": {// uni-ui 規則如下配置"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",// 以 Xtx 開頭的組件，在 components 文件夾中查找引入（需要重啟服務器）"^Xtx(.*)": "@/components/Xtx$1.vue"}?為uni-ui提供ts類型
網站：??
@uni-helper/uni-types - npm
ts項目，希望類型更加安全?
但是鼠標懸停組件上是unknow
uni-ui開發時使用js，沒有升級到ts
官方提供的組件庫，并沒有對應的類型聲明文件
有人為uni-ui提供了配套的類型聲明文件?
安裝后需要增加類型聲明文件?
"@uni-helper/uni-ui-types"
有了這個，我調用函數，就可以結構了?
小程序端pinia持久化?
文檔：
配置 | Pinia Plugin Persistedstate
Pinia 用法與 Vue3 項目完全一致，uni-app 項目僅需解決持久化插件兼容性問題
插件默認使用 localStorage 實現持久化，小程序端不兼容，需要替換持久化 API
?安裝持久化存儲插件
pnpm i pinia-plugin-persistedstate
參考?
請求工具的封裝?
攔截器
文檔：
uni.addInterceptor(STRING, OBJECT) | uni-app官網
invoke函數會在攔截前觸發?
設置請求基地址
如果首選服務器掛了，換成備用服務器，有基地址設置，只需要改一邊就可以了
在項目中用到路徑也更簡潔
添加請求頭標識
當前的小兔鮮服務端除了服務于小程序端，也會服務于pc端和app端
后端需要通過標記識別出數據請求的來源
添加token
用戶登錄后拿到token
流程?
攔截時，就會拿到uni.request()內部傳來的參數
可以通過invoke()的形參獲取
參數在ts項目中要指定類型，鼠標懸停到request上，得知參數類型
如果request在用的時候，也寫上了header，這里寫上的參數會覆蓋options.header中的內容
因為options.header這里被賦值成新對象
所以，如果有要先保留，再添加特殊標識?
請求函數
封裝請求函數，為了在項目中方便發請求，借鑒axios（axios返回值是Promise對象，配合async，await，能更方便地獲取到請求成功的數據）
所以封裝的請求函數也要求返回Promise對象
uniapp的攔截器沒有axios攔截器完善，uniapp的響應攔截器對類型支持并不友好
所以前面的攔截器只完成了請求前的攔截，沒有實現響應攔截器
要通過自己封裝的請求函數去實現axios響應攔截器做過的業務（響應分為成功、失敗）
流程
這里是Promise對象，所以更方便地用async，await去接收數據?
async/await 是建立在 Promise 之上的語法糖 。Promise 是 ES6 引入的異步編程解決方案，用于封裝異步操作并獲取其成功或失敗結果。async 函數會自動返回一個 Promise 對象，await 關鍵字用于等待 Promise 對象的狀態變為已解決（resolved ）或已拒絕（rejected ），從而獲取相應結果或處理錯誤
數據
封裝抽離后端返回值的類型
后端返回的數據，變的只有result
所以可以封裝抽離后端返回值的類型
類型斷言?
返回的類型，uniapp中也有默認的聯合類型，可以是string、AnyObject、ArrayBuffer
聯合類型在這里是任意的對象類型AnyObject，但是有太大了
這里有更精確的類型，我們定義的Data<T>
在聯合類型中指定其中一個類型，使用類型斷言
獲取數據失敗
success()只有服務器有響應，都會走到這里面
如果服務器掛了，或者網絡出錯，才會走到fail()響應失敗
如果沒有token，但調用了一個需要攜帶token才能訪問的接口，會走到success()響應成功里面。因為服務器有響應，響應的結果只不過是token失敗
對于我們也頁面中使用，業務理解會有差異
axios中的處理是只有響應狀態碼是2開頭，才會調用resolve()
所以借鑒axios?
text、view標簽報紅錯誤提示
參考文檔
vscode開發uniapp小程序，text、view標簽報紅錯誤提示 | Ayu's Study Blog
使用VSCode搭建UniApp + TS + Vue3 + Vite項目-阿里云開發者社區
我按照文檔中說明，在.npmrc文件中增加了兩項，再下載依賴，然后重啟vscode就成功了?
