移动互联网终端

最好的阅读是输出。 –玉伯 即将开始涉入移动Web了，有点小兴奋也有点小紧张，希望能在未来的团队里带来一些价值。记录一下我现在所认识的移动Web。 原文摘自我的前端博客，欢迎大家来访问 原文地址： http://www.hacke2.cn/hello-mobile-aop/ 一些基本名词 初涉移动Web，会有一些基本的名称需要掌握，什么设备像素比呀，移动端Web的内核呀，viewport呀，屏幕的的最小物理单位呀。我已经记录了一些，以后还得继续补充。 - 常见移动Web名词 关于布局 我们来看看移动端最常见的布局： 上中下三部分布局 下面实现上述页面常见移动Web布局三种方法： fixed absolute flexbox fixed 对于第一种布局，其实现原理就是header和footer部分都为fixed定位。内容页面可以使用 -webkit-overflow-scrolling:touch 来进行滚动，当然，对于不支持的，也可以使用 iscroll 来兼容。 fixed布局网上人说坑太多，滚动的时候bug太多，特别是表单元素时弹出输入法会有很多问题，所以不建议使用，以下是一些网上参考的资料： - 移动Web开发实践——解决position:fixed自适应BUG - 移动端web页面使用position:fixed问题总结 - 移动Web开发

