移动互联网终端

原型设计 这个作业属于哪个课程 这个作业要求在哪里 https://www.cnblogs.com/harry240/p/11524127.html 这个作业的目标 1，熟悉三种原型设计工具并学会使用他们； 2，对给出的题目进行需求分析； 3，设计题目所需要的原型 背景简介 ： 什么是原型设计 ？ 原型设计是产品经理确认需求、设计产品最重要的沟通工具。 一，对比三种原型设计工具 1，墨刀   我很喜欢墨刀的理念： 快速完成你的产品设计，把更多的时间留给思考。 这种理念也是完全符合原型设计的理念，简单的设计出产品的模型用于产品和用户去进行更进一步的需求的确认和完善。 （1）墨刀的简单介绍 墨刀是一款在一定需求下收费的原型设计平台，你可以直接十分简单的在墨刀网站平台上进行原型设计。同时它能很好的进行移动端产品原型设计。免费版本自带的部件、交互、功能，能满足移动端产品原型的设计要求，并且墨刀的控件都是基于APP，因此简单的选择移动端的布局便可以开始设计你的移动端的原型。 （2）墨刀的缺点 设计有一点的局限性，正因为能很完美的设计移动端的产品因此它也被局限在移动端的设计，对于PC端的兼容不是很好。同时需要更多的功能需求或更大的空间时，你需要付费购买才行。 2、Axure RP   这是我见过最膨胀的设计平台，直接打起了最有效的方法！ （1）Axure RP简介： Axure的正确发音是

这个作业属于哪个课程 转到 这个作业要求在哪里 转到 这个作业的目标 熟悉常用的原型设计工具，学会设计原型 一、对比三种原型设计工具     在之前自己并没有接触过原型设计，甚至是连一个软件开发整体流程都没有走过，后面通过自己在网上的搜索以及学习了解到了其实我们有时候并不能很好的了解用户的需求，而如何验证用户的需求呢？这个时候拿出一个原型给用户参考就很有必要，用户看到产品原型后就能提出很多意见，然后进行改进，就能很好地验证需求分析是否正确。也是和用户进行需求沟通的一种比较立体，比较形象的一种方式，能够大大提升效率，降低返工的风险！所以说，原型设计非常的重要，而学会原型设计也是一项必不可少的技能。 目前主流的原型设计工具 墨刀     墨刀是现在非常主流的原型设计工具，可以说是专门为移动端产品原型设计而生，他的免费版自带的很多东西，如部件、交互等基本上就能满足移动端产品原型的设计要求，但是墨刀的空间都是基于app的，虽然在创建项目的时候可以选择比如Android或者ios相应设备的布局从而减少很多工作环节，但是对PC端非常不自由，仅限于移动端产品原型，而且还要花钱，如果想团队协作或者单机版下载的话。 Axure RP     相对于墨刀，Axure也就自由很多了，而且不限于画原型，二球流程图啊、信息架构图等也能满足。在控件、素材的控制上，也可以设计出来很多的效果。所以说画PC端原型

目有个交互需要实现手指滑动的交互，pc端使用mousedown,mousemove,mouseup监听实现。 但在ios设备上mousemove是不好监听的，同类的方法是touchstart,touchmove,touchend。 项目需求，需要用到拖动事件。由于不需要考虑IE8等低端浏览器的兼容性， 所以想到HTML5中的 drag 事件， 发现移动端 android & IOS 并不支持 drag 事件。现在让我们来介绍一下移动端的常用事件吧 一、click点击事件 单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟。 二、touch触摸事件 触摸事件，有touchstart touchmove touchend touchcancel 四种之分，常用的有： touchstart：当有新手指触控到绑定的元素，会触发一次事件。　　 touchmove：当有手指放绑定的元素上会一直触发，从触发条件准确的说只有手指移动时才触发。但是经过测试，这一项检测十分灵敏，人为手指保持不动，系统也会侦测到细小的移动。所以会一直触发。 touchend：当有手指从绑定元素上抬起，会触发一次。 touchcancel：可由系统进行的触发（不常用事件），比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为

