2018 年最新的移动前端资料整理(不断更新)

VioletJack

本文整理了前端开发同学在开发手机页面的时候遇到的各种问题,希望能够对解决移动前端开发中遇到的问题提供帮助。

Android WebView 简介

在 Android 中提供了 WebView 控件用来展示网页内容。对于 WebView 需要注意:Android 的 WebView 的主要问题在于不同 Android 版本的 WebView 使用了不同的浏览器内核和浏览器版本,所以需要进行 Android 版本适配。

在 Android 4.4 以下(不包含 4.4)系统 WebView 底层实现是采用 WebKit(http://www.webkit.org/) 内核,而在 Android 4.4 及其以上 Google 采用了 chromium(http://www.chromium.org/) 作为系统WebView的底层内核支持。

相关文章:

IOS 的 UIWebView 和 WKWebView 简介

使用 IOS 的 WebView 需要注意:当前页面展示在 IOS 系统中时,存在两种 WebView 环境:UIWebViewWKWebView。两者是有一定差别的:

UIWebView 自 IOS2 就有,WKWebView 从 IOS8 才有,毫无疑问WKWebView 将逐步取代笨重的 UIWebView。

相关文章:

引用两个 WebView 在性能上的差异描述:

WKWebView相较于UIWebView在整体上有较大的提升,满足OS上面使用同一套控件的功能,同时对整个内存的开销以及滚动刷新率和JS交互做了优化的处理。依据职责单一的原则,拆分成了三个协议去实现WebView的响应,解耦了JS交互和加载进度的响应处理。WKWebView没有做缓存处理,所以对网页需要缓存的加载性能要求没那么高的还是可以考虑UIWebView.

资料整理

下面是网上一些关于移动前端开发的文章,我们按照类别进行分类整理,并写上文章的发布时间(老文章可能不适用当前状况)。以便遇到相应问题时更好的去查阅,定位和解决问题。

使用指南

  1. 如果遇到了移动前端的问题,先按类别找到相应文章列表,从中找解决方案。
  2. 如若没有则在整理 总结列表 中去找,很多小问题点都可以在里面找到
  3. 如果还是无法解决可以通过评论与我沟通,一起努力找出解决方案。

第三方接口

屏幕适配

缓存&存储

touch 事件

flex布局

position定位

优化加速

调试& 测试

z-index层叠

动画&样式

整理总结

相关工具库项目及用法

移动前端系列内容

  • Mars —— 腾讯团队整理的一些移动前端问题
  • 移动Web开发 —— 有人整理的一系列移动前端开发知识,有不少有价值的内容。
  • w3cplus-mobile —— 大漠老师整理的内容质量是比较高的。
  • 前端开发博客-移动前端开发 —— 这是我找了两天找到的最好的移动前端开发内容整理了。

整理心得

复制粘贴了这么多文章,简单整理了一下移动前端开发中存在的各类问题。

  • Android 分为 webkit 和 chrome 两个时代。
  • IOS WebView 有 UIWebView 和 WKWebView 两种。
  • 移动开发中经常遇到要与微信、百度等第三方接口接入的情况。
  • 移动端的屏幕尺寸类型非常繁杂,所以需要进行适配优化。
  • 屏幕适配现在有两种主流方案:flexible 流和 vm 流。

    • flexible 流使用 rem 和 meta 来对尺寸进行等比缩放。
    • vm 流使用 vm 和 vh 单位获取来定义元素尺寸,具体可以参考vh,vw单位你知道多少?
  • 在适配时特别注意 iPhoneX 的刘海屏,有解决方案可以特殊处理刘海屏。
  • 在使用屏幕适配后,特别要注意实现 1px 像素的显示。
  • retina 屏有时会出现元素显示模糊的情况。
  • 移动端特有 touch 事件来处理屏幕的触摸行为。
  • flex 布局在 Android 4.3 及其之前的机型有兼容问题,需要做兼容处理。
  • 在 IOS 中用 position:fixed 定位顶部和底部元素,在弹出软键盘的时候会出现 fixed 元素位置偏移和消失的问题。偏移问题建议改为 absolute 来实现,而消失问题建议使用滑动完成后使用 JS 代码实现屏幕点击来调出元素显示。
  • IOS 的 WebView 有底部弹性功能,对于 fixed 和 absolute 定位有一些奇怪问题,建议使用 touchmove 事件监听拦截弹性功能。
  • 页面滑动卡顿可以通过 setTimeout(event, 0) 来解决。
  • 移动端的调试是比较麻烦的,解决方案是使用 Charles 代理查看 log。
  • 移动端需要前端实现一些动画活动页面最好使用 CSS 的动画去实现性能更佳。
  • 其他细节点请查阅 整理总结 前三篇文章。

最后

本文致力于实现快速定位和解决移动前端问题,将会不断更新。

如果有任何问题或者好的移动前端开发资料,请再评论区留言一起讨论。让我们一起努力填平移动前端中的坑。

阅读 3.9k

专注于Vue前端开发的学习和分享

925 声望
156 粉丝
0 条评论

专注于Vue前端开发的学习和分享

925 声望
156 粉丝
文章目录
宣传栏