![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=1739316418-Q2UQOeJwqZ0f2SMWGiMqdV1id60OtG0y-0-8e4faf2de7671e92b6a5a792c6f093c9)
图2-1 注册APICloud账号
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P39_1297.jpg?sign=1739316418-ZEty0qkJvtDCwuRv7G8Xf0eSsC20oA3N-0-4025a3ee2474abfb9c18d0a8a5340a30)
图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=1739316418-9sEWshdnFXl9OrvUGiXWQqMGJvf8E1Ir-0-e35f421e6937492063b2ed5df0ebb1ae)
图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=1739316418-jSD0LbBE3M5GzklA96T5pl5lNwTGdbnv-0-987031c862a12ec242344d659f58c72c)
图2-4 登录IDE
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P40_1342.jpg?sign=1739316418-5A0SspTXdz6kUjORN34yenIO6VLFp9Lw-0-0377aa6bd13d10f2f77e270114cfbfbe)
图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=1739316418-QnVpIZ1mINwUjQaj0ihjCen5soedJVjg-0-2bd418330b437d02419c8460d6567383)
图2-6 检出
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P40_1360.jpg?sign=1739316418-Y1LIxwNF3RQN65paGboQd4hTD9hjbeDv-0-8089c570a1d06b6ffd3fb12b2a03fc03)
图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=1739316418-KFyhCIVCMXs37v8OIl4FAWbGPeMmViYV-0-cbcba4bfe0e267f25aad9be412d4831d)
图2-8 选择“云端同步”|“提交”命令
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P41_56646.jpg?sign=1739316418-G8KkmLgN9V8M1H6H4x9HeYtPcXXcUVbS-0-b2237b207de8b70072670acc5889b9f7)
图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=1739316418-umZyJG01DeLyguyLWsSLhOJGvCNGRSwo-0-528ca68f7d2359885e13c52f829a3e8c)
图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=1739316418-JAnCKrENiRnw2dEFBOqx3F2os9p8MpKK-0-91bd7549fb9679172bc260280b08c5f4)
图2-11 配置好真机
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P42_1437.jpg?sign=1739316418-jElDEgKxUMHGbtNex8WK80dsaZPsrXDS-0-9f7dd40d76b8d62c4d10eaec2cb96a2f)
图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=1739316418-k5L41bJV3ieweFrkLJjTvHvmsOern0UW-0-87e34f3472e2828417c7b6d6dc560eaf)
图2-13 打开云编译
步骤02 填写“应用名称”,选择“生成平台(iOS或Android)”,单击“云编译”按钮,如图2-14所示。耐心等待编译完成。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P43_1486.jpg?sign=1739316418-qSAZOW5qCkFsPYroQSBY51DGtd03K6fX-0-848df1a522df7efea25476c41dd19157)
图2-14 填写相关信息
步骤03 完成后,用户扫描二维码就可以下载安装应用至移动设备了,如图2-15所示。
![](https://epubservercos.yuewen.com/02A9E2/15056703705213406/epubprivate/OEBPS/Images/Figure-P43_1498.jpg?sign=1739316418-oRxmbrfhKhvkYLckTdihDre45DU8bUPi-0-044470c366cb8a017d38415fe634a52e)
图2-15 扫描安装