- 博客(35)
- 收藏
- 关注
RSS订阅原创 开发谷歌插件之GA埋点
一、背景开发了一个谷歌插件，领导需要对用户的一些行为进行分析，于是让我在代码里面加上GA埋点。由于我们的PC端的项目一直都有进行GA埋点，当时就想着，这不就是把相关的代码搬过来就可以了吗。简单。然后在需要打点的事件上调用 trackGAEvent事件。
2024-09-20 11:22:04
357
原创 pnpm-lock.yaml、yarn.lock以及package-lock.json的区别
pnpm使用了一个全局存储来保存所有项目的依赖项，只在项目的node_modules目录中创建对全局存储中的依赖项的链接，从而大大减少了磁盘空间的使用。pnpm-lock.yaml：当某个包在pnpm-lock.yaml能找到，且市场上该包存在更新的版本时，且在package.json中存在^~允许更新时，开发者在下载依赖时还是会以pnpm-lock.yaml中的包的版本去下载依赖，不会自动下载更新的版本。这些锁定文件的主要目的是确保在不同的环境中，项目的依赖项版本始终保持一致。二、依赖项的存储方式。
2023-12-15 18:53:37
4145
原创 开发小程序时报错{“errMsg“:“setClipboardData:fail api scope is not declared in the privacy agreement“}
背景：这是一个【复制链接】的功能按钮，一开始一直都能用，某一天突然点复制时，没反应了。- 找到左侧的菜单栏里的【设置】 - 点击【基本设置】的tab - 找到【服务内容声明】的内容 - 点击【用户隐私指引】栏的【更新】按钮 - 然后点击【增加信息类型】- 选择【读取剪贴板】 - 然后填写对应的用处。2、读取用户手机号码等情况遇到类似的报错时都可以尝试一下这种解决方案。在增加信息类型时选择跟报错内容对应的类型就可以了。解决办法：遇到类似的错误的话，都可以尝试去更新一下【用户隐私保护指引】。
2023-11-06 14:43:04
4392
5
原创 深入理解 TypeScript：从入门到熟悉
TypeScript是JavaScript的超级，可以编译为js。相比js添加了静态类型和其他一些新特性。例如：ts通过引入静态类型，开发人员可以在编译时就捕获一些常见的错误，例如类型不匹配以及变量未定义等，这可以减少在运行时出现的错误，提高代码的可读性和可维护性。ts提供了强大的开发工具支持（代码补全、代码导航等），可以提高开发效率，并帮助开发人员更好的理解和修改代码。ts支持模块化开发，可以将代码分割成多个模块，提供更好的代码组织和可维护性。
2023-10-27 18:35:33
337
原创 在客户端和服务端获取、设置和删除cookie的方法
在了解cookie的一些操作之前，先了解一下什么是cookie?Cookie是一种在客户端（用户的浏览器）存储数据的机制，以便在用户的多次请求中跟踪和识别用户。它们是由网站创建的，当用户访问该网站时，这些数据会被发送到用户的浏览器，并在那里存储以供将来使用。例如，当你登录一个网站后，网站会创建一个包含你登录信息的Cookie，然后你的浏览器会保存这个Cookie，当你再次访问该网站时，你的浏览器会发送这个Cookie，网站就可以识别你并保持你的登录状态。cookie的过期时间？
2023-10-19 15:57:09
1585
原创 Node（Next）+React实现飞书扫码登录+鉴权的详细开发过程
公司后台运营项目采用飞书扫码登录方式，扫码登录完之后获取飞书的信息，然后前端通过这些对应的信息生产token，之后在请求后端接口时讲token通过header传参，并进行鉴权
2022-12-28 11:40:23
2999
原创 在小程序（Taro）中使用antv/f2
公司的小程序项目需求中需要使用图表展示一些数据趋势，于是就去调研了一些图表的组件库，最后结合各组件库的图表样式、性能以及后期维护和扩展等方面决定使用antv/f2这个图表库，记录一下使用方式、样式等属性的修改方法以及遇到的一些坑点。
2022-10-16 16:56:25
3452
12
原创 eslint报错prefer-spread之use the spread operator instead of ‘.apply()‘
eslint报错prefer-spread之use the spread operator instead of '.apply()'
2022-09-01 15:25:01
2002
2
原创 git push时报错OpenSSL SSL_read: Connection was aborted, errno 10053
报错提示：fatal: unable to access 'https://github.com/Lsuyun/suyun-react-components.git/': OpenSSL SSL_read: Connection was aborted, errno 10053解决方案：输入git config http.sslVerify "false"然后再git push就可以了
2022-04-25 23:21:17
1310
原创 React之Fiber架构的迭代动机与设计思想
目录一、Virtual Dom1.什么是Virtual Dom以及为什么要使用Virtual Dom2.Virtual Dom在React中的体现3.Virtual Dom的优缺点二、diff算法1.什么是diff算法2.react16.x中对diff算法的优化策略三、什么是Fiber四、为什么出现Fiber五、React16.0之前的架构为什么不能实现可中断、可恢复呢六、为什么vue架构不需要引入Fiber呢？七、react16.x如何实现给不同的任务赋予不
2022-04-20 23:46:36
592
原创 react项目之菜单，按钮权限的实现方案
目录一、菜单，按钮权限配置二、根据不同角色配置不同的菜单权限以及按钮权限，具体页面显示如下三、根据不同的权限显示不同的菜单四、按钮显示隐藏权限控制是项目中，特别是系统项目中比较常见的功能了。 那么我现在就来结合实际的项目需求，讲讲在react中是如何实现权限控制的。项目是使用umi搭建的，实现的需求有： 根据不同角色配置不同的菜单权限以及按钮权限 根据不同的权限显示不同的菜单 按钮显示隐藏 一、菜单，按钮权限配置1.项目使用的是配置式路由，首先我们将
2022-04-04 18:15:12
8175
1
原创 踩坑之ios手机new Date(yyyy-MM-dd hh:mm:ss).getTime()返回NaN
1、场景：公司的小程序中有一个这样的功能，学生在小程序中，如果在这之前，课程已经结束了且后端返回了对应的复习链接时，用户点击复习的按钮是能打开对应的复习页面的，否则就弹出弹框提示用户不能查看。对应的代码如下：lesson.t_canReview = reviewUrl && new Date().getTime() >= new Date(res.endTime).getTime()这样看这个判断逻辑是没有问题的，但是用户在
2022-04-01 22:56:54
3630
原创 ES6之Set和Map
一、什么是Set1）Set是一种叫做集合的数据结构。这句话的重点在于集合，那么什么是集合的？它又有什么特点呢？集合是由一组无序且唯一的项组成的，即是一个没有重复元素也没有顺序概念的数组2）Set本身是一个构造函数，用来生成Set数据结构二、Set的使用以及其实例的属性和方法当我们要定义一个Set数据结构时：const setData = new Set()setData.add('111')// 或const setData = new Set([111]）1、属性：si
2022-03-17 22:54:38
3013
原创 react之生命周期
熟练使用react开发项目之后，最近在学习react的底层原理以及源码，顺便总结一下react的生命周期。一、什么是react？在学习原理和源码之前我们必须先明白什么是react。官方文档对于react的定义是：A JavaScript library for building user interfaces用于构建用户界面的 JavaScript 库其实我们可以简单的理解为react主要做两件事：响应事件、渲染UI二、react的生命周期在学习react的生命周期函数之前我
2022-03-13 22:33:26
1390
原创 git常用命令
一、什么是git:分布式版本控制系统，将原始的代码仓库镜像下来，每一次的提取操作实际上都是对代码仓库的完整备份。作用：1、该系统可以指定和若干不同的远端代码仓库进行交互。因此可以在同一个项目中，分别和不同工作小组的人相互协作。2、任何一处协同工作用的服务器发生故障，事后都可以用任何一个镜像出来的本地仓库恢复二、专有名词：1、工作区（workspace）：在电脑创建的一个管理仓库的目录，即我们本地直接编辑的文件目录2、暂存区（stage/index）:一般存放在.git目录下的ind
2021-12-09 21:47:46
297
原创 封装常用的时间相关的函数
在开发项目的过程中，经常会遇到需要前端获取本周的开始日期和结束日期或者本月的开始日期和结束日期等需求，于是封装成npm包，这样后面其他项目又遇到这种需求的时候可以直接拿来用，而不需要反复的粘贴复制代码，下面就说一下怎么使用。一、安装npm i date-range-get --S二、使用方法这个包目前只封装了三个跟获取时间相关的方法，也是我经常在不同的项目都会用到的1）获取某天所在周的开始时间和结束时间在开发项目时经常需要去获取本周开始日期和结束日期，于是封装了一个方法，可以..
2021-12-08 23:12:34
179
原创 使用UmiJS开发项目（上）
目录一、Umi是什么二、项目初始化三、配置prettier,eslint,stylelint四、配置文件五、多环境多配置文件前段时间公司重构的项目中选用Umi框架，使用的过程中整理并封装了一些Umi常用的功能。由于文章篇幅较长，所以分为上、下两篇一、Umi是什么首先介绍一下Umi，Umi(乌米，蚂蚁金服的底层前端框架)，是可扩展的企业级前端应用框架。支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。同时配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生
2021-11-14 23:57:49
2257
原创 ant-design之Input+Tree组件结合进行“对树结构的数据进行搜索且带出含搜索内容的数据的所有上级“组件的封装
目录一、功能效果图：二、实现思路三、使用方法四、完整代码一、功能效果图：看题目标题可能还是会感觉有点绕，那我们先来看功能效果：1、当不输入搜索内容的时候数据如下显示：2、当输入“可以”进行搜索时会搜出带有“可以”的数据以及其所有的上级二、实现思路由于我在ant-design没有找到可以现用的组件，于是就用Input+Tree组件结合重新封装一个组件，先来分析一下我实现这个功能的思路：1、我在接口拿到的数据是树结构的一个数据结构：[ ...
2021-11-08 00:03:08
2426
原创 TS日常类型
一、基础类型、数组基础类型：string，number，boolean，null(人为赋空值)，undefinedeg：const a:{[key:string]:number} = {x:1} 定义key为字符串 value为numberArray<T>，T代表数组中元素类型 eg：new Array<T>()二、any/unkownany:不做任何类型检查，取消了这个变量的类型保护unkown:不知道是什么类型，那么这个值可以是任何类型，严格版的any..
2021-10-31 23:18:46
3668
原创 umi-request二次封装进行接口的请求
使用umi+react+dva+ant-design开发项目时，通过对umi-request进行二次封装然后进行后端接口的请求import { extend } from 'umi-request';import { history } from 'umi';import { message } from 'antd';import { stringify } from 'querystring';import * as cache from '@/utils/cache';import {
2021-10-20 23:16:48
4516
原创 团队协作开发之prettier,eslint,husky,commitlint
目录一、prettier1）作用2）使用二、Eslint1）作用2）使用三、husky1）作用2）使用四、commitlint1）作用2）使用3）commitlint提交规范，推荐使用config-conventional 配置去写 commit前言：最近在搭项目框架的时候完整的配置了一遍流程，记录下来防止下次配置的时候忘记了一、prettier1）作用格式化工具，可以在各种编辑器找到实现它的插件，如vscode,atom,webstom等
2021-08-10 23:50:19
770
原创 git 提交报错 Incorrect username or password ( access token )
一、报错的原因是因为我改了git仓库的密码，身份验证出错二、解决方法：删除电脑的windows凭据电脑凭据的位置如下：控制面板->用户账户->管理你的凭据->windows凭据->找到git的凭据然后修改对应的信息(或者电脑左下方直接搜索windows凭据即可)修改完后重新提交就可以了附：可通过git config --global --list查看git全局配置文件可通过git config --global u...
2021-08-08 20:49:19
1066
原创 vue项目实现多张图片导出zip文件
场景：批量导出图片并放在一个zip文件下导出，借助jszip以及file-saver插件1、npm install jszip /npm install file-saverimport JSZip from 'jszip';import FileSaver from 'file-saver';/** * @description:图片导出zip文件 * @param {*} title zip文件名 * @param {*} imgList 需要导出的图片列表 * @para..
2021-07-22 19:05:14
530
原创 react+umi项目踩坑记
在react项目中添加umi-plugin-react插件之后发现运行不起来了，报错提示如下：解决方法如下：1、检查umi的版本，如果是3.0以上的那么需要Node 10.13或以上，如果版本没问题的话2、升级umi-plugin-react为@umijs/preset-react在pageage.json中修改依赖 将umi-plugin-react修改为@umijs/preset-react然后删除node_modules文件重新安装依赖即可...
2021-07-20 18:17:30
2351
原创 npx create-react-app 踩坑记
因为之前一直学的是vue,最近公司的项目要转成用react开发，于是就想着做个demo玩一下，本来以为和vue一样输入命令就可以轻轻松松生成一个脚手架项目，没想到还是折腾了一会。1、输入npx create-react-app react-demo之后报错了，报错的提示是我的node版本太低了2、于是我就百度了一下如何升级node版本，踩了一堆坑之后总结的就是 1）、windows系统需要直接下载（https://nodejs.org/zh-cn/download/）对应版本的node...
2021-07-10 19:41:18
1240
原创 移动端代码调试：真机远程代码调试
什么叫真机远程代码调试：移动端设备连接开发主机，1、连接ios设备2、连接Android设备3、在开发主机上调试
2021-07-04 22:02:28
473
3
原创 缓存、缓存清理和HTTP缓存
目录一、缓存二、缓存清理三、HTTP缓存1、Cache-Control（协议头）2、强制缓存3、协商缓存前段时间面试发现缓存这一块的内容问的蛮多的，于是就去学习了一下缓存相关的内容，将问的比较多的内容总结如下：一、缓存1、存储将被用到的数据，让数据访问更快命中：在缓中找到了请求的数据存 不命中/穿透：缓存中没有需要的数据 命中率：命中次数/总次数 缓存大小：缓存中一共可以存多少数据 清空策略：如果缓存空间不够数据如何被替换二、缓存清理1、清空
2021-06-27 23:37:37
734
原创 h5页面使用vue+element ui开发遇到的问题
一、使用element-ui开移动端时遇到的问题1）、在安卓手机element-ui下拉框点击时会有背景阴影：解决方案:设置输入框样式：-webkit-tap-highlight-color: transparent !important;
2021-06-05 16:17:57
3629
原创 玩转npm script
1、对npm scripts二次包装过的命令传参？答案：利用--透传参数{ "scripts":{ "serve":"serve ./build", "serve:prod":"npm run serve -- -l 80" //传递-l参数 }}
2021-06-05 16:03:31
1355
原创 vue单页面和多页面移动端适配方案
vue-cli3中使用postcss-pxtorem1、下载依赖：npm install postcss-pxtorem -D2、新建一个rem,j
2021-05-31 11:40:29
2028
原创 关于路由
你了解路由吗1、什么是路由？2、什么是前端路由？什么是后端路由？3、什么时候会使用前端路由？4、前端路由和后端路由的优缺点？4、前端路由有几种方案？5、hash和history的区别？1、什么是路由？路由是根据不同的url地址展示不同的内容或页面，分为前端路由和后端路由2、什么是前端路由？什么是后端路由？前端路由是把不同的url对应不同的内容或页面的任务交给前端来做，每跳转到不同的url都...
2020-04-16 20:08:56
133
原创 vue3.0的变化
1、由object.defineProperty()向Proxy()的转变使用object.defineProperty()写一个简单的双向## 标题绑定：Vue.prototype.observe = function(obj){ var self = this; var value; for(var key in obj){ value = o...
2020-03-30 23:07:56
302
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人