![jQuery Mobile移动应用开发实战(第3版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/789/26542789/b_26542789.jpg)
2.2 创建一个应用
在学习jQuery Mobile时笔者拒绝复杂的环境搭建,我们没有必要去了解复杂的环境,否则会反客为主,时间浪费在环境上。
2.2.1 创建跨平台应用
利用APICloud创建跨平台应用有两种方法:一种是在云端直接创建;一种是在APICloud Studio中创建。我们这里先在云端创建一个,然后在APICloud Studio中打开,让读者熟悉这两种界面的操作。
步骤01 首先注册一个APICloud账号,目前只支持手机注册,打开http://www.apicloud.com/signup,输入手机号码和接收的验证码,如图2-1所示。
步骤02 登录APICloud系统,点击左上角的“创建应用”按钮,如图2-2所示。选择“Native”选项卡,填写“名称”及“说明”,单击“创建”按钮,应用即创建完成。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P39_1296.jpg?sign=1734409652-tRFTKHc2buxQzEJ5sw2PePC7PwW6Ysg0-0-e381b16336d0b1180f814af16f208ab9)
图2-1 注册APICloud账号
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P39_1297.jpg?sign=1734409652-3QpWocfSH4ENHoYjYA01aiInQyEkSfbC-0-fb35b94d832b4aa73fe888f1391cb527)
图2-2 创建应用
步骤03 创建完成后,自动打开应用预览页http://www.apicloud.com/appoverview,这里可以看到应用的相关信息,留意一下应用ID,如图2-3所示,APICloud Studio会用到。其实此时应用已经创建完成,但这个应用没有任何内容。我们可以通过APICloud Studio来看看默认的应用会有什么内容。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P39_1315.jpg?sign=1734409652-TqN4N5DvpFxVmnIYuDnxBGko0kDXsGFe-0-8f91c9c044cf40a56ea3eef6681b49ba)
图2-3 应用ID
步骤04 下载APICloud Studio,在这个(http://docs.apicloud.com/Download/download)界面中下载“APICloud SDK”,它包括了APICloud Studio和一些插件。下载的安装包里有一个“APICloudStudio_win”文件夹,找到里面的APICloud.exe文件,不用安装可以直接运行。
步骤05 运行后出现登录界面,如果是第一次使用,则会出现一个设置工作文件夹的界面,这里不给图了,读者可以选择默认。利用上面注册的APICloud账号来登录APICloudStudio,如图2-4所示。登录后,选择左侧的“云端资源库”,根据APICloud创建的应用ID选择SVN项目,如图2-5所示。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P40_1341.jpg?sign=1734409652-G3CNS0XOHBFEucrU1owSShi0owTSwxgS-0-a9abbfd58cc6ab63094b2e22a016b592)
图2-4 登录IDE
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P40_1342.jpg?sign=1734409652-EJfEjobRPadvwvCXCTk2ObDr3qTUYobA-0-4693394c7ef8de771e302433956f6c07)
图2-5 选择SVN项目
提示
目前APICloud只支持Windows系统。
步骤06 右击项目,选择“检出为”命令,如图2-6所示。
步骤07 检出后出现“从SVN检出”对话框,直接单击“完成”按钮。这时我们的应用中已经包含了一些基本的HTML文件。我们采用传统的浏览方式,打开APICloud Studio的工作文件夹C:\APICloud\workspace\HelloApp,这就是新创建的应用,默认有一个index.html文件,选择在浏览器中打开它,如图2-7所示。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P40_1359.jpg?sign=1734409652-6AIgMObnnbK6YRW8yVo7KKULm2XKcv6S-0-42ee899687ceb9f010de3db63125bbe8)
图2-6 检出
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P40_1360.jpg?sign=1734409652-NVXVF63EBXJOOMd3VgEDt7Bzx85liM9U-0-bcd7c55a767421416df113ff9bef9d3e)
图2-7 第一个App效果
2.2.2 同步本地应用到云端资源库
开发者在APICloud Studio创建的应用会和云端资源库建立连接。项目代码改动后,可以使用APICloud Studio的代码提交功能提交代码到云端资源库。
操作流程:
步骤01 首先选择一个需要同步到云端资源库的项目,注意这个操作是在“我的App项目”选项卡下。
步骤02 右击该项目,选择“云端同步”|“提交”命令,如图2-8所示。
步骤03 在打开的“提交”对话框中输入提交信息后,单击OK按钮完成,如图2-9所示,即可提交项目代码到云端资源库中。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P41_56645.jpg?sign=1734409652-CiOOB0NFQ5C479TbPqkE2INDFAC6kmE8-0-3ff4d1e3b9490631bfa170f08f8872b9)
图2-8 选择“云端同步”|“提交”命令
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P41_56646.jpg?sign=1734409652-U3XpCLeYUVAjd88RqCCSJyrw5879MZgX-0-11cb6265b0c90dd27f6c69561a0fd21f)
图2-9 云端资源库
2.2.3 真机同步调试
APICloud提供了两种真机测试方式。
- WiFi真机同步:这种方式同步速度慢、效率低,环境兼容问题严重,而且需要安装手机驱动程序或手机助手、iTunes、iTools等各种辅助工具软件。
- USB真机同步:可以通过HTTP方式,同步工具插件中的App代码文件到真机上,由于当设备和工具插件在同一个WiFi环境下时,文件传输速度非常快,所以WiFi真机同步操作相比USB方式速度要快很多,并且工具插件中会进行智能处理,每次只同步只会更新有修改的文件。
如果使用真机同步,则必须在手机上安装AppLoader,从官方或本书提供的安装包中找到它的下载文件,安卓手机是.apk格式(可以直接安装),苹果手机是.ipa(需借助iTool等工具安装)。我们这里以“WiFi真机同步”测试下我们默认生成的HelloAPP。
步骤01 打开手机上安装的AppLoader,默认是一片空白,只有一个灰色圆球。单击这个圆球,弹出一个对话框,要求输入IP地址和端口号。
步骤02 可以通过选择APICloud的“帮助”|“查看WiFi真机同步服务器地址”命令来获取IP地址和端口号,如图2-10所示。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P42_1464.jpg?sign=1734409652-urLYla9FNZXRwoZ3UmUvHKkRwGHPZEUJ-0-cb674a18869a867cb0d36f5082e47934)
图2-10 IP和端口号
步骤03 输入IP和端口后,灰色圆球变为绿色圆球,如图2-11所示。
步骤04 此时在APICloud中右击项目名称,在弹出的快捷菜单中选择“WiFi真机同步”命令,移动设备上的AppLoader自动启动,即可实现真机同步调试(图2-12)。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P42_1436.jpg?sign=1734409652-8PMajBmKjxZyNRfrDJQmGF5bdnrFPHk0-0-4d07b4c6bd42cd23960e0200180caac6)
图2-11 配置好真机
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P42_1437.jpg?sign=1734409652-Zda5UGgGoZnSOdFrlSn6O9wOBGT16AnF-0-08816254a57050391b026f531a2eda66)
图2-12 测试App效果
2.2.4 云端编译打包
云端编译在浏览器中完成,不需要本地APICloud。
步骤01 在浏览器中登录APICloud,选中我们要编辑的项目,单击“云编译”按钮,如图2-13所示。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P42_1456.jpg?sign=1734409652-zyVT65ZAvEhKHffeQK1Y2CA3cz4Y3JC5-0-1783f0f145586a132649d0ecf1a7f93b)
图2-13 打开云编译
步骤02 填写“应用名称”,选择“生成平台(iOS或Android)”,单击“云编译”按钮,如图2-14所示。耐心等待编译完成。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P43_1486.jpg?sign=1734409652-6rCkxPrHd7hlLDkCd81BHxJ53rcNNPs5-0-dd0f1d5957bf444116f617bdfa705b52)
图2-14 填写相关信息
步骤03 完成后,用户扫描二维码就可以下载安装应用至移动设备了,如图2-15所示。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P43_1498.jpg?sign=1734409652-dXh3aW5loJnbkuk0MsQCNPUMiAdO1MC7-0-569a2d2bc8aa406669f1a75a099dae2e)
图2-15 扫描安装