HTML5从入门到项目实践（超值版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

第1章　步入HTML 5移动开发新世界

◎　本章教学微视频：24个　34分钟

学习指引

HTML 5是HTML的最新版本，尽管在IE桌面浏览器中，HTML 5的应用还显得十分缓慢，但在移动设备上，HTML 5已经逐渐成为潮流趋势，而且几乎主流智能手机及平板计算机都支持HTML 5。本章介绍HTML 5的基础知识，包括HTML 5的由来、HTML 5的特殊之处，以及一些HTML 5移动开发辅助工具等。

重点导读

  • 了解HTML 5的概述。
  • 熟悉HTML 5的特殊之处。
  • 熟悉HTML 5在iOS和Android设备中的使用。
  • 了解HTML 5移动开发辅助工具。
  • 掌握HTML 5移动开发编辑器。
  • 熟悉配置移动开发环境。
  • 试着开发第一个属于自己的移动网站。
  • 了解测试工具。

1.1　HTML 5概述

HTML 5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML 5的设计目的是为了在移动设备上支持多媒体，具有简单易学的特点。

1.1.1　HTML 5的由来

图1-1　支持HTML 5的浏览器版本

HTML 5是W3C与WHATWG合作的结果，WHATWG指Web Hypertext Application Technology Working Group。WHATWG致力于Web表单和应用程序，而W3C专注于XHTML 2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。

HTML 5是新一代HTML标准，目前仍处于完善之中，但现在，大部分浏览器已经具备了支持部分HTML 5的功能。例如，最新版本的Safari、Chrome、Firefox以及Opera支持某些HTML 5特性。Internet Explorer 9将支持某些HTML 5特性，如图1-1所示。

HTML 5中具有一些有趣的新特性，具体介绍如下：

  • 用于绘画的canvas元素。
  • 用于媒介回放的video和audio元素。
  • 对本地离线存储的更好支持。
  • 添加一些新的特殊内容元素，如article、footer、header、nav、section。
  • 添加一些新的表单控件，如calendar、date、time、email、url、search。

1.1.2　XML及XHTML

XML（EXtensible Markup Language），即可扩展标记语言，是一种必须正确标记且格式良好的标记语言。XML应用于Web开发的许多方面，常用于简化数据的存储和共享。XML标签没有被预定义，需要用户自行定义。

另外，XML可以用于创建新的互联网语言，很多新的互联网语言是通过XML创建的。例如XHTML语言，用于描述可用的Web服务的WSDL，作为手持设备的标记语言的WAP和WML，用于新闻feed的RSS语言，描述资本和本体的RDF和OWL，用于描述针对Web多媒体的SMIL等。

XHTML是以XML格式编写的HTML，是指可扩展超文本编辑语言，与HTML 4.01版本几乎相同，可以说XHTML是更严格、更纯净的HTML版本。XHTML是以XML应用的方式定义的HTML，在2001年1月，W3C推荐发布为标准，目前，几乎得到所有主流浏览器的支持。

XHTML具有<!DOCTYPE....>强制性、元素必须合理嵌套、元素必须有关闭标签、空元素必须包含关闭标签、元素必须是小写、属性名称必须是小写、属性值必须有引号和不允许属性简写等特性。

1.1.3　HTML 5能做什么

首先，HTML新版本HTML 5的主要特点还是在音频和视频方面。用户可以运用<video>和<audio>的标签，直接进行视频和音频的制作，并通过JavaScript接口来控制。

其次，是在兼容性方面的问题，浏览器的不同，HTML 5中的JavaScript库就会根据相关浏览器做出调整，提供Flash、QuickTime、Java三种播放器作为补丁，这也方便了在使用过程中对播放器要求的限制。

再次，HTML 5在使用过程中，只要经用户许可，就可以知道用户当前的地理坐标，这样一来，提供的服务也就更加的本地化，与使用Android的系统一样，硬件会尝试用多种方式进行定位，比如电信、WIFI、GPS等。

最后，HTML 5通过两种方式来支持本地储存功能：一是key-value方式的local Storage，在IE 8版本之前，即没有Local Storage的环境情况下，local-storage-js就是用cookie替代；二是数据库方式的Web SQL Database，JavaScript库Persist JS则可通过Gears、Local Storage、Web SQL Database、Global Storage、Flash、IE、cookie等多个存储方法逐一尝试，这样兼容性就能够最大限度地实现。

1.1.4　HTML 5的标签特性

HTML 5的核心要素就是标签了（tag），标签是用来描述文档中的各种内容基本单元，不同标签标示着不同的含义，标签之间的嵌套表示了内容之间的结构，HTML 5的标签通常具有以下特征。

  • HTML 5标签是由尖括号包围的关键词，比如<html>。
  • HTML 5标签通常是成对出现的，比如<b>和</b>。
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签。
  • 开始标签和结束标签也被称为开放标签和闭合标签。

