收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

通过vue-cli命令行创建uni-app项目。调试微信小程序，vscode 开发 uni-app，微信小程序基础开发模板，基础架子搭建。vue3读取环境变量配置，编译配置

233人阅读 2025/3/18 14:25 总访问：5182289 评论：0 收藏：0 手机
分类: 前端


tip:搭建的基础开发模板放了一份在FastAdmin.NET里边的FastAdmin.Mobile.Template.Pure，方便直接拉下来使用,不用每次起新项目都重复的去搭建一次

通过vue-cli命令行创建uni-app项目

官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html

通过命令行创建vue3/vite的基础项目：

  1. npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

不行的话，直接点击那个gitee下载代码即可

然后就可以把下载好的项目用vscode,或者cursor开发了

安装好相关依赖

  1. cnpm install

你可能还要设置一下cnpm或者npm的代理：

  1. cnpm config set registry https://registry.npmmirror.com

sass 依赖也安装一下把

  1. cnpm install sass sass-loader --save-dev

day.js的依赖装一下

  1. cnpm install dayjs --save

然后编译一下uni-app项目导入到微信开发者工具里边去

编译一下uni-app项目

  1. npm run dev:mp-weixin

把编译成功后的内容导入到微信开发者工具即可

编译好的dev内容在你项目根目录里边的这个位置:\dist\dev\mp-weixin

把这个目录放到微信开发者工具中就行了！
点击项目—>导入项目

然后把刚刚编译出来的地址填上即可：

然后就行了，就可以开发在vscode中，修改后会自动编译，然后微信开发者工具里边也会自动变化

增加读取配置的与常用工具类封装。读取环境变量配置

在项目根目录去创建几个配置文件

里边去加入你想加入的配置,比如：

  1. VITE_APP_IMG_URL= https://www.tnblog.net/asserts/mp-weixin/smartedu-management-mobile
  3. VITE_APP_BASE_URL = https://www.tnblog.net
  4. VITE_APP_IMG_BASE_URL = https://www.tnblog.net/asserts
  6. ## 静态图片引用的配置
  7. VITE_APP_IMG_STATIC_URL = "/static"
  9. VITE_APP_USER_NAME = 620126199008620001
  10. VITE_APP_PASSWORD = 620001

然后在package.json里边去添加好对应命令与使用的配置文件的关联

相当于就是某种环境使用什么配置文件的关系

比如开发环境就使用.env.mp-weixin-dev里边的配置

正式环境就使用.env.mp-weixin-prod里边的配置

在src下面创建一个common文件夹和两个文件

config.ts用来关联配置

  1. const config = {
  2.     env_code: import.meta.env.VITE_APP_ENV_CODE,
  3.     title: '水厂系统', //小程序标题 
  4.     baseUrl: import.meta.env.VITE_APP_BASE_URL,
  5.     imgUrl: import.meta.env.VITE_APP_IMG_URL,
  6.     imgBaseUrl: import.meta.env.VITE_APP_IMG_BASE_URL,
  7.     imgStaticUrl: import.meta.env.VITE_APP_IMG_STATIC_URL,
  8.     tokenUrl: "/connect/token",
  9.     defaultRequest: {
  10.       client_id: "306069",
  11.       client_secret: "talanyvrOkQdtoet",
  12.       grant_type: "wxappxeltjsgrant",
  13.       user_name: import.meta.env.VITE_APP_USER_NAME,
  14.       password: import.meta.env.VITE_APP_PASSWORD,
  15.       tenant_id: 32 
  16.     }
  17.   }
  19.   export default config;

utils用来封装常用的方法在里边

  1. import config from '@/common/config.ts'
  3. /**
  4.  * 根据传入的图片名称和类型返回背景图片样式
  5.  * @param imgName 图片路径/名称
  6.  * @param type 类型:0-菜单图标 1-根目录图片
  7.  * @returns 
  8.  */
  9. export function bgImage(imgName: string, type: number = 0) {
  11.   console.log(config.imgBaseUrl)
  13.   let imgUrl = `url(${config.imgBaseUrl}/mp-weixin/smartedu-growing/teacher-icon/${imgName}.png)`
  14.   if (type === 1)
  15.     imgUrl = `url(${config.imgBaseUrl}/mp-weixin/smartedu-growing/${imgName}.png)`
  16.   return {
  17.     backgroundImage: imgUrl
  18.   }
  19. }
  22. /**
  23.  * 根据传入的图片名称返回背景图片，从静态资源里边加载
  24.  * @param imgName 图片名称
  25.  * @returns 
  26.  */
  27. export function bgStaticImage(imgName: string) {
  28.   let imgUrl = `url('${config.imgStaticUrl}/fun_menu_imgs/${imgName}.png')`
  29.   return {
  30.     backgroundImage: imgUrl
  32.   }
  33. }
  35. export function changeNumToHan(num: number) {
  36.     var arr1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
  37.     var arr2 = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿']
  38.     // 可继续追加更高位转换值
  39.     if (!num || isNaN(num)) {
  40.       return '零'
  41.     }
  42.     var english = num.toString().split('')
  43.     var result = ''
  44.     for (var i = 0; i < english.length; i++) {
  45.       var des_i = english.length - 1 - i // 倒序排列设值
  46.       result = arr2[i] + result
  47.       var arr1_index: number = Number(english[des_i])
  48.       result = arr1[arr1_index] + result
  49.     }
  50.     // 将【零千、零百】换成【零】 【十零】换成【十】
  51.     result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')
  52.     // 合并中间多个零为一个零
  53.     result = result.replace(/零+/g, '零')
  54.     // 将【零亿】换成【亿】【零万】换成【万】
  55.     result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')
  56.     // 将【亿万】换成【亿】
  57.     result = result.replace(/亿万/g, '亿')
  58.     // 移除末尾的零
  59.     result = result.replace(/零+$/, '')
  60.     // 将【零一十】换成【零十】
  61.     // result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
  62.     // 将【一十】换成【十】
  63.     result = result.replace(/^一十/g, '十')
  64.     return result
  65.   }

