uniapp v3 搭建項目使用官方推薦命令
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
或者是使用 uniapp官方gitee 模板庫
在項目啟動前UI調(diào)用，建議使用 擴展組件（uni-ui）里面有很多組件，不能滿足需求自己可以手動修改 uni_modules 為在插件市場下載出來的插件目錄（uni-app官方維護的組件庫,能夠兼容vue3）
需要安裝插件
自動引用components文件夾里面的組件，解放雙手 （編譯到小程序會有BUG,必須要手動引用）
npm install unplugin-vue-components
需要在 vite.config.ts 文件里面配置
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from 'path';
export default defineConfig({
resolve: {
alias: {
'@': resolve(__dirname, '.', 'src') // 設(shè)置 @ 指向 src
}
},
plugins: [
uni(),
Components({// 按需引入
dts: true,
dirs: ['src/components'], // 按需加載的文件夾
resolvers: [ElementPlusResolver()] // ElementPlus按需加載
}),
],
})
官方的cli 腳手架默認是 vuex 建議使用 pinia（官方推薦的狀態(tài)管理）
區(qū)分開發(fā)環(huán)境和測試環(huán)境
新建 .env.development 文件（開發(fā)環(huán)境）
文件內(nèi)容
VITE_APP_BASE_URL=后端域名
新建 .env.production 文件 （正式環(huán)境）
VITE_APP_BASE_URL=正式環(huán)境
在 package.json 文件修改
開發(fā)環(huán)境
"dev:h5": "uni" 替換 "dev:h5": "uni development",
正式環(huán)境
"build:h5": "uni build", 替換 "build:h5": "uni build production",
關(guān)于components文件夾里面命名
不知道是uni-app的BUG還是編輯器的BUG
當時組件文件夾命名為 xf-choose-data/index 或者 xf-choose-data/xf-choose-data 會導致編譯不出小程序代碼，導致小程序代碼只有默認代碼，不會有編譯代碼
建議使用駝峰命名或者是xx-xx，.vue文件使用index.vue
關(guān)于 Vue3 + script setup + TS 和什么時候使用 setup 函數(shù)
由于使用的是uni-app 里面有些BUG導致所有頁面不能都使用 Vue3 + script setup + TS 這個模式，只能頁面沒有組件的情況。
有組件的情況要使用，setup 函數(shù)，不然在小程序平臺，組件編譯不上，或者是對應JS文件里面沒有JS代碼
關(guān)于自定義導航和問題
建議使用 uni-nav-bar 組件
自定義導航與小程序膠囊對齊方式
關(guān)于微信獲取手機碼號
個人小程序賬戶是獲取不了用戶手機號碼，必須要認證為企業(yè)，然后再去微信認證（需要交納300的認證費）
關(guān)于測試環(huán)境請求不了數(shù)據(jù)接口
除了真機調(diào)試都需要開啟開發(fā)者模式才能能正常的請求接口
真機調(diào)試
關(guān)于正式環(huán)境和開發(fā)工具
在開發(fā)工具能夠正常訪問接口，以及正常請求數(shù)據(jù)
這個是應為在工具里面勾選了，如果不勾選就不能請求數(shù)據(jù)
明明在工具能夠請求數(shù)據(jù)，怎么到了正式環(huán)境就請求不了數(shù)據(jù)了
- 需要登錄 微信公眾平臺
- 找到開發(fā)管理
- 找到開發(fā)設(shè)置
- 設(shè)置 request 請求域名 如果有文件上傳或者是其他的請求，需要添加對應的請求域名，（*注需要需要備案，并且需要https）
- 設(shè)置完成后，打開正式環(huán)境就能夠正常請求數(shù)據(jù)了
- 如果在工具取消了合法域名驗證，同時在微信公眾平臺設(shè)置了安全域名還是請求不了數(shù)據(jù)
在工具中刷新下就可以了
關(guān)于小程序打開外部鏈接 （webivew）
小程序內(nèi)部可以使用webivew 打開，但是有限制
web-view
基礎(chǔ)庫 1.6.4 開始支持，低版本需做兼容處理。
功能描述
承載網(wǎng)頁的容器。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用。
客戶端 6.7.2 版本開始，navigationStyle: custom 對 web-view 組件無效
當鏈接打不開，出現(xiàn)下面截圖內(nèi)容
需要登錄 微信公眾平臺 找到開發(fā)管理 》開發(fā)設(shè)置，下面有一個 《業(yè)務域名》添加對應業(yè)務域名后需要下載 校驗文件 放置對應服務器根域名即可 * （可能存在緩存，建議刪除小程序后重新加載） ，注意不要更改文件名
文章來源：http://www.zghlxwxcb.cn/news/detail-486828.html
如果配置后還打不開 文章來源地址http://www.zghlxwxcb.cn/news/detail-486828.html
- 檢查提示綁定業(yè)務域名是否跟 在小程序后臺綁定的域名相同
- 在開發(fā)工具中
刷新一下，（有可能是配置后業(yè)務域名沒有通過到開發(fā)工具上面） - 在跳轉(zhuǎn)到webivew 頁面 使用 encodeURIComponent(xx) 來序列化參數(shù) 到webivew 頁面 使用 decodeURIComponent（），因為有可能是參數(shù)傳輸后url 地址轉(zhuǎn)譯了，所以建議使用 使用前面二個函數(shù)來處理
到了這里，關(guān)于uni-app vue3+ts+vite開發(fā)小程序采坑說明的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