文章原创于公众号：程序猿周先森。本平台不定时更新，喜欢我的文章，欢迎关注我的微信公众号。 其实个人博客已经有好几个版本了，一直没有很满意的版本，所以一直在不断改进不断测试还未正式上线。还记得第一版是去年四五月份开发的，当时用jsp写的，UI则采用百度贴吧pc版风格，但是使用了几个月，因为jsp前后端不分离不好维护，加上前后端不分离的项目没有太大价值，所以放弃了维护。后面工作使用vue框架，因为vue组件的单一，重写的界面效果没有达到自己满意的状态，所以第二版还未上线就被我舍弃掉。年假开始设计第三版个人博客，一开始设定为Vue.js + Node.js + Angular.js，但是后面想着了解一下新框架，所以用了Angular4替代了Vue.js，界面比较简单，因为我个人比较喜欢简单一点的页面。 这是前台主页，实现了主页·归类·关于这三个功能的开发，我目前将前台展示和后台管理系统进行了分离，前期的话主要是自己发文章为主，后台管理系统暂时不对外开放。 项目分为三个服务器进行开发：client前台展示功能，接口采用4200，主要功能如上图所示，admin后台管理系统，接口采用4201，主要用于添加删除新文章，添加新标签，server服务功能，为前端后台同时提供服务，进行数据库操作等，接口采用4001. 目前数据我直接存储在MongoDB,后期上线可能转移到mysql进行存储

前言 最近因业务需求在项目中嵌入了 tinymce 这个富文本编辑器，用于满足平台给用户编辑各类新闻内容什么的业务需求，前后也花了不少时间体验和对比了市面上各类开源编辑器。 *案例demo版本： vue-tinymce-demo 在线预览： vue-tinymce-demo.netlify.com/#/ 各大WYSIWYG编辑器的简单比较 1、UEditor 因为已经不再维护了，需要大量修改源码，很多都是专门为jsp等服务器渲染项目写的代码需要删除， 然后越删越害怕越删越不敢用，依赖 jquery ，需要专门用js去parse编辑完成的内容，parse完的内容还可能污染全局css，兼容老浏览器还不错， 但是，我们不怎么考虑兼容IE。所以，告辞。 2、wangEditor 中文文档，上手快，依赖 jquery ，功能少点要花时间去写插件，需要单独为图片上传功能写个接口，老项目忙着上线临时用过，感觉并不适合当前业务这么重的编辑功能于是放弃了。 3、Quill api友好, 功能少，需要特定的css去解析文本（这点我不大喜欢），ui好看，适合作为论坛回帖功能使用。 4、CKEditor CKEditor目前主流的还是 4.x 的版本，但是文档看着很瞎眼实在是提不起兴致去配置，草草用了下就放弃了， 5.x 版本刚从beta结束，需要指定专门的node以及npm版本

前言的一些碎碎念：最近一直在写移动端的页面，不过一直是用的别人造好的轮子，很多时候并没有想那是为什么，那是怎么样要那么写，就跟着别人的文档去了。本以为自己对移动端的那一丢丢理解，结果很多东西都特么有问题，所以，今天停下了手中的一些东西，来谈下移动端的布局方案吧 一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值

