![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=1739513920-DY6dcQF3t3BunrcosF4WBMQGeV1M5lov-0-1eb7eda5b57fdefd5c4c3e0cca35aa00)
图2-1 注册APICloud账号
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P39_1297.jpg?sign=1739513920-ISexUaseyqCsx9A4m0yHdMtMsoOKm3Jl-0-7f1faffaef9cb156f6f95ec5d9221fab)
图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=1739513920-63NPOfMfQhp7Y4D56YbjQ9Qj6keUsNfs-0-3954a420783c6070d829ce4ec23f02ca)
图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=1739513920-nj20i5FhCMvI5DqmYCjSVhBdOFvLYL4R-0-8ad04c6070ea8f64fb623679c010c22e)
图2-4 登录IDE
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P40_1342.jpg?sign=1739513920-mfL9EPl2ACpZUQj9eSLiWnnko65gcisW-0-67b14da79727a0d5e86e920700425c96)
图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=1739513920-o6E4rdbSWtXse7R3xT6eCMeJJwN6KXxd-0-a753e26e989ff22d2a00c37a8e071c1f)
图2-6 检出
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P40_1360.jpg?sign=1739513920-owRFn7jyGR4VLrrMcnPLMop1gSGe5RWp-0-232507dc22b6373448f5b6b45c7638cd)
图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=1739513920-44QUxr0XB5UThibs0xLokgUK3iBWYU8f-0-92df1b42a4afcb6608ba5d761f10de93)
图2-8 选择“云端同步”|“提交”命令
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P41_56646.jpg?sign=1739513920-mbiBpp9PRNh8NM1trxuo00lLswQYjyuF-0-1c5b4d43248124aec719fda0f8763c30)
图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=1739513920-BgnzVeI3YbvTHSOyJmnPzLlv8gqnDkms-0-dba4e1c0740ad32504425968717e871d)
图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=1739513920-GKm2kEOcKzXSKqNmtkFXM1RM3EIEMh2S-0-beb3eda7b39a730de7a8fae18d44a9e2)
图2-11 配置好真机
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P42_1437.jpg?sign=1739513920-OjeZ4KRJ4CSUlxmVWDp0iQcaJDQ3KixZ-0-d997547cb178d670a905abca3a6ce492)
图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=1739513920-gfRsmDnyilxHcxGC0B1A1AVcKJSjTnjq-0-063333fad067a341fe52542b9338e98e)
图2-13 打开云编译
步骤02 填写“应用名称”,选择“生成平台(iOS或Android)”,单击“云编译”按钮,如图2-14所示。耐心等待编译完成。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P43_1486.jpg?sign=1739513920-LiyRr9HG8UZ7jE1YBRNzpuRW5rPdML0C-0-0c1e74439fc42799d74d30330741c0c8)
图2-14 填写相关信息
步骤03 完成后,用户扫描二维码就可以下载安装应用至移动设备了,如图2-15所示。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P43_1498.jpg?sign=1739513920-DgS2Ns1OHoOyUFGPiCNUlXRICqvCO3ow-0-4a50fd55e834ffcefe5a85cde6126dbe)
图2-15 扫描安装