1.2　熟悉HTML 5的特殊之处

随着移动互联网的发展，HTML 5将成为新的热门技术，主要原因在于HTML 5具有以下特殊特性。

  • HTML 5是在已有技术基础之上的新版本，上手较C、C++语言容易得多，且性能最接近桌面应用。
  • HTML 5只要有个记事本和支持它的浏览器就可以开发、调试和运行，简化了对特定环境的依赖，和诸如编译之类的等待过程。
  • HTML 5不仅可以在支持它的浏览器，包括PC和移动设备上运行，还可以在桌面上像桌面应用一样运行，甚至可以让用户认为它就是桌面应用。

1.3　在iOS和Android设备中使用HTML 5

在iOS和Android设备中使用HTML 5是主流趋势，因为它们都能很好地支持HTML 5，这要归功于WebKit。目前，在iOS和Android设备中运行的浏览器，如iOS下的Safari以及Android下的Chrome都是基于WebKit，而WebKit对HTML 5有相当出色的支持。

使用HTML 5为iOS和Android设计Web页面以及应用最大好处是，它们在未来的设备上仍能继续运行。目前，在平板计算机、智能手机以及智能电视上使用的操作系统将来还会发展到更多设备上，如汽车、图像播放设备，甚至冰箱、洗衣机等家电设备上。

1.4　HTML 5移动开发辅助工具

使用HTML 5在开发移动网站的过程中，需要借助一些辅助工具，才能起到事半功倍的效果，本节就来介绍一些常用的辅助工具。

1.4.1　Animatron移动开发软件

Animatron是一个功能强大的在线交互动画编辑工具，采用最新的HTML 5技术，开发者可以利用它可以创建各种令人惊叹的HTML 5动画以及丰富的交互内容，可以随意设计和发布，无须编码，所见即所得，分分钟让用户成为动画大师。如图1-2所示为Animatron软件界面。

图1-2　Animatron软件界面

1.4.2　Lungo移动开发软件

图1-3　Lungojs软件界面

Lungojs是一个使用HTML 5/CSS 3和JavaScript技术的移动Web开发框架，可以帮助创建基于iOS、Android、Blackberry和WebOS平台的应用程序。该框架可利用当前移动设备的高级特性，可捕捉事件包括滑动、触屏等。无须使用图片，全部采用向量生成。

另外，Lungojs无须服务器端支持，可帮助实现HTML 5特性，包括WebSQL、Geolocation、History、Device orientation等，这是一个完全可定制的框架，可用来创建应用、游戏等程序。如图1-3所示为Lungojs软件界面。

1.4.3　DevExtreme移动开发软件

DevExtreme是专为广大移动应用开发用户打造的一个跨平台HTML 5/JS框架，DevExtreme分为DevExtreme Mobile和DevExtreme Web，广大开发者可以利用DevExtreme框架来开发运行于iOS、Android、WP等多平台的应用程式，是目前跨平台开发的首选工具。如图1-4所示为DevExtreme软件界面。

图1-4　DevExtreme软件界面

DevExtreme的功能特性包括如下三个方面。

  • 移动设备开发简化：创建高反应度的应用，满足了不断变化的企业以及BYOD世界的需求。使用HTML、CSS 3和JavaScript，从而实现了外观、感觉和行为如原生应用程序一样的业务解决方案，不需要学习其他更多的语言或框架。
  • 美观而又身临其境的数据可视化：DevExtreme为智能手机和平板计算机封装了易于使用的HTML JavaScript应用程序，包含超过30种触摸优化的本地UI小工具，可用于任何应用程序的单个页面。
  • 无处不在的原生用户体验：为iOS、Android、Windows Phone和Tizen打造原生视觉感受，无须额外的编码或UI定制。

1.4.4　RazorFlow移动开发软件

图1-5　RazorFlow界面

RazorFlow是一款专业的PHP开发框架，用户可以用来创建适应不同设备、不同平台、不同浏览器响应式的HTML 5仪表板，只需加入一个PHP文件就可以输出数据了，并且可以和MySQL和PostgreSQL或SQLite数据库结合使用。如图1-5所示为RazorFlow软件界面。

1.4.5　Literally Canvas移动开发软件

图1-6　Literally Canvas软件界面

Literally Canvas是一款专为HTML 5开发人员提供的便捷画图工具，为用户准备了人性化的API接口，方便用户根据自己的需求随意绘画、修改制图内容，提高网页开发效率。

Literally Canvas非常适合移动设备应用开发，具有绘制、擦除、设置颜色选择器、撤销、重做、平移和缩放等功能特点。如图1-6所示为Literally Canvas软件界面。

