- 博客(59)
- 收藏
- 关注
RSS订阅原创 企微扫码登录
一般来说我们会重定向至login页面，根据路由传递的参数我们可以拿到code参数，拿到code参数以后就可以请求企微制定的接口去获取信息https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo?access_token=ACCESS_TOKEN&code=CODE，一般来说这个接口的请求是需要后端的请求的，所以我们让后端提供一个接口将code传递给后端，后端请求后拿到用户信息并生成token返回。企微的扫码登录官网有较为详细的文档。，同时会携带两个参数。
2024-06-13 16:35:34
544
原创 无法获取Response Header内容的问题
我们公司的接口服务器使用Nginx做了统一的代理处理，我们其实可以直接通过设置axios的baseURL来进行请求也就是直接使用接口服务器域名+接口地址拼接进行请求，但是这个新的项目默认使用的是前端代理，所以我就使用的前端代理。然后我就发现在联调某个接口的时候使用代理和不使用代理，这个接口的返回值居然是不一样的。来指定接口返回内容，如果指定了该字段则说明该接口返回的是二进制文件，此时对于接口的返回值不会进行处理而是直接返回整个。因为公司的接口返回的格式都是固定的，所以我们前端在请求的时候都会对。
2024-06-13 16:35:03
705
原创 在项目中使用Volta控制node版本
前端的技术很多年前就已经是井喷的状态了，基本每一年都有技术的迭代，而node作为前端基石之一也是一年一个样，这就导致了不同年代的版本使用不同的项目会经常出问题，高版本的node无法用于老的项目。需要注意的是：有人可能在最开始就有设置node的环境变量，如果Volta的环境变量在node的环境变量后面那么我们使用node的时候默认还是会走的node而不是Volta下载的node。中，但是很难保证所有公司的每个项目都是按规范来的，而当我们使用Volta管理node版本的时候我们会将node版本限制在。
2024-06-13 16:34:28
1014
原创 Vite判断不同环境区别打包并重定向至指定资源
Vite内置了dotenv库，这个库会自动读取.env文件。.env # 所有情况下都会加载.env.[mode] # 只在指定模式下加载一般来说我们会有两个.env文件和，如果我们没有显性的去指明mode，那么在执行dev命令时会读取，而在build的时候会读取文件。如果我们要使用这些值需要用到Vite提供的: {string} 应用运行的模式。import.: {string} 部署应用时的基本 URL。他由base配置项决定。import.
2024-04-10 23:03:07
1487
原创 从一个简单异步打印时间手写题到thunk和generator
generator函数是ES6推出的新特性之一，在三年前我刚入门前端的时候，在看到generator的时候还是很迷糊，工作已经三年了用到的次数指可数，更多的时候只是看一下基础用法还有属性方法等。简单来说generator就是一个可以暂停函数内部执行的一个方法，这个方法返回一个迭代器对象，在函数内部有很多yield表达式，只有当调用了这个生成器方法返回的迭代器对象的next方法，生成器内部才会将指针指向下一个yield表达式。本文重点不是generator所以不过多展开了。
2024-03-15 16:08:24
1052
原创 页面的滚动及scrollIntoView的穿透效果和解决
朋友今天遇到一个奇怪的问题，我觉得很有意思就记录一下。现象是这样的，页面有一个按钮，点击按钮以后会请求一个接口拿到一个iframe的地址然后创建一个iframe并渲染到页面上。本来是一个很简单的需求，但是现场出了问题，现场的好几个领导就站在他后面盯着他解决，可想而知有多可怕了。他跟我说了现象以后说了他的想法，可能是iframe有锚点导致父页面受了影响，我并不认同这个想法，iframe的hash都对父元素有影响你这是看不起w3c还是看不起google。
2023-08-11 17:20:58
1024
1
原创 一个简单的watch以及ESModule导入和解构的区别
我们可以认为解构就是一个赋值的过程，而模块导入是将导入的值放在了一个对象中，我们导入使用值的时候更多的是像使用这个对象的某一个属性，当这个对象的值被更改时我们使用的值也同样被更改了。的监听，所以我只需要获取到实例就好，如果需要更深逻辑的判断我们可在set中将旧值和新值都传给目标函数，这样就可以在目标函数中去做比较，这样的话就更贴近Vue的Watch一点。，我们需要根据推送的数据去做展示，那么实时性是很难保证的，如果间隔过大很明显是不合理的，间隔过小和递归的区别意义不大，所以监听是更好的选择。
2023-05-08 20:52:23
565
1
原创 defineProps和立即执行函数不能一起使用的问题
我们可以在defineProps和立即执行函数之间添加方法或者变量的定义，这样也可以解决这个问题。本来这里是没有任何问题的，但是问题出在后面的代码里，我们知道Vue3的组合式API生命周期是不存在。相关的钩子函数的，如果我们希望在dom实例挂载之前做一些操作，例如请求的我们需要在。那么除了在钩子函数中运行其实我们还可以在立即执行函数中去调用，这种调用方式是比。相关的代码块导致的这个问题，如果感兴趣大家可以去阅读相关源码。钩子触发要更快的，那我要说的问题就出在这里。的时候，AST没有正确的取到。
2023-04-04 18:00:20
813
原创 将scss文件转换成css文件
大家平时做项目肯定都习惯了使用scss或者less去写样式，如果是使用工程化的项目我们可以借助插件很方便的将scss或者less转换成css。那如果我们没有使用工程化，比如简单的demo或者官网等项目又希望可以通过scss去编写文件应该怎么办呢，我们可以借助sass插件去帮我们转换生成css样式文件，原理和工程化其实是一样的，只是我们手动的去触发了sass的能力。
2022-12-19 18:04:27
6051
原创 从一个表格render方法问题看React函数组件的更新
最近在开发中碰到了一个现象觉得很有典型能作为例子所以给大家分享一下，从这个现象我们能很清楚的看到函数组件的更新的特点，以及我们应该如何去理解和拥抱函数组件。
2022-12-02 18:35:55
1343
原创 关于使用鼠标时间mouseMove拖拽元素及元素抖动的解决方案
最近在做一个画布相关的项目时有一个场景是移动画布，最先开始想到的是拖拽事件，但是用户希望元素是实时的变化，所以决定使用mouseMove事件来做。
2022-11-26 17:43:47
2714
原创 微信开发者工具设置制表符大小为2
平时我们开发的时候一般的时候都是使用的VSCode，但是开发微信小程序的时候使用的是微信开发者工具，我们使用VSCode去开发的时候一般使用的是缩进为2的格式，但是在微信开发者工具默认的制表符大小是4，所以为了符合我们平时的开发习惯我们需要将微信小程序的制表符大小更改为4。...
2022-07-24 21:44:23
1672
原创 iview更改主题色及解决.bezierEasingMixin()； ^ Inline JavaScript is not enabled. Is it set in your options?
更改iview项目主题色现在公司用的是iview，最近有个需求就是想更改一下主题色，iview的官网也是给出了解决方案，官网给出的两种方案第一种肯定是最合适的，但是也踩了个坑，这里记录一下。更改方法根据官网的步骤首先就是在项目中新建一个文件夹，例如theme文件夹，然后再theme文件夹中创建一个index.less文件。然后在文件中写入以下代码：@import '~view-design/src/styles/index.less';@primary-color: #31BA5E;接着
2022-05-07 14:14:44
1912
原创 Picgo的gitee图床简略设置及gitee图片仓库无法使用解决方案
一、Typora+Picgo实现图片上传生成在线链接Typora是大家耳熟能详的一个文档编写工具，但是我们使用Typora去插入图片时，都是使用的本地缓存图片，如果我们需要将文档发给别人或者电脑清楚缓存以后，就会出现缺失图片的尴尬现象。所以一般我们都会使用Picgo去做图床处理，将图片上传到远程服务器上然后再使用这个在线链接去做为图片的展示来源。因为一些安全问题呢，所以国内使用GitHub是非常不方便的，而使用其他服务呢又需要收费，所以我选择了最好用也是免费的方案，使用gitee去做图片仓库。因为时间
2022-04-24 17:01:42
3114
9
原创 避免Vue中data数据的响应式
对于Vue的响应式大家应该都有所了解，通过getter和setter来实现数据的订阅和分发。我们在实际使用中可能会遇到这样一个场景，就是Vue组件的data部分的数据会非常多，可能数据来到了数千上万条甚至是十来万，这时页面会变得非常卡顿。关于Vue的性能优化中有这样一条：复杂(数据庞大或结构复杂)的对象数据不要放在Data中，这是因为Vue对深度遍历data独享的属性并依次添加getter和setter，以此达到响应式的目的。既然知道原因就好做了，我们可以根据这个问题给出三种解决方案：将数据不在dat
2022-03-21 10:34:38
3264
原创 第24期 | vue2工具函数
第24期 | vue2工具函数这是第一期源码共读，因为我还是一个小菜鸟刚好用的也是vue2所以这次就从vue2的工具函数开始入手。这些工具函数是shared文件夹util.js提供的，下面就列举一些vue2提供的工具。1.emptyObject 冻结对象const emptyObject = Object.freeze({})Object.freeze这个API我并不陌生，虽然工作中我并没有用到它。这个API会冻结对象，禁止用户对对象进行属性的添加、删除以及修改，这一点也可以使用Object.d
2022-03-03 23:51:47
1240
原创 一个无缝衔接的css动画
最近写页面的时候有个动画，要求就是表格固定高度，如果数据超出就往上滑动，然后需要无缝衔接，刚开始以为很简单，但是太久没做人整的有点晕，足足花了大半天的时间才弄出来，所以这里记录一下吧。首先来看下效果吧。下面就分享一些我自己的思路。template部分 <table class="table"> <thead> <tr> <th>a</th>
2022-02-24 16:47:22
2189
4
原创 PDF.js实现PDf的预览
这里因为封装的原因将之前的代码改动了，但是封装到一半我忙别的去了这个就被落下了，等我什么有时间在改回来吧，这里先记录一下<template> <mu-dialog :open.sync="pdfjsView" title="" width="100%" weight="100%" class="cpdf" append-to-body :fullscreen="fullscreen" :esc-press-close="
2022-02-22 00:22:05
2601
原创 一些js和css的注意事项和小技巧(持续更新)
一、css部分1.1.文字排列方向有点时候我们不希望文字从左往右进行排列如下所示：这个时候我们就需要使用css的writing-mode属性了,该属性的属性值如下。horizontal-tb对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。下一水平行位于上一行下方。vertical-rl对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行右侧。verti
2022-02-10 13:52:25
793
原创 vue项目中在scss中使用js的值
最近写项目的时候用到了动画，创建动画的过程中需要根据数据量的多少来进行位移，这个时候就需要在scss中用到js中的值，我们固然可以在template中使用行内样式去设置属性，如下所示：<div class="test" :style="{ margin: offset}">这里的offset毫无疑问就是js中的一个变量了。这种方式固然不错，但是很明显不能满足我的效果，因为定义动画并不是给元素设置样式，我需要通过js的值来判断我正在定义动画时到底应该设置多少值才能达到我想要的效果。很明显这里
2021-12-12 20:56:23
2210
1
原创 Google Chrome禁用触摸板滑动前进后退
今天给大家分享一下如何然让Google Chrome禁用触摸板滑动前进后退。本来这个是一个不错的功能，但是甲方在使用触摸屏的电脑浏览页面的时候准备用滑动去切换轮播，但是出现了退出了当前页面回到首页的现象。排查后发现是浏览器的默认行为，接下来当然是屏蔽该功能了。一、window环境因为Chrome关闭了该项设置，虽然某些国产浏览器上会有相关设置，但是并不打算用，所以就查到了可以使用实验模式来关闭。直接在Chrome中输入chrome://flags/#overscroll-history-navigat
2021-12-02 20:12:45
10895
原创 浏览器拍照功能(Vue+ElementUI组件)
最近项目上比较忙额没有时间写些东西分享出来，今天忙里偷闲决定把我封装的拍照组件分享出来。如果有兴趣的话看我之前写的文章应该能看到我有说过如何通过API来获取媒体设备，这次就将完整代码跟大家分享一下，代码我会贴在最后面。一、实现原理这个组件是web端的组件，使用的也是webAPI，我们最主要的API是navigator，这个API给了我们调用媒体设备的能力。在我们通过API获取到媒体数据后我们可以通过转换的形式将得到的流数据用video展示出来，具体操作可以看我之前的文章。接下来我们会用到画布，画布的强大
2021-11-25 13:42:09
2220
5
原创 IntersectionObserver API
最近看到一个手写图片懒加载的文章，里面用了两种方法，一种是大家都很熟悉的onScroll事件，另一种就是IntersectionObserver这个API，然后我查了一下感觉还是很有用的，所以记录一下。Intersection Observer APIIntersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。简单来说，这个API就是用来检测目标元素与其父级或祖先元素或者视口是否接触。在以前我们需要监听元素的OnScroll事件然后在
2021-10-21 11:56:35
275
原创 ??和？.
朋友最近准备跳槽了，和我分享了不少东西，其中昨天他面试的时候面试官就问到了ESNext，然后他一时间就想到了一种??和?.。其实说到ESNext除了这个我脑海中还有一个async和await这里暂且不提，话不多说步入正题。一、??空值合并运算符空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值
2021-10-09 14:16:35
117
原创 js的编码及转码
其实算下来，工作中用到的编码转换还真不少，不过每次用起来都是到处查，所以这里整理一下当个笔记本，先写一点，后面的再陆续补充。一、escape和unescape函数escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。返回已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . /。其他所有的字符都会被转义序列替换unescap
2021-09-03 15:15:33
9911
原创 elementUI表格table边框不对齐
最近在使用elementUI的表格的时候出现一个问题，表格我给的是百分百宽度，但是有几列的宽度是固定的，这样就会导致表格的边框错位。当然了，表格边框的错位原因不止这一个，可能还有其他原因。说到底就是因为elementUI的表格组件使用了两个表格，这样再使用或者数据动态变化时就很容易出现问题，下面我给出两个建议供大家参考。一、使用doLayout方法这个方法是elementUI提供的，使用的方式是this.$refs.xxx.doLayout()这个方法我不是很了解，感兴趣的可以看看官方文档，不
2021-09-01 20:51:51
3718
原创 js获取当前设备的媒体相关设备并选择当前使用设备(摄像头、麦克风、扬声器)
我在很早之前就写过一个文章，是关于如何使用js来获取当前摄像头的权限的。但是最近公司出现一个场景，就是笔记本外接一个摄像头该如何让用户去选择自己想要的摄像头呢？查阅资料后我找到了解决方案，在这里给大家分享一下。1.获取所有设备之前我提过，js操作媒体输入设备的能力来源于navigator对象下的getUserMedia方法，不清楚的可以移步这里查看如何通过navigtor来获取媒体设备并进行操作。通过查询我得到了一个新的API，那就是navigator对象下的mediaDevices对象，该对象有一个
2021-08-23 10:05:30
4064
原创 父元素flex:1,子元素设置高度百分百无效
有的时候我们写页面布局会出现，父级的高度是通过flex为1来设置的，然后子级想保持和父级一样的高度，很多人都会想到设置高度百分百。不过由于这里的父元素是缺省的，所以你设置了高度百分百是无效的。我之前是通过计算属性来设置的，不过今天发现一个很神奇的方法，所以给大家分享一下，那就是设置父级高度为0..content { flex: 1; height: 0; .left, .right { width: 50%; height: 100%; .
2021-08-16 10:17:37
6037
1
原创 关于mounted中拿不到elementUI组件的DOM元素问题
最近发现了一个ElementUI的小问题，就是会出现mounted中拿不到elementUI组件的DOM元素的情况出现。我的情景如下： 在使用el-table组件时有一个需求就是有一列是一个输入框，所以我使用了插槽。后来有一个操作是需要操作输入框的DOM的，所以我就在原生事件中获取了一下，这个时候是没问题的，后来我想到获取的值可能复用所以想拿到mounted里赋值，不过拿到的结果是一个空数组。 我还是感觉挺不可
2021-08-04 10:55:18
1341
原创 Vue事件除默认参数外手动再注入其他参数
情景是在使用vuetify时有个单选框组件自带的change事件，这个事件会默认注入一个参数就是改变的值，但是我是用v-for生成的多个radio组件，所以需要手动传递一个index参数来判断是哪个值需要改变。情景就是如上所说，相信很多人都会很困扰这个问题，因为你只要一手动传参那么默认参数也会拿不到，同时我们使用的是组件库，不可能去更改他们的代码，所以这里会推荐大家使用下列这种方式 @change="(v) => changeRadio(v, index)"这里的v就是默认传递的value.
2021-07-26 10:35:00
829
原创 base64,file,Blob和ArrayBuffer以及src之间的转换
本文转载仅做学习用途，具体可移步至博客。一、base64转换为Blobfunction dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.c
2021-07-09 11:00:32
3322
原创 js中的export、import、export default等导入导出全解
前端因为规范不同，所以不同的环境会有不同的导入导出方法，因为经常弄混所以特地记一下方便以后查阅记忆，本笔记都是自己总结或查阅资料得出，如有错误请帮忙指出。因为前端的导入导出主要分为commonjs和ES6modules两种标准，其中commonjs主要用于node环境，而ES6modules主要用于浏览器环境，但是ES6modules是兼容commonjs标准的，所以这就很容易让人弄混，本文也将从两个标准来进行讲解一、commonJS学过node的我相信对commonJS规范一定不陌生，在这里不多
2021-07-07 11:16:37
32182
5
原创 Echarts重绘
最近有个项目需要使用到echarts,但是这个项目是一个响应式，因为echarts使用的是canvas，所以在初始化以后，画布的大小是没办法改变的，只能清除掉重绘。 echarts.init(this.$refs.myChart1).dispose();//删除之前绘画的实例 echarts.init(this.$refs.myChart2).dispose(); this.drawLine();//再次调用绘画方法这里为了帮助理解再截取部分绘画方法 drawLine() { //
2021-07-01 10:56:14
7571
3
原创 在electron应用中检测网络
在创建窗口的webPreferences的配置项中开放node的api在渲染进程导入node的child_process，关于child_process的信息请移步官网.然后为了显示运行结果我们还需要进行转码，这里用到的是iconv-lite包，下载完毕后按如下设置即可const child_process = require("child_process");const iconv = require("iconv-lite");iconv.skipDecodeWarning = true;.
2021-06-30 16:57:53
4241
原创 使用electron-update实现electron应用的自动更新
因为我也是从零开始接触electron，所以许多不足之处可以提出来多多交流，如有补充万分感谢。一、项目环境我这边的框架使用的是electron和vue,因为vue的脚手架插件时有electron编译的，所以不需要自己去写build，非常方便，随便说一句希望以后这种官方合作越来越多。我这里使用的electron版本是13.0.1，vue的版本还是2.6.11，electron-update的版本是4.3.9$ npm i electron$ npm i electron-updater二、设置
2021-06-30 16:18:40
4962
原创 更改C盘用户目录下的文件夹名称
最近公司在做PC端项目，在使用electron编译的时候报错了，看了下是中文路径的问题，所以这里记录一下如何更改自己的用户文件夹名称一、进到管理员账号有的人的管理员账号是Administrator,这个是默认的管理员账户，我的系统版本不一样可以直接在win10的射虎设置中添加一个新的管理员账户如果不支持该方式的课可自行百度如何开始Administrator账户。二、注销当前账户改为管理员账户登录在你当前账户上你是没办法对用户目录下的用户文件夹进行重命名的，哪怕你的账户是管理员账户，所以你需要
2021-06-22 12:49:34
11625
10
原创 关于element-ui表单验证的一个注意事项
表单验证的prop名字一定要和绑定的值的名字一样，否则验证的时候值是undefined这就是修改过的，因为是就项目所以之前的名称是password，后来我写的验证规则用的驼峰结果值一直是undefined，所以prop和v-model的值一定要一样，切记切记。...
2021-06-21 17:20:11
526
原创 Echarts饼状图设置
最近公司在做一个PC端的项目，其中有一个统计的页面，说是统计其实就是几个图表放上去好看的，因为数据需要甲方传过来太麻烦，甲方也不会弄这玩意，所以我随便在官网找了几个demo放上去了。但是其中的一个饼状图，因为容器大小的原因导致它的饼状图和标题重合了，这肯定不行的，但是我发现使用grid设置无效，所以我查了一下，发现饼状图不能设置grid，而是center option1: { legend: {}, tooltip: { trigger:.
2021-06-21 13:55:04
3324
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人