- 博客(33)
- 收藏
- 关注
RSS订阅
原创 react fetch提交formdata格式数据
1.第一种方式，设置请求头，处理请求参数export function formDataFetch(url, params) { let arr = Object.values(params) let data = ''; Object.keys(params).forEach((key, index) => { let d = '' index !== Number(arr.length - 1)?d = key + '=' + params[key]+ '&':
2020-07-31 17:00:20
1670
原创 DOM离线化
1.使用display控制显隐，临时将要操作的元素从文档流中脱离，然后再恢复它 let el = document.getElementById('el'); el.style.display = 'none'; // 对 el 进行操作... el.style.display = 'block'2.使用 createDocumentFragment，创建文档片段，操作后一次性把文档片段添加到文档流中（缓存批量化dom操作）。 let fragment = document.createDoc
2021-07-07 17:33:51
360
原创 vue文件 Type annotations can only be used in TypeScript files
解决：打开vscode的settings.json注释掉以下配置即可有些可能也需要重新设置typescript.validate和javascript.validate，把默认的勾选取消掉
2021-07-07 14:52:04
6840
2
原创 vue项目中使用webpack 配置gzip压缩
什么是gzipGzip是若干种文件压缩程序的简称，通常指GNU计划的实现，此处的gzip代表GNU zip。也经常用来表示gzip这种文件格式。在压缩优化方面的作用通过gzip这个压缩程序，对资源进行压缩，从而降低请求资源的文件大小。应用场景在网络请求中，选择一个js或css或html，但凡在Response Headers中找到 content-encoding: gzip 键值对，这就说明这个文件启用了gzip压缩。响应头Etag:W/"字符串“表示启用的是在线压缩，Etag:"字符串"表示启
2021-06-24 14:56:18
687
原创 vue中使用swiper的noSwiping后，on事件失效
解决方式：1.使用swiper自带的组件，例如常用的navigation这种组件，控制前进后退；2.使用swiper的方法，例如slideTo()进行切换；
2021-05-27 14:48:14
1555
原创 react hooks 跳转同个路由地址，没有重新执行初始化函数的问题
前言：多数情况下大家都会采用componentWillReceiveProps(nextProps){}这个函数去解决路由跳转不刷新页面的问题，但是我自己的项目中并不适用，对于自己遇到的问题也只是做个记录，并非针对普遍情况，仅供参考！方法一使用一个中转页面，a?p=1----- b ----- a?p=1，这样就可以再执行初始化的一些列行为了方法二使用useEffect在依赖项里强制加了window.location.href就达到刷新的效果了，虽然控制台会报不是有效依赖项，但暂时先这样解决着，后
2021-04-26 15:20:51
620
原创 react 安卓机input输入卡顿问题的解决
问题背景：用react开发h5过程中，遇到input和css3动画同个页面渲染时，input输入安卓机卡顿。原因：简而言之就是大量的数据更新使得react执行的时间过长，浏览器执行一帧的时间变长，FPS 变低，下一帧也就被延迟了，人直观的感受就是页面变卡顿。解决方案使用requestAnimationFrame替换原来的css3的keyframes的动画代码示例animation() { this.timer = window.requestAnimationFrame(() =>
2021-03-19 16:42:07
631
原创 react 使用微信jssdk在ios手机上签名无效
ios系统里使用微信分享的jssdk时常抽风,如果url有#符号，就会大概率出现首次进入页面签名无效，刷新一次就能正常使用的情况，所以，传URL时截掉#符号这里展示用的是微信1.6版本的js async getWxShareConfig() { let url = window.location.href.split('#')[0];//关键所在 let res = await wxShareApi(url); let retCode = _.get(res, 'data.ret
2020-11-04 16:54:30
280
原创 js babel es6转es5 基本配置步骤
1.全局安装babel-cli，建议用cnpm cnpm install -g babel-cli 2.项目局部安装语法解析器规则，一般是有三种，安装任意一种即可babel-preset-latest(最新的规则)babel-preset-env (不会过时的规则)babel-preset-es2015 (es2015转码规则) cnpm install --save-dev babel-preset-es20153.初始化一个package.json文件npm init4.项
2020-09-27 11:18:45
772
原创 react 使用create.js进行图片资源预加载
第一步：由于create官网的js是没有export，所以不支持import引入，所以这里安装createjs-cmdcnpm i -S createjs-cmd第二步：import createjs from 'createjs-cmd';第三步：引入自己想要用到的相关create模块，我这里用到的是LoadQueuelet mainfest = ['img1','img2'] startPreload() { var preload = new createjs.LoadQu
2020-09-14 15:30:52
786
原创 react 中配置代理
1.去往package.json文件，直接添加代理的键值对即可"proxy":{ "/rank/":{ "target":"http://XXXX.com", "changeOrigin": true } }//OR "proxy":"http://XXXX.com"
2020-07-31 17:36:53
207
原创 react脚手架中修改webpack配置
1，打开config文件npm run eject如果失败且是以下图片中的报错这是因为在创建脚手架时添加了.gitgnore文件，却没有本地仓库，所以需要初始化一个本地库，执行以下几步即可git add .git commit -m 'init'npm run eject2.找到config文件夹中的webpack.config.js，修改相应配置即可...
2020-07-31 17:28:45
1353
原创 react中引入第三方js，报错undefined
1.react 中，在index.html中直接引入第三方js<script src="https://XXX.js"></script>2.在组件中使用window.xxxjsFun()就是直接在要调用的方法前添加window即可正常使用了
2020-07-31 17:07:38
1930
1
转载 Google Performance 选项卡详解
原文链接：https://blog.csdn.net/weixin_44135121/article/details/103998869
2020-07-22 11:40:06
302
原创 h5 微信头像图片获取模糊问题
问题场景：用canvas画图的时候，获取到微信头像总是特别模糊从后台获取到的微信头像URL类似这样http://thirdwx.qlogo.cn/mmopen/xxxxxxxx/132问题就在于132这里，这是微信的图像压缩，因此，只需要把132替换成0就可以获取清晰的大图let url = url.replace(/\/\d*$/, '/0')...
2020-06-19 10:58:07
778
原创 @types/fastclick在vue+ts中的使用
在使用了ts的vue项目中，以往直接安装fastclick不能正常使用，根据提示执行下面命令就好了cnpm i @types/fastclick找到node-modules下面的@types/fastclick/index.d.ts文件，然后打开修改里面内容即可在这里插入代码片declare module "fastclick" { // function fastclick(l...
2020-03-31 16:33:06
969
原创 vue-cli创建项目速度慢的解决方法
npm config set registry https://registry.npm.taobao.org
2020-03-31 15:18:34
969
原创 使用vuecli创建项目时出现 npm ERR! Unexpected end of JSON input while parsing near 的解决方法
采坑过程中，找到有那么几个方式，用适合自己的方式去执行就好1.删掉package.lock.json2.清除cachenpm cache clean --force3.进入下面这个文件夹清除cache路径：C:/Users/PC/AppData/Roaming/npm-cache执行（博主自己是用了这个才解决）：npm cache clean --force4.不要用淘宝镜像。n...
2020-03-31 15:13:46
817
原创 JS无限滚动效果的实现
window.timer = setInterval(function() { $('.list-contanier') .find('ul') .animate( { marginTop: '-=1' }, { ...
2019-12-20 15:56:13
679
原创 vue hash模式切换成history模式
第一步，根据项目情况在router/index.js里修改 mode: 'history', // 放在根目录 base: '/',mode: 'history',// 放在子目录 base: '/子目录名',第二步，打包配置里，根据项目路径配置情况修改//子目录assetsPublicPath: '/子目录名',//根目录assetsPublicPath: '/...
2019-10-17 15:04:12
2320
原创 css设置背景图自适应高度
方式一： body { width: 100%; height: 100%; position: fixed; z-index: -1; background-repeat: no-repeat; background-position: 0px 0px; background-size: 100% 100%; }...
2019-09-26 15:12:29
4591
原创 微信h5开发遇到的小问题
微信h5开发遇到的小问题微信端使用canvas画图问题一微信返回的二维码图片地址存在跨域限制，并不能直接获取到进行操作，需要后端转存或者后台进行处理返回base64，前端才能正常使用。...
2019-09-26 14:59:41
240
原创 nvm安装后出现'node' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
解决：找到nvm安装所在位置，新建一个空的nodejs文件夹window+r —> sysdm.cpl —> 高级 —>环境变量将下图中两个位置的地址改成刚刚新建的nodejs空文件夹所在的位置一般情况下，nvm安装后都是会自动添加Path，没有的话就自己添加%NVM_HOME%;%NVM_SYMLINK%;nvm ls 查看安装了哪些node版本包记住一...
2019-08-14 15:21:30
17210
2
原创 使用npm下载资源包时，出现Unexpected end of JSON input while parsing near···
解决：清除缓存：运行npm cache clean --force重新安装：npm install '包名'
2019-08-09 11:08:37
333
原创 Import sources within a group must be alphabetized 导入的参数必须按字母顺序排列
解决：tslint.json的rules对象里添加如下代码"ordered-imports": false
2019-08-09 10:15:57
812
原创 interface name must start with a capitalized I
解决：找到tslint.json文件添加如下代码"interface-name": [true, "never-prefix"],"rules": { "interface-name": [true, "never-prefix"] }
2019-08-09 09:47:38
1125
原创 Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslis
依照命令行提示去更新不起作用解决：1.直接删除该项目node_modules下面的caniuse-lite和browserslist这两个文件夹2. npm i caniuse-lite browserslist
2019-08-06 11:24:18
28664
1
原创 react+webpack+babel通用的简易开发环境配置
文章目录webpack 配置babel 配置react 配置模块热更新配置npm script 脚本的配置结语webpack 配置新建一个空的文件夹在新建的文件里打开cmd，依次输入以下指令，就会看见文件夹根目录多了package.json和node_modules文件了/* 初始化项目得到package.json文件 */npm init /* 开发环境安装，两种方式选择其中一个...
2019-07-23 16:51:42
619
原创 h5移动端开发中使用GIF遇到的一些个小问题
GIF概念和特点：图像交换格式（Graphics Interchange Format），其本质也就是一个文件数据。基于LZW算法的连续色调的无损压缩格式，压缩率一般在50%左右。无损压缩即指原文件的每一个数据在解压缩后仍然还在，所有的信息都可完全恢复。可以存多幅彩色图像，逐帧展示出来就是我们常见的GIF动图了。单次逐帧播放和无限循环播放问题场景：首次进入页面GIF图单次播放完...
2019-07-11 14:58:33
2986
原创 img和文本元素不可选的css设置
出现的场景1.移动端开发时，img标签是最顶层，长按就会弹出img图片提示保存图片或者出现黑框2.长按选中某一段文本解决方法：在body元素、img元素上加如下css样式：body{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;//禁止...
2019-07-10 17:49:19
2028
原创 H5移动端音视频开发遇到的一些问题小结
文章目录Android1.video和audio不能同时播放2.音视频始终不能自动播放，需触发3.touchend事件支持不友好，最好用click4.全屏处理5.不支持倍速播放属性playbackRateios1.音视频不能自动播放，需要触发事件2.浏览器视窗内的全屏处理3.airplay功能结语Android1.video和audio不能同时播放经测试，音视频是不能同时播放的，音频可播放...
2019-07-10 17:19:50
1453
原创 使用Git 出现stderr: error: bad signature fatal: index file corrupt
文章目录git提交出现的问题之一出现的情景解决git提交出现的问题之一stderr: error: bad signature fatal: index file corrupt出现的情景电脑突然断电，重启后使用Git提交代码时。解决简单粗暴手动删除本地仓库Git文件夹里的index文件（rm -f .git/index 没作用时）git reset（git bash here里面...
2019-07-10 15:54:20
1173
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人