1.5　HTML 5移动开发编辑器

在编辑HTML 5代码的过程中，需要一些开发编辑器，本节就来介绍一些常用的HTML 5移动开发编辑器。

1.5.1　程序员必备神器——Sublime Text 3

Sublime Text 3是一款程序员必备代码编辑器，也是HTML 5的文本编辑器，支持64位和32位操作系统。Sublime Text 3在支持语法高亮、代码补全、代码片段（Snippet）、代码折叠、行号显示、自定义皮肤、配色方案等其他代码编辑器所拥有的功能的同时，又保证了其极快的运行速度。另外，Sublime Text 3也是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。如图1-7所示为Sublime Text 3软件的开发工作界面。

图1-7　Sublime Text 3软件开发工作界面

1.5.2　可配置的编辑器——Atom

开发团队将Atom称为一个“为21世纪创造的可配置的编辑器”，它拥有非常精致细腻的界面，并且可配置项丰富，加上它提供了与Sublime Text上类似的Package Control（包管理）功能，用户可以非常方便地安装和管理各种插件，并将Atom打造成真正适合自己的开发工具。如图1-8所示为Atom软件的开发工作界面。

图1-8　Atom软件开发工作界面

1.5.3　微软良心之作——VS Code

Visual Studio Code（简称VS Code/VSC）是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言，具有语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比（Diff、GIT）等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化，软件跨平台支持Win、Mac及Linux，运行流畅。如图1-9所示为Visual Studio Code软件的开发工作界面。

图1-9　Visual Studio Code软件开发工作界面

1.5.4　流行的集成开发环境——HBuilder

HBuilder是DCloud推出的一款支持HTML 5的Web开发IDE，快是其最大的优势。其通过完整的语法提示和代码输入法、代码块等方式，大幅提升HTML、JS、CSS的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。如图1-10所示为HBuilder软件的开发工作界面。

图1-10　HBuilder软件开发工作界面

1.6　配置移动开发环境

移动开发环境有很多种，根据不同的运行环境，可以分为Android开发环境、iOS开发环境、Windows Phone开发环境等。下面以Android开发环境为例，来介绍配置移动开发环境的方法与技巧。

1. Java环境搭建

搭建Android移动开发环境首先需要搭建Java环境，即JDK（Java Development Kit）。对于JDK来说，随着时间的推移，JDK的版本也在不断更新，目前JDK的最新版本是JDK 1.8。由于Oracle（甲骨文）公司在2010年收购了Sun Microsystems公司，所以要到Oracle官方网站（https://www.oracle.com/index.html）下载最新版本的JDK。

1）JDK下载和安装。

JDK的下载和安装步骤具体如下：

（1）打开ORACLE官方网站，在首页的栏目中找到Downloads下的Java for Developers超链接，如图1-11所示。

（2）单击Java for Developers超链接，进入Java SE Downloads页面，如图1-12所示。

提示：由于JDK版本的不断更新，当读者浏览Java SE的下载页面时，显示的是JDK当前的最新版本。

（3）单击Java Platform(JDK)上方的DOWNLOAD按钮，打开Java SE的下载列表页面，如图1-13所示，其中有Windows、Linux和Solaris等不同平台环境下的JDK下载。

图1-11　oracle官方网站的首页

图1-12　Java SE Downloads页面

（4）下载前，首先选中Accept License Agreement（接受许可协议）单选按钮，接受许可协议。由于本书使用的是64位版的Windows操作系统，因此这里选择与平台相对应的Windows x64类型的jdk-8u131-windows-x64.exe超链接，单击下载JDK，如图1-14所示。

图1-13　Java SE的下载列表

图1-14　下载JDK

（5）下载完成后，在硬盘上会发现一个名为jdk-8u131-windows-x64.exe的可执行文件，双击运行，出现JDK的安装界面，如图1-15所示。

（6）单击“下一步”按钮，进入“定制安装”界面，在其中选择组件及JDK的安装路径，这里修改为D:\Java\jdk1.8.0_131\，如图1-16所示。

图1-15　JDK的安装界面

图1-16　“定制安装”界面

提示：修改JDK的安装目录，尽量不要使用带有空格的文件夹名。

（7）单击“下一步”按钮，进入安装进度界面，如图1-17所示。

（8）在安装过程中，会出现“目标文件夹”窗口，选择JRE的安装路径，这里修改为D:\java\jre1.8.0_131，如图1-18所示。

图1-17　安装进度界面

图1-18　“目标文件夹”窗口

（9）单击“下一步”按钮，安装JRE。安装完成后，弹出“JDK安装完成”界面，如图1-19所示。

（10）单击“关闭”按钮，完成JDK的安装，这时会在安装目录下多一个名称为jdk1.8.0_131的文件夹，打开文件夹，如图1-20所示。

