三、How to develop cordova plugin @ iOS with XCode

注:本文为原创文章,欢迎转载,但是请注明出处:http://www.cnblogs.com/xdxer/p/4127220.html

 

一:什么是cordova插件

Plugin Development Guide : http://cordova.apache.org/docs/en/edge/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide

cordova 官方的插件包含了很多调用硬件设备、文件系统和网络请求的功能。所以cordova的插件所提供的功能可以概括为:用native代码实现了某些功能,并且给javascript提供了相应可以方便地调用的接口。

(插件的运作方式待我有空我会做分析的,主要就是对CDV的一系列的类的源代码的分析)

 

二:一些小细节

# iOS插件是由继承自CDVPlugin类的类实现的。

#在JavaScript方面提供了统一的调用方法:

    cordova.exec (  <successFunction>,          // 正确的返回了那就运行该js function   

                                 <failFunction>,                  // 失败地返回的话就运行该方法

                                 <serviceClass>,                 // 插件ObjC类

                                 <actionMethod>,             // 插件类中处理函数名字

                                  [<args>]                             // 传递给插件的参数

                              );

    从上面的结构我们可以进行一点猜测和分析:首先这些东西都会被装载在请求中,被UIWebViewDelegate中的一个处理请求的函数所处理,而且插件类和方法名都是通过字符串的方式进行传递的,所以可以大概猜测到cordova在底层实现中使用了objc_runtime 中的一些方法,比如objc_sendMsg,其实只要参考objc中的类是如何通过C语言中的结构体来表示的,就可以理解objc作为一个通过给对象传递消息来进行函数调用的语言的一个天生的优势了(当然调用的成本会很高,大多数时候可以用过IMP Caching方法进行效率上的优化)。再来看传递的参数,js所能传递的参数其实很简单,就那么几种,大多数都是字符串,要么就是一个对象,而对象又也许需要通过JSON来规范,而且偶尔也许会面临字符编码的问题(Unicode 万岁~)。

#在config.xml 插件属性中设置了 <param name =”onload” value = “true”/> 则可以在WebView load的时候进行对插件对象的初始化

#有的时候一个插件可能会运行很长时间( long-running request || background activity) 则需要实现onReset方法,当对javascript进行reload的时候就会调用(待研究)。

#可以使用block,在插件类中调用runInBackground。

三:Demo

 

首先在config.xml中加入这样的语句:

<feature name="PluginTest">
        <param name="ios-package" value = "ASPPluginTest"/>
</feature>

 

加入如下的插件类:

 

代码:

ASPPluginTest.h

//
//  ASPPluginTest.h
//  testCordova
//
//  Created by Xia Dongxiang on 14-11-27.
//  Copyright (c) 2014年 Xia Dongxiang. All rights reserved.
//

#import <Cordova/CDVPlugin.h>

@interface ASPPluginTest : CDVPlugin
{

}

- (void) test:(CDVInvokedUrlCommand *) command;

@end

ASPPluginTest.m

//
//  ASPPluginTest.m
//  testCordova
//
//  Created by Xia Dongxiang on 14-11-27.
//  Copyright (c) 2014年 Xia Dongxiang. All rights reserved.
//

#import "ASPPluginTest.h"

@implementation ASPPluginTest

-(void) test:(CDVInvokedUrlCommand *)command
{
    CDVPluginResult * pluginResult = nil;
    NSString *  string = [command.arguments objectAtIndex:0];
    if ([string isEqualToString:@"test"]) {
        pluginResult = [ CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"Test Successful!"];
    }
    else
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"ERROR STRING!"];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

 

 

在JS方面,我们可以这样调用:

          <script>
            var testPlugin = {
                success:function(string){
                        console.log(‘javascript success callback  : ‘+string);
                },
                fail:function(string){
                    console.log(‘javascript fail callback  : ‘+string);
                },
                test:function(){
                    cordova.exec(testPlugin.success,testPlugin.fail,"PluginTest","test",[‘test‘]);
                }

            };

        </script>
        <br><br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <button type = "button" onclick="testPlugin.test();" >Test My Plugin</button>

其中,我们把exec方法封装了,并且把success 和 fail 都装入了一个对象中,是为了出于调用方便性和防止重命名的考虑。

 

 

效果如图:

 

调用成功!

如果也有提示说调用速度比较慢使用了18ms,那么我们就可以用上面提到过的方法去优化,使用block + commandDelegate 的runInBacnground方法去解决这个问题!

时间: 2024-10-05 09:21:15

三、How to develop cordova plugin @ iOS with XCode的相关文章

[Cordova] Plugin开发架构

