移动互联网终端

在IT行业，可以说Linux系统已经渗入到各个角落，无论是从事什么语言的编程人员，对Linux应该都要有所了解。下面，千锋就为大家分享最新视频教程，帮助新手快速入门。 这套视频教程，介绍了Linux系统的详细操作、Vim编辑器、创建用户、删除用户、创建文件以及基本权限和高级权限的掌握，Lvm逻辑卷的创建和扩容。让你学完后可以熟练的掌握linux系统的操作和搭建出一些基本的网站，如wordpress博客、论坛等。 第1章 走进Linux世界 01 走进linux世界 02 虚拟机安装 03 finalshell使用和基础命令学习 第2章 Linux文件和用户 04 文件管理一 05 文件管理二 06 文件管理三 07 文件管理四 08 用户和组管理一 09 用户和组管理二 第3章 Centos用户权限管理一 10 文件权限基础一 11 文件权限基础二 12 文件权限基础三 第4章 Centos用户权限管理二 13 文件权限二.1 14 文件权限二.2 15 文件权限二.3 第5章 进程和管道 16 进程管理一 17 进程管理二 18 进程管理三 第6章 管道及重定向 19 管道及重定向1 20 管道及重定向2 21 管道及重定向3 第7章 存储管理Ⅰ 22 存储管理Ⅰ-1 23 存储管理Ⅰ-2 24 存储管理Ⅰ-3 第8章 存储管理Ⅱ 25 存储管理Ⅱ_1 26 存储管理Ⅱ_2 27

现在很多时候，我们是在用手机、pad等一些移动端设备来进行办公获取数据。所以我们的图表很多时候是需要用移动端设置来查看的，而我们的图表有时候因为数据的偏多，会出现遮挡和重叠的情况。这个时候就需要对移动端的图标显示做一些优化，ECharts对于移动端的优化和支持主要有2个方面。 一、ECharts组件的定位和布局 组件的定位官方描写的比较详细也比较全，我的简单理解为，ECharts.js对于图表里面每个组件和工具都采用了两种尺寸单位和设置固定位置。 一种是比较直接的 像素（px） ，设置的时间直接以 number 形式填写。比如 title:{ text:'ECharts 数据统计', top:20 } 这里就是设置标题组件的距离上面的高度是20px。 还有一种是安装 百分比（%） 的形式来设置的，百分比值是 string 类型，需要加上引号。比如 legend:{ data:['访问量','用户量'], left:'50%' } 这里标识legend组件的位置距离左侧的距离是整个图表的50%宽度 另外可以通过固定的值来设置所在位置，比如： 可以设置 left: 'center' ，表示水平居中。 可以设置 top: 'middle' ，表示垂直居中。 另外针对不同类型的图标还有不同的定位方式。 布局这块可以简单归结为两种，一种是 横向（horizontal） 显示，一种是 纵向

软件工程的趋势：目前大部分企业的软件研发模式是持续交付，而自动化是持续交付的根基，而且不仅仅是测试要自动化，所有的环节都在自动化， 自动化是未来的方向这一点已成为行业共识 。 之前咱们已经讲过了 AppCrawler自动遍历技术 ，本次TesterHome社区为带来移动App自动化的Appium实战公开课，带大家了解如何借助Appium做移动端App的UI自动化测试，以及Appium的一些拓展和延伸。配合之前的 AppCrawler自动遍历工具 ，可以让大家的测试效率大幅提升。 讲师信息 黄延胜：TesterHome联合创始人，AppCrawler自动遍历开源项目的作者。十年互联网行业测试从业经验, 先后工作于阿里巴巴 百度，前Testin云测产品总监，前雪球财经测试技术专家。 本次直播分享信息 直播时间： 2018年8月18日 周六晚 20:30 - 22:30 直播地点： IT大咖说在线直播平台 直播报名： 扫一扫下方二维码即可 本次大纲 关于社区 TesterHome社区：是TesterHome社区的简称（亦常被读成“testhome”），是国内软件测试行业较为专业的学习交流社区，也是最专业的Appium中文交流社区。社区汇集了三万多名测试工程师，不定期举办地方沙龙，已举办了四届中国移动互联网测试开发技术大会。 #关于学院 霍格沃兹测试学院是TesterHome社区孵化的