JDK的安装目录下有许多文件和文件夹，其中重要的目录和文件的含义如下。

  • bin：提供JDK开发所需要的编译、调试、运行等工具，如javac、java、javadoc、appletviewer等可执行程序。
  • db：JDK附带的数据库。
  • include：存放用于本地要访问的文件。
  • jre：Java运行时的环境。

图1-19　JDK安装完成界面

  • lib：存放Java的类库文件，即Java的工具包类库。
  • src.zip：Java提供的类库的源代码。

图1-20　jdk1.8.0_131文件夹

提示：JDK是Java的开发环境，JDK对Java源代码进行编译处理，它是为开发人员提供的工具。JRE是Java的运行环境，它包含Java虚拟机（JVM）的实现及Java核心类库，编译后的Java程序必须使用JRE执行。在JDK的安装包中集成了JDK和JRE，所以在安装JDK的过程中提示安装JRE。

2）JDK配置。

对于初学者来说，环境变量的配置是比较容易出错的，配置过程中应当仔细。使用JDK需要对path和classpath两个环境变量进行配置。下面是在Windows10操作系统中，环境变量的配置方法和步骤。

path环境变量是告诉操作系统Java编译器的路径。具体配置步骤如下：

（1）在桌面上右击“此计算机”图标，在弹出的快捷菜单中选择“属性”命令，如图1-21所示。

（2）打开“系统”窗口，选择“高级系统设置”选项，如图1-22所示。

图1-21　选择“属性”命令

图1-22　选择“高级系统设置”选项

（3）打开“系统属性”对话框，选择“高级”选项卡，单击“环境变量”按钮，如图1-23所示。

（4）打开“环境变量”对话框，在“系统变量”下单击“新建”按钮，如图1-24所示。

图1-23　“系统属性”对话框

图1-24　“环境变量”对话框

（5）打开“新建系统变量”对话框，在弹出的对话框的“变量名”中输入path，“变量值”为安装JDK的默认bin路径，这里输入D:\java\ jdk1.8.0_131\bin，如图1-25所示。单击“确定”按钮，path环境变量配置完成。

图1-25　输入path变量名和相应变量值

Java虚拟机在运行某个Java程序时，会按classpath指定的目录顺序去查找这个Java程序，配置classpath环境变量的步骤如下。

（1）参照配置path环境变量的步骤，打开“新建系统变量”对话框，“变量名”输入classpath，“变量值”为安装JDK的默认lib路径，这里输入D:\java\ jdk1.8.0_131\lib，如图1-26所示。

图1-26　输入classpath变量名和相应变量值

（2）单击“确定”按钮，classpath环境变量配置完成。

提示：配置环境变量，多个目录间使用分号(;)隔开。在配置classpath环境变量时，通常在配置的目录前面添加点(.)，即当前目录，使.class文件搜索时首先搜索当前目录，然后根据classpath配置的目录顺序依次查找，找到后执行。

3）测试JDK。

JDK安装、配置完成后，可以测试其是否能够正常运行。具体操作步骤如下：

（1）右击“开始”按钮，在弹出的快捷菜单中选择“运行”命令，打开“运行”对话框，输入命令cmd，如图1-27所示。

（2）单击“确定”按钮，打开“命令提示符”窗口，输入java –version，并按Enter键确认。系统如果输出JDK的版本信息，则说明JDK的环境搭建成功，如图1-28所示。

图1-27　输入命令

图1-28　JDK环境搭建成功

注意：在命令提示符下输入测试命令时，Java和减号之间有一个空格，但减号和version之间没有空格。

2. 安装Android Studio

Java环境搭建完成后，就要安装Android Studio，它是集成开发环境，包含了Android开发所必需的Android SDK（Software Development Kit），以及开发Android应用程序时所需要的工具，例如Android模拟器、调试工具等。

1）Android Studio下载和安装。

Android Studio下载和安装的具体步骤如下：

（1）在浏览器中输入下载Android Studio的网址http://www.android-studio.org/，读者可根据自己操作系统下载相应的软件，这里下载“Windows（64位）包含Android SDK”的Android Studio，单击下载保存即可，如图1-29所示。

图1-29　下载Android Studio

（2）下载完成后，双击android-studio-bundle-162.4069837-windows.exe文件，进行安装，打开欢迎界面，如图1-30所示。

（3）单击Next按钮，打开Choose Components窗口，可以看到，Android Studio属IDE的工具部分，为必选项；Android SDK（SDK工具包）和Android Virtual Device（虚拟机部分Performance）为可选项，勾选后如图1-31所示。

图1-30　Android Studio安装界面

图1-31　Choose Components窗口

（4）单击Next按钮，打开License Agreement窗口，单击I Agree按钮接受许可协议，如图1-32所示。

