在第二天的开发中, 我们可以发现, 其实列出指定文件夹下的指定类型文件是一个常用的功能, 即它不仅在某个特定的app中会用到, 而且会在其他app中用到. 故我们最自然的想法是将其封装为一个模块, 然后可以在很多app中调用该模块. 这样做的好处是:
模块可以提高代码的重复利用率
在下一次我们将用APICloud来开发模块. 本次来熟悉下APICloud的基本使用.
安装APICloud
- 下载你最熟悉的编辑器. 我选择的是Sublime Text3(以下简称ST3), 可以用这里的注册码破解.
- 安装ST3包管理器: 详见Package Control的安装文档.
- 下载与编辑器对应的APICloud插件, 例如Sublime APICloud Plugins. 启动ST3, 点击
Preferences>Browse Packages..., 进入ST3的包目录. 将刚刚下载的插件解压到该目录. (似乎可以有个外层目录Sublime-APICloud-Plugins_v1.3.0不影响功能, 我是去掉这个外层目录, 直接copy四个目录到该包目录:APICloudWiFiSync,Sublime-APICloud-Loader,Sublime-APICloud-Package,Sublime-APICloud-Snippet)并重启ST3.
当你安装成功时, 新建一个
test.js, 输入apiready可以看到该函数的提示.
至此, 我们已经完成了APICloud的安装.
用APICloud开发第一个应用
作为第一个应用, 我们将演示如何使用APICloud的现成模块快速开发应用.
- 为你将要写的App新建一个工作目录, 例如
D:\APICLOUD. 将该目录拖入ST3的窗口, 选中该目录并右键弹出新建APICloud项目>空白应用, 此时会在下方要求输入app名, 例如ListMusic, Enter键后看到项目目录. - 需要修改的文件:
config.xml,index.html,html>main.html
逐个文件的修改
config.xml的修改
config.xml规定了app的基本属性, 我们需要修改的是id="A0000000000001"(选择性修改name, description, author, email, href), 其中id需要在云服务器上新建一个同名应用:
- 进入http://www.apicloud.com/console
- 点击创建应用>默认Native(原生)>填入名称
ListMusic以及说明. 成功后在左上角会看到ID:A6926508876734. 更新config.xml的ID即可.
index.html的修改
你可以修改index.html的h1, 最终的效果就是相当于一个网页的h1. 作为理解, 我们来看一下整个app的结构. 它非常类似一个网页. 例如, 在index.html中有个id='main'的div, 其后用JavaScript在该div中插入了一个新的Frame, 这个frame的内容是"html/main.html", 而高度由$api.offset(main).h获得, 位置由$api.offset(header).h获得. 具体代码摘录如下:
var header = $api.byId('header');
//适配iOS 7+，Android 4.4+状态栏
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var main = $api.byId('main');
var mainPos = $api.offset(main);
api.openFrame({
name: 'main',
url: 'html/main.html',
bounces: true,
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: mainPos.h
}
});
main.html的修改
理解了上述结构, 我们就知道main.html相当于是网页中的一个frame, 故它有frame title:Hello APP, 作为示例, 我们来演示如何使用模块audio播放一首在线歌曲.
首先打开audio的在线文档, 按照说明我们只需如下修改即可:
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
var player=api.require('audio');
player.play({
path: "https://ghost.vanabel.cn/content/images/other/beeps.mp3"
})
};
</script>
真机调试
通过数据线
打开开发者模式并启用USB Debug, 在ST3的ListMusic目录上右键:Android真机同步, 此时会自动下载并安装Apploader, 然后启动该应用, 你应该可以听到正在播放的音乐beeps.mp3.
通过wifi
一旦成功安装AppLoader后, 也可以通过无线的方式调试app.
- 在
ListMusic目录上右键:WiFi真机同步配置, 首先安装服务, 然后开启服务, 最后查看服务器ip:port. - 在手机的APPLouder上有个悬浮球, 点击输入对应的ip:port并连接, 成功后会变绿.
- 在
ListMusic目录上右键:WiFi真机同步或者WiFi全量真机同步即可.
网友评论