移动互联网终端

一、基本信息 标题：基于移动端的高校请假系统的设计与实现 时间：2018年 来源：信息与电脑 关键字：纸质请假；移动端；请假系统；数据挖掘； 二、研究内容 高校学生请假业务是高校学生考纪管理的日常工作之一。随着招生规模的扩大，传统纸质请假模式存在效率低、应急性差、数据利用率低等问题，直接影响考勤工作的质量，甚至高等教育的质量。一些高校建立了PC端的请假平台，如河南师范大学、茂名职业技术学院、滇西科技师范学院等，但依旧不能满足即时处理和互动沟通的需求。移动互联的当下，移动终端得到了普及，网络应用顺势从PC端向移动端大量部署。高校是移动互联应用接受程度最高的地方之一。因此，构建移动端的请假解决方案成为了研究的热点。 1：前端架构 前端架构的设计以节省用户时空开销以及帮助管理者实现请假信息精准分析为目的，设置了请假、批准、查询、数据统计及分析等功能模块。 2：后台数据库设计 数据库选择响应速度快、开源、关系型的MySQL数据库。MySQL数据库支持具有查询初始化后不分配内存空间、避免数据泄露、一条语句实现多表查询操作、跨开发平台运行等优点。数据表的确立需要对系统业务流程中涉及的数据、业务流程的逻辑关系以及业务功能的弹性进行深入的研究。主要数据表设定有：（1）t_timeclass，课程时段表；（2）t_leave_record，请假记录表；（3）t_lesson，课程表；（4）t

viewport是什么? 一般来说，在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内。 手机浏览器把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 layout viewport：是网页的所有内容，他可以全部或者部分展示给用户。 visual viewport：是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。 viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。 当然我们可以通过meta设置改变viewport的比例，如initial-scale=.5就可以让viewport和屏幕一致的尺寸，这个比例在不同的手机上并不一定是2倍关系，特别是Android手机。而且改变viewport比例后可能会导致后续制作中出现一系列问题。另外Android系统中可以在viewport设置target-densitydpi=device

适配的基础知识 一、理解单位 px、pt、pc、sp、em、rem、dpr、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi 如果你是ios开发，你需要了解的单位：pt，px，ppi；实际开发中用到的单位：pt。 如果你是android开发，你需要了解的单位：dip/dp，sp，px，dpi/ppi，ldpi，mdpi，hdpi，xhdpi，xxhdpi；实际开发中用到的单位：dp，sp。 如果你是前端开发，你需要了解的单位：px，em，rem，dpr；实际开发中用到的单位：px，em，rem，dpr 1、dpi / ppi dpi：dot per inch ，每英寸的点数；打印或印刷领域使用的单位，代表打印机每英寸可以打印出的点数 。 ppi：pixel per inch ，每英寸的像素数，像素密度；表示图像或者显示器单位面积上像素数量。 dpi 和 ppi 都是描述分辨率的单位，但是两者是有区别的，但是在描述手机分辨率时，可以认为两者意义相同，以前android设备偏向于使用 dpi ，ios设备偏向于使用 ppi ，目前android和ios统一使用 ppi 描述手机屏幕的像素显示密度。 2、ldpi、mdpi、hdpi、xhdpi、xxhdpi android对移动设备不同屏幕分辨率的分类 3、pt，pc，sp pt：磅（point的音译