注入这里直接引入ts正常情况下会报错：
启用allowImportingTsExtensions时，导入路径只能以“.ts”扩展名结尾。

要想可以直接导入ts文件需要在tsconfig.json里边加入配置：

  1. {
  2.   "extends": "@vue/tsconfig/tsconfig.json",
  3.   "compilerOptions": {
  4.     /*
  5.      注意下面这三个配置，为了让.ts文件可以直接引入。
  6.      可以考虑这个里边的相关配置讲解：https://juejin.cn/post/7259715842873655333
  7.     */
  8.     "allowImportingTsExtensions": true,
  9.     "emitDeclarationOnly": true,
  10.     "declaration": true,
  11.     "sourceMap": true,
  12.     "baseUrl": ".",
  13.     "paths": {
  14.       "@/*": ["./src/*"]
  15.     },
  16.     "lib": ["esnext", "dom"],
  17.     "types": ["@dcloudio/types"]
  18.   },
  19.   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  20. }

但是加入配置后可能要注意一下其他问题，可以考虑一下这篇文章里边的讲解：https://juejin.cn/post/7259715842873655333

然后就可以使用封装的常用方法了

比如使用那个加载背景图图片的方法,当然里边也使用了环境变量的：

  1. <template>
  2.   <view class="box mt-10">
  3.     <view class="box-title">班级管理</view>
  4.     <view class="box-body">
  5.       <view class="menu-list">
  6.         <view class="menu-item" @tap="pageJump('/pages/student/stu-growing-roll')">
  7.           <view class="menu-item-icon" :style="bgStaticImage(`stu-growing-roll`)" />
  8.           <view class="menu-item-text">学生成长圈</view>
  9.         </view>
  10.         <view class="menu-item" @tap="pageJump('/pages/growing-statistics/class-growing-statistics')">
  11.           <view class="menu-item-icon" :style="bgImage(`class-growing-record`)" />
  12.           <view class="menu-item-text">班级成长记录</view>
  13.         </view>
  14.         <view class="menu-item" @tap="unPublish">
  15.           <view class="menu-item-icon" :style="bgImage(`sys-attendance`)" />
  16.           <view class="menu-item-text">系统考勤</view>
  17.         </view>
  18.     </view>
  19.   </view>
  21. </template>
  22. <script lang="ts" setup>
  24. import { bgImage,bgStaticImage } from "@/common/utils.ts"
  26. const pageJump = (page: string) => {
  27.   uni.navigateTo({
  28.     url: page,
  29.   });
  30. };
  32. const unPublish = () => {
  33.   uni.showToast({
  34.     title: "暂未开放",
  35.     icon: "none",
  36.   });
  37. };
  40. </script>
  41. <style lang="scss" scoped>
  43. </style>

安装uni-app的扩展组件

可以按需引入，但是感觉还是直接一次性引入用起来方便一点，其实也不是很大。

官方的文档：https://zh.uniapp.dcloud.io/component/uniui/quickstart.html

安装依赖

  1. npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

配置easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

  1. // pages.json
  2. {
  3.     "easycom": {
  4.         "autoscan": true,
  5.         "custom": {
  6.             // uni-ui 规则如下配置
  7.             "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
  8.         }
  9.     },
  11.     // 其他内容
  12.     pages:[
  13.         // ...
  14.     ]
  15. }

封装一些通用的常用样式。修改所有页面的背景色

