Crodova使用总结
1.Mac机上Cordova环境配置
2.在已有iOS项目中集成Cordova
3.在Cordova中创建插件,实现h5与原生交互(以自己公司网页为例)
这部分网上有很多,但我写这篇初衷是个人笔记,所以再简单说一下
打开终端输入如下命令,该命令可能需要一些时间来完成:
cordova create hello com.example.hello HelloWorld
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. 在已有项目中添加Cordova
这部分有一篇文章写的很详细,就不啰嗦了
文章地址:http://www.jianshu.com/p/e982b9a85ae8
<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">
document.addEventListener("deviceready", yourCallbackFunction, false);
function buttonClick(){
Cordova.exec(successFunction, failFunction, "YourPluginName", "myMethod", ["回调方法"]);
}
function successFunction(){
alert("successFunction");
}
function failFunction(){
alert("failFunction");
}
script>
head>
<body>
<p>ExampleObjectp>
<button onclick="buttonClick()">自定义插件button>
body>
html>
上面的html内有一个自定义插件按钮,当点击按钮是,网页会发送一个事件
Cordova.exec(successFunction, failFunction, “YourPluginName”, “myMethod”, [“回调方法”]);。
参数 | 说明 |
---|---|
successFunction | 成功后的回调 |
failFunction | 成功后的回调 |
YourPluginName(LogoutAndExit) | 下方自定义的插件名称 |
myMethod(action_logout_exit) | 与OC该插件类中的方法名保持一致 |
parameter | 回调传递的参数 |
1. 在Plugins下创建OC插件类,这里以我们项目中的退出登录的事件为例,创建了一个CDVLogout类
CDVLogout类,类定义一个方法,此方法的方法名要与html中此按钮的点击事件下定义的方法名保持一致
方法内部就可以写你收到html的点击通知以后想要在原生上做的事情
#import
//#import
#import
@interface CDVLogout : CDVPlugin
-(void)action_logout_exit:(CDVInvokedUrlCommand*)command;;
@end
<feature name="LogoutAndExit">
<param name="ios-package" value="CDVLogout" />
<param name="onload" value="true" />
feature>
LogoutAndExit: html中定义的插件名称
CDVLogout: OC原生插件类
OK,至此该有的配置和代码都有了,应该就能测试了,因为代码里面涉及公司信息,所以不贴代码了
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
/*file:js文件路径
id:对应某插件中的某个具体功能
clobbers:js通过它去调用js插件中具体的方法
*/
{
"file": "plugins/org.apache.cordova.logoutandexit/www/LogoutAndExit.js",
"id": "org.apache.cordova.logoutandexit.LogoutAndExit",
"clobbers": [
"window.logoutandexit"
]
},
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-whitelist": "1.3.1",
"org.apache.cordova.logoutandexit": "0.1.0",
};
// BOTTOM OF METADATA
});
使用命令行工具,运行App的命令是:
cordova run
例如,我想在浏览器中运行 App,我就在终端里输入:
cordova run browser
然后,就会打开浏览器,就会运行App。
当然,如果我们想要在iOS 上运行 App,我们也可以输入:
cordova run ios
也可以到指定目录下打开iOS 工程文件
查看更多的关于运行App 的命令,可以输入 cordova help run。
附:相关文章
1.Cordova里一些常见的问题: http://blog.csdn.net/qy492019878/article/details/50894559
2.http://blog.csdn.net/hbl_for_android/article/details/51871029