- 构建跨平台APP：jQuery Mobile移动应用实战（第2版） （跨平台移动开发丛书）
- 李柯泉
- 3353字
- 2024-10-30 00:11:24
3.1 开发环境的选择
jQuery Mobile能够成功的一个原因是它能够最大限度地简化开发者所遇到的困难，因此自然不能为它配上太复杂的开发环境。对于新手来说，还是使用一些比较简单的网页开发工具轻松一些。本节将介绍几款主流的编辑器——Sublime、Notepad++和WebStorm编辑器的使用方法及优缺点。
3.1.1 Sublime Text编辑器
Sublime Text是一个代码编辑器（Sublime Text2是收费软件，但可以无限期试用），也是HTML和先进的文本编辑器，如图3-1所示。Sublime Text是由程序员Jon Skinner于2008年1月开发出来，它最初被设计为一个具有丰富扩展功能的Vim。
图3-1 Sublime Text
使用Sublime Text的理由如下：
● 主流前端开发编辑器
● 体积较小，运行速度快
● 文本功能强大
● 支持编译功能且可在控制台看到输出
● 内嵌python解释器支持插件开发以达到可扩展目的
● ST支持的大量插件可通过Package Control进行管理
● Sublime Text是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。
因此建议读者一定要熟练掌握Sublime Text。
3.1.2 Notepad++编辑器
这是一款非常强大的编辑器，甚至有许多执拗的C++程序员，即使有Visual Studio这样的开发环境也仍然坚持要在Notepad中编辑代码，然后复制到Visual Studio中使用。可见他们对这款编辑器有着多么偏执的热爱，这也从侧面说明这款编辑器是不可取代的。
笔者刚开始并不喜欢这款编辑器，认为它之所以受到推崇不过是因为人云亦云的结果，直到真正面对海量的代码时才发现使用它是多么的便捷。
首先，在安装了Notepad之后，当右击某一文件时会自动加载Notepad打开的快捷方式，如图3-2所示，并且启动非常迅速。
图3-2 方便的快捷方式
这里先用它打开一个在后面章节会用到的例子，以便解释Notepad的另一个优秀的特性：便捷的代码折叠功能。再观察图3-3左侧表示代码行数的数字，好像不对，为什么13行后面会接着是31行呢？难道是bug？再看图3-4与图3-3有什么不同。
图3-3 将13行至31行之间的代码进行折叠
图3-4 展开代码
第13～31行之间的部分在图3-4中显示出来，而在图3-3中该处则是多出了一条横线，左侧也多出了一个被包含在方块中的“+”。这正是Notepad的一个优点，即可以方便地对部分代码进行隐藏而不影响代码的整体结构。
在HTML中，经常使用div标签来包含一些内容，而且常常会出现多个div相互嵌套的情况，这样即使有缩进也很难分清代码的层次，更别说布局了。但是有了Notepad++后，这一切就不再是问题了。
接下来再介绍Notepad的另一个出众的优点，即优秀的查找功能。它支持在多个文件中查找同一内容，图3-5是在多个范例中同时查找带有html字符串时给出的结果。当然它支持的不仅仅是简单的查找替换功能，是它还可以支持正则表达式的模糊查找，如图3-6所示。
图3-5 对多个文件进行查找
图3-6 Notepad具有强大的字符串查找功能
最后，Notepad++也是有代码提示功能的。在Notepad++中执行“设置”|“首选项”|“备份与自动完成”|“所有输入均使用自动完成”，即可打开Notepad++的代码提示功能，还可以自行对其中的内容进行扩展。
提示
在目录%windir%\Program Files\Notepad++\plugins\APIs\下存放的是代码提示的配置文件，打开后可以看到诸多形如<KeyWord name="! DOCTYPE" />的标签，其中name属性的值就是可以提示的内容，可以根据需要自行添加。
3.1.3 WebStorm编辑器
WebStorm（图3-7）是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”“最强大的HTML 5编辑器”“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
图3-7 WebStorm
WebStorm主要功能有：
（1）智能的代码补全。支持不同浏览器的提示，还包括所有用户自定义的函数（项目中）代码补全包含了所有流行的库，比如：JQuery、YUI、Dojo、Prototype、Mootools and Bindows。
（2）代码格式化。代码不仅可以格式化，而且所有规则都可以自己来定义。
（3）HTML提示。大家经常在JS代码中编写HTML代码，这十分痛苦，不过有了智能提示，就爽多了。而且HTML里面还能有JS提示。
（4）联想查询。只需要按着Ctrl键点击函数或者变量等，就能直接跳转到定义。
（5）代码重构。这个操作有些像Resharper，熟悉Resharper的用户应该上手很快，支持重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等。
（6）代码检查和快速修复，可以快速找到代码中的错误或者需要优化的地方，并给出修改意见，快速修复。
（7）代码调试。支持代码调试，界面和IDEA相似，非常方便。
（8）代码结构浏览。可以快速浏览和定位。
（9）代码折叠。功能虽小，不过胜在方便高效。
（10）包裹或者去掉外围代码。自动提示包裹或者去掉外围代码，一键搞定。
提示
WebStorm相对Sublime Text来说，比较耗内存。
3.1.4 在设备上测试应用
1．利用jQuery测试
开发移动应用自然要专注于测试在Opera、Safari、Chrome等浏览器下的效果，像IE 8和IE 6这样的浏览器就可以不考虑，所以我们选择jQuery2.1.4版本（在本书写作时，jQuery Moblie也只支持到这个jQuery版本）。为了有针对性地测试应用的显示效果，现在来介绍一种方法。
【范例3-1 利用jQuery获取屏幕的高度和宽度】
01 <! DOCTYPE HTML> <! --声明HTML 5-->
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>测试设备的分辨率</title>
06 <! --引用jQuery库文件-->
07 <script src="jquery-2.1.4.min.js"></script>
08 <script type="text/javascript">
09 function show()
10 {
11 $width=$(window).width(); //获取屏幕宽度
12 $height=$(window).height(); //获取屏幕高度
13 $out="页面的宽度是："+$width+"页面的高度是："+$height;
14 alert($out); //使用对话框输出屏幕的高度和宽度
15 }
16 </script>
17 </head>
18 <body>
19 <! --调用方法show()显示页面尺寸-->
20 <div style="width:100%; height:100%; margin:0px; " onclick="show(); ">
21 <h1>单击屏幕即可显示设备的分辨率！</h1>
22 </div>
23 </body>
24 </html>
保存后，可以将浏览器拖成一个手机屏幕的形状，点击屏幕的空白区域将会弹出对话框告诉开发者屏幕所占有的分辨率。如图3-8是使用Firefox查看浏览器窗口的分辨率。
图3-8 查看浏览器中的分辨率
然后可以按Ctrl+“加号键”或“减号键”配合鼠标拖动窗口形状的方式，使浏览器的显示区域恰好为所要适配的机型的分辨率，如图3-9中将屏幕分辨率调成了800×400像素。
图3-9 调整后的分辨率
注意
本书中大多数范例都是以这样的方式来展示结果的。
提示
要调整得与期望的完全一致是一件极其需要耐心的工作，笔者为了把宽度调成400而不是399就花了十几分钟，其实完全没有必要太在意这样小小的误差。几个像素的差距刚好可以用来保证更好的屏幕适应效果。
2．在微信Web开发者工具上测试
微信公众平台为开发者提供Web开发者工具，用于帮助开发基于微信的网页或者webapp。它是一个桌面应用，通过模拟微信客户端的表现使得开发者可以使用这个工具方便地在PC或者Mac上进行开发和调试工作。使用基于weinre的移动调试功能，支持X5 Blink内核的远程调试。利用集成的Chrome DevTools协助开发，如图3-10所示。
图3-10 微信web开发者工具上测试
3．利用Opera Mobile Emulator来测试
当然，利用jQuery来测试应用还有一定的缺陷，那么再来介绍一种更好的方法，就是利用Opera Mobile Emulator（Opera手机模拟器）来测试应用。它可以让用户在PC桌面上以手机的方式浏览网页，重现手机浏览器的绝大多数细节。由于大多数移动设备均采用了Opera的内核，因此几乎与真机没有任何差别。
下面给出一个下载链接，读者可以根据链接进行下载，也可以百度搜索这款软件的名称：
http://www.cngr.cn/dir/207/218/2011052672877.html
下载完之后经过简单的几步就可以运行了，不过运行之前还需要在本机架设一台服务器，方便对Web页面进行浏览，这里推荐一款软件XAMPP，它可以方便地在Windows中架设WAMP（Windows、Apache、MySQL、PHP）环境，具体的方法会在本书的实战环节介绍，当然读者也可以先行尝试。
安装完Opera Mobile Emulator后，可以双击它的图标开始运行，运行后的效果如图3-11所示。
图3-11 Opera Mobile Emulator的开始界面
可以直接在对话框的左侧选择以何种型号的手机显示，目前数据还不是非常完整，但是也足够使用。单击Launch按钮就可以打开浏览器了，这里选用了HTC Hero，如图3-12所示。
图3-12 在模拟器中打开百度主页
提示
这里建议要使用分辨率高一些的屏幕（指的是电脑屏幕）。笔者现在用的笔记本是1366 ×768的分辨率，在模拟Samsung Galaxy S时面积就不够用。
3.1.5 打包应用的方法
利用jQuery Mobile开发的应用主要有3种形式。
● 最常用的一种是与传统Web一样以网页的形式展示出来。尤其是最近一段时间以来，一部分PC端的网页也开始使用这种方式开发，都得到了不错的效果。
● 第二种形式是利用工具把程序打包成APP。笔者的初衷是有一种方法能够快速生成apk文件。而jQuery Mobile仅仅是一套轻量级的开源框架，要将它打包成apk文件就不得不依赖其他工具的帮助，如PhoneGap/Cordova。
● 第三种形式就是前面介绍的APICloud工具，第2章已经详细介绍过，这里不赘述。
PhoneGap/Cordova在2.9.0以后，不提供直接下载了，都需要用node.js来安装。Phonegap/Cordova的安装较复杂些，需要安装JDK、Apache ant、Android SDK、node js、Android Studio并且需要配置路径，然后在node js里面运行。我们这里简单介绍下，如果读者安装不上也可以参考完整的http://blog.csdn.net/wuyt2008/article/details/46341949文章介绍。当然如果感觉很复杂，还是使用前面介绍的APICloud，至少学习时可以简单操作。
（1）安装好node.js后，在命令行输入
npm install -g phonegap
如图3-13所示。
图3-13 安装PhoneGap/Cordova
（2）建立PhoneGap/Cordova项目，在node js里面输入：
phonegap create my-app
cordova platform add -save android
（3）输入之后在所选的目录里边会生成一些文件夹，如图3-14所示。
图3-14 目录文件
（4）利用Android Studio（此工具需要单独安装）打开新创建的项目my-app，如图3-15所示。运行这个项目的效果如图3-16所示。
图3-15 Android Studio打开项目
图3-16 在安卓设备上的测试结果