[Cordova] Plugin开发架构 问题情景 开发Cordova Plugin的时候,侦错Native Code是一件让人困扰的事情,因为Cordova所提供的错误讯息并没有那么的完整.常常需要花费大量的时间与精神之后,才发现只是一个字母打错,无形中降低了开发的效率. 解决方案 为了增加Cordova Plugin开发的效率,开发人员可以套用下列的开发架构,来加速开发: 将实际提供功能的Native Code,使用IDE封装为Native Library.在这个步骤中,使用IDE封装Nat

[Cordova] Plugin开发入门

[Cordova] Plugin开发入门 Overview Cordova的设计概念,是在APP上透过Web控件来呈现Web页面,让Web开发人员可以操作熟悉的语言.工具来开发APP.使用Web页面来呈现功能内容,的确可以满足大部分的功能需求,但是因为APP的使用情景毕竟有别于Web,某些APP的功能需求像是:拨打电话.扫描条形码...等等,无法单纯使用Web开发技术就能实现. 为了让Web页面能够满足更多的APP功能需求,Cordova提供了Plugin机制,让Web页面能够挂载并调用Nati

浅析 Cordova for iOS

转自@夏小BO的技术博客: Cordova,对这个名字大家可能比较陌生,大家肯定听过 PhoneGap 这个名字,Cordova 就是 PhoneGap 被 Adobe 收购后所改的名字.(Cordova网址以及框架下载地址:http://cordova.apache.org/) Cordova 是一个可以让 JS 与原生代码(包括 Android 的 java,iOS 的 Objective-C 等)互相通信的一个库,并且提供了一系列的插件类,比如 JS 直接操作本地数据库的插件类. 这些插件

cordova plugin 大全及安装命令

前言:用cordova开发hybrid app的过程中,由于是html5开发的app,在手机上很多权限受限制,这就导致了我们需要安装很多插件来弥补这一缺点.在网上搜了好久,感觉都不是很全,所以自己整理了一份cordova plugin清单. 1.获取当前应用的版本号 cordova plugin add cordova-plugin-app-version 2.获取网络连接信息 cordova plugin add cordova-plugin-network-information 3.获取G

cordova与ios native code交互的原理

非常早曾经写了一篇博客,总结cordova插件怎么调用到原生代码:cordova调用过程,只是写得太水.基本没有提到原理.近期加深了一点理解,又一次补充说明一下 js调用native 以下是我们产品中的代码片段: datePicker.show(options, function (date) { var month = date.getMonth() + 1; callback(null, date.getFullYear() + "-" + month + "-"

Cordova - 使用Cordova开发iOS应用实战1(配置、开发第一个应用)

Cordova - 使用Cordova开发iOS应用实战1(配置.开发第一个应用) 现在比较流行使用 html5 开发移动应用,毕竟只要写一套html页面就可以适配各种移动设备,大大节省了跨平台应用的开发时间.而不像以前一样 Android 要写一套程序,iOS 要写一套,甚至 Windows Phone 还要再写一套程序. 虽然使用H5开发的界面很容易适配各种手机设备,但由于系统的差异,如果要访问原生的设备功能(如摄像头.麦克风等)还是有些不便,或者说不是那么统一.这时我们可以借助 Cordo

cordova for ios: Unable to simultaneously satisfy constraints.

使用cordova开发ios项目的时候,在上传图片碰到一个问题.使用html的<input type="file"/>标签来选择照片或者拍照片,引起了布局报错,然后图片上传过程中很容易崩溃闪退. html页面代码: <html><head></head> <body> <input type="file" /> </body> </html> 然后在真机测试,点击选择文件

Cordova - 使用Cordova开发iOS应用实战5(获取手机里照片,并编辑)

使用Cordova可以很方便的通过js代码读取系统相簿里面的照片,同使用设备摄像头拍照一样,同样需要先添加camera插件. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运行如下命令: 1 cordova plugin add cordova-plugin-camera 可以看到camera相机插件已经成功添加了: 二,获取照片 我们可以选择是从“照片库(时刻)”中读取图片,或者从“相簿”中读取图片. 1,从“相簿”中获取照片                  1 2

Mac下利用Cordova打包 iOS App以及出现的问题

安装 cordova sudo npm install cordova 创建项目 创建一个demo文件夹,里面自动加载基本的文件以及目录 cordova create demo com.test.demo demo 把web工程拷贝到demo/www目录下 准备 $ npm install -g ios-sim $ npm install -g ios-deploy 安装这两个插件,参数-g是全局安装. add platform切换到demo目录下,因为之前demo项目已经有了cordova a