本人也是一个刚刚接触前端的小虾米，对于移动端这一块更是一抹眼的黑，前端时间接手开始一个移动端的项目，在网上查询了一下rem的作用，百度搜索下来全是介绍rem的作用原理的（rem是根据根元素计算的），然后基本上给我的就是 html{font-size：62.5%} body{font-size：1.2rem} 　　移动端不同屏幕显示的字体大小是有区别的，所以现在我都是配着以下js使用匹配不同的移动端设备屏幕。 function page() { //通过navigator判断是否是移动设备 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { //在移动端 (function (doc, win) { // html var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {

所谓响应式布局，就是页面会根据当前运行的设备的大小自行进行调整，实现方案主要有以下三种： 1）隐藏 例如在 PC 端的一些友情链接或者不重要的内容在移动端可以选择隐藏起来。 2）换行 在 PC 端显示一行的内容，由于移动端设备宽度比较小，所以可以选择显示为几行。 3）自适应空间 例如，左边元素给定一个具体的值，右边元素的宽度令其根据不同的设备宽度自行调整。 具体的实现方法主要有以下几种： 1）rem rem 是一个相对单位，一般 1rem = html设置的 font-size 的值。 关于 rem 的详细介绍可以参考 移动 web 开发适配秘籍 Rem 这个免费课程。 通过设置不同设备 html 的 font-size 改变 rem 的值，令 1rem 单位的值随着设备的增大而增大。 2）viewport 设置 <meta name="viewport" content="width=device-width, initial-scale=1.0" > ，关于这个下面会介绍。 3）media query 判断当前是什么设备，然后根据不同的设备设置不同的样式。 接下来先说一下 viewport 这个 meta 标签。 <meta name="viewport" content="width=device-width, initial-scale=1.0" >

js判断移动端与pc端 这里介绍下使用device.js插件来判断移动端设备 地址： https://github.com/matthewhudson/device.js 示例： 1 2 3 4 5 6 7 if (device.mobile()){ window.location.href = "移动端地址" ; //alert("移动端"); } else { window.location.href = "PC端地址" ; //alert("PC端"); } 　　 更多设备判断如下表格： Device JavaScript Method Mobile device.mobile() Tablet device.tablet() Desktop device.desktop() iOS device.ios() iPad device.ipad() iPhone device.iphone() iPod device.ipod() Android device.android() Android Phone device.androidPhone() Android Tablet device.androidTablet() BlackBerry device.blackberry() BlackBerry Phone device.blackberryPhone()

相对于桌面端浏览器，移动端Web浏览器上有一些较为明显的特点：设备屏幕较小、新特性兼容性较好、支持一些较新的HTML5和CSS3特性、需要与Native应用交互等。但移动端浏览器可用的CPU计算资源和网络资源极为有限，因此要做好移动端Web上的优化往往需要做更多的事情。首先，在移动端Web的前端页面渲染中，桌面浏览器端上的优化规则同样适用，此外针对移动端也要做一些极致的优化来达到更好的效果。需要注意的是，并不是移动端的优化原则在桌面浏览器端就不适用，而是由于兼容性和差异性的原因，一些优化原则在移动端更具代表性。 一、网络加载类 1．首屏数据请求提前，避免JavaScript文件加载后才请求数据 为了进一步提升页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在JavaScript加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果能将数据请求提前，可以极大程度上缩短页面内容的渲染完成时间。 2．首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化 由于移动端网络速度相对较慢，网络资源有限，因此为了尽快完成页面内容的加载，需要保证首屏加载资源最小化，非首屏内容使用滚动的方式异步加载。一般推荐移动端页面首屏数据展示延时最长不超过3秒。目前中国联通3G的网络速度为338KB/s（2.71Mb/s）

PC 浏览器前端优化策略 PC 端优化的策略很多，如 YSlow（YSlow 是 Yahoo 发布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则，或者 Chrome 自带的 Audits 等，总结起来主要包括网络加载类、页面渲染类、CSS 优化类、JavaScript 执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。 网络加载类 1．减少 HTTP 资源请求次数 在前端页面中，通常建议尽可能合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗，这样可以缩短页面首次访问的用户等待时间。通过构建工具合并雪碧图、CSS、JavaScript 文件等都是为了减少 HTTP 资源请求次数。另外也要尽量避免重复的资源，防止增加多余请求。 2．减小 HTTP 请求大小 除了减少 HTTP 资源请求次数，也要尽量减小每个 HTTP 请求的大小。如减少没必要的图片、JavaScript、CSS 及 HTML 代码，对文件进行压缩优化，或者使用 gzip 压缩传输内容等都可以用来减小文件大小，缩短网络传输等待时延。前面我们使用构建工具来压缩静态图片资源以及移除代码中的注释并压缩，目的都是为了减小 HTTP 请求的大小。 3．将 CSS 或 JavaScript 放到外部文件中，避免使用

多页应用模式(MPA) 　　页面A：http://xxx/pageA.html 　　页面B：http://xxx/pageB.html 　　页面A 跳转到页面B 整页刷新 　　 单页面应用模式（SPA） 　　页面page:http://xxx/page.html,页面内局部#page1与#page2之间跳转局部刷新 　　 多页应用与单页应用的对比 多页应用MPA 单页应用SPA 应用组成 由多个完整页面构成 一个外壳页面和多个页面片段构成 跳转方式 从一个页面到另外一个页面跳转 页面片段之间的跳转是把一个页面片段元素删除或者隐藏，加载另一个页面片段并且显示出来。这是片段之间的模拟跳转，并没有离开本身的外壳页面 刷新方式 整页刷新 页面片段局部刷新 跳转后公共资源是否重新加载 是 否 url模式 http://xxx/pageA.html http://xxx/pageB.html http://xxx/page.html#page1 http://xxx/page.html#page2 用户体验 页面间切换加载慢，移动端，用户体验差 页面片段间切换快，移动端，用户体验想对可以 能否实现转场动画 无法实现 容易实现 页面间传递数据 依赖url / cookie / localStorage； 麻烦 同一个外壳页面内，简单 搜索引擎优化SEO 可以直接做 需要借助一些框架等，麻烦

黑马程序员：从零基础到精通的前端学习路线 随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！ 那么前端开发到底需要学什么？应该怎么学？接下来黑马程序员前端学院教你如何从零基础学习前端。 一、前端开发入门 在入门阶段，你首先要学会最基本的技能：根据UI的设计稿，实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技能。 在这个阶段你需要学习： 1、HTML+CSS基础 掌握HTML的标签使用、排版技巧、CSS的布局定位、样式美化、浏览器兼容性。 2、JavaScript基础 掌握JS的基本语法、条件、语句、循环等，学会常用算法，增强逻辑性。 3、常用的前端工具 比如Webstrom、Sublime、Dreamweaver等。掌握其快捷键设置等技巧，可快速提高开发调试效率。 这个阶段的学习难度相对不高，学完这些之后，我们已经能完成静态页面的制作。当然，这只是入门，如果你想用这些技能找工作的话还是比较困难的。 二、前端开发初级 在接下来的这一个阶段

背景介绍 首先介绍下在本文出现的几个比较重要的概念： 函数计算（Function Compute）: 函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸缩的方式运行用户代码，而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息 参考。 Fun: Fun 是一个用于支持 Serverless 应用部署的工具，能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件（template.yml），协助您进行开发、构建、部署操作。Fun 的更多文档 参考。 litemall 是一个基于 Spring Boot、Vue、微信小程序等技术开发的商场系统。它包括 Spring Boot 后端 + Vue 管理员前端 + 微信小程序用户前端 + Vue 商城移动端。 更多参考。 本文演示如何将该商城应用的 Spring Boot 后端、Vue 管理员前端、Vue 商城移动端三个组件迁移到函数计算。 下面是一个已经将到函数计算应用示例效果演示。 效果演示 管理后台效果演示 打开 http://litemall.mofangdegisn.cn 显示登陆页面： 使用默认的账户即可登陆。完成后，会进入到后台管理页面： 可以在后台管理页面添加商品类目、上架商品、用户管理、系统管理等等。

谈谈移动端屏幕适配的几种方法 移动端web开发相对于PC端web开发，我们可以庆幸不用兼容那么多浏览器了，但是随之而来的却是各种屏幕尺寸的适配，个人觉得，比PC端还要费精力。在使用了腾讯优测进行软件测试后，问题得到了有效解决。 响应式布局 简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。 如上图，其实就相当于页面被压矮了。 Cover 布局 就跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。 如上图，第一张是原设计稿，第二张把左右隐藏掉了一部分，第三张则是把上下隐藏掉了一部分。 Contain 布局 同样，也跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。个人比较推荐用这种方式，但在设计上需要背景为单色，或者是可平铺的背景。 如上图，红框部分为原始宽高比，根据不同屏幕尺寸进行缩放，并加背景填充。 好了，接下来再说说常用的实现方法吧。 样式缩放 最省事的适配方法，直接用px为单位按视觉进行开发，然后通过计算屏幕与网页的宽高比，用transform:scale来对网页进行全局缩放。 不过此方法会有一个小问题