（5）单击I Agree按钮后，打开Configuration Settings窗口，单击Browse按钮，分别选择Android Studio和Android SDK的安装路径，如图1-33所示。

图1-32　License Agreement窗口

图1-33　Configuration Settings窗口

（6）单击Next按钮，打开Choose Start Menu Folder窗口，如图1-34所示。

（7）单击Install按钮，安装Android Studio，如图1-35所示。

（8）稍等片刻，弹出Installation Complete窗口，如图1-36所示。

（9）单击Next按钮，弹出Completing Android Studio Setup窗口，安装完成，如图1-37所示。

图1-34　Choose Start Menu Folder窗口

图1-35　安装Android Studio

图1-36　Installation Complete窗口

图1-37　Completing Android Studio Setup窗口

（10）单击Finish按钮，Android Studio安装完成，然后进行软件更新，完成后单击Finish按钮即可进入Android Studio欢迎界面，如图1-38所示。

图1-38　Android Studio欢迎界面

2）SDK Manager管理。

Android Studio 2.3.3安装完成后，单击Start a new Android Studio project超链接，进入Android Studio开发工具，由于SDK Manager更新、下载速度特别慢，因此需要在进行实际项目开发前进行更新、下载，具体操作如下。

（1）首先修改hosts文件，打开目录C:\Windows\System32\drivers\etc，使用记事本打开目录中的hosts文件，添加如下内容到hosts文件的最后。

203.208.46.146 www.google.com；

74.125.113.121 developer.android.com；

203.208.46.146 dl.google.com；

203.208.46.146 dl-ssl.google.com。

图1-39　选择SDK Manager选项

注意：在添加时不修改原来文件的内容，只是附加这些内容。

提示：由于每个网站对应一个IP地址，在打开域名时需要使用DNS服务器解析成IP地址，然后才能访问。而在hosts文件中加入了Android Studio获取更新链接和下载链接的网址及其对应的IP地址，这样就省去了DNS解析这一步，从而节约了时间，提高了更新、下载的速度。

（2）在SDK的安装目录下找到SDK Manager.exe，双击打开该文件。或者在Android Studio 2.3.3中选择Tools→Android→SDK Manger选项，如图1-39所示。

（3）打开Default Settings窗口，单击Launch Standalone SDK Manager超链接，如图1-40所示。

图1-40　Default Settings窗口

（4）打开Android SDK Manager窗口，选择Tools→Options...选项，如图1-41所示。

图1-41　选择Options...选项

（5）打开Android SDK Manager - Settings窗口，在HTTP Proxy Server文本框中输入mirrors.neusoft.edu.cn，在Http Proxy Port文本框中输入80，在Others选项组中勾选Force https://...sources to be fetched using http://...复选框，如图1-42所示。

（6）单击Close按钮，在Android SDK Manager窗口中选择Packages→Reload按钮，更新加载所有的Packages，勾选Packages下的Tools和Extras文件夹以及其他Android版本中的全部SDK Platform复选框，并单击Install 94 packages...按钮，如图1-43所示。

图1-42　Android SDK Manager - Settings窗口

图1-43　Android SDK Manager窗口

（7）在打开的Choose Packages to Install窗口中选中Accept License单选按钮，并单击Install按钮，如图1-44所示。

（8）稍等片刻，安装完成后选择Packages→Reload按钮进行更新，即可操作完成。

3. Android Studio开发工具介绍

Android Studio是一个集成的Android开发环境，基于IntelliJ IDEA。类似Eclipse ADT，Android Studio提供了集成的Android开发工具用于开发和调试。

图1-44　Choose Packages to Install窗口

下面详细介绍Android Studio各个模块的功能使用。

（1）运行和调试区域。

这个区域是运行和调试相关的操作，如图1-45所示。该区域操作从左到右，依次介绍如下。

①　Make Project：编译项目。

②　Select Run/Debug Configuration：当前项目的模块列表，用于运行或调试配置。

③　Run：运行。

④　Debug：调试。

⑤　Run with Coverage：测试显示模块代码的覆盖率。

⑥　Attach debugger to Android process：将debug进程添加到当前进程中，调试Android运行的进程。

⑦　ReRun：重启。

⑧　Stop：停止。

（2）Android设备和虚拟机区域。

这个区域主要是与Android设备和虚拟机相关的操作，如图1-46所示。该区域从左到右，依次介绍如下。

图1-45　运行和调试区域

图1-46　Android设备和虚拟机区域

①　AMD Manager：虚拟设备管理。

②　Sync Project with Gradle Files：同步工程的Gradle文件，一般在Gradle配置被修改时需要进行同步。

③　Project Structure：项目结构，主要作用是对项目结构进行设置。

