概述
第一个项目总是最激动,我们接着笔记一的内容,深入了解下cordova项目结构
1 典型Cordova项目开发流程见下图
2 Cordova项目文件框架分析
一个新的项目文件结构见下,包括config,hooks,platforms,plugins,www 五部分
2.1 config 里包含项目的基本设置,比如项目id,项目名称 等 ,打开看一下就明了。
2.2 hooks 包含脚本代码,用来自定义cli命令行执行代码。
2.3 platforms 生成各平台的原生代码,类似android,ios原生代码,每次debug会自动覆盖。
2.4 plugins 顾名思义,插件,各平台的原生api也是以插件的方式实现的,比如摄像头之类的,后面会详细学习。
2.5 www 这个就是项目的灵魂所在了,html5+css+js,就是标准的html5网站开发,我们主要代码就在这里,注意,www下的各文件夹以及index.html你可以换成任何你觉得合适的文件架构,并不需要按默认的来,比方说把css改为stylesheet,随便你了。
3 添加平台
cordova项目最终还是要在各平台上运行,那怎么实现各设备平台的支持的,举个例子,老板一天说这个app只需要支持android,过了2个礼拜,老板说,这个项目需要同时支持ios,这怎么办呢,easy,直接通过命令行实现支持即可
输入cordova platforms 即可显示当前支持的平台,见下图
需要生成android/ios平台的话,输入命令 cordova platforms add
$
cordova platforms add android
$
cordova platforms add ios
如果需要去除某个平台支持的话,输入命令cordova platforms remove
$
cordova platforms remove ios
4 添加虚拟机
4.1添加android 虚拟机,
如果是windows 直接打开avd manager,
如果是 mac机使用terminal进入android sdk 所在目录,然后输入
$ android avd
即可打开avd,选择右边create菜单,创建一个新模拟器,输入avdname,device,target,cpu/abi,skin,保存即可
注意:如果出现cpu/api,显示 no system images installed for this target的提示,见下图,那就说明你的android sdk 没有安装target 对应的android版本的system iamge的,打开android sdk manger 安装即可(在mac 上在命令行输入 android 就是打开sdk manager)
4.2 添加ios模拟机(仅针对mac机)
xcode应该已经安装了最新模拟器,如果需要安装更多版本的模拟器的话,选择xcode-preferences-components-simulators,双击对应版本的模拟器,下载即可
5 实体手机设置
如果有实体机,可以更便捷的通过usb调试,注意一点,如果是android机的话,需要打开设置-开发者选项-允许usb调试。
但手机默认设置里面是没有开发者选项这个菜单的,如果你没有这个选项,所以你需要打开设置-关于手机-版本号 ,对版本号狂点,系统就会提示你有了开发者选项,再去开发者选项去设置即可。
6 在虚拟机或者手机运行该项目
6.1我们刚建立的一个项目,怎么在手机上运行呢,很简单,输入cordova prepare,就会生成所有已加入的平台的原生代码
$
cordova prepare
如果你不想生成所有已添加的平台的源代码,只想生成指定平台的源代码的话,例如生成android平台的话,就添加平台名即可,见下
$
cordova prepare android
6.2 再输入cordova compile 编译
$
cordova compile
特别提示:android编译需要下载gradle,国内的网络环境下载gradle失败率非常高,如果下载压缩包不全,导致解压失败,并且重新输入命令也不再重新下载的话,
我们先看下下图的本地gradle包保存地址,下图就是unzip后面带的地址(users/用户名/.gradle/wrapper/dists/gradle-版本号-all/)
前往该地址,把该文件删除,(.gradle是隐藏文件夹,mac机可以通过finder-前往-前往文件夹,输入地址目录进入。)
再重新输入compile命令下载gradle编译即可
如果一直都无法下载成功的话,你可以手动去下载,源地址在输入编译命令的时候会显示,见下图:复制到浏览器下载,下载后把zip文件夹替换到本地gradle包地址,
再重新输入compile命令编译即可
6.3 更简单的命令就是直接输入cordova build ,这个与prepare+compile是一样的效果
$
cordova build
6.4 在模拟器执行cordova emulate ,这个会先执行builld,再调用模拟器,效果见下图
注意:如果你添加了多个平台,要运行指定平台的话,在cordova emulat 后加平台名称,类似下图
$
cordova compile java
出来的就会是java 模拟器,如下图
6.5 在实体机运行app
连上手机,直接运行cordova run ,会自动发布到手机上并运行,如下图
ios的话通过xcode打开platforms/ios/myfristproject.xcodeproj,在xcode里运行到iphone上,见下图
注,xcode 你需要先注册(交钱给apple)apple的开发者账号,并在xcode-preferences-account里面登入。
7 以上已经给出了创建,生成源代码,模拟器运行整个流程,
下面我们来建一个简单的实际app,就是github api搜索功能
我们打开www/index.html
把默认代码清掉,我们输入代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GitHub Search Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<input type="search" id="searchField">
<button id="searchButton">Search github</button>
<div id="results"></div>
</body>
</html>
打开www/js/index.js,清空并输入代码
/* global $,document,console */
$(document).ready(function() {
$search = $("#searchField");
$results = $("#results");
$searchButton = $("#searchButton");
$searchButton.on("click", function(e) {
var search = $search.val();
if(search === "") return;
//disable button while we search
$(this).prop("disabled",true);
$results.html("<i>Doing a search for "+search+"</i>");
//ok, hit the API
$.get("https://api.github.com/search/repositories",
{"q":search}, function(res,code) {
if(res.items && res.items.length) {
var s = "<h2>Results</h2>";
for(var i=0, len=res.items.length; i<len; i++) {
var entry = res.items[i];
s += "<p><strong>"+entry.name+"</strong><br/>";
s += "By: " + entry.owner.login+"<br/>";
s += "Updated: " + entry.updated_at+"<br/>";
s += entry.description;
s += "</p>";
}
$results.html(s);
}
$searchButton.prop("disabled",false);
});
});
});
保存,并运行,输入文本,点击搜索按钮,即可获得相关api,效果见下图:
8 尾声 一个简单的app就开发完成,虽然还很渺小,但不是很让人兴奋吗,开发一个多平台app is so easy