一、移动端测试简介 1. 1 移动端测试定义 移动端测试指的是对移动应用进行测试，即实体的特性满足需求(产品文档、隐性需求等)的程度 1.2 移动端测试分类 1.2.1 app功能测试 1. 业务逻辑正确性测试 产品文档 隐性需求 =编写=>测试用例 2. 兼容性测试 提示： 移动设备大数据查询 移动观象台 名称 说明 系统版本 ➢ Android 官方、联想、华为等 ➢ IOS 官方 分辨率 ➢720p 720x1280 ➢ 1080p 1080x1920 ➢ 2k 2560x1440 网络情况 ➢ 2G ➢ 3G ➢ 4G ➢ Wi-Fi 3. 异常测试 热启动应用 应用置于后台 =切换=> 前台的过程 网络切换&中断恢复 电话或信息中断恢复 4. 升级、安装、卸载测试 (1) 升级 系统升级、渠道升级、临近版本(1.0->1.1) 、跨版本(1.0->1.5) (2) 安装 系统版本、首次安装、覆盖安装、卸载后安装 (3) 卸载 卸载->安装->卸载 5. 健壮性测试 手机资源消耗 CPU、内存 流量消耗 图片、传输数据压缩 崩溃恢复测试 闪退、报错(停止运行) ... 1.2.2 app自动化测试 通过场景和数据的预设，把以人为驱动的测试行为转化为机器执行的一种过程 重复的工作交给机器去做 解放出一些人去做新功能测试和探索性测试 提醒： 并不是所有功能都能进行自动化 新功能

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选，提炼出来，原本我也想用我匮乏的语言来描述，但是发现别人已经总结的更好了，所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录： 基本概念 物理像素 设备独立像素 CSS 像素 PPI的概念 DPR的概念 缩放的概念 viewPort 的概念 viewport 渲染流程 Meta 标签说明 移动端布局实践 混合方式 REM 方式 响应式 JS自动换算 缩放方式 CSS3 缩放 viewport 缩放 相关补充 为什么需要meta标签？ 传统响应式布局与移动端响应式的区别 移动端字体以及大小的设置 移动端背景图缩放设置 使用Sass提高px与rem转换效率 通过Chrome进行真机调试 weinre 远程调试 移动端布局实践 混合方式 混合方式实现的移动端布局实际上就是对PC端布局技术的组合使用，它主要包含以下技术： 定位布局 浮动布局 可塑性布局 百分比布局 相对单位 将这些布局方法根据页面每个不同部分的特性进行组合使用，例如模态框，弹出层等可以采用定位方式，而页面元素的排版可以采用浮动布局，也可以使用具有可塑性的Flex布局方案，对于元素的尺寸可以采用百分比或者其它相对单位,而这便是我称之为“混合方式”的原因。 混合方式进行的移动端网页布局，所采用的技术通常都具有灵活、可伸缩、可塑等特点，甚至连使用的单位，最好都是相对单位

移动端的主要问题是click会有200-300ms的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的300ms之后，才触发click，如果300ms之内还有click，就会进行放大缩小。 　　但是，问题是大部分时候放大、缩小时不需要的，有时开发者也会禁用他们，那么300ms的延迟就是性能上的损耗的，所以，如何解决这300ms的延迟？ 在移动端，最容易想到的就是使用touchend来替代click，但是touchend是存在很大的问题的，因为touchend之前可能是touchstart、touchmove，最后才是touchend，具体情境可能是用户滑动页面时，不小心在一个按钮那里触发了touchend，这样就执行了，但是用户的本意不是如此。 1.tap事件 　　为了减少这300ms的延迟，tap事件被很多框架（如zepto）封装，来减少这延迟问题， tap事件不是原生的，所以是封装的，那么具体是如何实现的呢？ 主要考虑到下面两点： 按住的事件不能超过延时时间，因为长时间可能就是浏览器的复制、粘贴等操作了。 不能在页面中移动，移动是不能触发tap事件的。 2.点透问题 　　如果我们在移动端所有的click都替换为了tap事件，还是会触发点透问题的，因为实质是： 在同一个z轴上，z-index不同的两个元素，上面的元素是一个绑定了tap事件的

我们开发的程序不只在pc端运行，也要在移动端运行。这时程序就要根据机器的环境来执行选择性的编译，如对PC端编译PC端的程序，对移动端编译移动端的程序，这里我们就可以用两组条件编译。 #ifdef #endif #ifndef #endif 我们先来了解下#ifdef ...#endif；语法格式是： #ifdef 宏名字 |#ifdef 宏名字 //任意代码 |//任意代码 #endif |#else |//任意代码 |#endif 上面的两种格式是，如果指定了宏，就会执行#ifdef ... #endif中的代码。 // // main.m // Hong_Test // // Created by 程英暾 on 2017/3/20. // Copyright © 2017年 程英暾. All rights reserved. // #import <Foundation/Foundation.h> #define iPad int main(int argc, const char * argv[]) { @autoreleasepool { #ifdef iPad NSLog(@"this is ipad"); #else NSLog(@"this is iphone"); #endif // insert code here... NSLog(@"Hello, World!