④　SDK Manager：Android SDK管理器。

（3）文件资源区域。

这个区域主要是工程文件资源等相关的操作，如图1-47所示。该区域具体介绍如下。

①　项目中文件的组织方式，默认是Android，还可通过下拉列表选择Project、Packages、Scratches、ProjectFiles、Problems...等，最常用的是Android和Project两种。

②　定位当前打开文件在工程目录中的位置。

③　关闭工程目录中所有的展开项。

④　额外的一些系统配置，单击后打开一个弹出菜单，如图1-48所示。选中Autoscroll to Source和Autoscroll from Source两个选项后，Android Studio会自动定位当前编辑文件在工程中的位置，非常方便。

图1-47　文件资源区域

图1-48　在弹出的菜单中选择选项

（4）编写和布局区域。

这个区域是用来编写代码和设计布局的，具体如图1-49所示。该区域功能介绍如下。

图1-49　编写和布局区域

  • 打开文件的Tab页。
  • 布局编辑模式切换，一般使用Text模式，初学者可以使用Design模式编辑布局，再切换到Text模式。
  • UI布局预览区域。
  • 编写代码区域。

（5）输出区域。

这个区域大部分是用来查看一些输出信息的，如图1-50所示，该区域功能介绍如下。

图1-50　输出区域

  • Android Monitor（监控）：显示应用的一些输出信息。
  • Messages（信息）：显示工程编译的输出信息。
  • Terminal（终端）：Android Studio自带的命令行面板，用于进行命令行操作。
  • Run（运行）：显示应用运行后的一些相关信息。
  • TODO：显示标有TOTO注释的列表。
  • Event Log（事件）：显示一些事件的日志。
  • Gradle控制台（Gradle Console）：显示Gradle构建应用时的一些输出信息。

在使用Terminal时，需要配置环境变量，具体如下：

  • 在系统变量中配置变量名为ANDROID_HOME的变量，其值是sdk的安装目录，本书是D:\Android\sdk。
  • 将Android SDK中adb目录配置在path环境变量中，在系统变量path后面添加“%ANDROID_HOME%\platform-tools”，启动Android Studio即可。

1.7　开发移动网站基础

在开发移动网站时，首先需要记住的是，移动网站也只是一个网站。而最好的网站应当适用于所有浏览器及操作系统，或者说尽量多的浏览器及操作系统。除此之外，在为移动设备创建网站时，还需要考虑以下几个基本问题，本节就来进行详细介绍。

1.7.1　移动设备屏幕适配

移动设备的屏幕适配情况包括屏幕尺寸大小和分辨率。一般情况下，移动设备的屏幕尺寸要比台式计算机小。目前，主流智能手机包括以下几种标准尺寸：

  • 1280px×720px：如小米5.0尺寸的手机。
  • 1280px×800px：如魅族MX24.4尺寸的手机。
  • 1080px×1920px：如华为麦芒系列手机。

平板计算机不仅拥有越来越大的屏幕尺寸，而且在浏览方式上也有所不同。例如，大部分平板计算机以及一些智能手机都能够以横向或纵向模式进行浏览。这样，同一款设备，屏幕的宽度有时为1024px，有时则为800px或更少。

但通常，平板计算机提供了更大的屏幕空间，可以认为在大部分平板计算机设备上，屏幕尺寸为(1024~1280)px×(600~800)px。

在平板计算机上以标准格式浏览大部分网站都很轻松，因为其浏览器使用起来就像在计算机显示器上使用一样清晰简单。另外，iOS及Android系统中都有的缩放功能可轻易将难以阅读的微小区域放大。

1.7.2　移动用户需要的内容

在为移动设备设计网站时，需要记住用户不希望其浏览到的内容与在台式计算机上浏览到的内容是一样的。

例如，移动用户所在的位置经常发生变化，也就是说，他们通常在外走动，不是固定待在某个地方，在访问网站时通常带有特定目标。例如，一个在车里用手机访问餐厅网站的用户通常需要很快找到餐厅的地址及电话号码，若该移动网站没有在醒目的地方标出地址及电话号码，用户就会很快结束这次访问。

移动网站的内容不能受到限制。事实上，W3C建议，“无论用户使用的是哪种设备，都应为他们提供同样的，尽可能多的合理信息及服务”。

另外，移动网站经常爱犯的错误是在网站的移动版本上删减内容，尽管为移动用户调整内容结构，让他们能尽快找到重要信息是必要的，但若用户需要的内容并不在移动网站上，就应该让他们能够浏览网站的完整版本。

这并不是说设计人员不需要对他们的内容格式或位置进行调整，而是应当让移动用户有机会和台式机用户一样接触到同样的内容。

1.7.3　使用的HTML、CSS及JavaScript是否有效且简洁

