Cordova接入流程及iOS插件开发调用
一、cordova环境配置
在我们开始使用Cordova设置之前，我们需要安装一些组件。
| 序号 |
软件和描述 |
| 1 |
NodeJS和NPM NodeJS是Cordova开发所需的平台。请查看我们的 NodeJS环境设置。 |
| 2 |
Android SDK 对于Android平台，您需要在您的机器上安装Android SDK。 以下是 Android环境设置的详细信息。 |
| 3 |
XCode 对于iOS平台，则需要在计算机上安装xCode。 以下是 iOS环境设置的详细信息。 |
安装Cordova
在os或Linux上
$ sudo npm install -g cordova
在Windows上
C:\>npm install -g cordova
二、创建APP
步骤1-创建Cordova项目
$ cordova create CordovaProject net.shengyuntong.hellocordova CordovaApp
CordovaProject 是创建应用程序的目录名称。
net.shengyuntong.hellocordova 是默认的反向域值。 如果可能，您应该使用自己的域值。
CordovaApp 是应用的标题。
步骤2-添加平台
在命令提示符下打开项目目录，在主目录下（即CordovaProject文件夹下）添加指定平台
$ cordova platform add ios --save
$ cordova platform add android --save
删除平台可以输入
$ cordova platform rm android
步骤3-构建和运行
在这一步，我们正在为指定的平台构建应用程序，所以我们可以在移动设备或模拟器上运行它。
输入如下命令可以使用命令行调起模拟器和iOS设备
$ npm install -g ios-sim$ npm install -g ios-deploy
编译代码
$ cordova build ios运行程序（可以直接运行，系统会编译后运行）
$ cordova run ios这个时候就可以看到一个app在模拟器上运行成功
三、文件结构
创建好的项目文件目录如下
platforms文件夹下存放着添加的平台的项目（如ios 可以在ios文件夹下找到项目进行调试打包）
plaugins文件夹下存放着已安装的插件，包括cordova原生插件、第三方插件、自定义插件
config.xml是cordova的配置文件
| 元素 |
描述 |
| widget |
这是我们在创建应用程序时指定的应用程序反向域值。 |
| name |
我们在创建应用程序时指定的应用程序名称。 |
| description |
应用程式说明。 |
| author |
应用程式的作者。 |
| content |
应用程序的起始页。 它位于 www 目录内。 |
| plugin |
当前安装的插件。 |
| access |
用于控制对外部域的访问。 默认的 origin 值设置为 * ，这意味着允许访问任何域。 此值不允许打开某些特定的网址来保护信息。 |
| allow-intent |
用于控制对外部域的访问。 默认的 origin 值设置为 * ，这意味着允许访问任何域。 此值不允许打开某些特定的网址来保护信息。... |
| platform |
构建应用程序的平台。 |
www文件目录是我们的工作目录，主要的代码编写就在这个目录下
index.html就是入口页面，css下存放样式文件，js下存放js文件，img文件夹下存放图片资源
四、代码编写
Cordova事件
| 序号 |
常用事件和描述 |
| 1 |
deviceReady 一旦Cordova完全加载，事件就会触发。这有助于确保在加载所有内容之前没有调用Cordova函数。 |
| 2 |
pause 当应用程序进入后台时触发事件。 |
| 3 |
resume 当应用程序从后台返回时，会触发事件。 |
| 4 |
startcallbutton 按下启动呼叫按钮时会触发该事件。 |
| 5 |
endcallbutton 当按下结束通话按钮时触发该事件。 |
使用事件的正确方法是使用 addEventListener ，如：
document.addEventListener("resume", callbackFunction, false);
function callbackFunction() {
alert('应用从后台返回!');
}Cordova 插件调用
我们以官方的网络状态插件为例
使用终端添加插件
$ cordova plugin add cordova-plugin-network-information
{{network}}
var vm2 = new Vue({
el: '#current_network',
data: {
network : '未知网络状态'
}
});
// 获取网络状态
function onGetNetworkClick(){
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.CELL] = 'Cell generic connection';
states[Connection.NONE] = 'No network connection';
// alert('Connection type: ' + states[networkState]);
vm2.network = states[networkState];
}点击后获取网络状态后效果如下
Cordova第三方插件调用
第三方插件可以通过搜索并找到对应的github地址进行安装
$ cordova plugin add https://github.com/nchutchind/cordova-plugin-streaming-media
//第三方插件
function onOtherClick(){
var videoUrl = "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.mp4";
// Just play a video
// window.plugins.streamingMedia.playVideo(videoUrl);
// Play a video with callbacks
var options = {
successCallback: function() {
console.log("Video was closed without error.");
},
errorCallback: function(errMsg) {
console.log("Error! " + errMsg);
},
orientation: 'landscape',
shouldAutoClose: true, // true(default)/false
controls: true // true(default)/false. Used to hide controls on fullscreen
};
window.plugins.streamingMedia.playVideo(videoUrl, options);
}效果如下
Cordova iOS自定义插件及调用
- 安装plugman
$ npm install -g plugman
2.创建插件
$ plugman create --name SYTTest --plugin_id cordova-plugin-syttest --plugin_version 1.0.0其中SYTTest为插件名 cordova-plugin-syttest为插件id 1.0.0为版本号
由于我按照指令反复未创建成功，所以下载了一份插件自己按照文件目录重新改了一个
这个四个文件是必须要有的文件否则插件无法安装
package.json文件主要记录插件的id、版本、支持平台、关键字、github地址、作者信息
{
"name": "cordova-plugin-syttest",
"version": "1.0.0",
"description": "an ios progressindicator which can dismiss automatically",
"cordova": {
"id": "cordova-plugin-syttest",
"platforms": [
"ios"
]
},
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [
"ios",
"progress",
"cordova",
"automatically"
],
"author": "lixuri",
"license": "MIT",
"bugs": {
"url": ""
},
"homepage": ""
}plugin.xml用于存插件的id、版本、名称、关联文件
其中
的name="SyttestIndicator"用就是js中调用插件的对象名称
SYTTest
src下存放着插件的平台及平台代码
www文件下存放着与原生桥接的js代码
3.插件代码编写
oc代码编写
-(void)showProgress:(CDVInvokedUrlCommand *)command
{
//所有插件都继承自CDVPlugin
//创建插件结果对象
CDVPluginResult*pluginResult =nil;
//获取回调id
NSString *callbackidStr = command.callbackId;
//获取参数数组
NSArray *args = command.arguments;
NSNumber *isOpaque = [command.arguments objectAtIndex:0];
NSNumber *time = [command.arguments objectAtIndex:1];
NSString *msg = [command.arguments objectAtIndex:2];
if (!isOpaque.boolValue) {
[SVProgressHUD setBackgroundColor:[UIColor clearColor]];
}
[SVProgressHUD showWithStatus:msg];
if (time) {
// 延迟time秒后消失
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(time.doubleValue/1000 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[SVProgressHUD dismiss];
});
}
if (callbackidStr != nil) {
if (args != nil) {
//成功回调
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
}else{
//失败回调
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"参数异常"];
}
//发送插件结果
[self.commandDelegate sendPluginResult:pluginResult callbackId:callbackidStr];
}
}js代码编写
var exec = require("cordova/exec");
function Progress() {};
// options : {
// isOpaque : ,//是否不透明
// time : ,//多久消失，ms
// msg : ,//提示信息
// successCallback : ,//成功回调
// errorCallback : //失败回调
// }
Progress.prototype.showAnnularWithLabel = function(options){
options = options || {};
var isOpaque = options.isOpaque || false;
var time = options.time || 3000;
var msg = options.msg || "";
var successCallback = options.successCallback || null;
var errorCallback = options.errorCallback || null;
//exec(, , , , []);cordova通过该函数与原声代码进行映射
//successFunction 插件调用成功回调方法
//failFunction 插件调用失败回调方法
//service 你定义的类名
//action 你定义的方法
//[] 参数数组
cordova.exec(successCallback, errorCallback, "CDVSYTTest", "showProgress", [isOpaque ,time ,msg]);
};
// options : {
// successCallback : ,//成功回调
// errorCallback : //失败回调
// }
Progress.prototype.dismissProgress = function(options){
options = options || {};
var successCallback = options.successCallback || null;
var errorCallback = options.errorCallback || null;
cordova.exec(successCallback, errorCallback, "CDVSYTTest", "dismissProgress", null);
};
//new一个Progress的类对象，并赋值给module.exports
var progressModel = new Progress();
module.exports = progressModel; 安装及调用自定义插件
配置好文件后使用命令
$ cordova plugin add /Users/lixuri/Desktop/cordova-plugin-syttest也就是 cordova plugin add 加上插件的本地目录
安装插件后我们回到index.html下调用自定义插件（一般在index.js下，这里赶时间调试直接编写在html文件里了）
//自定义插件
function onShowOCClick(){
var options = {
successCallback: function() {
console.log("调用自定义插件成功");
},
errorCallback: function(errMsg) {
console.log("调用自定义插件失败：" + errMsg);
},
isOpaque: true,//不透明
time: 5000, // 5秒
msg: '加载中...' // 内容
};
SyttestIndicator.showAnnularWithLabel(options);
}调用效果
其他开发规范、注意事项、插件请登录官网查阅官方文档
http://cordova.axuer.com/docs/zh-cn/latest/