MCong’s Blog 👋🏼

手把手教学vue-cli创建uni-app的项目引入vantweapp 一、环境准备 我用的环境分别是 软件名称版本号下载命令\链接检查是否成功卸载命令 Vue-cli@vue/cli 4.5.19npm install -g @vue/cli cnpm install -g @vue/cli yarn global add @vue/clivue -V vue --versionnpm uninstall -g @vue/cli cnpm uninstall -g @vue/cli yarn global remove @vue/cli nodev16.17.0node官网或使用nvm下载 这里就不赘述了node -v在官网下载的可以直接在控制面板卸载使用nvm的可以使用nvm的卸载命令卸载 npm8.15.0跟随node自动安装npm -v跟随node自动卸载 ​ 这里使用Vue-cli4的版本是因为在网上看到Vue-cli5的版本会有兼容性问题，所以这里使用了4的版本，环境准备好之后就开始踩坑环节，不得不说，uni-app引入vant坑是真滴多！！！一步一个坑，我这....

前些天帮朋友一块解决了一个小程序中所有POST请求中携带加密签名并且要拼接时间戳的问题，以此文章来记录，首先需要安装必要的库，因为是小程序，选择使用了FlyIO，加密方法使用的是CryptoJs，代码如下 import FlyIO from "flyio/dist/npm/wx"; import CryptoJs from "crypto-js"; // 创建新的 FlyIO 实例 const http = new FlyIO(); // 设置超时(服务器性能偏差) http.config.timeout = 30000; // 设置请求基地址 http.config.baseURL = "https://xxxxxxx.com"; // 基地址因为涉及公司接口域名，用xxx来代替 // post请求公共参数 const tData = { // deviceId: "xxxxx", //设备ID // deviceType: "android", //设备类型 // deviceName: "huawei", //设备名称 // os: "12", //操作系统 // appver....

前段时间闲来无事，在翻看MDN文档时无意中发现Array中多了一些陌生的API，后来通过百度发现这些API都是在2023 年 6 月 27 日发布的ES14版本中新增的数组方法，于是便根据MDN一步一步研究了一下，发现有些API确实是比原来的API更加的好用，下面就一起来看一下吧~~~ Array.prototype.toSorted() MDN对于这个API的描述是：sort() 方法的复制方法版本。它返回一个新数组，其元素按升序排列。 toSorted()方法有以下几种常见的用法： // 1. 不传入函数 toSorted() // 2. 传入箭头函数 toSorted((a,b) => { /**……**/ }) // 3. 传入比较函数 toSorted(compareFn) // 4. 内联比较函数 toSorted(function compareFn(a, b) { /**……**/ }) // toSorted数组排序 let arr = [3,4,2,10,1,6,9,5,8,7] const sort = arr.toSorted((a,b) => ....

    前言:在前端开发过程中，提到文件上传，一般上传的都是图片、Excel、压缩包、PDF等后缀的文件或图片，那么如果用户在不知情的情况下如果上传一个加密的Excel、PDF等文件，而且前、后端同学也没有处理这种情况，此时如果上传也可以上传，但后端这边解析文件就会解析不出来，为了杜绝这种情况发生，前端或者后端会对加密文件进行处理，那么，加密文件要怎么处理呢？请看下文~ 开始开发 首先需要上传文件，我们想到的肯定是用组件库，现在一般都是用的element的组件库，但是因为是公司团队之前为了方便开发，将element的组件库进行二次封装，组成了常用的业务组件，我这里就用公司封装好的组件库了，这个组件库是将element进行二次封装的，所以和element没有什么区别，唯一的区别感觉就是组件名不一样， 创建upload-modal.vue文件，在template标签中写上用到的上传组件，下边代码在组件库中都有解释，根据需求来写就行，我这块要自定义的传Excel文件和zip文件 <div> <ep-upload drag ma....

