本文介紹用uniapp-vue3腳手架搭建兼容h5端和小程序端
一、cli創建框架
1、創建以 typescript 開發的工程
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
運行工程命令
// h5
npm run build:h5
npm run dev:h5
// 微信小程序
npm run build:mp-weixin
npm run dev:mp-weixin
// 支付寶小程序
npm run build:mp-alipay
npm run dev:mp-alipay
其他平台命令詳細見：https://uniapp.dcloud.io/worktile/CLI.html#uni-cli
2、工程規范化
（1）代碼規范：Eslint、Prettier
（2）git提交鈎子：Git Hooks
（3）提交規范：Commitizen
詳細配置參考：
二、擴展組件uni-ui
框架使用組件庫為uni的擴展組件：uni-ui
1、安裝 sass、sass-loader、uni-ui
npm i sass -D
npm i sass-loader@10.1.1 -D
npm i @dcloudio/uni-ui
2、配置easycom
打開項目根目錄下的 pages.json 並添加 easycom 節點：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 規則如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他內容
pages:[
// ...
]
}
easycom配置介紹
1.easycom將安裝、引用、注冊精簡為一步。 只要組件安裝在項目的components目錄下，並符合components/組件名稱/組件名稱.vue目錄結構。就可以不用引用、注冊，直接在頁面中使用；
2.不管components目錄下安裝了多少組件，easycom打包后會自動剔除沒有使用的組件，對組件庫的使用尤為友好。
詳細介紹見：https://uniapp.dcloud.io/collocation/pages.html#easycom
三、自定義的條件編譯
1、條件編譯
條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平台。
寫法： 以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。
|#ifdef：if defined 僅在某平台存在
|#ifndef：if not defined 除了某平台均存在
|%PLATFORM%：平台名稱
| 條件編譯寫法 | 說明 |
|---|---|
| #ifdef H5 需條件編譯的代碼 #endif |
僅出現在 H5 平台下的代碼 |
| #ifndef H5 需條件編譯的代碼 #endif |
除了 H5 平台，其它平台均存在的代碼 |
| #ifdef H5 || MP-WEIXIN 需條件編譯的代碼 #endif |
在 H5 平台或微信小程序平台存在的代碼（這里只有||，不可能出現&&，因為沒有交集） |
(1) js內寫法
// #ifdef %PLATFORM%
平台特有的API實現
// #endif
(2) html內寫法
<!-- #ifdef %PLATFORM% -->
平台特有的組件
<!-- #endif -->
(3) css內寫法
/* #ifdef %PLATFORM% */
平台特有樣式
/* #endif */
(4) pages.json內寫法
// #ifdef %PLATFORM%
平台特有的API實現
// #endif
(5) static目錄內寫法
在不同平台，引用的靜態資源可能也存在差異，通過 static 的的條件編譯可以解決此問題，static 目錄下新建不同平台的專有目錄（目錄名稱同 %PLATFORM% 值域,但字母均為小寫），專有目錄下的靜態資源只有在特定平台才會編譯進去。
┌─static
│ ├─mp-weixin
│ │ └─a.png
│ └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json
詳細介紹見：https://uniapp.dcloud.io/tutorial/platform.html#preprocessor
2、自定義條件編譯
(1) package.json擴展配置用法：（不同銀行對應不同的平台需單獨配置一個。）
{
/**
* package.json其它原有配置
* 拷貝代碼后請去掉注釋！
*/
"uni-app": {// 擴展配置
"scripts": {
"mp-dingding": { //自定義編譯平台配置，可通過cli方式調用
"title":"釘釘", // 在HBuilderX中會顯示在 運行/發行 菜單中
"browser":"", //運行到的目標瀏覽器，僅當UNI_PLATFORM為h5時有效
"env": {//環境變量
"UNI_PLATFORM": "h5 ", //基准平台
"xxxx": "xxxxx", // ... 其他自定義環境變量
},
"define": { //自定義條件編譯
"XXXXXX": true //自定義條件編譯常量，建議為大寫
}
},
}
(2) 代碼中使用：
// #ifdef HNNXBANK
湖南農信特有代碼
// #endif
(3) 運行及發布項目：
// h5
npm run dev:custom hnnxbank
npm run build:custom hnnxbank
// 小程序
npm run dev:custom hnnxbank-mp-weixin
npm run build:custom hnnxbank-mp-weixin
(4) 運行及發布項目：
HBuilderX會根據package.json的擴展配置，在運行、發行菜單下，生成自定義菜單（釘釘小程序），開發者點擊對應菜單編譯運行即可。
(5) 讀取環境變量：
// 銀行bankCode
const BANK_CODE = process.env.BANK_CODE;
詳細配置見：https://uniapp.dcloud.io/collocation/package.html
四、其他配置
1、多銀行換膚
在目錄 src/assets/css 新增對應銀行 bankCode 的 xxxxx.scss 文件，例如：hnnxbank.scss
文件內添加的 css 變量可以任何css文件全局讀取
// vite.config.ts配置
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@import '/src/assets/css/${BANK_CODE || 'uni'}.scss';`
}
},
},
})
2、自定義環境變量
(1) vite.config.ts配置
export default defineConfig({
define: {
'process.env': {}
},
})
(2) env環境配置
在每個環境配置文件配置：env/.env.development、env/.env.test、env/.env.production
npm run dev:custom hnnxbank --mode development
npm run build:custom hnnxbank --mode test
npm run build:custom hnnxbank --mode production
// 讀取方式
import.meta.env.VITE_HNNXBANK_API
(3) 靜態資源路徑配置
uniapp內必須是用static，更改無效
export default defineConfig({
publicDir: 'static', // 靜態資源
})
五、自動化打包發布小程序
1、設置Hbuilder的系統環境變量，D:\software\HBuilderX.3.3.11.20220209\HBuilderX
2、Hbuilder安裝weapp-miniprogram-ci插件，js也能實現：https://www.npmjs.com/package/miniprogram-ci
3、對應小程序的微信公眾平台-開發-開發設置"后下載代碼上傳密鑰，並配置 IP（公網IP） 白名單，才能進行上傳
4、 編譯uni-app項目到微信小程序，並發行小程序到微信平台
// 命令模板
cli publish --platform mp-weixin --project 項目名稱 --upload true --appid 小程序appid --description 發布描述 --version 發布版本 --privatekey 小程序上傳密鑰文件
// 范例
cli publish --platform mp-weixin --project swfit-pay-applets --upload true --appid wx9a2ff4daf3ef33b1 --description 微校插件升級 --version 1.3.3 --privatekey D:\需求\威繳費\發布key/private.wx9a2ff4daf3ef33b1.key
詳細配置見：https://hx.dcloud.net.cn/cli/README
六、注意事項
- button video canvas會被編譯成uni-button uni-video uni-canvas
- 擴展組件 uni-data-picker 不兼容小程序問題
- 小程序中不能使用sessionStorage、location等全局的對象