- 博客(38)
- 收藏
- 关注
RSS订阅原创 解决Vue项目在iOS 10 报错 “Cannot declare a let variable twice: ‘r‘”
问题描述如下图所示，H5页面在iPhone7P及IPhone5c（iOS 10）手机上打开白屏，使用vconsole查看报错原因是Cannot declare a let variable twice: 'r'问题定位原因是由于ios10的bug，按报错的描述来看原因是“变量不能被let声明两次”，但其实仔细review代码，并没有出现这种情况。尝试一一开始想到的最简单的方式，就是找到对应的模块，将所有的let修改为var，但是没有起作用。尝试二按照网上的解决方案，修改webpack的配置，
2021-10-31 17:00:19
2399
原创 vueI18n 多语言文件按需加载
前言在对国际化H5项目打包分析发现，所有语言文件均被打到了app.js入口文件里，这就导致app.js文件体积庞大，目前项目里存在zh-CN、en-US、es-MX、es-419、pt-BR、ja-JP等六种语言包，未来还有可能新增更多的语言文件。当前项目里每个语言文件的体积大概是100多kb，加起来将近800k的体积，如果有新增的语言，体积还会更大。使用webpack-bundle-analyzer分析打包后的结果，可以看到，所有语言文件都被入口文件所引用。针对目前团队的移动端项目而言，H5页面没
2021-07-27 10:52:40
2494
3
原创 H5 iOS新机型适配
前言近期在做落地页优化项目中，针对iOS多种新机型（iPhone X之后的刘海屏）适配，有一些坑点，及适配相关的心得，在此记录一下问题落地页首屏页面要求铺满全屏，背景图撑满。之前设计稿都是750 * 1134，但是为了适配iPhone X（分辨率375 * 812）类的刘海屏手机，UI多出了一份750 * 1642的设计稿，那么页面首屏的高度需要是屏幕高度，背景图要按两套背景图来，而由于该项目里区分国家，所以一共是2套*3国，6套背景图解决方案方案一首屏dom高度设置为100vh .firs
2021-07-20 13:55:37
395
原创 webstorm配置能识别Vue CLI3 创建项目的别名 alias @
问题webstorm无法识别vue3 cli里面创建项目的别名@，如下图解决方案在 Preferences > Languages & Frameworks > JavaScript > Webpack配置路径/project-name/node_modules/@vue/cli-service/webpack.config.js
2021-05-11 20:18:45
550
原创 解决Vue项目在iOS 9 报错 “SyntaxError: Unexpected keyword ‘const‘. Const...“
问题描述如下图所示，H5页面在iPhone5s（iOS 9）手机上打开白屏，使用vconsole查看报错原因是"SyntaxError: Unexpected keyword ‘const’. Const…"，低版本浏览器不支持es6语法。但是查看打包后的app.js，其实是没有const的，而报错里面的11.js是有cosnt原因查看对应的代码，发现该文件里引入了三方库里面的方法，但是node_modules里的依赖默认是不会被babel处理的，所以es6的语法没有被转化成es5的，低端浏览器不支
2021-03-18 19:46:49
2372
原创 解决移动端input点击与失焦事件冲突
问题描述如下图所示，移动端的输入框，后面是一个清除按钮。业务场景是收起键盘的时候触发校验逻辑，但是实现的时候，点击清除按钮，键盘就自动收起了，而且也触发了校验逻辑。交互要求：输入文本的时候键盘是弹起来的，此时点击清除按钮，不让键盘收起；输入完成后，收起键盘，此时点击清除按钮，需要聚焦到input里，且弹起键盘原因input点击事件与失焦事件冲突了，在click的时候会先触发blur事件，再触发click事件解决方案1、思路监听清除按钮的mousedown事件，阻止默认事件，即阻止点击后默认失
2020-12-29 17:32:28
2914
原创 前端自动化测试——vue单元测试vue-test-utils
自动化测试分类单元测试单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。简单来说，单元就是人为规定的最小的被测功能模块，可能是一个单一函数或方法、一个完整的组件或类。单元测试是最小巧也是最简单的测试——它们通过隔离单个组件的每一个部分，来在最小工作单元上进行断言。单元测试侧重：检验函数的输出结果e2e测试e2e (端到端) 测试，致力于确保组件的一系列交互是正确的。它们是更高级别的测试，例如可能会测试用户是否注册、登录以及更新他们的用户名。这种测试运行起来会比单元
2020-08-25 16:32:59
10570
原创 移动端适配rem+vw
前言对于做移动端开发的同学来说，rem这个单位并不陌生。通常我们做移动端适配，主流的方案大致有两种淘宝flexible.js计算设备像素比，dpr=物理像素/css像素根据设备像素比，将页面宽乘以设备像素比，然后去计算rem，这样页面所有元素都会是正常的2倍然后通过meta标签的viewport对页面进行缩放，使得页面恢复正常根html的font-size值 = 屏幕宽度*设备像素比/10以iphone6 375为例，1rem = 375 * 2 / 10 = 75px然后在项目里写
2020-08-23 20:12:12
1289
2
原创 iOS上H5一些兼容性问题
iOS 上 使用input标签会自动调起软键盘，如果不想调起软键盘，建议不写input标签，使用div代替场景：比如点击输入框后跳转其他页面，如果使用input框，在ios上会先弹出软键盘再跳转input不能自动聚焦，使用DOM.focus() 或是autofocus属性或者手动触发点击事件都不行，主要是因为IOS的安全机制，得用户触发事件后才能聚焦解决方案：搜索框和搜索结果页在同一个页面，不要使用路由跳转返回上一页，页面加载完成后会先白屏，得滑一下页面或者触屏，才能恢复正常.
2020-05-15 18:08:09
1512
原创 js获取当天零点时间
js获取当天零点时间const stamp1 = new Date(new Date().setHours(0, 0, 0, 0)); //获取当天零点的时间const stamp2 = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1); //获取当天23:59:59的时间这种方式浏览器兼容性很好，但是用...
2020-02-10 18:02:43
20321
1
原创 js replace方法替换变量
前言项目中遇到的场景是，需要使用replace方法去匹配变量内容并且替换，比如： let str = 'aaa likes bbb, aaa is a girl', key = 'aaa'; let newStr = str.replace(/key/, 'xxx');上面的key是个变量，如果直接这样写的话，是不能正确匹配的解决方法我们可以使用 new RegExp的方式去做匹配...
2019-10-08 14:54:18
1032
原创 iOS textarea标签 placeholder多行时被隐藏，收起键盘又显示
问题描述如下图所示，项目里用到了textarea及其placeholder属性。在iOS上输入文字后删除，placeholder文字被隐藏了，只能显示一行，收起键盘后又能正常显示原因未知解决方案1、思路动态设置标签的placeholder属性，获取输入框的值，当输入框的值为空时显示placeholder，不为空时不显示2、具体代码我的项目是用react写的，所以下面代码实现也是r...
2019-09-17 19:52:18
1469
原创 iOS H5 history.back() 返回上一路由 页面白屏
问题描述最近在做H5项目的时候，发现使用history.back()在IOS上返回上一页的时候，会有很严重的bug。我的场景是列表页滚动了超出一屏之后，进入详情页，再点击返回列表页，在iOS上就出现了白屏的现象，但是触屏或者滑一下，页面就又恢复了。解决方案1、使用绝对定位这个也是参考了网上的写法，把列表页高度设为100%，绝对定位 .container { positio...
2019-09-08 18:03:10
5471
1
原创 react-router4实现异步按需加载模块
前言按需加载模块的目的是实现代码分割，用户打开首页时不用下载全部的代码，打开特定的页面加载特定的代码，可以提高用户体验实现在router4以前，我们是使用getComponent的方式来实现按需加载的，router4中，getComponent方法已经被移除。对于react-router4中实现路由按需加载，网上也有几种解决方案，比如借助react-loadable或者bundle-load...
2019-08-15 15:48:38
877
原创 web设计 & UI交互 & CSS特效网站
Web Design & UI Inspiration with Code Snippets：https://codemyui.com/Best Web Design Trends: https://www.awwwards.com/Some Effests Demo: http://fff.cmiscm.com/#!/mainDiscover the World’s Top D...
2019-08-15 10:39:34
695
原创 SplitChunksPlugin简介及在多入口页项目中的实践
SplitChunksPlugin是webpack4中官方plugin，用于做分包打包的，可以帮你把重复引入的模块按规则打包到指定的js里面。以下是SplitChunksPlugin的默认配置：splitChunks: { chunks: "async", //在默认情况下，SplitChunksPlugin 仅仅影响按需加载的代码块，如果需要对同步的代码做代码分割打包，那么chunk配...
2019-08-05 10:30:49
1528
1
原创 React中利用 key 实现组件重新渲染
最近在项目实践中，发现react中可以利用key实现子组件的重新渲染，具体场景如下：需要切换下拉菜单时，对应的榜单也要替换成该轮的数据具体代码如下render(){ let {round, sid} = this.state; //round表示选中的菜单的索引 return ( <div className="record-wrap"> ...
2019-08-02 10:59:29
8057
2
原创 element-ui使用时的一些坑点总结
1、el-select 下拉框绑定值为对象时选中值显示错乱。如下图，所有下拉选项都是选中状态而且不管怎么选，下拉框显示的值一直是最后一个选项解决办法：加上value-key属性 官网也有介绍，当绑定值是对象类型是必填代码如下，其中value-key属性的值为数据源数组元素中的唯一键。例如下面的id，如果其他字段的值也是唯一确定的，如reserve1，那么value-key的值也可以是res...
2019-04-01 17:42:22
2123
原创 js 使用预签名(presigned) url 上传文件到 AWS S3服务（解决生成的文件格式错误问题）
背景：项目里有图片上传的需求，具体实现是后端生成presined url（预签名url，里面包含上传到aws S3所需要的一些认证标识信息）给到前端，前端通过这个URL将文件上传到云服务上。但是上传成功后，从CDN上下载下来的文件打不开，而且只有前端有这个问题，客户端可以正常上传，一开始以为是框架问题，而且亚马逊官方也没有直接上传相关的文档（都是使用SDK的方式上传），所以问题很难定位，后来在g...
2019-03-16 18:17:42
10184
6
原创 Vue + Element UI 循环生成checkbox无法选中
背景：需要根据后端返回的数据生成相对应数量的checkbox，并勾选需要更改状态的数据传递给后端，如下图HTML部分：&lt;el-checkbox v-model="item.checked" :key="item.id"&gt;&lt;/el-checkbox&gt;一开始的写法，就是获取到数据，遍历生成checked属性 getUserAuditList
2019-03-07 16:50:06
8997
3
原创 axios get方法传递数组
axios的get方法中使用params时对于js数组类型的参数的默认操作比较奇怪，会使得参数名后带上’[]'字符串，如下但是console.log参数bizType，就是正常的[‘3’,‘4’,‘5’]按照网上的写法，把数组json序列化再查看参数，发现变成了这样本来以为能解决问题，其实传递给后端的是’[“4”,“5”,“6”]’，后端说解析不了
2019-03-07 15:27:07
24341
3
原创 vue + axios 导出Excel文件流（解决乱码问题）
后端返回的是文件流，需要前端转换成Excel文件并下载到本地，具体写法如下： axios.post('/api/export', qs.stringify(params), { headers: { 'Content-Type': 'application/x-www-form-u...
2019-03-06 15:36:51
14510
10
原创 aos.js介绍及其在react项目中的使用
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，在页面往回滚动时，元素会恢复到原来的状态，demo演示链接：http://www.jq22.com/yanshi8150本文主要介绍aos.js在react项目中的使用，网上相关的博文较少，使用的时候踩了一些坑，所以记录一下。一开始按照网上的教程，在项目里引用了相关的css、js，在需要动画的元素上添加aos属性，但是滚动的时候始终出不来...
2018-11-26 11:48:04
3530
原创 clipboard.js移动端无法实现复制
clipboard.js简介：实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。在项目中使用clipboard.js插件去实现点击按钮，复制文字到剪切板的功能。同样的代码，在PC可以实现正常复制但是在移动端却失效主要是因为移动端项目为了防止用户长按文本实现复制，一般在重置reset.css里面都会设置div, p, a, ul, li, ol, h1, h...
2018-10-23 11:52:38
2928
原创 ES6 解构特性的使用
使用解构这个特性可以更简单地获取对象或者数组中的数据，最近在项目中经常用到，但是之前不熟悉用法，mark一下1、数组解构let obj = ['a','b','c','d'];let [first] = obj; //解构第一个元素，first值为alet [,,,last] = obj; //解构最后一个元素也可以合在一起写， 如 let [first,,,last] ...
2018-08-09 16:02:54
173
原创 CSS3 before、after伪元素实现气泡框
气泡框的原理其实也就是普通边框+三角形，CSS实现三角形也是利用了border属性 1、三角形是实心的html代码：<div class="wrap"></div>css代码： .wrap{ position: relative; width: 600px; hei...
2018-08-09 11:26:26
5131
原创 Zepto.js学习笔记
1、$.each 可以用来遍历普通数组和对象数组，当遍历普通数组时，回调函数的参数是索引、数组里的每个元素$.each( [a,b,c], function(index, item) { } )当遍历对象时，回调函数参数是每个对象的key、每个对象的value 2、$.extend$.extend(target, [source, [source2, ...]]) 浅拷贝...
2018-07-18 17:01:13
405
原创 解决使用transform:rotate属性移动端页面可以左右滑动的现象
如下图，文字使用了transform:rotate属性，结果造成页面在移动端可以左右滑动。在排查问题时，按网上建议，在根元素html和body上加overflow:hidden，虽然在浏览器上无法滑动，但是到了移动端还是可以左右滑动，然后一层层排查，直到在使用了transform:rotate属性的元素父级(最近的position不为static的父级)加上overflow:hidd...
2018-07-13 15:44:42
5575
原创 js实现数组去重、比较两数组得出重复部分
数组去重的两种方法：1、用新对象来存储，对象的key值为数组元素var removeDup = function (old) { var arr = [1, 2, 3, 4, 3, 4, 5]; var o = {}; for (var i = 0; i < arr.length; i++) { var k = arr[i]; if (...
2018-03-26 18:38:56
4706
原创 CSS3 动画实现放大缩小、涟漪扩散效果、叠加图片循环来回显示
一、无限放大缩小，可以应用于跳动的气球等场景，效果如下 html部分div class="ballon">div>css部分 @keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1); /*开始为原始大小*/
2018-02-05 18:02:37
77770
11
原创 js replace() 方法的应用和理解
string.replace(searchValue, replaceValue) replace方法对string进行查找和替换，并返回一个新字符串 参数searchValue有两种形式：1、字符串 2、正则表达式 参数replaceValue也有两种形式：1、字符串 2、函数当searchValue是一个字符串时，那么只会在这个字符串第一次出现的地方被替换 例如 va
2018-02-02 18:33:26
5077
原创 父级overflow为scroll时，绝对定位的子元素会被隐藏或一起滚动
需求：父级边框固定，里面的内容滚动 由于是图片边框，于是我把边框的上下部分单独切图，中间重复部分平铺想要的效果图： 一开始的写法： html:div class="paradise-wrap"> div class="paradise">div>div>css: .paradise-wrap{ position: relativ
2018-01-18 10:58:29
15698
1
原创 CSS 图片边框的处理
一、边框高度固定，内容可滚动这种情况下，直接将整个边框切下来作为背景图,里面的内容设置固定高度，溢出部分设置overflow: scroll/auto 源码如下： html: "rule-wrapper"> "rule-content"> 转眼已经入冬了，时间太过迅驰，我和我的南方小城一样，总是慢吞吞地跟不上时节的节奏。
2018-01-17 11:23:44
7098
1
原创 水平垂直居中的几种方式
一、flex方式（适用于居中元素元素宽高未知）<body> <img src="images/myPage/avatar2.png"></body>html,body{ height: 100%; } body { display: flex; align-items: center; /
2017-12-21 22:14:10
2438
原创 rgba和opacity的区别及应用
一、rgba和opacity的区别 话不多说，先看代码，同样设置背景透明度，写法1： background: rgb(0,0,0); opacity: 0.5; 写法2： background: rgba(0,0,0,0.5); 不同之处在于，opacity属性的值，可以被其子元素继承，给父级div设置opacity属性，那么所有子元素都会继承这个属性，而RGBA
2017-12-21 11:45:05
4419
原创 git命令小结
工作中频繁使用的git命令1、git init 创建本地版本库创建一个空目录，再在此目录下执行git init命令2、git remote add origin url(如下图) 到本地仓库目录下执行此操作，可以将本地仓库与远程仓库相关联3、git clone url 使用git拷贝一个Git仓库到本地4、git clone -b 分支名 ...
2017-11-23 16:35:17
331
原创 AngularJS学习笔记（一）:表达式&指令&作用域
由于最近要基于phonegap平台做混合型开发的应用，选用了ionic框架（基于AngularJS），而此前没有任何前端语言学习基础，所以我开始看了一点点javascript语法后便开始看AngularJS的入门教程，归纳了一些学习笔记
2016-05-09 23:04:49
477
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人