移动互联网终端

一、需求问题 在移动端开发中，我们有的时候需要判断当前的环境，是苹果 ios 环境、还是安卓 android 环境，还是微信浏览器环境。 二、需求分析 判断当前环境是 ios 、 android 还是微信，我们可以从两个值进行判断。第一个参数值是 userAgent ， window.navigator.userAgent ，用户代理，使得服务器能够识别客户使用的操作系统及版本、 CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等等。第二个参数值是 appVersion ， window.navigator.appVersion ，可以返回浏览器的平台和版本信息。通过这两个参数值，我们就可以判断出当前的环境。 三、需求实现 1. 移动端简单判断代码实现： let ua = window . navigator . userAgent , app = window . navigator . appVersion ; alert ( '浏览器版本: ' + app + '\n' + '用户代理: ' + ua ) ; if ( ! ! ua . match ( /\(i[^;]+;( U;)? CPU.+Mac OS X/ ) ) { // ios端 console . log ( 'ios端' ) ; } else if ( ua . indexOf (

队名: 拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长：宋奕 过去两天完成了哪些任务 主要完成了个人中心模块的接口设计 完善后端的信息处理 GitHub签入记录 接下来的计划 完成个人主页模块 还剩下哪些任务 完成个人主页接口设计 燃尽图组内共享 遇到了哪些困难 如何更好地存储数据？ 有哪些收获和疑问 查阅了相关存储的资料，学习编写接口文档。 如何友好交互前后端？ 组员1：杨晋南 过去两天完成了哪些任务 完成了移动端Android用户个人中心模块基本UI界面 进一步完成了移动端Android部分界面间逻辑代码 完成用户个人中心模块接口的对接 接下来的计划 完成个人主页模块UI的实现 完成个人主页模块接口对接 还剩下哪些任务 完成个人主页的接口对接与逻辑代码、UI界面完善 燃尽图组内共享 遇到了哪些困难 个人中心点击切换多页面的实现 有哪些收获和疑问 学习了Android个人中心界面实现的基本知识，学习有关接口对接的教程 组长什么时候女装打代码？ 组员2：刘晓翔 过去两天完成了哪些任务 完成了移动端iOS用户个人中心模块基本UI界面 继续完成移动端iOS部分界面间逻辑代码 完成用户个人中心模块接口的对接 完善联系模块 接下来的计划 完成个人主页模块UI的实现 完成个人主页的接口对接与逻辑代码、UI界面完善 还剩下哪些任务 个人主页设计与逻辑代码

移动web已经是大势所趋，所占份额迅猛增加。如果没有足够时间和精力做一套完全全新的移动端程序，那么，响应式设计也许是个不错的选择。不过，如果有条件并且需要移动端网页，移动端的很多优势还是不可替代的，比如定位功能。 响应式设计，使得可以使用同一网站在智能手机、电脑及其他设备上完美显示。它可以根据用户的屏幕尺寸，合理的为现在的和将来的设备提供好的浏览体验。 viewport viewport指的是浏览器窗口内的内容区域，即网页实际显示的区域，而屏幕尺寸是指设备的物理显示区域。可以阻止浏览器自动调整页面大小： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 不过一般不会阻止用户手动缩放页面大小。 media-query media query可以为特定的输出设备定制显示效果。已经得到了很多浏览器的大力支持。在不支持的浏览器IE6-8中，也可使用respond.js这个polyfill. 一些例子： <link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

适用PC端 1、 elementUI 支持vue2.x， 饿了么前端团队打造 2、 iView 支持vue2.x 3、 Vue Antd 支持vue1.x，据说不再有人维护 4、 N3 支持vue2.x 5、 AliTelecom UI 支持vue2.x，阿里通信技术团队打造 6、 Vue-Blu 基于Vuejs和Bulma开发 7、 Vue-Beauty 基于 vue.js 和 ant-design样式的PC端UI组件库 8、 Vuetify 一个material design vue 组件库 9、 vue-material 同 Material 风格的组件库 10、 Keen-UI 又一个 Material 风格的组件库 11、 Vue Admin 基于Vue 2.0 和 Bulma 0.2 开发的后台界面框架 适用移动端 1、 Muse-UI 基于Material Design开发，支持vue2.0 2、 Mint UI 支持vue2.0，饿了么前端团队打造 3、 VUX 基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面 4、 VUWE 基于微信WeUI所开发的，专用于Vue2的组件库 5、 WEEX 阿里推出的跨平台的移动端开发框架,可以构建高性能、可扩展的 native 应用 6、 VueStrap 基于 Vue.js 的 Bootstrap 组件

开源项目下载地址 vue-element-admin https://github.com/PanJiaChen/vue-element-admin 1.pc端的项目，最好的选择是ElementUI。（pc端） 　　一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。Element是饿了么前端开源维护的Vue UI组件库，更新频率还是很高的，基本一周到半个月都会发布一个新版本。组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。没有实际使用过，网上的Element教程和文章比较多。Element应该是一个质量比较高的Vue UI组件库。目前 star值36K; 　　 官网地址： http://element-cn.eleme.io/#/zh-CN 　　github地址：https://github.com/ElemeFE/element 2.iview组件库(pc端) 　　iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好，还有开源了一个iView Admin，做后台非常方便。官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东

微信公众号开发，主要是移动端网页的页面开发，在这里推荐3个移动端UI框架：WeUI、SUI和Mint UI。 1. WeUI 1.1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计，可以令用户在HTML5应用中的使用感知更加统一。 组件包含button、cell、dialog、 progress, toast、article、icon等等。 资源 官方Demo ： https://weui.io/ Github ： https://Github.com/weui/weui (★13402) js支撑 ： weui.js 缺点 ：缺少高级组件；截至目前，WeUI还未提供swiper、上拉加载、下拉刷新组件。 示例 1.2 weui.js 为WeUI的的轻量级 js 封装。提供了Alert、Confirm、Toast、Loading、ActionSheet等等交互功能。 资源 官网Demo ： https://weui.io/weui.js/ Github ： https://Github.com/weui/weui.js/ 示例 2. SUI SUI Mobile 是阿里巴巴共享业务事业部SDC团队（UED）提供的一套手机UI库。 是一套基于 Framework7 非常适合开发跨平台Web App的UI库。 组件包含下拉刷新、上拉加载、日历、省市选择器、幻灯片

移动端 HTML5 audio autoplay 失效问题 由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。 解决方法： 先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。 document.addEventListener('touchstart', function () { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); }); Fixed错误 浮动（固定）的元素，在浏览器窗口大小改变（输入键盘弹出关闭），交互时，定位属性会变得异常。位置错位或者消失等等。 影响： 所有移动浏览器。 解决方法： 1. 复杂交互页面尽量避免fixed元素。 2. 在input元素页面，禁止使用fixed元素。 Video全屏Zindex失效 zindex无效，视频video始终在最上方。 影响： 很多国内浏览器不兼容 解放方法： 设计时避免视频元素与其他元素可能会出现的重叠问题。 IOS里点击select标签,浏览器会退出 当<select>里没有<option

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 说到数据分析工具，则不得不提办公三大套件之一Excel，功能强大、入门简单、人手必备，我作为Excel粉，曾急切想要掌握这款高级的工具以提高自己的业务能力，于是便开始在网上铺天盖地的教程中摸爬打滚。 深入学习后，发现操作理解难度加深，经常是做了后一步操作忘记前一步，磕磕跘跘，经历一番挣扎，最后终于还是学会了一些复杂功能，然而因平时工作很少涉及过于复杂的分析场景，随着时间的流逝，之前掌握的技能又逐渐淡忘了，需要用时发现还得跟着教程一步步做。 更难的是，Excel教程杂乱无序，没有针对数据分析的专门教程，比如我想实现的分析场景包含一系列操作，excel教程以单个操作来讲解，对单个操作理解不正确就容易走偏，甚至循环往复，做了很多重复多余的步骤。 现在想想，之前大部分课程花了钱都在学函数、公式、快捷键上，得不偿失，又不甘心放弃学习，于是在网上搜罗了一番，”数据分析入门“、”免费数据分析软件“、“BI”等等，最终发现了一款个人版免费的大数据软件 FineBI ，抱着试试的态度下载试用。 比较满意的是，在学习资源上，FineBI上有完善的教学视频讲解和针对分析场景的细致帮助文档指导，根据帮助文档还可以学习到数据分析的方法，这应该就是专业的大数据分析软件，Excel打遍天下无敌手后，还有BI市场的根本原因。

jQuery在移动端 移动端dom操作库首推zepto，他实现了jQuery的大多数接口，被移动端成功扶正；弃用jQuery的主要原因是尺寸上的考虑 而jQuery经过几次发展，终于宣布不再理睬IE8，但是最新的版本尺寸依旧超过80K，而我移动端核心框架加起来还没一个DOM库大，很难不放弃他 究其原因，积重难返，要兼容老接口，又要照顾老用户，一些代码确实删不掉。 angularJS的更新 而与jQuery对应的是angularJS，框架的版本号改变却变成了框架的改变，2.X与1.X完全是两个东西，从模板到业务代码改变很大，不向下兼容，对此，我只能说：干得漂亮！同时也惹来骂声一片，程序员学习需要成本，一次学完了还得再学一次，而之前的业务代码要升级还得修改，这个确实很疼。 angularJS没有兼容老的写法，倒不是他不愿意兼容，是因为底层的机制发生变化，或者一些颠覆性的吸引，所以就改了，这个带来的好处可能是：框架性能提升50%，也可能是模板同时被服务器端解析，一套代码解决SEO问题。或者其它神马。权衡利弊，所以他就干了，不破不立，先破后立。 这里也引出了一个不可避免的问题：前端框架应该如何升级，如何迭代；全站样式应该怎样更新？ 框架升级与样式升级对于一个大型站点来说都是一件令人头疼的事情，这两个问题刚好最近刚好就把我坑了进去 前端框架的升级 我们框架由1.X发展到了2.X，2

随着时间的推移，网页设计越来越具有创新性。web前端开发将成为2020年技术领域最热门的学科之一。以前，前端空间的开发人员只要了解一些HTML，CSS，也许还有jQuery来创建交互式网站，就足够了。但是今天，他们面临着广泛且不断变化的开发技能生态系统；最近几年，我们使用JavaScript为主要的Web应用程序提供了强大的新库和框架，例如ReactJS，VueJS和angularJS。这3个可以说是现在非常火热的了。 比PC端单一的网页不同，在移动端的技术可以应用到WEB-APP,小程序，Hybrid-App等等。web前端开发的新技术新框架学习可以应用到什么地方 Web-App 　　也就是我们常见的浏览器（以及内置浏览器，比如微信）打开的大型移动端网页。比如我们常见的电商网站，功能性网站，管理网站，在布局和功能上都有APP的效果。做好Web-App开发，最基本的很多人肯定会说响应式布局，但是前端开发是又5种布局法的，除了出名的响应式，还有在移动端最重要的弹性布局法，也就是很多人头疼的rem布局。除了布局方法之外，在H5新特性和触屏事件和设备兼容性问题也是需要信手拈来。 小程序 　　这个也不用多说，现在可以说是非常火的，各大平台都有在做自己的小程序，各种砍价，抢票，电商，游戏都有运用。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是ES语法