在App.vue里边加入下面的代码即可

  1. <style lang="scss">
  3. // 全局样式，修改所有页面的背景色
  4. page {
  5.   background-color: #f4f6f9;
  6.   font-family: 'PingFang SC-Regular';
  7. }
  9. /* 外边距、内边距全局样式
  10. ------------------------------- */
  11. @for $i from 1 through 35 {
  12.     .mt#{$i} {
  13.         margin-top: #{$i}rpx !important;
  14.     }
  15.     .mr#{$i} {
  16.         margin-right: #{$i}rpx !important;
  17.     }
  18.     .mb#{$i} {
  19.         margin-bottom: #{$i}rpx !important;
  20.     }
  21.     .ml#{$i} {
  22.         margin-left: #{$i}rpx !important;
  23.     }
  24.     .pt#{$i} {
  25.         padding-top: #{$i}rpx !important;
  26.     }
  27.     .pr#{$i} {
  28.         padding-right: #{$i}rpx !important;
  29.     }
  30.     .pb#{$i} {
  31.         padding-bottom: #{$i}rpx !important;
  32.     }
  33.     .pl#{$i} {
  34.         padding-left: #{$i}rpx !important;
  35.     }
  36. }
  37. /* 字体大小全局样式
  38. ------------------------------- */
  39. @for $i from 10 through 32 {
  40.     .font#{$i} {
  41.         font-size: #{$i}rpx !important;
  42.     }
  43. }
  45. </style>

使用就非常简单这样就行，所有页面都可以使用封装的全局样式了

  1.   <view class="mt20">

打包，发布

使用命令打包

  1. npm run build:mp-weixin

导入微信小程序开发工具后发布

怎么导入微信小程序开发工具就和开发的时候一样了，相当于开发一套，build打包好的的一套，build打包好的用于发布代码大小要小很多。


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

通过url传递一个带井号()的参数并正确获取
正常情况下支持通过url是不能传递#等特殊符号的但是可以通过url编码解码解决通过url传递参数时某些特殊符号不能传递的问题n...

rabbitmq官网上六大版块之二(Direct类型交换机通过routingKey分类型输出)
其实rabbitmq，老师都说得差不多了，下面是老师的连接。http://www.tnblog.net/aojiancc2/article/UserCategory/134官网教...

通过PlUpload控件配合WebApi接口完成压缩上传文件
最近一段时间都在使用PlUpload做文件上传的功能，研究过后感觉使用起来体验还是比较好的，不过网上的资料很多都记录的很简...

通过Windows服务进行FTP与服务器之间文件的传输
这几天做了一个关于FTP与服务器之间文件互相传输的Windows服务，本地开发的时候非常顺利，很快就开发完成了，可是将服务部...

.net core 通过不同Accept访问同方法请求不同方法处理
1.对于自定义的Accept需要进行注册比如我这里的application/vnd.cgzl.hateoas+jsonservices.AddMvc(option=&gt; { option...

.netcore 通过Flurl验证k8s内部访问与获取环境变量
.netcore验证k8s内部访问与获取环境变量[TOC] 创建k8s-name项目 项目结构如下 实验过程 st=>start: k8s-demo项...

.netcore 通过Flurl验证k8s内部访问与获取环境变量 （二）
.netcore验证k8s内部访问与获取环境变量 （二）[TOC] 修改k8s-name项目 NameController.cs [ApiController] ...

consul 无法通过ip访问
consul agent -dev 只能本地可以访问要想通过ip可以访问，使用下面的使用即可consul agent -dev -client 0.0.0.0 -ui 指定...

Python中通过fake_useragent生成随机UserAgent
fake_useragent第三方库，来实现随机请求头的设置；GitHub ---&gt; https://github.com/hellysmile/fake-useragent安...

js与后台通过json传递对象
原理图解：前台：&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;/&gt; &lt;title...

sqlsugar 对接mysql分表。sqlsguar分表注意事项。分表思路，通过日期获取分表表名等
官方文档：https://www.donet5.com/Home/Doc?typeId=1201 sqlsguar分表注意事项注意一：需要有一个分表字段，插入的时候...

K8s 通过 firewalld 放行端口
K8s通过firewalld放行端口对于etcd节点，运行以下命令： 1、firewall-cmd--permanent--add-port=2376/tcp 2、firewal...

vue3 ref的使用多个ref的使用。通过ref触发点击事件
多个ref获取的方法可以使用一样的,通过变量名来区分就行了 const vabUploadRef = ref() const multipleTableRef = ref() ...

vue切换菜单，vue菜单选中。跳转页面通过原生js设置选中样式。vue中使用原生js方法。js 找到当前对象的兄弟对象。js获取子节点。js获取父节点。js获取当前元素的同级节点
vue切换菜单,跳转页面通过原生js设置选中样式可以利用上面那个js获取当前元素的同级节点后先设置默认的样式，然后在设置点...

vue3 ref转化成 HTMLElement。vue3通过ref获取dom节点
vue3其实是可以直接利用ref获取dom节点的，代码如下&lt;template&gt; &lt;div class=&quot;app-container&quot;&gt; ...

docker 通过内部ip内网ip容器名，自定义网络别名，访问mysql。以及无法连接问题排查
docker 是可以通过内部ip,容器名，自定义网络别名，访问mysql的。一般来说只要mysql与程序在同一个网段都是可以使用内部ip...