真的了解FastClick吗？: https://www.cnblogs.com/ylweb/p/10549040.html 你真的了解FastClick吗？ 前段时间在做公司官网手机端菜单部分的时候，遇到一些很诡异的点击问题。比如菜单点击无效/双击才有效、在手指滑动的时候会触发点击事件、以及同样的事件处理在微信跟浏览器会有不一样的表现等等，这些问题我一直试图用一些移动端事件的hack来解决，到最后还是有两个问题没有解决掉。后来意识到可能是引入的插件导致的事件冲突引起，因为一直都在全局引入了fastclick，以及最初偷懒引入的一个菜单功能插件（插件中有引入iScroll）。经过排查最后得出结论是fastclick与插件 冲突所致，只能去除插件重写菜单功能。而这个小插曲也让我有兴趣阅读一下它的源码来深究一下fastclick到底做了什么？ FastClick的使用场景及背景： 移动端的开发经常需要监听用户的双击行为，事件的发生顺序是这样的：touchstart---touchmove---touchend,然后大约过300ms触发click事件，用来判断是否有双击事件。 在混合使用touch与click时，会导致点击穿透！（此处不展开讨论） FastClick的思路就是 利用touch来模拟tap（触碰），如果认为是一次有效的tap，则在touchend时立即模拟一个click事件

fastclick的介绍和使用: https://www.jianshu.com/p/67bae6dfca90 移动端点击延迟事件 1. 移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟 2. 原因: 移动端的双击会缩放导致click判断延迟 解决方式 1. 禁用缩放 `<meta name = "viewport" content="user-scalable=no" > ` 缺点: 网页无法缩放 2. 更改默认视口宽度 `<meta name="viewport" content="width=device-width">` 缺点: 需要浏览器的支持 3. css touch-action touch-action的默为 auto，将其置为 none 即可移除目标元素的 300 毫秒延迟 缺点: 新属性，可能存在浏览器兼容问题 4. tap事件 zepto的tap事件, 利用touchstart和touchend来模拟click事件 缺点: 点击穿透 5. fastclick 原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉 缺点: 脚本相对较大 使用: ```JS // 引入 <script type='application/javascript' src=

上传我们一般都是用“ input[type=file] ”控件。当你用此控件时，你就授权了网页和服务器访问对应的文件，就可以得到 File 对象。 友情提示在，在Android手机webview中，是不支持上传文件的，网上说是修改Android端的代码，但我没试过，我们这边是使用客户端提供的接口来实现上传的。 下面的示例代码可以在 这里 查看到。 一、accept属性 该属性表明了服务器端可接受的文件类型，可以限制你手机选择相关的文件，如果限制多个，可以用逗号分割，下面的代码就表示只能选择图片与音频相关的文件： <input accept="image/*,audio/*" type="file"/> 在移动端，点击后会让你选择拍照或相册，还是蛮高大上的。下图是UC浏览器中： 二、change事件 一般选择文件都会使用“change”事件，下面的代码就是绑定了change事件，弹出文件大小： var upload = document.getElementById('upload'); upload.addEventListener('change', function() { var file = upload.files[0]; alert(file.size); }, false); 1） 有些手机浏览器在点击的时候，会弹出键盘选择，我用onfocus="this.blur(

