1. 使用node.js的依赖包管理工具npm进行Cordova的安装
打开终端输入如下命令：
sudo npm install -g cordova
题外话，有安装就有卸载：
sudo npm uninstall cordova -g
1.png
2. 创建Cordova的项目
- 2.1 1新建一个Cordova的项目
cordova create hello com.example.hello HelloWorld [--template templatePath]
cordova create ccc com.example.ccc CCC
2.png
- 2.2 添加平台
所有后续命令需要在项目的目录中运行，其范围内或任何子目录：
cd Desktop/ccc
在创建项目之前，您需要指定一组目标平台：
cordova platform add ios
- 2.3 迭代项目 在ccc目录中运行下面的命令来构建项目：
cordova build
- 2.4 或指定生成iOS平台的代码项目：
cordova platform add ios
3.png
3 cordova项目
-
3.1 cordov 项目创建完成
4.png
- 3.2 Events Cordova声明周期事件
- deviceready 当Cordova加载完成会触发
将index.html中的文本替换成如下文本：
<!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>
运行结果:
5.png
- pause 当应用程序进入到后台会触发
- resumes 应用程序从后台进入到前台会触发
步骤: 替换 html 文本 -> 运行 iOS 程序-> 开发者调试 -> 模拟器进入后台再进入前台>
将index.html中的文本替换成如下文本：
<!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>
- 3.3 Plugin APIs
cordova-plugin-console Cordova Console Plugin
1> 安装
cordova plugin add cordova-plugin-console
6.png
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>
运行结果:
7.png
4 自定义插件(在 web端调用 oc 原生代码)
- 4.1 在config.xml文件中加入下面代码：
<feature name="YourPluginName">
<param name="ios-package" value="YourPluginName" />
<param name="onload" value="true" />
</feature>
如图:
8.png
- 4.1 创建一个XMFPlugin类, 实现下面的方法
(1) XMFPlugin.h 的实现
#import <Cordova/CDVPlugin.h>
@interface Plugin2 : CDVPlugin
// 本类插件方法 - 当在web调用时
- (void)YouMethod:(CDVInvokedUrlCommand*)command;
@end
（2）XMFPlugin.m 的实现
#import "Plugin2.h"
@implementation Plugin2
- (void)YouMethod:(CDVInvokedUrlCommand*)command{
NSLog(@"%@",command.methodName);
UIViewController *vc = [[UIViewController alloc] init];
UIButton *cancelBtn = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 30)];
[cancelBtn setTitle:@"返回" forState:UIControlStateNormal];
[cancelBtn addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];
[vc.view addSubview:cancelBtn];
[self.viewController presentViewController:vc animated:YES completion:^{
vc.view.backgroundColor = [UIColor redColor];
}];
}
- (void)back{
[self.viewController dismissViewControllerAnimated:YES completion:nil];
}
（3）编写index.html文件如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="cordova_plugins.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", yourCallbackFunction, false);
function skip(){
Cordova.exec(successFunction, failFunction, "Plugin2", "YouMethod", ["跳转"]);
}
function failFunction(error){
alert("error");
document.getElementById("returnValue").value = img;
}
function successFunction(img){
document.getElementById("returnValue").value = img;
document.getElementById("2").innerHTML = "<img src='"+img+"' />"
}
</script>
</head>
<body>
<p>点击下面按钮调用原生方法,跳转到下个页面</p>
<button onclick="skip()">跳转</button>
</body>
</html>
网友评论