- 博客(31)
- 收藏
- 关注
RSS订阅转载 JS 应用篇(一)：JS获取元素的高度
介绍几种使用JS获取div尺寸的方法，本篇博客以获取下面这个示例code的高度为例。<style>*{ margin:0; padding:0;}#demo { display:inline-block; width: 100px; height: 200px; background: yellow; margin: 10px; padding: 20p...
2019-12-31 17:03:21
344
原创 关于html的父元素div高度为0时 子元素本该看不到 而事实是子元素不受影响的原因
我们这边以自己用js实现的select组件来说明：我们会发现当.bm类名没有overflow:hidden;属性时，当我们点击input组件js对父元素类名为HMF-1的div时，动态改变该父元素的高度。当该父元素height为0时，子元素不受影响，仍旧屹立不倒。。。如下图，框框没了，父元素高度为0：这边没有用浮动，没有清除浮动一说，也没有所谓的脱离文档流一说。我个...
2019-12-31 16:54:43
2271
2
原创 vscode前端开发常用插件以及首选项配置
部分插件说明：https://zhuanlan.zhihu.com/p/99462672还有vscode的一些常用首选项配置：
2019-12-30 15:45:31
1341
原创 ES6 Object.is(param1, param2) 的使用
定义：方法判断两个值是否是相同的值。语法：Object.is(param1, param2)param1和param2可以是任何类型的值，不局限在对象object返回值：判断引用地址以及值是否都相同，返回boolean类型 true|falseObject.is('foo', 'foo'); // trueObject.is(window, window); // ...
2019-12-27 16:23:25
608
原创 引入一个js写的function函数报错 404 找不到wx_share.js这个资源的原因
先说结论：我们在打包（本地、开发、测试、生产打包）时，document.ejs入口文件引入的路径不会被webpack打包工具解析，而打包会使得文件结构会发生变化，从而导致相对文件路径引用地址出错！（如果是./在当前目录下一般不会错，因为打包后就是在同一个文件夹下，具体看你是否改动过打包文件结构了，默认是没问题的）过程：我用umi.js写了一个react 移动端h5页面，做微信分享...
2019-12-26 16:02:28
569
原创 antd-mobile InputItem组件 唤起数字键盘的type类型 兼容ios 和 android的有哪些
number类型在android无法唤起数字键盘，digit类型也是同理。money类型会带小数点，而且可以切换英文。如果是短信验证码，这边推荐使用tel类型
2019-12-25 10:40:33
2535
2
原创 移动端QQ浏览器默认发送2次img src请求图片资源 导致图片验证码与短信验证码接口所需参数不匹配
前阵子我碰到了个需求，实现开户功能开户需要手机号、图形验证码、短信验证码如下图：而图形验证码通过img标签的src属性去请求获取服务器图形验证码图片的用户如果想要点击获取验证码，就需要提供手机号、图形验证码对应的验证码字符串问题来了，测试提了个bug，第一次点击获取验证码后端总是报错！移动端的其他浏览器都很正常，不会出现这个情况，只有qq浏览器会发生这个情况，经过排查，...
2019-12-20 19:32:31
1260
原创 关于自定义微信分享内容的总结
补充一点，当微信分享完成后，出现了非二次分享问题，现象是，测试有时候点了分享，可以正常显示自定义分享内容，有时候又不行，这边要注意，我们测试的网络环境差，因此可能会出现跟我们不同的现象。究其原因，是执行顺序的问题我们的组件逻辑和微信分享函数的执行是异步进行的，哪个先执行完时间上不确定。所以我们的分享函数必须先行执行，才能最大程度的保障在react组件挂载完成前成功初始化！否则，没有完...
2019-12-20 19:19:27
876
原创 移动端h5（非react-native应用）调试神器vConsole
平时web开发时，在手机上，如果是要看控制台信息，都需要alert弹窗，这样很不友好，还会阻拦进程。通过vConsole.js 重写console方法，实现了类似于微信小程序的移动端调试效果，成功执行后会在右下角出现绿色的按钮，文本是vConsole（请注意，部分接口信息在这里观察不到，比如img的src请求资源）点击按钮后的效果如下图所示：具体使用方法也很简单在index.h...
2019-12-19 15:08:24
458
转载 SourceTree/git解决pre-commit hook failed的问题
一、 git commit -m 'xxx' 出现问题今天在上传项目的时候在commit阶段遇到一个问题,无论是在Sourcetree上传还是用命令git commit -m 'xxx'都报了一下错误:husky > npm run -s precommit (node v8.12.0)husky > pre-commit hook failed (add --no-ver...
2019-12-18 13:51:07
850
转载 es10 es9 es8 es7 es6
ES10ES10仍然只是一个草案，但是可以先来了解一下~ES9对象的 rest/spread 属性rest 属性跟数组及函数中的 rest 运算符用法很类似，是用 ... 将剩余的属性放入一个对象中。Promise.prototype.finally()不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。...
2019-12-16 17:13:27
182
转载 sass的@mixin专题
为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性，@mixin指令也同样能提高你代码的重复使用率并简化你的代码。@extend指令通过继承从而简化了代码，但是它也有缺陷之处，首先是不够灵活，其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。@mixin指令是另一种简化代码的方法。Mixins可...
2019-12-16 15:16:51
151
原创 移动端项目中 @2x 图 和 @3x 图 的解决方案
设计师经常会提供给我们如：bg@2x.png、bg@3x.png这样的同样图片不同比例的图给前端我们知道，对于不同的移动设备而已，他们的dpr（devicePixelRatio）可能是1、2、3也可能带小数如果dpr与图片的比例相差太大，会造成图片失真（因为不同dpr在同样css像素下能展示的像素点不同）那么，在移动端，我们如何处理2x图和3x图呢？有以下2种写法：1、less...
2019-12-16 14:54:17
1437
转载 git commit前检测husky与pre-commit
一、前言现在最流行的版本管理工具非git莫属，而良好的代码规范有助于项目的维护，为了防止一些不规范的代码 commit并push到远端,我们可以在git命令执行前用一些钩子来检测并阻止。现在大前端主要有两种git钩子插件：husky（jquery与next.js都在用），pre-commit(antd在用)。下面我将现介绍一个git钩子，再介绍下husky与pre-commit的用法二、...
2019-12-16 13:18:10
1091
转载 一步步从零开始用 Webpack 搭建一个大型项目（深度长文，万字教学）
开篇很多人都或多或少使用过 webpack，但是很少有人能够系统的学习 webpack 配置，遇到错误的时候就会一脸懵，不知道从哪查起？性能优化时也不知道能做什么，网上的优化教程是不是符合自己的项目？等一系列问题！本文从最基础配置一步步到一个完善的大型项目的过程。让你对 webpack 再也不会畏惧，让它真正成为你的得力助手！本文从下面几个课题来实现 课题 1：初探 webpac...
2019-12-12 13:16:29
558
原创 rem移动端适配时 pc端也要能够正常显示
rem移动端适配下可能会出现这种情况，即，由于移动端h5我们通过js设置了html的font-size会根据dpr（设备像素比）大小而自适应变化，但是pc端的font-size固定是12px这时就可能会出现pc端由于整个项目都是由rem作为单位的，移动端html的font-size都很大，在100px左右，而pc则是12px下面贴上移动端适配代码，此段代码放在index.html中：...
2019-12-12 09:58:37
789
原创 移动端h5软键盘压缩空间 按钮上移覆盖输入框怎么处理
正常情况下未输入时：输入时：我们发现了，ios机子上可以自动往上挪移，而android不行，因此，我们需要对android做兼容。怎样做才能让按钮不覆盖手机验证码输入框呢？我们可以为整个容器设置一个min-height最低高度，当软键盘出现占用空间时，当最小高度足够容纳除软键盘之外的所有页面元素时，按钮自然不会再上移覆盖掉输入框了，而是会出现滚动。.flex...
2019-12-12 09:15:50
992
原创 umi中 判断当前项目所处的环境变量
首先当然是需要有多个环境的后台地址啦！如下env.config.js文件即是环境配置文件(根据自己的实际情况修改地址)：export default { DEV_ENV_IOS: 'bdzdDev://dev.baidu.com?type=rn&bundleId=com.cgws.meppo.onlinecreateanaccount&displayName=...
2019-12-11 18:12:20
4259
原创 Umi配置proxy解决跨域问题 请求重写
解决跨域需要在webpack配置proxy，而umi没有weppack.config.js是因为umi将webpack配置保存在.umirc.js的配置文件中。所以我们需要在.umirc.js文件加上（或者修改target路径）：proxy: { '/api': { target: 'http://devfetch.sqgl.com:8443', path...
2019-12-11 10:18:47
4412
3
原创 关于rem的计算的坑
如下图所示，我们需要做一个分割线，这是一个移动端h5的页面，需要做rem适配，分割线样式如下：.split_line { display: inline-block; width: 0.02rem; height: 0.4rem; margin-right: 0.16rem; background: #ebebeb;}宽度为0.02rem时，会出现时隐时现的情况！...
2019-12-10 11:00:49
238
原创 docker未完待续
k8s：管理docker的工具pods: 容器组container：容器，相当于镜像的一个实例，其实就是某种操作系统+应用所需的所有运行环境（例如redis、node等等）image：镜像，相当于一份虚拟机的镜像一个pods包含多个container，在同一个哥pods下，一些公共资源可以共享...
2019-12-10 08:58:39
89
原创 移动端rem适配 自我实践总结
通过js代码以及设备dpr，动态的改变html标签的font-size值，使得rem可以自适应改变大小。只需要在<head>标签里加上：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no...
2019-12-10 08:34:15
141
转载 react动态添加样式：style和className className不会被覆盖
react开发过程中，经常会需要动态向元素内添加样式style或className，那么应该如何动态添加呢？？？一、react向元素内，动态添加style例如：有一个DIV元素， 需要动态添加一个 display:block | none样式， 那么：<div style={{display: (index===this.state.currentIndex) ? "bloc...
2019-12-09 18:09:46
2085
原创 局部覆盖伪元素样式
假设有一个div的类名是flex_container，我们现在需要需改antd-mobile的一个伪元素的高度，将height:1改为height:0，即去除上边线body .flex_container :global(.am-list-body::before) { height: 0;}样式覆盖后的效果：...
2019-12-06 10:47:57
597
原创 如何修改antd或者antd-mobile等UI库的默认样式
如果antd或者antd-mobile官方提供api，可以修改样式，则首选通过api直接修改如果官方不提供api的话，可以通过className的方式（2种写法）来修改样式<InputItem key="input1" className={`${style['input-item']}`} style={{backgroundColor: '#333' }} &...
2019-12-06 10:37:26
5770
1
原创 base64 web前端js解码与转码
解码，就是把base64字符串转换成常规字符串 b64DecodeUnicode = str => { return decodeURIComponent(atob(str).split('').map(function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); ...
2019-12-04 16:25:56
1246
原创 React-router V4中Link组件的坑
提示语的无关痛痒，让我找了好久。。。import { Link } from 'react-router';react-router已经移除Link组件，改成了react-router-dom中去实现Link组件import { Link } from 'react-router-dom';以下是坑爹的报错信息：还有代码：<Menu theme="dar...
2019-12-02 16:29:42
210
原创 交换机和路由器有什么区别
通俗的讲：（1）路由器作用于网络层。交换机作用于物理层（又称中继层）（2）路由器用来连接不同的局域网、城域网、广域网，使他们能够互相通信。交换机是做扩大局域网接入点的，可以让局域网连进更多的电脑。总结：交换机做物理主机增量接入路由器做一堆主机组成的局域网和另一堆主机组成的局域网以及更多局域网之间的存量通信详细的讲：路由器是连接因特网中各局域网和广域网的设备，交换机是一个...
2019-12-02 09:35:15
264
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人