近年来前端开发趋势 1.旧浏览器 逐渐淘汰，移动端需求增加: 旧浏览器主要指的是IE6-IE8，它是不支持ES5特性的；IE9+、chrome、sarafi、firefox对ES5是完全支持的，移动端大部分浏览器是基于webkit内核，所以ES5在移动端也是全面支持的，因此vue可以在移动端以及现代浏览器中大显身手。 2.前端交互越来越多，功能越来越复杂 : 现在的前端可谓是包罗万象，比如高大上的技术库和框架、酷炫的运营活动页面、H5小游戏，当然前端技术的应用在更多具有商业价值的应用上，比如下图。 3.架构从传统后台MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 迁移 在传统的MVC下，当前前端和后端发生数据交互后会刷新整个页面，从而导致比较差的用户体验。因此我们通过Ajax的方式和后端REST API作通讯，异步的刷新页面的某个区块，来优化和提升体验，同时把MVC拿到前端来做 MVVM框架 1.MVVM框架基本概念 :它主要包括各部分View、ViewModel、Model,如下图。在MVVM架构下，视图和数据是不能直接通讯的，它会通过ViewModel这个中间件来通讯。ViewModel起的是一个观察者的职位:当数据变化，ViewModel观察到变化，并通知视图做相应的更新；而用户操作视图，ViewModel也能监听到变化，然后通知数据做改动

近年来前端开发趋势 1.旧浏览器 逐渐淘汰，移动端需求增加: 旧浏览器主要指的是IE6-IE8，它是不支持ES5特性的；IE9+、chrome、sarafi、firefox对ES5是完全支持的，移动端大部分浏览器是基于webkit内核，所以ES5在移动端也是全面支持的，因此vue可以在移动端以及现代浏览器中大显身手。 2.前端交互越来越多，功能越来越复杂 : 现在的前端可谓是包罗万象，比如高大上的技术库和框架、酷炫的运营活动页面、H5小游戏，当然前端技术的应用在更多具有商业价值的应用上，比如下图。 3.架构从传统后台MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 迁移 在传统的MVC下，当前前端和后端发生数据交互后会刷新整个页面，从而导致比较差的用户体验。因此我们通过Ajax的方式和后端REST API作通讯，异步的刷新页面的某个区块，来优化和提升体验，同时把MVC拿到前端来做 回到顶部(go to top) MVVM框架 1.MVVM框架基本概念 :它主要包括各部分View、ViewModel、Model,如下图。在MVVM架构下，视图和数据是不能直接通讯的，它会通过ViewModel这个中间件来通讯。ViewModel起的是一个观察者的职位:当数据变化，ViewModel观察到变化，并通知视图做相应的更新；而用户操作视图，ViewModel也能监听到变化

最近写的一个移动端项目：上海 地铁指路通，之间遇到的一些问题，记录下来（以后会不断补充的）： 1. 丰富的页面Meta： 1.1： 控制显示区域各种属性： <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 1.2：IOS中Safari允许全屏浏览： <meta content="yes" name="apple-mobile-web-app-capable"> 1.3：IOS中Safari顶端状态条样式： <meta content="black" name="apple-mobile-web-app-status-bar-style"> 1.4：忽略将数字变为电话号码： <meta content="telephone=no" name="format-detection"> 2. CSS相关： 2.1: img自适应：

》开始入手第一部分知识点 关于viewport(视口)的了解 视口就是浏览器中用于显示网页的区域，PC端，视口的宽度等于浏览器窗口的宽度。而在移动端，视口又分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。 那什么是布局视口( layout viewport）？ 视口与浏览器屏幕不相关联，CSS布局会根据他来计算，并被他约束，为了容纳为桌面浏览器设计的网站，移动设备默认的布局视口宽度远大于屏幕的宽度，其大小与设备有关。 通过document.documentElement.clientWidth/Height可得到布局视口的尺寸 什么是视觉视口( visual viewport) ？ 用户看到的网站区域，即用户看到网页区域内CSS像素的数量（注意, 是网站区域，不要和屏幕区域混淆了） 屏幕通过手势放大时，用户可看到的网站区域相对减小，此时视觉视口也在减小 通过window.innerWidth/Height可得到视觉视口的尺寸 什么是理想视口( ideal viewport)？ 为浏览器定义的可完美适配移动端的视口，可认为是设备视口宽度 只有当为页面添加meta视口标签时，理想视口才会生效，如下： //这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致 <meta name="device