cordova入门——创建cordova项目(二)

原创
2015/07/05 17:10
阅读数 4.3K

    上篇博文讲了如何配置环境,这次可以搭建cordova的项目了。

     在某个目录下创建cordova项目,打开命令行,输入:cordova create helloworld_prj "org.mycordova.helloworld" "HelloWorld"

    

    这条命令的作用是生成cordova项目目录,命令格式如下:

    cordova create <工程路径> <包名> <工程名>

    第一个参数就是创建的工程所在的目录(helloworld_prj),第二个参数是包名,第三个参数是程序显示名,即安装后手机界面显示的应用名称(HelloWorld)。

    好,我们看一下helloworld_prj下有点啥

config.xml:主要是cordova的一些配置,比如:项目使用了哪些插件、应用图标icon和启动页面SplashScreen,还有平台的配置。

hooks:存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_build、after_build。没怎么用过,不展开了。

platforms:平台目录,各自的平台代码就放在这里,可以放一下平台专属的代码,现在这个目录应该是空的,后面会介绍如何创建平台。

plugins:插件目录,安装的插件会放在这里。后面会有专门的文章介绍开发插件。

www:最重要的目录,存放项目主题的HTML5和JS代码的目录。app一开始打开的就是这个目录中index.html文件。


说完了目录,我们先添加对应的平台支持,cd到项目目录

命令cordova platforms add android 的作用就是在给项目添加android平台支持,如果添加其他平台的支持只要替换命令中的平台名称即可,如要添加IOS的支持,只要在项目目录下执行cordova platforms add ios即可。

执行完毕后看,我们再看看项目下的platforms目录下有点啥


platforms下多了一个android的目录,代表已经添加了android平台。

现在我们可在eclipse中导入项目了

选择导入android项目,记得导入的目录要选择platforms下的对应平台目录,这里是android

博主的目录是:E:\workspace\cordova\helloworld_prj\platforms\android

导入后可以看到两个项目:

导入cordova项目以后如果报错,请检查一下项目目录下的project.properties文件中的target属性,见下图

这个属性用来配置对应android的sdk版本,如果本机装的sdk比较老,可能会缺类,需要安装最新的sdk

完成这些后我们就能在eclipse中发布项目了,可以在虚拟机中测试

也可以在手机中直接看


打开程序看到的页面

上面是cordova项目的默认页面,现在我们添加些东西

打开网页helloworld_prj/www/index.html,修改为如下代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello world</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
   alert('Hello, cordova!');
}
</script>
</body>
</html>

再次推送项目

大功告成~~~

附上cordova常用命令列表

命令 说明
cordova create <工程路径> <包名> <工程名> 创建cordova工程,例如:cordova create helloworld_prj "org.zhangyafei.helloworld" "helloworld"
cordova build android 给cordova项目添加android平台。
cordova run android
编译和运行项目。
cordova install android
将编译好的应用程序安装到模拟器上。
cordova plugin add <插件完全限定名> 给项目添加插件。
cordova plugin remove <插件完全限定名> 删除插件。
cordova plugin list
查看插件列表。
cordova platforms add android 
添加平台支持。
cordova build android
编译代码
cordova emulate android
在模拟器上运行(前提是创建好AVD)
cordova serve android
在浏览器运行 
cordova run android
通过USB直接安装到真机


展开阅读全文
打赏
1
6 收藏
分享
加载中
更多评论
打赏
0 评论
6 收藏
1
分享
返回顶部
顶部