数组对象去重(new Map方法) new Map方法 data() { return { // 导出列表 exportList:[ {fileName:"XXXX", fileStatus:"已完成", fileTime:"2022-12-19 10:48:26", fileSize:"1256513345"}, {fileName:"XXXX", fileStatus:"已完成", fileTime:"2022-12-19 10:48:26", fileSize:"1256513345"}, {fileName:"1111", fileStatus:"执行中", fileTime:"2022-12-19 10:48:26", fileSize:"1256513345"}, {fileName:"1122", fileStatus:"执行中", fileTime:"2022-12-19 10:48:26", fileSize:"1256513345"}, ], newExportList:[], // 新列表 用于存放去重后的数据 } }, methods: { getList() ....

js判断字符串中是否存在连续的三个字符和三个相同的字符（字母或数字） // 判断给定字符串中是否存在连续的三个字符（字母或数字） const hasConsecutiveOrder = str => { // 循环遍历字符串中的字符 for (var i = 1; i < str.length - 1; i++) { let currentCharCode = str.charCodeAt(i); // 当前字符的 ASCII 码值 let previousCharCode = str.charCodeAt(i - 1); // 前一个字符的 ASCII 码值 let nextCharCode = str.charCodeAt(i + 1); // 后一个字符的 ASCII 码值// 如果当前字符与前一个字符相差 1，同时与后一个字符相差 -1，表示存在连续的三个字符 if (currentCharCode === previousCharCode + 1 && currentCharCode === nextCharCode - 1) { return f....

对于前端程序员来说console.log一定不陌生吧，还记得从我们大多数人踏入前端开始，console.log('Hello World')这一个语句是我们写的第一行JS的代码，一直伴随着整个前端开发的过程中，console.log是我们开发调试中不可或缺的一部分，那么，你真的了解console.log吗？ 基本使用 console.log的基本用法肯定都用过，就像我前边说的，有多少人的前端生涯就是从一句console.log('Hello World')开始的，基础用法也通常用来打印或调试错误来使用，或者用来在控制台输出语句的，就像下边这个最简单的栗子，我在控制台声明了一个str的常量，我想让它在控制它输出，那么就需要用到console.log(str）,此时控制台就会打印出来我声明的常量了， 除此之外，console.log也可以在我们代码出现bug时候，用来判断代码是否执行，这里我就不演示了。 进阶使用 除了上边基本使用的方法，大家有没有看过一些知名网站的控制台呢？很多网站会在控制台上边发布一些招聘信息、官网信息等一些宣传自己网站本身的一些东西，这样可以筛选掉大部分不懂....

前段时间遇上了一个这样的需求：在一个表格内展示商品信息，且数量可以自己增加或删除，根据数量和单价计算出所有的总价格，刚接到这个需求的时候以为这个需求特别简单，用数组的reduce方法应该就可以，或者直接拿到每一个商品的总价，然后将它累加起来就好了，当我开始写的时候，我发现此需求远远没有那么简单，话不多说，直接上代码 页面大概就是这个样子的，需要根据数量来控制小计以及合计的价格实时变化， 刚开始写我是用了reduce以及将小计的价格全部累加起来的方法，发现这种方法都是只会加，并不会减，如果点击数量的减，它还是加了小计的值，然后经过漫长的试错，终于解决了这个需求。 // 声明相关的数组，存放数据 const subTotal = ref<string[]>([]) const ingredientsListTwo = ref<MatchingRows[]>([]) const select = ref('') // 下拉框 onMounted(() => { demandStore.setTotal('') // 因为项目中pinia做了持久化存储，需要....

此系列均为工作或生活中遇到的各种bug，为记录bug而生的，不希望其他人因为这些bug而纠结 Element Plus中tag跳转锚点后tag消失 背景介绍 此问题还是在前边的演示demo可视化项目中遇到的一个问题，页面根据对应的tag点击后跳到对应得地方类似于返回顶部的操作 问题描述 在描述问题前先简单的看一下这个锚点是怎么写的吧。 锚点实现 因为是父组件的tag标签跳到子组件页面对应的地方，所以要在子组件绑定ref对象，如图所示 绑定完成对象后需要在tag的事件中调用锚点跳到子组件的锚点位置，这里因为一共需要四个锚点，所以我把它抽成了函数，以方便复用 下图为抽出来的函数，大致思路是利用父组件的ref对象来获取到子组件的ref对象，然后让它滚动到页面对应的锚点 在子组件锚点位置绑定对应的ref对象，这里就展示两个，其余两个就不展示了，同样是绑定ref，就不赘述了 简单介绍完锚点实现后，刚开始确实没有问题，并且可以正常跳到对应的锚点，突然有一天，不知是代码冲突还是什么其他原因，再次点击tag时，发现tag整体往上跑了，导致tag消失， 如图所示，当我点击了第二个或其他....

此系列均为工作或生活中遇到的各种bug，为记录bug而生的，不希望其他人因为这些bug而纠结 iconfont图标打包消失 背景介绍 前一段时间刚接了一个项目是一个演示的demo可视化项目，相对还是比较简单的，并且公司前期为了节约开发时间，特意做了一个通用的项目模板，架子基本都是搭建好的，只需要根据项目需求来进行细节修改 问题描述 项目开发过程中，领导想要看到每天的进度，于是就就代码打包部署到了服务器中，部署上去时候发现icon图标要么就变成了空白的，要么就变成其他图标，如下图所示 正常显示的图标应该为下图的样子因为项目是还在开发过程中部署的，有些图标还没来得及更换但本地的图标和打包后的图标严重不符合 解决方法 看到这样，我第一反应是两个iconfont图标库冲突导致的，此项目用到了两个图标库，一个是项目前我自己创建的图标库，另一个是为节约开发时间，UI帮助我们找的iconfont图标库。所以第一时间以为是冲突导致的，后面发现解决冲突后，这块就不具体讲了这些图标就都变成空白了，于是就怀疑打包过程中并没有打包上这些icon font文件，从而导致的字体图标消失，在看了打包文....