![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=1738960049-ESPKm3lnODZAzd204hTVGiJg6zzXNL0M-0-808f8379421358ecb897e7c0f4ece1aa)
图2-1 注册APICloud账号
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P39_1297.jpg?sign=1738960049-g1peLLrKuG0fcJAJeJd5Ov6BxcibQLcG-0-5eeeeda9cedbd81b007724cfe2a962a9)
图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=1738960049-e81fVf9yFSjGRxrqZz1A3z46oLUx7ozV-0-2e60e7b96b3d090a23c5dad60f85c140)
图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=1738960049-hsz62zoSSOqkPcZLnsQDqfFHR91tbNJI-0-da505e949d488939ee9c7b46c5478991)
图2-4 登录IDE
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P40_1342.jpg?sign=1738960049-u0pqYrjWneGNBAcup86FeMp7tDJoXOmK-0-52cc8cd81d5a226e634f99b9457b1829)
图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=1738960049-b3T9lUQ8y74fc1x3DjemkU0BFK28inGP-0-fea7912dd30cd56c60edef2dd7dfdfb0)
图2-6 检出
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P40_1360.jpg?sign=1738960049-OcxT3yX79g0klnjpXjb5vZC3pmu32C1W-0-c2c17e957a787826016bec4b303a93ab)
图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=1738960049-Ka8AvN0k1pahoIEqyl7Vwa6xhAPy6P04-0-659694ec511a4c2ef683f5fc3cfc0f39)
图2-8 选择“云端同步”|“提交”命令
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P41_56646.jpg?sign=1738960049-FrIzW4z6rTgIpCPH5hIt7FyD7W7FAR1f-0-a2b43520c15dbc04263a1fb611baac31)
图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=1738960049-7UkBZrxWrgXlysg8ECgDQ7s8syCp4uWW-0-ee10f9dbef7ee79dcb7df326538588a6)
图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=1738960049-njFENF4a892SmzTpXofyomnvo3Qq74ft-0-74bfeac8bb954026d12a62c9edb00781)
图2-11 配置好真机
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P42_1437.jpg?sign=1738960049-cHwGOwxtcSdef1SUqg9pZcttUQSUi0HN-0-5be92f27e41efe3ae35ae87ecc10d102)
图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=1738960049-8mhZ58msH4UxeNN3hvrly326aXw42EGc-0-ab79eaae09c43fd048d4780062f93120)
图2-13 打开云编译
步骤02 填写“应用名称”,选择“生成平台(iOS或Android)”,单击“云编译”按钮,如图2-14所示。耐心等待编译完成。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P43_1486.jpg?sign=1738960049-r0Q8haE4i44gAujQehzey1U38CVvEOg3-0-cfda50ab2ceabba36f73663720115e58)
图2-14 填写相关信息
步骤03 完成后,用户扫描二维码就可以下载安装应用至移动设备了,如图2-15所示。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P43_1498.jpg?sign=1738960049-E6Nrt5qeQoNtlxlhqUbxYmwZK8Ue7yks-0-8e955744ff218e93770c5cc4d41cd87e)
图2-15 扫描安装