在为移动设备编写网页代码时，并不需要特意为其编写结构良好的代码，但是需要坚持使用正确、标准格式的HTML、CSS以及JavaScript，能让页面在大部分设备中适用。另外，还可以通过HTML的有效验证来确认它是否正确、是否够简洁。

使用W3C验证器可以帮助用户检查HTML、CSS以及JavaScript是否有效且简洁，该验证器位于http://validator.w3.org。除此之外，它还可以验证RSS，甚至是页面上的无效链接。用户可以定期在这个验证器上检查网站，如图1-51所示。

图1-51　W3C验证器

另外，除了编写有效的HTML代码外，在为移动设备编写Web页面时应注意避免以下情况。

  • HTML表格——由于移动设备的屏幕尺寸很小，使用水平滚动相对困难，从而导致表格难以阅读，因此，需要尽量避免在移动布局中使用表格。
  • HTML表格布局——通常来说，在Web页面布局中，不应使用HTML表格，而且在移动设备中，这些表格会让页面加载速度变慢，并影响美观，尤其是在它与浏览器窗口不匹配时。另外，在页面布局中通常使用的是嵌套表格，这类表格会让页面加载速度更慢，并且让渲染过程变得更困难。
  • 弹出窗口——通常来讲，弹出窗口很让人厌烦，而在移动设备上它们甚至能让网站变得不可用，有些移动浏览器并不支持弹出窗口，还有一些浏览器则总是以意料之外的方式打开它们，通常会关闭原窗口，然后打开新窗口。
  • 图片布局——与在页面布局中使用表格类似，加入隐藏图像以增加空间及影响布局的方法经常会让一些老的移动设备死机或无法正确显示页面。另外，它们还会延长下载时间。
  • 框架及图像地图——许多移动设备都无法支持此类HTML特性。事实上，从实用性来讲，HTML 5的规范中已经丢弃了框架，但iframe除外。

另外，需要考虑的是，移动用户在访问网页时是需要为流量付费的，因此Web页面应尽可能的小，使用的HTML标签、CSS属性和服务器请求越少，网站就会越受欢迎。

提示：尽管需要尽量避免表格、弹出窗口及图像地图，但iOS和Android上的移动页面还是能够很好地处理它们。但它们无法处理框架，因为框架并不是HTML 5的一部分。

1.7.4　是否使用独立域名

许多网站的移动版本都有一个独立的域名，因此移动用户可以绕过常规网站直接访问其移动版。此类域名通常为m.exampe.com。总体而言，为移动网站设置独立域名的好处有以下几点。

  • 让用户更容易找到该移动网站。
  • 可以为移动网站的URL进行独立宣传，制造更多访问量。
  • 使用平板计算机或智能手机的用户通过更改域名便可以访问常规网站。
  • 与使用脚本为移动用户更改CSS样式相比，将移动用户检测出来并导向独立域名这一方法更为轻松。

1.7.5　网站需要通过怎样的测试

用户应当在尽可能多的移动设备上进行网站测试。尽管开发人员可以使用不同浏览器或模拟不同的屏幕尺寸来测试，但若不直接在移动设备上进行测试，仍有可能出现以下情况。

  • 移动运营商的数据包大小限制使得移动设备无法加载页面或图像。
  • 无法正确加载图像，或完全无法加载图像。
  • 无法水平滚动（在某些手机上几乎完全无法做到）。
  • 需要特定设备的功能，否则无法正确工作。
  • 不支持问价格式。
  • 使用模拟器——许多移动设备都有在线或离线模拟器，其中大部分是免费的，可以通过它们进行一些基础测试。
  • 租用设备——可以租用不同手机来测试应用在手机上的表现。
  • 购买一些手机——这是比较昂贵的选择，但对致力于在移动Web开发上做出成绩的人来说，这是一项不错的投资。
  • 寻求朋友和同事的帮助——这是测试网站最节省成本的做法，这种做法需要向身边的人借用手机或平板计算机，然后将网站放在在线Web服务器上进行测试。

最后，若想要进行移动开发，至少需要拥有一部移动设备来直接测试页面，在越多的设备上进行测试，网站就会变得越好。

1.8　测试工具

在移动应用开发过程中，测试是至关重要的一个环节，拥有好的测试工具不仅能实现事半功倍的效果，还能极大地降低开发者所需花费的时间和精力。本节就来介绍一些测试工具。

1.8.1　仿真器与模拟器

仿真器（Emulator），又称仿真程序，在软件工程中指可以使计算机或者其他多媒体平台（如掌上计算机、手机）运行其他平台上的程序。仿真器一般需要ROM才能执行，ROM的最初来源是一些平台的ROM芯片，通过一些手段将原程序拷贝下来（这个过程一般称之为dump），然后利用仿真器加载这些ROM来实现仿真过程。如图1-52所示为Genymotion仿真器，它是基于VirtualBox仿真器的。