测试工作过程中思维过程： 测试人员常被看作Bug寻找者，程序的破坏者。 1、好的测试工程师所具备的能力： 细心的观察能力 有效的提问能力 产品的业务能力 好奇心 2、测试人员需要询问问题： 测试人员的核心能力在于提出有挑战性的相关问题。如果你能将调查、询问技巧和技术、产品的知识结合起来，渐渐地，你也会成为一个好的测试人员。 比如，测试人员可能会问： 这个App应该在什么平台上使用？ 这个App到底是干什么的？ 如果我这样做，会发生什么情况？ 诸如此类。 3、从哪里开始测试 理想情况下，测试人员应该掌握所测产品的所有最新细节资料。但事实上这很少见，因此，像其他人一样，测试人员只能将就使用手上有限的资料。但这不是不能测试的借口！测试人员其实是可以从内部和外部多种不同的来源处收集信息的。 这个阶段，测试人员可以问这些问题： 有哪些信息：规格？项目会议？用户文档？知识渊博的团队成员？现有的缺陷记录？ 该应用是在什么系统、平台和设备上进行运作和测试？ 该应用有整合外部应用（比如API和数据来源）吗？ 该应用需要用到特定的移动端网页吗？ 有多少时间可用于测试？ 测试的优先级和风险是什么？ 什么时候发布？ 基于以上收集的信息，测试人员可以 制定测试计划 了。通常预算决定测试方法，一天测完，一个星期或一个月测完的方法肯定不同。当你逐渐熟悉团队、工作流程以及这类问题的解决方式时，你就更容易预测结果了

移动端点击延迟事件 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='/path/to/fastclick.js'></script> // 使用了jquery的时候 $

移动端触摸、点击事件优化（fastclick源码学习） 最近在做一些微信移动端的页面，在此记录关于移动端触摸和点击事件的学习优化过程，主要内容围绕fastclick展开。 fastclick github 问题起源 移动端浏览器一般在用户点击屏幕之后会延迟大约300ms才触发click event —— GOOGLE 手机打开此链接查看延迟demo （现在许多浏览器已经不存在延迟问题了，详见fastclick github，但笔者的手机浏览器还是出现了三百毫秒延迟的问题） 截图如下 为什么会300ms延迟呢，主要是有一个双击缩放功能，浏览器需要判断用户点击是否为双击缩放。这个问题不解决， 1、用户体验就会很差，很不流畅，尤其是在密集操作场景下，比如计算器,不解决300ms延迟问题，感觉反应很慢； 2、点击穿透问题 事件触发顺序 在了解fastclick的思路之前，我们先看一下事件触发顺序是怎样的 touchstart touchmove touchend mouseover ：当指针设备移动到存在监听器的元素或其子元素的时候，mouseover事件就会被触发。 mouseenter：当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。 mousedown click 移动端click有300ms延迟问题，touch可没有哦。 fastclick思路

原文来自： http://www.studyofnet.com/news/173.html 本文导读 ：“移动网络”是个非常模糊的概念， 2g 3g wifi都是移动网络，但是网络特性以及对应的优化方法还是有些区别的。 对于移动端而言，可能最需要关注的是移动网络环境下的访问速度。 重点是减少网络传输量和交互次数， 善用本地缓存。 大部分人对移动端的浏览体验感到失望，同时当体验提升时，他们会在智能手机上花费更多的时间。因为64%的智能手机用户希望网站可以在4秒内加载完毕，但一半的网站花费了二倍以上的时间，达到了9秒。下面简单介绍一些可以使你的网站在移动端跑得更快的技术。 然而下载速度并不是瓶颈，网络延迟及智能机的内存与cpu才是瓶颈。即使手机可以在4秒内下载完1mb，页面也要花费更长的时间去加载，因为手机需要接收并解析代码与图片。 在桌面端，下载文件只占显示网站时间的20%，其余时间花费在解析http请求，获取样式表，脚本文件及图片上。由于移动端的cpu，内存与缓存跟桌面端完全无法相提并论，这些在手机上会花费更长的时间。 怎样减少加载时间 减少依赖文件 : 更少的文件意味着更少的http请求与更快的加载时间 降低图片大小 : 适应与调整高分辨率图片，在额外的下载时间中占居榜首，占用了宝贵的内存与处理资源。 减轻客户端负担 : 最佳实践是重新思考你的javascript

