uniapp-vue3搭建兼容h5端和小程序端框架
本文介绍用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等全局的对象
