第3章App开发 本章学习目标  掌握移动应用开发模式。  熟练掌握AppCan的使用方法。  熟练应用AppCan开发App。 3.1移动应用开发模式 移动应用有三种开发模式，分别是原生开发、移动Web开发和混合开发。 1. 原生开发 原生开发(Native App)，是指针对iOS、Android等不同的移动平台采用不同的技术进行开发。移动终端存在着众多的操作系统，目前具有代表性、占有绝对市场份额的操作系统包括苹果的iOS、谷歌的Android、微软的Windows Phone系统。开发原生应用，往往需要针对不同的系统，使用不同的编程语言、开发环境、工具、SDK、API等进行开发，而开发的安装包也只能安装在特定的平台上。例如苹果的iOS，需要采用的开发工具是xCode，生成的ipa安装包只能安装在iOS上； 谷歌的Android系统则采用Android Studio进行开发，生成的apk安装包只能安装在谷歌的Android手机上； 而微软的Windows平台，采用的开发工具是Visual Studio，生成的安装文件只能安装在Windows平台上。原生开发是专门针对某一类移动平台进行开发，可以完美调用设备接口API和利用平台特性，开发的程序运行速度快，在效率和性能上也是最优的，但是只能运行在指定的平台上。如果要开发一款能运行在多个平台的移动应用，需要针对不同的平台采用不同的技术分别进行开发，既浪费资源，也浪费人力，开发成本较高，因此跨平台是开发移动应用要解决的一个根本性难题。 跨平台是软件开发范畴的一个重要概念，指的是不依赖操作系统和硬件环境。如果一个操作系统下开发的应用程序，通过极少数的修改可以在另一个操作系统下顺利运行，就称此应用程序具有良好的跨平台特性。实现跨平台，能够“一次编写，多平台运行”，是移动开发的一个目标，也是大大减少软件开发和维护费用，提高软件生存周期的根本方法。 2. 移动Web开发 由于移动终端都带有浏览器，移动Web开发就采用了一个比较讨巧的办法，通过移动终端的浏览器访问移动Web应用，不同平台的手机通过浏览器都可以访问同一个应用，这样就实现了跨平台。这种开发方式类似于网站开发，移动端发出请求，服务器需要处理HTML、CSS、JS代码，再返回响应页面。移动Web开发的优点是开发效率高，而且成本低。但缺点也很明显，就是无法调用手机系统的一些硬件来实现拍照等高级功能，不适合高效率、高性能的场合。 3. 混合开发 混合开发(Hybrid App)结合了移动Web开发和原生开发两者的优势，采用HTML 5技术开发，开发完成后可以使用移动开发框架，把代码打包成iOS、Android或者Windows等各个平台的移动应用。通过一次开发多次打包，降低了开发成本，提高了开发效率。这种方式下服务器只是返回数据库里的数据，而页面的渲染是在移动端完成的。混合开发的优缺点介于前两种方式之间，开发成本和难度要比原生App小，性能和用户交互体验比移动Web要好，但是不如原生App。 移动Web开发和混合开发都采用HTML 5技术开发移动应用，均属于跨平台开发范畴。跨平台开发代表一种开发模式，目标是开发出的应用可以在不同的操作系统和硬件环境下运行，而应用程序代码不需要修改或者只需要小部分修改。 本书无论是App开发还是小程序开发，采用的都是跨平台的HTML 5技术。HTML 5技术，泛指HTML 5标准、CSS3、JavaScript 以及PHP、AJAX、JSON等技术交叉而成的新技术。而通俗地讲，HTML 5技术就是网页开发技术，只要会编写网页，就会跨平台技术，总体来说学习难度并不高。 3.2AppCan开发入门 3.2.1初识AppCan 本章将采用AppCan进行App开发。AppCan采用的是混合开发模式，即使用HTML 5技术开发移动应用，开发完成之后，再打包成iOS、Android等多个平台的移动应用，可以实现一次开发多平台适配，在各种分辨率的移动终端上均保持相同的体验。另外，AppCan采用可视化集成开发环境，很多工作都是通过界面操作，因此需要编写的代码比较少，即便没有编程基础，也完全可以胜任App开发。 在开发前，首先从教材配套的资源中下载安装包，如图3.1所示。双击安装包即可进行安装，安装过程采用默认安装。 安装完成后，AppCan应用程序的图标如图3.2所示。双击该图标，弹出的对话框，如图3.3所示，单击“跳过登录”按钮，将进入AppCan的集成开发环境。 图3.1AppCan安装包 图3.2AppCan图标 图3.3启动AppCan AppCan的集成开发环境如图3.4所示。其主体分为两个部分，左侧是项目资源管理器，组织了所有的项目文件，如图3.5所示； 右侧整个区域是UI设计器，如图3.6所示。 图3.4AppCan集成开发环境 图3.5项目资源管理器 图3.6UI设计器 UI设计器又分为以下三个区域。 （1） 左侧包含“组件”“布局树”两个标签，其中，“组件”标签页包含可以使用的UI框架和组件，“布局树”标签页以树形结构说明了当前页面使用的UI组件及其层次结构，通过布局树可以了解当前页面的整体布局，如图3.7所示。 （2） 中间为设计区，用来预览移动应用的页面效果，如图3.8所示。 （3） 当我们选中某个组件，即在设计区单击某个组件时，在UI设计器的右侧就会显示这个组件的属性，如图3.9是在设计区选中Header组件，右侧则显示Header组件的属性。 图3.7组件与布局树 图3.8设计区 图3.9组件的属性 3.2.2使用AppCan 下面来学习AppCan的常用操作。 视频讲解 案例一新建项目 使用AppCan开发App，首先要新建一个项目，步骤如下。 第一步： 在AppCan的集成开发环境中，单击菜单“文件”→“新建”→“AppCan项目”，如图3.10所示。 图3.10新建AppCan项目 第二步： 在弹出的“AppCan应用项目”窗口中，输入项目名称、应用名称、应用ID、应用KEY，单击“下一步”按钮，如图3.11所示。这里需要注意的是，项目名称尽量不要使用中文，使用英文或者数字即可，应用ID要求是不少于两位的数字。 图3.11“AppCan应用项目”对话框 第三步： 选择空模板，再单击“下一步”按钮； 进入模板主题设置页面，如图3.12所示。模板主题可以选择不同的颜色搭配，它会统一设置项目中所有页面的导航栏、按钮等的颜色，AppCan提供了五种可以选择的颜色主题，软件默认选择天际蓝。选择模板主题颜色之后，单击“完成”按钮，项目就创建成功了。本章所有的案例都将使用这里创建的demo项目。 图3.12模板主题 项目创建之后会生成一个phone文件夹，phone文件夹主要由assets、css、js三个子文件夹、config.xml配置文件、index.m文件和index.html文件组成，其中，css文件夹包含所有CSS文件以及图标、图片等资源文件，js文件夹包含所有的js文件，如图3.13所示。 图3.13AppCan项目的目录结构 在AppCan中，每个页面由一个扩展名为.m的设计文件和一个html文件组成，例如创建项目时，会默认生成一个index页面，该页面由index.m文件和index.html组成。双击index.m设计文件可以在设计器中进行可视化页面设计，如图3.14所示。在设计器中间的设计区可以即时看到设计的手机界面效果，并且当鼠标位于设计区中手机界面以外的灰色区域时，按住鼠标左键可以移动手机界面，也可以通过调整 右侧的滑块放大、缩小手机界面。单击“布局树”标签，可以看到index页面的组件层级结构如图3.15所示: 布局树的根节点是一个Page组件，Page组件里包含一个Header导航栏，还有一个ScrollContent组件； 当选中一个组件，即在设计区单击某个组件，可以看到设计区的顶部“设计器”右侧显示了当前组件的宽度和高度数值，例如在图3.15中可以看到选中的Header导航栏宽度为318px，高度是42px。 图3.14可视化设计index.m 图3.15常用操作 在UI设计器中完成index.m的设计之后，可以生成同名的html文件即index.html，并进行效果预览。例如在图3.16中，右击index.html，选择“预览”命令，可以预览页面的效果，如图3.17所示。这里可以看到导航栏的背景色与刚才选择的模板主题的颜色一致。 图3.16页面预览 图3.17页面效果 视频讲解 案例二新建AppCan页面 移动应用中往往包含多个页面，因此常用的操作还包括向项目中增加AppCan页面，并且进行页面设计、逻辑控制、保存、预览页面等操作，步骤如下。 第一步： 新建页面。在“项目资源管理器”中，右击phone文件夹→“新建”→“AppCan页面(可拖曳)”，如图3.18所示； 将页面命名为“new”，如图3.19所示。 图3.18新建AppCan页面 图3.19页面命名为new 第二步： 页面设计，在这个页面中要添加Page、Header、ScrollContent三个组件。在项目资源管理器中双击new.m，打开设计器进行页面设计，这时布局树只有一个Body，没有任何组件，如图3.20所示。下面就在页面中添加Page、Header、ScrollContent组件，如图3.21所示： 在AppCan中，Page组件作为页面的根节点，是必需的，单击“组件”标签页中的Page组件，单击设计区中的Page组件所在区域，使Page组件处于被选中状态，此时在“布局树”标签页中该组件被选中，如图3.22所示； 单击“组件”标签页中的Header和ScrollContent组件； 此时“布局树”标签页一共添加了三个组件(“布局树”标签页显示组件id。组件id是由组件类型、“_”、随机生成的六位数字字母三部分组成的通常只需关注组件类型)，并且组件的层级结构如图3.23所示。 图3.20向导生成的new页面 图3.21添加组件 图3.22Page组件被选中 图3.23new页面的组件层级结构 第三步： 根据Header组件的高度调整ScrollContent组件的上部余量，从而确保ScrollContent组件的滚动区域不被Header组件遮挡，如图3.24所示。其中，图3.24(a)是获取Header组件的高度，选中Header组件，即单击设计区中的Header组件所在区域时，在“设计器”旁边会显示白色的字体“w: 318px h: 42px”，表示Header组件的宽度和高度分别是318px、42px； 图3.24(b)是为了避免ScrollContent组件的滚动区域被Header组件遮挡，需要选中ScrollContent组件，在右侧“样式”标签页中设置“内边界”→“上”与Header组件的高度一致，都是42px。 图3.24设置ScrollContent的滚动区域不被导航栏遮挡 第四步： 保存页面设计，导出文件。单击“布局树”标签右侧的 按钮保存页面设计，如图3.25所示。单击 按钮会弹出“导出”下拉菜单，在下拉菜单中单击“导出全部”命令，如图3.26所示。将会生成同名的HTML文件、CSS文件、JS文件三个文件，这里分别是new.html文件、css目录下的new.css文件、js目录下的new.js文件，如图3.27所示。 图3.25保存页面设计 图3.26导出文件 图3.27生成的三个文件 第五步： 查看生成的文件，这里以new.html文件为例。在项目资源管理器中双击new.html，将打开文件，在代码编辑区的最左边有一列，右击该处并在弹出的菜单中单击“显示行号”，出现的数字代表代码所在的行号，如图3.28所示。再次右击选择“显示行号”，