如何在IOS中使用Cordova插件
一、准备
插件功能:打开IOS相机
1:创建插件
plugman create --name [插件名称] --plugin_id [插件ID] --plugin_version [插件版本号]
plugman create --name CameraDemo --plugin_id cordova-plugin-camerademo --plugin_version 1.0.0
2:添加IOS平台
plugman platform add --platform_name ios
3:创建package.json文件
以下两种都可以生成package.json
1:使用命令 “npm init” 创建package.json文件
2:plugman createpackagejson [插件路径]
原应用使用的ionic UI框架,没有package.json无法安装插件
最终插件目录结构
除了ViewController.h和ViewController.m文件,其余的文件通过上述步骤都会自动生成
二、过程
创建文件ViewController.h和ViewController.m
ViewController.h
#import <UIKit/UIKit.h> @interface ViewController : UIViewController{ } @property (nonatomic,strong) UIImagePickerController *imagePicker; - (void)getDeviceInfo; //获取ios设备信息 - (void)OpenCamera; //打开ios相机 @end
ViewController.m
#import "ViewController.h" @interface ViewController () @end @implementation ViewController - (id) init{ NSLog(@"=======================相机初始化"); self = [super init]; self.imagePicker = [[UIImagePickerController alloc] init]; return self; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UIButton *button =[[UIButton alloc]init]; [button setTitle:@"我是按钮" forState:(UIControlStateNormal)]; [button setTitleColor:[UIColor redColor] forState:(UIControlStateNormal)]; [button setTitleColor:[UIColor blueColor] forState:(UIControlStateHighlighted)]; [button setBackgroundColor:[UIColor yellowColor]]; [button setFrame:CGRectMake(10, 50, 100, 30)]; //事件 //[button addTarget:self action:@selector(click) forControlEvents:(UIControlEventTouchUpInside)]; [self.view addSubview:button]; UIButton *deviceBtn =[[UIButton alloc]init]; [deviceBtn setTitle:@"查看设备信息" forState:(UIControlStateNormal)]; [deviceBtn setTitleColor:[UIColor redColor] forState:(UIControlStateNormal)]; [deviceBtn setTitleColor:[UIColor blueColor] forState:(UIControlStateHighlighted)]; [deviceBtn setBackgroundColor:[UIColor yellowColor]]; [deviceBtn setFrame:CGRectMake(120, 50, 200, 30)]; [deviceBtn addTarget:self action:@selector(getDeviceInfo) forControlEvents:(UIControlEventTouchUpInside)]; [self.view addSubview:deviceBtn]; UIButton *openCameraBtn =[[UIButton alloc]init]; [openCameraBtn setTitle:@"打开相机" forState:(UIControlStateNormal)]; [openCameraBtn setTitleColor:[UIColor redColor] forState:(UIControlStateNormal)]; [openCameraBtn setTitleColor:[UIColor blueColor] forState:(UIControlStateHighlighted)]; [openCameraBtn setBackgroundColor:[UIColor yellowColor]]; [openCameraBtn setFrame:CGRectMake(330, 50, 200, 30)]; [openCameraBtn addTarget:self action:@selector(openCamera) forControlEvents:(UIControlEventTouchUpInside)]; [self.view addSubview:openCameraBtn]; } - (void)getDeviceInfo{ NSLog(@"获取设备信息。。。。"); NSString *name = [[UIDevice currentDevice] name]; NSString *systemName = [[UIDevice currentDevice] systemName]; NSString *systemVersion = [[UIDevice currentDevice] systemVersion]; NSString *model = [[UIDevice currentDevice] model]; NSString *localizeModel = [[UIDevice currentDevice] localizedModel]; UILabel *nameL = [[UILabel alloc] init]; UILabel *systemNameL = [[UILabel alloc] init]; UILabel *systemVersionL = [[UILabel alloc] init]; UILabel *modelL = [[UILabel alloc] init]; UILabel *localizeModelL = [[UILabel alloc] init]; [nameL setText:name]; [systemNameL setText:systemName]; [systemVersionL setText:systemVersion]; [modelL setText:model]; [localizeModelL setText:localizeModel]; [nameL setTextColor:[UIColor blueColor]]; [systemNameL setTextColor:[UIColor blueColor]]; [systemVersionL setTextColor:[UIColor blueColor]]; [modelL setTextColor:[UIColor blueColor]]; [localizeModelL setTextColor:[UIColor blueColor]]; CGFloat x = 10; CGFloat y = 80; CGFloat width = 200; CGFloat height=20; nameL.frame = CGRectMake(x, y+20, width, height); systemNameL.frame = CGRectMake(x, y+40, width, height); systemVersionL.frame = CGRectMake(x, y+60, width, height); modelL.frame = CGRectMake(x, y+80, width, height); localizeModelL.frame = CGRectMake(x, y+100, width, height); [self.view addSubview:nameL]; [self.view addSubview:systemNameL]; [self.view addSubview:systemVersionL]; [self.view addSubview:modelL]; [self.view addSubview:localizeModelL]; } - (void)openCamera{ //NSLog(@"打开摄像头。。。。"); //UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init]; self.imagePicker.editing = YES; self.imagePicker.delegate = self; self.imagePicker.allowsEditing = YES; if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]){ NSLog(@"选择相机。。。"); self.imagePicker.sourceType = UIImagePickerControllerSourceTypeCamera; } [self presentViewController:self.imagePicker animated:YES completion:nil]; } @end
这两个文件其实是我已经在ios原生项目下编译运行过的文件,然后被CameraDemo.m调用。(其实有点类似于库的作用)
直白一点就是。有一个库(ViewController.h和ViewController.m),提供了一个类ViewController,这个类提供了两个方法
- (void)getDeviceInfo; //获取ios设备信息
- (void)OpenCamera; //打开ios相机
然后CameraDemo.m去实例化了这个类
CameraDemo.m
/********* CameraDemo.m Cordova Plugin Implementation *******/ #import <Cordova/CDV.h> #import "ViewController.h" //这里必须继承CDVPlugin 类,表示CameraDemo是Cordova插件类 @interface CameraDemo : CDVPlugin { // Member variables go here. } @property (nonatomic,strong) ViewController *view; //声明一个ViewController - (void)coolMethod:(CDVInvokedUrlCommand*)command; //创建插件自带的方法,可以删除 - (void)openCamera:(CDVInvokedUrlCommand*)command; @end @implementation CameraDemo - (void)pluginInitialize{ NSLog(@"===========================初始化CameraDemo"); [super pluginInitialize]; // 实例化ViewController self.view = [[ViewController alloc] init]; } //创建插件自带的方法,可以删除 - (void)coolMethod:(CDVInvokedUrlCommand*)command { CDVPluginResult* pluginResult = nil; NSString* echo = [command.arguments objectAtIndex:0]; if (echo != nil && [echo length] > 0) { pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo]; } else { pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR]; } [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; } - (void)openCamera:(CDVInvokedUrlCommand*)command { // 将ViewController的实例viewController 显示出来 [self.viewController presentViewController:self.view animated:YES completion:nil]; //ViewController *view = [[ViewController alloc] init]; //[view openCamera]; //CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];; //[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; } @end
CameraDemo.js
var exec = require('cordova/exec'); exports.coolMethod = function (arg0, success, error) { exec(success, error, 'CameraDemo', 'coolMethod', [arg0]); }; exports.openCamera = function (arg0, success, error) { exec(success, error, 'CameraDemo', 'openCamera', [arg0]); };
plugin.xml (这个文件非常非常的重要,js可以调用oc全靠它,多查查资料)
<?xml version='1.0' encoding='utf-8'?> <plugin id="cordova-plugin-camerademo" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>CameraDemo</name> <js-module name="CameraDemo" src="www/CameraDemo.js"> <clobbers target="cordova.plugins.CameraDemo" /> </js-module> <platform name="ios"> <config-file parent="/*" target="config.xml"> <feature name="CameraDemo"> <param name="ios-package" value="CameraDemo" onload="true"/> </feature> </config-file> <source-file src="src/ios/CameraDemo.m" /> <header-file src="src/ios/ViewController.h" /> <source-file src="src/ios/ViewController.m" /> </platform> </plugin>
package.json (一般不需要修改)
{ "name": "cordova-plugin-camerademo", "version": "1.0.0", "description": "", "cordova": { "id": "cordova-plugin-camerademo", "platforms": [ "ios" ] }, "keywords": [ "ecosystem:cordova", "cordova-ios" ], "author": "", "license": "ISC" }
CameraDemo.js 通过 plugin.xml 配置去调用了原生的ocject-c方法
最后
Cordova项目调用插件
重要,如果调用和插件中的plugin.xml配置有关,所以plugin.xml非常重要
// 在项目的 ts文件中调用 declare let cordova:any cordova.plugins.CameraDemo.openCamera();
以上就是如何在IOS中使用Cordova插件的详细内容,更多关于IOS使用Cordova的资料请关注猪先飞其它相关文章!
相关文章
- 这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下...2015-12-14
iOS APP h5快捷程序 .mobileconfig的生成
1.从APP Store 下载Apple Configurator 2从一个管理点管理所有iOS设备应用程序,文档和配置文件。想要确保您的所有家庭成员在其每台iOS设备上都有类似的应用和文档,管理日益增...2021-12-23iOS设置UIButton文字显示位置和字体大小、颜色的方法
这篇文章给大家分享了iOS如何设置UIButton的文字显示位置和字体的大小、颜色,文中给出了示例代码,相信对大家的学习和理解很有帮助,有需要的朋友们下面来一起看看吧。...2020-06-30- 这篇文章主要为大家详细介绍了iOS如何将图片裁剪成圆形,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
- 这篇文章主要给大家介绍了关于iOS给border设置渐变色的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-09
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03- 在页面开发中,经常遇到需要用户输入日期的操作。通常的做法是,提供一个文本框(text),让用户输入,然后,编写代码验证输入的数据,检测其是否是日期类型。这样比较麻烦,同时,用户输入日期的操作也不是很方便,影响用户体验。如果使...2015-10-30
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
这篇文章主要介绍了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-20- 这篇文章主要介绍了iOS新版微信底部返回横条问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
- 一个简单的jQuery分页插件,兼容AMD规范和requireJS./** * jQuery分页插件 * */;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } els...2015-11-08
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能效果图:先到官网(http://plugins.jquery.com/cookie/)下载cookie插件,放到相应文件夹,代码如下:复制代码 代码如下: <!DOCTYPE ht...2015-03-15
- 这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下...2016-05-09
- 这篇文章主要介绍了vue+axios全局添加请求头和参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-24
- 这篇文章主要给大家介绍了关于iOS蓝牙设备名称缓存问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
- 这篇文章主要介绍了vue中使用swiper 插件出错问题及解决办法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-22
- Query架构的开发人员能够创建一个插件代码来扩展其功能,从而能够产生一些最好的插件,让你的网站或任何给定的项目达到一个全新的水平。 ...2016-04-27
- 这篇文章主要介绍了iOS新版微信底部工具栏遮挡问题完美解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
- 这篇文章主要为大家详细介绍了jquery插表单件form使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
解决jquery插件:TypeError:$.browser is undefined报错的方法
首先先说一说$.browser browser就是用来获取浏览器基本信息的。 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需...2015-11-24