安装Cordova CLI
dsadaskjhfkjsadhfkljsadhsdlkj
node.js
。
{96D32B4A-B807-48DD-82B8-B3811D03552E}.png
1. cordova的安装:
- 1.1 安装cordova需要先安装node.js。
- 1.2 如果你没有安装git client，需要下载并安装一个git客户端。
- 1.3 使用node.js的依赖包管理工具npm来进行cordova安装。
打开终端输入如下命令：
sudo npm install -g cordova
*显示上面的内容说明cordova环境安装成功了*
<br >
2.创建cordova的项目
- 2.1 新建一个cordova的项目
打开终端输入如下命令，该命令可能需要一些时间来完成：
cordova create hello com.example.hello HelloWorld [--template templatePath]
| Parameter | Description | Notes |
|---|---|---|
hello参数是必填
|
将为你的项目生成一个hello目录 | www子目录是应用程序的主页，以及各种资源(css,js,img)，遵循共同的web开发文件命名规范。这些资源将存储在设备上的本地文件系统，而不是远程服务。config.xml文件包含重要的需要生成和分发应用程序的元数据。 |
com.example.hello 参数可选
|
App ID | 如果不填写这个参数，第三个参数就要省略，默认值是 io.cordova.hellocordova，但建议你填写一个适当的值。 |
HelloWorld参数可选
|
应用程序的项目名 | 这个参数的默认值是 HelloCordova，但建议你填写一个适当的值。 |
[--template templatePath] 参数可选，一般不填写
|
使用模板创建一个项目。 | 所有文件和文件夹的模板将被复制到新的项目。平台和插件可能包含在一个模板。这个参数是可选的。模板的路径可以是一个本地路径，NPM模块或Git URL。 |
- 2.2 添加平台
所有后续命令需要在项目的目录中运行，其范围内或任何子目录：
cd hello
在构建项目之前,您需要指定一组目标平台。你能够运行这些命令取决于您的机器是否支持每一个SDK,和你是否已经安装SDK。从Mac运行这些：
cordova platform add ios
*显示上面的内容就完成一个项目的创建操作*
- 迭代项目 在hello目录中运行下面的命令来构建项目：
cordova build
或 指定生成iOS平台的代码项目:
cordova platform add ios
<br >
3. cordova项目开发
- 3.1 cordova默认使用的 index.html 文件说明
打开路径中Xcode工程：
/Users/iwevon/Cordova/hello/platforms/ios/HelloWorld.xcodeproj
为了避免混淆，移除(Remove References) 两个文件/文件夹的引用
上图文件是cordova默认使用的 indecx.html 文件
- 3.2 Events
Cordova生命周期事件-
deviceready 当Cordova加载完成会触发
将index.html中的文本替换成如下文本：
-
deviceready 当Cordova加载完成会触发
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
// Now safe to use device APIs
alert(“onDeviceReady");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
<br >
<!DOCTYPE html>
<html>
<head>
<title>Pause Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("resume", onResume, false);
}
// device APIs are available
//
function onDeviceReady() {
document.addEventListener("pause", onPause, false);
}
// Handle the pause event
//
function onPause() {
console.log("onPause");
}
// Handle the resume event
//
function onResume() {
console.log("onResume");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
打开Safari，使用开发调试查看运行结果：
<br >
3.3 Plugin APIs
-
cordova-plugin-console
Cordova Console Plugin - 1> 安装
cordova plugin add cordova-plugin-console
显示上面的内容说明console插件安装成功了
- 2>示例
将index.html中的文本替换成如下文本：
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function consoleLog(){
console.log("console.log works well");
}
function consoleError(){
console.error("console.error works well");
}
function consoleException(){
console.exception("console.exception works well");
}
function consoleWarn(){
console.warn("console.warn works well");
}
function consoleInfo(){
console.info("console.info works well");
}
function consoleDebug(){
console.debug("console.debug works well");
}
function consoleAssert(){
console.assert("console.assert works well");
}
function consoleDir(){
console.dir("console.dir works well");
}
function consoleDirxml(){
console.dirxml("console.dirxml works well");
}
function consoleTime(){
console.time("console.time works well");
}
function consoleTimeEnd(){
console.timeEnd("console.timeEnd works well");
}
function consoleTable(){
console.table("console.table works well");
}
</script>
<style type="text/css">
button {
width: 200px;height:26px;font-size: 20px;padding: 1px;margin-left: 100px;
}
</style>
</head>
<body>
<div ><br/><br/>
<br/><button onclick="consoleLog()">consoleLog</button><br/>
<br/><button onclick="consoleError()">consoleError</button><br/>
<br/><button onclick="consoleException()">consoleException</button><br/>
<br/><button onclick="consoleWarn()">consoleWarn</button><br/>
<br/><button onclick="consoleInfo()">consoleInfo</button><br/>
<br/> <button onclick="consoleDebug()">consoleDebug</button><br/>
<br/><button onclick="consoleAssert()">consoleAssert</button><br/>
<br/> <button onclick="consoleDir()">consoleDir</button><br/>
<br/> <button onclick="consoleDirxml()">consoleDirxml</button><br/>
<br/><button onclick="consoleTime()">consoleTime</button><br/>
<br/><button onclick="consoleTimeEnd()">consoleTimeEnd</button><br/>
<br/><button onclick="consoleTable()">consoleTable</button><br/>
</div>
</div>
</body>
</html>
运行结果：
Safari+Xcode+Simulator运行结果