在没有设备的情况下，最简单有效的测试工具就是模拟器。最好的模拟器是可以在桌面计算机上运行的模拟器。下面介绍几种常用的模拟器。

1. Android SDK模拟器

为开发者提供了Android应用测试、构建及调试所必备的API库和工具。该模拟器能够帮助开发者极大地提高开发效率，无论是开发还是调试，均可以快速完成，如图1-53所示为Android SDK模拟器界面。

图1-52　Genymotion仿真器

图1-53　Android SDK模拟器界面

2. BlackBerry模拟器

使用BlackBerry模拟器，开发者不仅可以直接在PC上查看、测试并调试BlackBerry应用，还可以对屏幕、键盘、触控板等能否完美配合应用程序进行测试，如图1-54所示为BlackBerry模拟器界面。借助BlackBerry模拟器，运行和调试应用程序，就如同在真实的BlackBerry设备上一样。

3. iPhoney模拟器

iPhoney是一款专门用于iPhone Web应用测试的模拟器，可以为开发者提供一个与iPhone实际大小相同的Web浏览环境，支持Safari，能够让开发者对应用设计进行完整的视觉质量测试。

图1-54　BlackBerry模拟器界面

1.8.2　在线测试模拟器

在线模拟器的效果比不上桌面模拟器，因为它们功能更少，不过使用起来很方便，常用的在线测试模拟器有以下几种。

1. dotMobi模拟器

能够允许开发者对某一特定的网站能否良好地适配移动Web浏览器进行测试，并且，还拥有一个从主页寻求额外支持的功能。

2. iPad Peek模拟器

在线测试网站iPad Peek在iOS开发者中口碑颇高，其能够直接在线模拟测试网站兼容性的功能也十分强大。支持横竖屏预览，无论是iPad还是iPhone，开发者只需登录iPad Peek网站，在其首页对话框中输入需要查看的域名地址，即可进行完美测试。此外，iPad Peek还支持本地预览。

1.8.3　软件自动化测试

如今自动化测试已经广泛应用于各种移动设备的测试中，这是因为自动化测试在测试过程中节约了时间，还能避免包括人为因素造成的测试错误和遗漏。自动化测试工具有很多，一些是开源的，还有一些则价格昂贵。因此，在众多的可供选择的自动化测试工具中，要选到合适的是比较困难的。

目前，大多数个人计算机的操作系统是Windows，而流行的移动操作系统是Android、苹果iOS、黑莓OS、Windows手机、Symbian和其他。下面介绍几款常用的自动化测试工具。

1. Robotium

图1-55　Robotium测试工具

Robotium是一款国外的Android自动化测试框架，主要针对Android平台的应用进行黑盒自动化测试，它提供了模拟各种手势操作（点击、长按、滑动等）、查找和断言机制的API，能够对各种控件进行操作（见图1-55）。Robotium结合Android官方提供的测试框架达到对应用程序进行自动化测试的目的。

2. Monkeyrunner

Monkeyrunner是一款流行的Android测试工具，用于自动化功能测试，如图1-56所示。Monkeyrunner可以连接到计算机或模拟真实设备运行测试。该工具有一个接口，用它来控制智能手机、平板计算机或外部模拟器的Android代码。

这个测试工具的缺点是，它必须为每个设备编写脚本。另一个问题是，每次测试程序的用户界面发生变化都需要调整测试脚本。

图1-56　Monkeyrunner测试工具

1.9　就业面试技巧与解析

1.9.1　面试技巧与解析（一）

面试官：我们公司已经拥有一个门户网站了，现在想让移动用户也能够使用它，请问你是如何确认这个网站是否提供了移动用户需要的功能的？

应聘者：最好的做法是直接咨询用户的意见，可以通过调查用户访问网站的途径以及对网站哪部分最感兴趣来得知用户需求。另外，也可以使用Web数据统计，若网站上没有相关数据分析器，建议安装Google Analytics或者Piwik等数据分析器来追踪用户在网站上的行为，在找出受欢迎的页面后，就可以确保移动用户也能很容易地访问这些页面。

也可以使用Web数据分析器来统计访问网站的浏览器类型（Firefox、IE、Chrome等），以及用户如何使用网站（用户单击的页面以及离开的页面等）。通过这种方法，即便没有获得直接的用户反馈，也可以根据用户当前的浏览习惯来调整网站。

1.9.2　面试技巧与解析（二）

面试官：除了使用内容管理系统来维护移动站点外，不知道你有什么推荐？

应聘者：对于我个人来说，我通常使用带有WordPress Mobile Pack的WordPress来维护移动网站及常规网站。

上一章目录下一章