如何在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的资料请关注我们其它相关文章!

(0)

相关推荐

  • iOS tableView多输入框如何获取数据

    前言 难得有点空暇的时间,写写文章,一壶小茶,惬意.扯远了,言归正传. 大家在做App开发的时候,肯定遇到过在一个列表中有多个让用户填写资料的情况,类似于这样的界面: iOS 如果一个tableView中有很多的输入框,而且cell是复用的,这个还有个提交功能 我的设计思路是这样的 1.建立一个Model对象,包含要输入的所有字段, 2.在建立一个cell,有个label和textField, 3.在初始化cell的地方,根据不同的indexRow,显示cell上不同的label,例如昵称.邮箱

  • iOS UIBezierPath实现饼状图

    本文实例为大家分享了iOS UIBezierPath实现饼状图的具体代码,供大家参考,具体内容如下 首先看效果图: 代码: #import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN @interface CircleView : UIView @property (nonatomic, copy) NSArray<NSNumber *> *valueArray; @end NS_ASSUME_NONNULL_END // #define S_W

  • 详解 iOS 系统中的视图动画

    动画为用户界面的状态转换提供了流畅的可视化效果, 在 iOS 中大量使用了动画效果, 包括改变视图位置. 大小. 从可视化树中删除视图, 隐藏视图等. 你可以考虑用动画效果给用户提供反馈或者用来实现有趣的特效. 在 iOS 系统中, Core Animation 提供了内置的动画支持, 创建动画不需要任何绘图的代码, 你要做的只是激发指定的动画, 接下来就交给 Core Animation 来渲染, 总之, 复杂的动画只需要几行代码就可以了. 哪些属性可以添加动画效果 根据 iOS 视图编程指南

  • 如何在IOS中使用IBeacon

    什么是iBeacon? iBeacon 是苹果公司2013年9月发布的移动设备用OS(iOS7)上配备的新功能.其工作方式是,配备有低功耗蓝牙(BLE)通信功能的设备使用BLE技术向周围发送自己特有的 ID,接收到该 ID 的应用软件会根据该 ID 采取一些行动. 从个人的角度看: iBeacon向四面八方不停地广播信号,就像是往平静的水面上扔了一块石子,泛起层层涟漪(俗称水波),波峰相当于 iBeacon 的RSSI(接受信号强度指示),越靠近中心点的地方波峰越高(RSSI 越大),这个波峰的

  • iOS实现循环滚动公告栏

    本文实例为大家分享了iOS实现循环滚动公告栏的具体代码,供大家参考,具体内容如下 封装了一个继承于UIView的类,如下: #import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN @interface XtayNoticeScrollView : UIView - (instancetype)initWithFrame:(CGRect)frame titleArray:(NSArray<NSString *> *)titleArray; -

  • IOS接入facebook详解

    facebook 接入 1.在 facebook 后台 配置 ios 平台, 获取 fb appid store id 可以先随便找一个已存在的填入进去. 2.CocoaPods 引入几个核心库 pod 'FBSDKCoreKit', '~> 9.0.1' pod 'FBSDKLoginKit', '~> 9.0.1' pod 'FBSDKShareKit', '~> 9.0.1' pod 工程构建出 静态库丢到 /Users/XXX/Library/Developer/Xcode/De

  • iOS给border设置渐变色的方法实例

    前言 本文将从4行代码出发给一个view设置渐变色,分别会谈到几个重要的渐变色相关属性,在使用过程中有几个需要特别关注的点. 给一个view的border设置渐变色是比较高阶的用法,希望本文可以在这个方面帮助到你. 给view设置渐变色 通过4行代码就可以给一个view设置渐变色: let view = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100)) let gradientLayer = CAGradientLaye

  • 详解如何使用ReactiveObjC

    概述 RAC架构框架图 信号流程 基本使用 1.基本控件 UITextField //监听文本输入 [[_textField rac_textSignal] subscribeNext:^(NSString * _Nullable x) { NSLog(@"%@",x); }]; //可根据自己想要监听的事件选择 [[_textField rac_signalForControlEvents:UIControlEventEditingChanged] subscribeNext:^(_

  • 详解IOS判断当前网络状态的三种方法

    在项目中,为了好的用户体验,有些场景必须线判断网络状态,然后才能决定该干嘛.比如视频播放,需要线判断是Wifi还是4G,Wifi直接播放,4G先提示用户.获取网络状态的方法大概有三种: 1. Reachability 这是苹果的官方演示demo中使用到的方法,我们可以到苹果官方文档里下载Demo(点击左上角Download Sample Code 即可下载),然后把Demo里的Reachability.h和.m考到自己项目中,并在Build Phases 的 Link Binary 添加Syst

  • 如何在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:创建pac

  • 如何在centos中安装redis插件bloom-filter

    目录 前言 步骤: 总结 前言 linux上安装redis就不说了,主要说redis安装插件布隆过滤器. 布隆过滤器:一种数据结构,是由一串很长的二进制向量组成,可以将其看成一个二进制数组.既然是二进制,那么里面存放的不是0,就是1,但是初始默认值都是0. 如下所示: 步骤: 1.下载redisbloom插件(redis官网下载即可) https://github.com/RedisLabsModules/redisbloom/ 找到最新的tag下载tar.gz格式即可: [root@redis

  • 如何在iOS中高效的加载图片详解

    目录 前言 图片的渲染流程 DataBuffer SD源码分析 ImageBuffer 占用内存大小 Xcode测试 如何减少图像占用内存 向下采样 SD源码分析解码过程 选择正确的图片渲染格式 渲染格式 如何正确的选择渲染格式 减少后备存储器的使用 减少或者不使用 draw(rect:) 方法 如何在列表中加载图片 线程爆炸 总结 前言 在iOS开发中,图片(UIImage)是我们在开发中,占用手机内存比较大的对象,如果在运行过程中,内存占用过大,对电池寿命会造成影响,如果超过了内存占用的最大

  • 如何在AngularJs中调用第三方插件库

    在AngularJs中我们会不可避免的使用第三方库,例如jquery插件库.我们不能散乱的在AngularJS中引入这些库,例如在controller中.那么应该怎么在Angular中使用第三方库呢? 如何使用? 很简单,给插件写一个directive. 在这里,我会使用一个简单的jquery插件Toolbar.js 的DEMO. 这是我们如何在jquery中创建一个tooltip的: <!-- Click this to see a toolbar --> <div id="

  • 如何在Intellij中安装LeetCode刷题插件方便Java刷题

    一.安装 在 IDEA(2019)的 setting 的 Plugins 的 Marketplace 中搜索 leetcode,即可以找到该插件,安装完成了,重启即可. 二.配置 1.重启完成后,第一次使用的时候,需要一些基本的配制,在 setting 中的 Tools 中可以找到该插件工具,为 leetcode plugin,在里面,可以选择访问的为国际的 LeetCode 还是国内的,以及何种语言,同时,输入自己账户名(LoginName)和密码(Password),则可以和自己帐号关联起来

  • 如何在 iOS 应用中添加位置信息

    最近要在 iOS 应用中添加位置信息, 需要满足的需求如下: 应用在前台时能够获取位置信息: 通过切换. Home 按键将应用切换到后台时,停止获取位置信息: 应用程序在前台运行, 直接锁定屏幕时,能够继续获取位置信息: 接下来逐步实现这三个需求. 获取设备位置信息 在 iOS 上获取位置信息是很容易的, 网上的资料也很多, 我的代码如下: // make sure location service is enabled. if (!CLLocationManager.LocationServi

  • 如何在webpack项目中调试loader插件

    最近,在学习webpack使用时,发现webpack-replace-loader配置正则不起用,调试插件后才发现,search健值竟然不支持正则的写法,后有换成string-replace-loader插件,这个loader的search健值支持正则写法,问题得到解决.这里记录下loader的调试方法: 首先需要准备node环境 第一步:下载全局安装 node-nightly npm install -g --save-dev node-nightly 第二步:添加调试命令 "node-nig

  • Cordova插件实现JavaScript与Java的通信的详细过程

    背景 Cordova平台是开源的跨平台开发框架,被广泛应用于移动应用开发领域,可以开发跨安卓.iOS等系统的应用.Cordova平台是基于HTML/JavaScript语言,它是如何在不同平台上能够运行并实现相应功能的呢?这里就用到了Cordova提供的丰富的插件,Cordova的大量插件结合自身的框架,为应用开发者提供了跨平台的能力,开发者不需要与操作系统层面的接口进行交互,可以关注于应用功能本身.HMS Core为了方便Cordova开发者能够更方便快速的接入HMS Core的能力,也针对各

  • 详解如何在Flutter中获取设备标识符

    目录 使用 platform_device_id 应用预览 代码 使用 device_info_plus 应用预览 代码 结论 本文将引导您完成 2 个示例,演示如何在 Flutter 中获取设备标识符 使用 platform_device_id 如果您只需要运行应用程序的设备的 id,最简单快捷的解决方案是使用platform_device_id包.它适用于 Android (AndroidId).iOS (IdentifierForVendor).Windows (BIOS UUID).ma

随机推荐