通过vue-cli命令行创建uni-app项目。调试微信小程序，vscode 开发 uni-app，微信小程序基础开发模板，基础架子搭建。vue3读取环境变量配置，编译配置 电脑版发表于：2025/3/18 14:25 tn2>tip:搭建的基础开发模板放了一份在FastAdmin.NET里边的FastAdmin.Mobile.Template.Pure，方便直接拉下来使用,不用每次起新项目都重复的去搭建一次 [TOC] ### 通过vue-cli命令行创建uni-app项目 官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html 通过命令行创建vue3/vite的基础项目： ``` npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project ``` 不行的话，直接点击那个gitee下载代码即可  然后就可以把下载好的项目用vscode,或者cursor开发了 ### 安装好相关依赖 ``` cnpm install ``` 你可能还要设置一下cnpm或者npm的代理： ``` cnpm config set registry https://registry.npmmirror.com ``` #### sass 依赖也安装一下把 ``` cnpm install sass sass-loader --save-dev ``` #### day.js的依赖装一下 ``` cnpm install dayjs --save ``` ### 然后编译一下uni-app项目导入到微信开发者工具里边去 #### 编译一下uni-app项目 ``` npm run dev:mp-weixin ``` <img src="https://img.tnblog.net/arcimg/notebook/8fb8a830b99c46c0a80aafb5b4398e78.png" style="width:466px;height:auto;"> #### 把编译成功后的内容导入到微信开发者工具即可 编译好的dev内容在你项目根目录里边的这个位置:`\dist\dev\mp-weixin` **把这个目录放到微信开发者工具中就行了！** 点击项目-->导入项目 <img src="https://img.tnblog.net/arcimg/notebook/381eef59a47f4c748f4aaa13e7f4b0fe.png" style="width:366px;height:auto;"> 然后把刚刚编译出来的地址填上即可： <img src="https://img.tnblog.net/arcimg/notebook/2a37c5c1a5b64370a37e2779424ead50.png" style="width:666px;height:auto;"> 然后就行了，就可以开发在vscode中，修改后会自动编译，然后微信开发者工具里边也会自动变化 ### 增加读取配置的与常用工具类封装。读取环境变量配置 #### 在项目根目录去创建几个配置文件  里边去加入你想加入的配置,比如： ``` VITE_APP_IMG_URL= https://www.tnblog.net/asserts/mp-weixin/smartedu-management-mobile VITE_APP_BASE_URL = https://www.tnblog.net VITE_APP_IMG_BASE_URL = https://www.tnblog.net/asserts ## 静态图片引用的配置 VITE_APP_IMG_STATIC_URL = "/static" VITE_APP_USER_NAME = 620126199008620001 VITE_APP_PASSWORD = 620001 ``` #### 然后在package.json里边去添加好对应命令与使用的配置文件的关联 相当于就是某种环境使用什么配置文件的关系 比如开发环境就使用`.env.mp-weixin-dev`里边的配置  正式环境就使用`.env.mp-weixin-prod`里边的配置  #### 在src下面创建一个common文件夹和两个文件  **config.ts用来关联配置** ``` const config = { env_code: import.meta.env.VITE_APP_ENV_CODE, title: '水厂系统', //小程序标题 baseUrl: import.meta.env.VITE_APP_BASE_URL, imgUrl: import.meta.env.VITE_APP_IMG_URL, imgBaseUrl: import.meta.env.VITE_APP_IMG_BASE_URL, imgStaticUrl: import.meta.env.VITE_APP_IMG_STATIC_URL, tokenUrl: "/connect/token", defaultRequest: { client_id: "306069", client_secret: "talanyvrOkQdtoet", grant_type: "wxappxeltjsgrant", user_name: import.meta.env.VITE_APP_USER_NAME, password: import.meta.env.VITE_APP_PASSWORD, tenant_id: 32 } } export default config; ``` **utils用来封装常用的方法在里边** ``` import config from '@/common/config.ts' /** * 根据传入的图片名称和类型返回背景图片样式 * @param imgName 图片路径/名称 * @param type 类型:0-菜单图标 1-根目录图片 * @returns */ export function bgImage(imgName: string, type: number = 0) { console.log(config.imgBaseUrl) let imgUrl = `url(${config.imgBaseUrl}/mp-weixin/smartedu-growing/teacher-icon/${imgName}.png)` if (type === 1) imgUrl = `url(${config.imgBaseUrl}/mp-weixin/smartedu-growing/${imgName}.png)` return { backgroundImage: imgUrl } } /** * 根据传入的图片名称返回背景图片，从静态资源里边加载 * @param imgName 图片名称 * @returns */ export function bgStaticImage(imgName: string) { let imgUrl = `url('${config.imgStaticUrl}/fun_menu_imgs/${imgName}.png')` return { backgroundImage: imgUrl } } export function changeNumToHan(num: number) { var arr1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'] var arr2 = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿'] // 可继续追加更高位转换值 if (!num || isNaN(num)) { return '零' } var english = num.toString().split('') var result = '' for (var i = 0; i < english.length; i++) { var des_i = english.length - 1 - i // 倒序排列设值 result = arr2[i] + result var arr1_index: number = Number(english[des_i]) result = arr1[arr1_index] + result } // 将【零千、零百】换成【零】 【十零】换成【十】 result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十') // 合并中间多个零为一个零 result = result.replace(/零+/g, '零') // 将【零亿】换成【亿】【零万】换成【万】 result = result.replace(/零亿/g, '亿').replace(/零万/g, '万') // 将【亿万】换成【亿】 result = result.replace(/亿万/g, '亿') // 移除末尾的零 result = result.replace(/零+$/, '') // 将【零一十】换成【零十】 // result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十 // 将【一十】换成【十】 result = result.replace(/^一十/g, '十') return result } ``` **注入这里直接引入ts正常情况下会报错：** 启用allowImportingTsExtensions时，导入路径只能以“.ts”扩展名结尾。 要想可以直接导入ts文件需要在`tsconfig.json`里边加入配置：  ``` { "extends": "@vue/tsconfig/tsconfig.json", "compilerOptions": { /* 注意下面这三个配置，为了让.ts文件可以直接引入。 可以考虑这个里边的相关配置讲解：https://juejin.cn/post/7259715842873655333 */ "allowImportingTsExtensions": true, "emitDeclarationOnly": true, "declaration": true, "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "lib": ["esnext", "dom"], "types": ["@dcloudio/types"] }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] } ``` 但是加入配置后可能要注意一下其他问题，可以考虑一下这篇文章里边的讲解：https://juejin.cn/post/7259715842873655333 #### 然后就可以使用封装的常用方法了 比如使用那个加载背景图图片的方法,当然里边也使用了环境变量的： ``` <template> <view class="box mt-10"> <view class="box-title">班级管理</view> <view class="box-body"> <view class="menu-list"> <view class="menu-item" @tap="pageJump('/pages/student/stu-growing-roll')"> <view class="menu-item-icon" :style="bgStaticImage(`stu-growing-roll`)" /> <view class="menu-item-text">学生成长圈</view> </view> <view class="menu-item" @tap="pageJump('/pages/growing-statistics/class-growing-statistics')"> <view class="menu-item-icon" :style="bgImage(`class-growing-record`)" /> <view class="menu-item-text">班级成长记录</view> </view> <view class="menu-item" @tap="unPublish"> <view class="menu-item-icon" :style="bgImage(`sys-attendance`)" /> <view class="menu-item-text">系统考勤</view> </view> </view> </view> </template> <script lang="ts" setup> import { bgImage,bgStaticImage } from "@/common/utils.ts" const pageJump = (page: string) => { uni.navigateTo({ url: page, }); }; const unPublish = () => { uni.showToast({ title: "暂未开放", icon: "none", }); }; </script> <style lang="scss" scoped> </style> ``` ### 安装uni-app的扩展组件 可以按需引入，但是感觉还是直接一次性引入用起来方便一点，其实也不是很大。 官方的文档：https://zh.uniapp.dcloud.io/component/uniui/quickstart.html #### 安装依赖 ``` npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui ``` #### 配置easycom 打开项目根目录下的 `pages.json` 并添加 `easycom` 节点： ``` // pages.json { "easycom": { "autoscan": true, "custom": { // uni-ui 规则如下配置 "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } }, // 其他内容 pages:[ // ... ] } ``` ### 封装一些通用的常用样式。修改所有页面的背景色 在App.vue里边加入下面的代码即可 ``` <style lang="scss"> // 全局样式，修改所有页面的背景色 page { background-color: #f4f6f9; font-family: 'PingFang SC-Regular'; } /* 外边距、内边距全局样式 ------------------------------- */ @for $i from 1 through 35 { .mt#{$i} { margin-top: #{$i}rpx !important; } .mr#{$i} { margin-right: #{$i}rpx !important; } .mb#{$i} { margin-bottom: #{$i}rpx !important; } .ml#{$i} { margin-left: #{$i}rpx !important; } .pt#{$i} { padding-top: #{$i}rpx !important; } .pr#{$i} { padding-right: #{$i}rpx !important; } .pb#{$i} { padding-bottom: #{$i}rpx !important; } .pl#{$i} { padding-left: #{$i}rpx !important; } } /* 字体大小全局样式 ------------------------------- */ @for $i from 10 through 32 { .font#{$i} { font-size: #{$i}rpx !important; } } </style> ``` 使用就非常简单这样就行，所有页面都可以使用封装的全局样式了 ``` <view class="mt20"> ``` ### 打包，发布 #### 使用命令打包 ``` npm run build:mp-weixin ``` #### 导入微信小程序开发工具后发布 怎么导入微信小程序开发工具就和开发的时候一样了，相当于开发一套，build打包好的的一套，build打包好的用于发布代码大小要小很多。
