cordova入门——创建cordova项目（二）

最新推荐文章于 2024-09-04 14:27:05 发布

weixin_34088583

最新推荐文章于 2024-09-04 14:27:05 发布

阅读量113

点赞数

文章标签：开发工具移动开发 javascript ViewUI

原文链接：https://my.oschina.net/wootz/blog/474865

版权

为什么80%的码农都做不了架构师？>>>

上篇博文讲了如何配置环境，这次可以搭建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直接安装到真机