- 📫 个人邮箱: [email protected]
- 💬 个人微信: yezihaohao2020
- 📮 长期招人: [email protected]
在学习中成长,在成长中沉淀,在沉淀中做事
学习总结,思考感悟 博客(翻译:我就BB,不行吗🤣)
在学习中成长,在成长中沉淀,在沉淀中做事
少侠,请留步,相见必是缘分,赠与你一部《踏坑秘籍》
ios竖屏拍照上传,图片被旋转问题
解决方案
// 几个步骤
// 1.通过第三方插件exif-js获取到图片的方向
// 2.new一个FileReader对象,加载读取上传的图片
// 3.在fileReader的onload函数中,得到的图片文件用一个Image对象接收
// 4.在image的onload函数中,利用步骤1中获取到的方向orientation,通过canvas旋转校正,重新绘制一张新图
// 注意iPhone有3个拍照方向需要处理,横屏拍摄,home键在左侧,竖屏拍摄,home建上下
// 5.将绘制的新图转成Blob对象,添加到FormData对象中,然后进行校正后的上传操作
// 代码有点杂,待整理后上传,网上应该是可以找到的
ios:DOM元素固定一边,另一边滚动,滚动很卡的问题
// (横向滚动用的多些)简单粗暴的办法,样式添加如下属性
-webkit-overflow-scrolling: touch;
部分手机第三方输入法会将页面网上挤的问题
// 特定需求页面,比如评论页面,输入框在顶部之类的
const interval = setInterval(function() {
document.body.scrollTop = 0;
}, 100)
// 注意关闭页面或者销毁组件的时候记得清空定时器
clearInterval(interval);
iPhoneX适配
// 1.viewport meta 标签增加属性viewport-fit=cover
<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
// 2.body元素增加样式
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
// 3.如有fixed底部的元素,也增加上面样式
xxx {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: #fff; // 记得添加background-color,不然会出现透明镂空的情况
}
某些机型不支持video标签的poster属性,特别是安卓
用图片元素 <img />来代替poster
播放前显示<img />,隐藏 <video />
播放后显示<video />,隐藏 <img />
CSS透明度颜色设置问题
Android部分不支持 hex写法,推荐用rgba的写法
#0000009c --> rgba(0, 0, 0, 0.61)
flex对低版本的ios和Android的支持问题
使用postcss的autoprefixer插件,自动添加浏览器内核前缀,
并且增加更低浏览器版本的配置,自动添加flex老版本的属性和写法
autoprefixer({
browsers: [
'iOS >= 6', // 特殊处理支持低版本IOS
'Safari >= 6', // 特殊处理支持低版本Safari
],
}),
方案1:对列表数据进行缓存,比如redux之类的用法。
方案2:回退时,跳到页面顶部。
const timer = setTimeout(() => {
window.scrollTo(0, 1);
window.scrollTo(0, 0);
}, 0);
ios 日期转换NAN的问题
将日期字符串的格式符号替换成'/'。
栗子:'yyyy-MM-dd'.replace(/-/g, '/')
未知错误异常,导致页面崩溃,空白
React 16.x 增加了componentDidCatch() 生命周期方法
捕获全局异常来进行页面的友好提示(具体用法网上有很多资料)
晋级还需要多多修炼
这个要怎么样去注册呢
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.