队名: 拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长：宋奕 过去两天完成了哪些任务 主要完成了个人主页模块的接口设计 完善后端的信息处理 GitHub签入记录 接下来的计划 总结alpha版本，准备beta版本 还剩下哪些任务 总结alpha版本，准备beta版本 燃尽图组内共享 遇到了哪些困难 如何准确返回所需数据？ 有哪些收获和疑问 学习编写接口文档，学习信息处理 拾光组为什么这么棒？ 组员1：杨晋南 过去两天完成了哪些任务 完成了移动端Android车主个人主页模块基本UI界面 进一步完成了移动端Android部分界面间逻辑代码 完成车主个人主页模块接口的对接 github签入记录 接下来的计划 等待组长安排和请客 还剩下哪些任务 等待组长安排和请客 燃尽图组内共享 遇到了哪些困难 短信的实现 有哪些收获和疑问 学习了Android个人主页实现的基本知识，继续学习有关接口对接的教程 拾光组为什么这么棒？ 组员2：刘晓翔 过去两天完成了哪些任务 完成了移动端iOS车主个人主页模块基本UI界面 继续完成移动端iOS部分界面间逻辑代码 完成车主个人主页模块接口的对接 完善其他模块 接下来的计划 等待组长安排和请客 还剩下哪些任务 等待组长安排和请客 燃尽图组内共享 遇到了哪些困难 动态缩略图的实现 有哪些收获和疑问 查阅了相关开发资料

队名: 拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长：宋奕 过去两天完成了哪些任务 主要完成了个人主页模块的接口设计 完善后端的信息处理 GitHub签入记录 接下来的计划 总结alpha版本，准备beta版本 还剩下哪些任务 总结alpha版本，准备beta版本 燃尽图组内共享 遇到了哪些困难 如何准确返回所需数据？ 有哪些收获和疑问 学习编写接口文档，学习信息处理 拾光组为什么这么棒？ 组员1：杨晋南 过去两天完成了哪些任务 完成了移动端Android车主个人主页模块基本UI界面 进一步完成了移动端Android部分界面间逻辑代码 完成车主个人主页模块接口的对接 github签入记录 接下来的计划 等待组长安排和请客 还剩下哪些任务 等待组长安排和请客 燃尽图组内共享 遇到了哪些困难 短信的实现 有哪些收获和疑问 学习了Android个人主页实现的基本知识，继续学习有关接口对接的教程 拾光组为什么这么棒？ 组员2：刘晓翔 过去两天完成了哪些任务 完成了移动端iOS车主个人主页模块基本UI界面 继续完成移动端iOS部分界面间逻辑代码 完成车主个人主页模块接口的对接 完善其他模块 接下来的计划 等待组长安排和请客 还剩下哪些任务 等待组长安排和请客 燃尽图组内共享 遇到了哪些困难 动态缩略图的实现 有哪些收获和疑问 查阅了相关开发资料

队名: 拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长：宋奕 过去两天完成了哪些任务 主要完成了个人主页模块的接口设计 完善后端的信息处理 GitHub签入记录 接下来的计划 总结alpha版本，准备beta版本 还剩下哪些任务 总结alpha版本，准备beta版本 燃尽图组内共享 遇到了哪些困难 如何准确返回所需数据？ 有哪些收获和疑问 学习编写接口文档，学习信息处理 拾光组为什么这么棒？ 组员1：杨晋南 过去两天完成了哪些任务 完成了移动端Android车主个人主页模块基本UI界面 进一步完成了移动端Android部分界面间逻辑代码 完成车主个人主页模块接口的对接 github签入记录 接下来的计划 等待组长安排和请客 还剩下哪些任务 等待组长安排和请客 燃尽图组内共享 遇到了哪些困难 短信的实现 有哪些收获和疑问 学习了Android个人主页实现的基本知识，继续学习有关接口对接的教程 拾光组为什么这么棒？ 组员2：刘晓翔 过去两天完成了哪些任务 完成了移动端iOS车主个人主页模块基本UI界面 继续完成移动端iOS部分界面间逻辑代码 完成车主个人主页模块接口的对接 完善其他模块 接下来的计划 等待组长安排和请客 还剩下哪些任务 等待组长安排和请客 燃尽图组内共享 遇到了哪些困难 动态缩略图的实现 有哪些收获和疑问 查阅了相关开发资料