- 博客(146)
- 收藏
- 关注
RSS订阅原创 Flutter路由动画
在常规app开发中，肯定避免不了自定义路由动画，那么我们怎么给flutter定义路由动画呢。相信大家在谷歌搜索会出现很多定义路由动画的，但是按他们实现的动画，大部分是有一定缺陷的，比如这种路由动画！！！！！！点我。
2022-10-03 03:18:33
690
1
原创 sql排序，数据库字段设置为varchar导致排序失效
一般情况下，我们在表设置排序字段都是int，对应的sql查询 也就只需要order by xx desc。但是总有一些老项目，由于会因为各种原因，导致出现此字段为varchar情况，这种情况我们应该怎么排序呢。当前也可以使用加运算符。
2022-10-03 02:21:27
725
1
原创 Flutter 颜色转化
开发flutter也半年了，想起来把之前遇到的一些问题总结下，也可以帮忙后续回顾。后面想为了文档可读性，我再开个新项目仓库，将代码放在里面。
2022-09-10 00:45:18
961
原创 删除nvm吧，还在手动切换node版本
相信大家如果维护很多项目，一定会遇到这种问题，a项目是node@14，b项目是node@16，每次切换项目都要手动切换版本，痛苦无比，那么有什么办法解决这种问题，volta就是解决方案。
2022-08-22 02:00:39
487
原创 如何在谷歌控制台增加微信调试
前言我电脑存储空间满了，然后开始卸载一些不常用的应用，微信者开发工具就被我删除了，但是今天突然要调试微信打开页面，在不想重新安装微信开发者工具情况下，我想直接在谷歌控制台，调试微信应用。步骤如下图f12打开控制台，点击菜单按钮 - More Tools -Network condition打开 Network condition 窗口 User agent 选项，选择 Custom （自定义），然后在下面的文本框中输入 UA输入UserAgentAndroid 微信 UserAgentm
2021-09-11 15:02:12
451
原创 一次系统升级引发的问题
(一) 前言无意之中把系统升级, macOs到10.15.4，之前xcode 版本是11, 已经Homebrew都出现安装问题，查找半天，说可能是某些核心配置修改, 导致, 只能卸载重装。(二) Homebrew错误我在安装新包, 出现如下错误，Updating Homebrew...Error: No available formula with the name "node"==> Searching for a previously deleted formula (in the l
2020-12-24 12:30:54
2211
原创 获取localStorage的使用容量和最大容量
（一）前言我们最近需要涉及一套前端缓存库, 主要对一些列表数据进行本地缓存, 避免二次进入页面空白时间太长，这里内嵌webview，持久缓存就需要使用localStorage。这里主要讲述怎么计算当前使用体积和剩余体积（二）最大容量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>容量</title></head>&l
2020-11-23 21:02:36
3379
原创 QuotaExceededError The quota has been exceeded
（一）前言我首先描述下，这种报错出现的场景ios <= 10 真机 Safari 的无痕浏览模式使用localStorage or sessionStorage 的 setItem当然，问题肯定社区有解决方案，以下链接可以满足你想要的答案问题链接1问题链接2问题链接3（二）解决过程如果你看完，那么问题可以总结为，两个方向是我们h5站点增加检测是否支持，并提示用户切换模式我们在不支持情况，默认切到cookie当然因为cookie本身储存空间不大，所以建议如果本地存储大量数
2020-08-28 17:33:08
3821
原创 canvas测量文字的真实宽度
（一）前言需求是这样，我们要求antd的table内部的文字都不换行，然后要兼容小屏幕，那么就需要设置scroll值，但是设置值后，会出现偏移，那时候需要设置列columns的宽度，但是之前行可以换行，放不下，会自动换行，现在只有一行展示，在不确定返回的宽度时候，我们就需要实现计算当前行的宽度，自动为他设置上（二）实现具体实现，包含计算纯文本的宽度，设置render的宽度，和手动设置宽度，计算scroll的x的宽度，等一系列计算。这里我只介绍如果计算纯文本中计算出当前的宽度这里我们使用 contex
2020-07-23 22:43:52
2177
原创 去掉H5中默认alert和confirm的ip地址或域名
（一）前言大部分情况，C端产品，都会有UI提供相对应的弹框样式，但是在下载页这种纯html这种项目中，alert一般直接使用弹框了，但是弹框在使用使用，会在title中带上ip，导致部分用户，不希望看到这个地址（二）实现// 重置alert window.alert = function(name){ const iframe = document.createElement("IFRAME"); iframe.style.display="none"; iframe.se
2020-07-23 22:12:32
2246
4
原创 WebStrom在Mac下无法打开或闪退的解决
(一) 前言记录一次webstorm从2019.1升级到2020.1.2的过程遇到的坑(二) 卸载老版本当我们卸载完之前2019，需要删除之前的WebStrom配置，具体如下# 删除配置信息目录rm -rf ~/Library/Preferences/WebStorm*# 删除插件信息目录rm -rf ~/Library/Application\ Support/WebStorm*# 缓存信息目录rm -rf ~/Library/Caches/WebStorm*# 删除日志信息目录rm
2020-06-29 17:03:40
6118
3
原创 H5常规踩坑总结
（一）前言在h5做兼容情况下，我们会遇到很多问题，但是不去总结话，下次遇到相同问题，又会去查询资料，所以这里是平时与遇到h5，踩坑总结的地方（二）主体scrollToscrollTo兼容性替代方案scrollTo支持Safarismoothscroll其他方案animationanimation-delay 负值以及 delay 正值在 iOS 上的坑inputt...
2020-03-30 20:23:22
354
原创 Charles工具（MAC）
对于常规页面，我们可以通过浏览器的控制面板，抓取http请求，然后根据相关接口返回的数据，进行问题定位。但是对于内嵌到app里面的应用，我们应该如果抓取请求呢，一种方案是，通过配置虚拟机，然后将测试的apk安装到上面，在开发模式下，自然能抓取请求，但是由于开发环境和生成环境数据差异导致的问题，需要在本机复现的情况下，我们就需要进行http请求抓包了，这时候就需要一个抓包工具。这里我推荐使用Charles
2019-12-14 18:25:17
197
原创 纯CSS实现横向滚动条
*（一）前言基于大部分场景，我们需要使用横向滚动，这种时候，大部分会选择swiper来实现，但是其实，我们也可以通过纯CSS的方式实现一个滚动条*（二）实现大家都知道overflow 可以单独设置// 横向滚动overflow-x: scroll;// 纵向滚动overflow-y: scroll;基于上面知识，我们首先来实现一个滚动,<!DOCTYPE html>...
2019-12-14 18:16:50
4839
1
转载 CSP(内容安全策略)防运营商劫持
（一）前言 CSP英文全称Content Security Policy，中文意思是 **内容安全策略**。CSP以白名单的机制对网站加载或执行的资源起作用，在网页中，这样的策略通过 HTTP 头信息或者 meta 元素定义。用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件。
2019-11-26 16:01:22
3597
转载 script、iframe注入型防运营商劫持
（一）前言准确是防运营商劫持就是防script、iframe注入型劫持，属于HTTP劫持中的一种。主要是劫持js文件，然后在网页中通过js脚本往网页中注入图片和链接或者框架广告，也叫流量劫持。至于劫持类型，这里我建议，看这篇文章（二）...
2019-11-25 21:04:06
1072
原创 Flexbox在button/fieldset/legend中(比如safair)失效问题
（一）前言常规flex布局，之前就已经介绍过了，那么，其实之前，在封装项目button的问题中，我几乎都是基于div，为其提供loading，disabled，这些效果，但是比较麻烦是，在onClick事件中，我必须为其loading和disbaled的拦截，然后，我尝试了，使用button的disable来为其提供禁用，但是噩梦也由此而来，在使用flex定位内部元素居中时候，测试提供ios 9...
2019-11-10 18:31:15
262
1
原创 谈谈移动端IOS橡皮筋特效
（一）前言对于移动h5应用，会发现进场出现滑动橡皮筋效果，大部分情况下，如果将body设置为滚动条情况下，只要设置html就fixed定位，其实就能解决这个问题，但是大部分产品，会使用局部定位的元素来实现滚动，那么随之问题就会发生。（二）页面元素滚动场景本文解决方案，基本参考下面文章参考链接下面，我来说下，我遇到的问题场景整体页面未使用body作为滚动条内部定义div 为listV...
2019-11-10 18:08:11
1968
1
原创 在React项目中集成动画库
（一）前言其实，对于常用动画，大部分基于css的transition 和animation实现，在总结目前react动画使用时候，大概发现类似本文 React组件动画方案，我们以目前css-module的方式在加载scss文件，并配置了css支持，css不会提供module功能（二）集成animate.css本身，我们最方便是直接集成animate.css，所以大部分场景，我们做入场动画，其...
2019-10-21 19:53:22
797
原创 控制视图首次渲染DOM数量
（一）前言谈及相关性能优化，我们可以想到两个方面，一个是架构层级，一个是代码层级。这里我们说下常规代码方面，如果加快页面首次渲染，我们以React.js为例子，其实常规谈及最多就是减少重复渲染，但是如果我们在做一个页面，会有很长视图，用户首次渲染是看不到视图之外的页面的，这时候如果在首次打开页面，就直接进行渲染，那么当后续加载的视图足够大，越容易产生性能瓶颈，或许在web看不出，但是就h5体验方...
2019-10-15 14:49:42
261
原创 在WebStorm中添加px转rem单位插件
大部分场景下，我们会postcss中集成，但是对于老项目而言，因为历史遗留问题，会导致再次集成[postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)时候，出现设置比例不兼容情况，这时候当然处理兼容是做好方案吗，但是，如果稳妥处理，那么我们就依照之前的将px在直接转换为rem。
2019-09-23 11:13:38
2496
原创 推荐文章/常用工具
（前言）这栏目会收集前端相关遇到过，觉得值得阅读的文章，有部分是干货，能直接对业务能力提升，有部分是偏向讲解底层原理，差不多意思就是，能提升对底层原理认识，以及日后遇到喜欢谈论底层原理，也能有个应对CSSCSS新属性ECMAscript值得一看的原生JS ApiReact.js虚拟DOM实现React FiberReact底层解析WebpackWebpa...
2019-09-14 17:26:56
197
原创 React-sticky的吸顶效果实现
（一）前言相信大多数和我一样，对于postion的属性，依然保留在static，relative，absolute和fixed。而且在这篇文章之前，如果我要实现一个悬浮效果，解决方案监听scroll的位置，动态修改需要定位的元素postion为fixed，以达到定位的效果。但是在了解到react-sticky后，我发现作者提到了postion:sticky，吓得我马上查阅下sticky是什么。...
2019-09-07 01:22:08
10501
原创 CSS动画开启硬件加速
（一）前言在需要高频交互的css动画时候，我们就需要考虑使用CSS3 硬件加速。首先，CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS属性不会触发 repaint，所以能大大提高网页的性能。现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件...
2019-09-05 03:38:04
1989
原创 加密函数库（cryptojs库）
（一）前言当我们需要进行传输加密时候，常规需要使用一个加密库，进行封装，比如md5，base64，AES等等。这里我介绍AES加密使用， AES加密算法的详细介绍与实现node.js 里面的crypto-js其实包含了ase加密，但是在web端，可能你需要一个类库CryptoJS库crypto-js 是一个纯 javascript 写的加密算法类库 ，可以非常方便地在 javascript...
2019-09-04 02:34:38
5386
原创 当过渡/底色为背景图怎么使用transiton
（一）前言最近UI大佬那边，开始重视视觉交互和设计图还原程度，然后加上很多渐变效果出现我们会使用渐变作为按钮底色，如果我们直接使用transiton设置background-color，会发现过渡效果其实不能生效，我们如果使用背景图片作为按钮状态切换，当首次加载时候，比如从选中切到未选中，会在未加载图片，出现瞬间闪屏效果，这也是直接使用transiton设置background-image...
2019-09-02 01:14:18
734
原创 Tree和array之间相互转换
（一）前言对于大部分网站需求，我们经常会遇到一种需求，将list转为tree结构，或者将tree转为list结构，或者我们在tree结构中查找对于的数据，返回，或者返回顶层到查找级别的list。（二）将list转为tree我们一般会在后台数据库设计时候，当我们设计省市县联动时候，一般会在数据库设计唯一索引id，和pid字段，pid关联父亲id，这样当查询出来的数据很可能是类似下面的结构co...
2019-08-19 23:13:43
6491
1
原创 TweenMax.js 专业动画插件
（一）前言当我们要做网页动画时候，不管是css还是js控制，其实在复杂连续动画下，都很难保证连续和流畅性，那么，我们就需要一个能给出的简单的解决方案，正好，TweenMax.js 就能解决这件事（二）TweenMax初探...
2019-08-10 02:41:23
2553
原创 React 设计模式
（一）前言这里提到的设计模式并不是编程通用的设计模式，如常说的单例模式、抽象工厂模式、建造者模式、工厂模式、原型模式等。而是在设计 React 组件时的一些解决方案与技巧，包括以下几种：(1) 容器与展示组件(2) 高阶组件(3) render props(4) context 模式(5) 组合组件(6) 继承当然概念部分，大家能根据名字猜出，但是我还是要为每种，单独给出demo详...
2019-08-09 04:01:34
6346
原创 代码规范之使用eslint和prettier格式化项目代码
（一）前言对于团队而言，不管谁都有自己的代码习惯，这时候如何统一团队习惯来，js当然是eslint，ts对应就是tslint。当然这时候也不可或缺可以将Prettier集成到项目中*（二）安装Prettiernpm install --global prettier安装好后1、打开webstorm设置 （file=>setting=>tools=>flie watcher...
2019-08-07 02:02:55
2159
原创 解决跨平台合作开发中，win换行符问题
（一）前言其实大情况下，win除了开机慢，软件打开慢，而且卡顿，安装包时候可能会出现一些问题外，也没那么多坑，（二）页面性能分析网址当我们做完一个页面，肯定要分析，加载渲染速度等一系列问题，那么我们会怎么来处理这些问题，谷歌提供一个在线网站，可以帮你分析一部分问题，链接地址如下https://developers.google.com/speed/pagespeed/insights...
2019-08-05 02:32:51
401
原创 React生产模式下禁止React Developer Tools、Redux DevTools
(一) 前言开发者工具，能方便开发人员在开发环境调试代码，但是如果在生产环境也打开，那么，无疑会让代码细节暴露，所以，我们应该在生产环境中将，react 和 redux的开发工具禁用。(二) 禁用React Developer Tools开发工具都会在window上挂载属性，react就是__REACT_DEVTOOLS_GLOBAL_HOOK__，那么我们的解决方案，就是当process....
2019-08-05 02:03:41
3343
原创 CSS3新属性 蒙版 Mask属性, 剪切文本以及用CSS绘制表格
（一）前言工作中遇到需要实现一个视觉交互师的移动框，内容区域显示的内容，需要随这圆，边缘逐渐淡化，差不多类似如下效果我尝试过使用渐变，过滤，内阴影都没办法处理，知道后面发现了mask，才得以解决这个问题， 所以现在将基本属性整理下（二）CSS mask语法语法：-webkit-mask-image:url(circle.svg);和background的样式语法是一样的，蒙版的al...
2019-08-04 02:55:59
1563
原创 ping github 请求超时解决方案
前言蛋疼的产品需要定制编辑器，然后我肯定是太懒 去github找了个开源插件。fork改改就导入项目，然后就坑自己了。去公司安装 github地址连不上 这种时候肯定惯例 ping 下。。然后懵逼了，全是请求超时（哭笑脸）正文直接改本机host。以windows 为例子。现在在 http://github.global.ssl.fastly.net.ipaddress.com...
2019-08-04 02:31:26
38988
9
原创 H5端禁止蒙层底部页面跟随手势滚动
(一) 前言说来真是搞笑，之前很多交互都是依赖UI库的modal实现，之前也遇到过类似天猫商品列表页面那种下拉筛选，也解决过相关手势问题，但是，后面一个同事再次问起这个问题，回头去总结下，发现之前通过选取dom并为背景和内容分别处理touchmove事件，但是这仅仅是对于h5的一个解决方案，所以总结常见在pc/h5上面分别的处理方案。(二) PC处理方案打开蒙层时，给body添加样式：ov...
2019-06-25 01:15:39
2544
原创 Webpack的devtool的source maps
（一）前言我们在处理webpack打包优化时候，除开使用happypack和webpack-parallel-uglify-plugin加速babel编译构建，使用dll动态链接库，指纹缓存，页面切片，gzip压缩等优化，其实还可以设置devtool中的source maps进一步处理构建速度和生产包压缩大小。（二）devtooldevtool官方解释源映射由一大堆信息组成，可用于将压缩...
2019-05-28 02:10:33
655
原创 Vue 在sass中的主题切换方案
(一) 前言主题切换，是目前很多产品需要定制的功能，常见的比如需要给用户提供两套主题，日间和夜间模式，那么我们需要找出一种在实际项目中使用的方案(二) 切换方案已知道的主题切换方案有如下几种DWZ富客户端实现方式：将不同主题的样式抽取出来。生成多份不同的主题样式文件。动态引入。比如// theme1.css.demo { color: red;}// the...
2019-05-27 00:53:37
6605
4
原创 如何在Vue中使用slot定义组件
（一）前言在react中，可以将组件理解为上下层级，使用children在子层级作为嵌套渲染，但是vue提供方案为slot，并且相对于react，还提供插槽的扩展功能，主要分为三种，匿名插槽（类似与children），具名插槽，作用域插槽 (可以提供数据绑定)。(二) 匿名插槽类似与react的children。我们举个粟子。首先我们写个组件如下<template> &...
2019-04-16 00:51:31
5327
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人