自定义cordova插件

作者: 黑暗森林的歌者 | 来源:发表于2018-11-23 11:46 被阅读15次

cordova自定义弹窗教程插件
自定义Cordova插件（基础篇）
自定义cordova插件
Cordova 创建iOS fb分享插件
项目重建命令集
cordova 自定义插件，养成良好习惯
Cordova进行iOS开发 (已存FFmpeg项目中添加Cor
ionic打开内置浏览器
Cordova 制作插件（本地）
Cordova自定义插件

自定义cordova插件

cordova可以通过自定义插件的形式，通过js调用原生的功能。

打开webview的Plugin

创建

创建一个继承 CDVPlugin的类，

头文件的引用修改为

#import <Cordova/CDVPlugin.h>

否则会报引用错误。

.h 文件的实现

#import <Cordova/CDVPlugin.h>

@interface PresentWebPlugin : CDVPlugin

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

@end

.m的实现

#import "PresentWebPlugin.h"
#import "TestWebViewController.h"// 自定义普通的UIWebView类

@implementation PresentWebPlugin

- (void)presentVCWithTitle:(CDVInvokedUrlCommand *)command {
    if (command.arguments.count > 0) {
        NSString *title = command.arguments.firstObject;
        
        TestWebViewController *webVC = [[TestWebViewController alloc] init];
        webVC.titleString = title;
        webVC.webUrl = command.arguments[1];
        [self.viewController presentViewController:webVC animated:YES completion:^{
            CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"成功打开页面"];
            [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
        }];
    }
    else {
        CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"没有参数"];
        [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
    }
}

@end

添加插件

在config.xml中添加插件

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

编写html

在index.html中添加按钮和点击事件。

function PresentWebPlugin() {
            cordova.exec(PresentSuccess,PresentFailed,"ios-PresentWebPlugin","presentVCWithTitle", ["标题", "https://dongjiawang.top"]);
        }
function PresentSuccess(msg) {
    alert(msg);
}
function PresentFailed(msg) {
    alert('failed: ' + msg);
}

<body style="padding-top:100px">
        <button style="font-size:20px;" onclick="PresentWebPlugin();">打开博客</button>
        <br>
        
    </body>

image

打开相册选取图片的Plugin

创建

1..h的实现

@interface PhotoPlugin : CDVPlugin

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

@end

.m的实现

#import "PhotoPlugin.h"

@interface PhotoPlugin ()<UIImagePickerControllerDelegate, UINavigationControllerDelegate>

@property (nonatomic, strong) UIImagePickerController *imagePickerVC;

@property (nonatomic, strong) CDVInvokedUrlCommand *myCommand;

@end

@implementation PhotoPlugin

- (void)openPhoto:(CDVInvokedUrlCommand *)command {
    _myCommand = command;
    self.imagePickerVC = [[UIImagePickerController alloc] init];
    self.imagePickerVC.delegate = self;
    self.imagePickerVC.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    self.imagePickerVC.allowsEditing = YES;
    self.imagePickerVC.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    
    [self.viewController presentViewController:self.imagePickerVC animated:YES completion:nil];
}

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{
   // 将选中的图片以base64 字符串的形式传递出去
    NSString *encodedImageStr = [self imageProcessing:info[UIImagePickerControllerEditedImage]];
    CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:encodedImageStr];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:self.myCommand.callbackId];
    [self.viewController dismissViewControllerAnimated:YES completion:nil];
}

- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker {
    [self.viewController dismissViewControllerAnimated:YES completion:nil];
}

// 图像处理
- (NSString *)imageProcessing:(UIImage *)proImage{
    // 判断传过来照片的大小进行裁剪
    CGFloat width  = proImage.size.width;
    CGFloat height = proImage.size.height;
    CGSize size;
    if (width>height) {
        size = CGSizeMake(800, 450);
    }else {
        size = CGSizeMake(450, 800);
    }
    
    // 并把它设置成为当前正在使用的context
    UIGraphicsBeginImageContext(size);
    // 绘制改变大小的图片
    [proImage drawInRect:CGRectMake(0,0, size.width, size.height)];
    // 从当前context中创建一个改变大小后的图片
    UIImage * tailoringImage =UIGraphicsGetImageFromCurrentImageContext();
    // 使当前的context出堆栈
    UIGraphicsEndImageContext();
    // 判断图片大小进行压缩
    NSData *imageData = UIImageJPEGRepresentation(tailoringImage,1.0);
    
    NSLog(@"imagedata == %lud,size.width = %f==%f",(unsigned long)imageData.length,tailoringImage.size.width,tailoringImage.size.height);
    
    if (imageData.length>100*1024) {
        if (imageData.length>1024*1024) {     //1M以及以上
            imageData=UIImageJPEGRepresentation(tailoringImage, 0.1);
        }else if (imageData.length>512*1024) {//0.5M-1M
            imageData=UIImageJPEGRepresentation(tailoringImage, 0.3);
        }else if (imageData.length>200*1024) {//0.25M-0.5M
            imageData=UIImageJPEGRepresentation(tailoringImage, 0.7);
        }
    }
    
    NSString * encodedImageStr = [imageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
    return encodedImageStr;
}

@end

添加插件

在config.xml中添加插件

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

编写Html

在index.html中添加按钮、点击事件和显示图片。

function openPhoto() {
                cordova.exec(selectedPhotoSuccess, selectedPhotoFailed, "ios-PhotoPlugin", "openPhoto", null);
            }
            
            function selectedPhotoSuccess(img) {
                
                document.getElementById("imageview").innerHTML = "<img style='display:block; width:200px;height:200px;' src='data:image/png;base64,"+img+"'/>"
            }
            
            function selectedPhotoFailed(msg) {
                alert("选择图片失败");
            }

 <body style="padding-top:100px">
        
        <button style="font-size:20px;" onclick="openPhoto();">打开相册</button>
        <br>
        
          <p id="imageview" > </p>
        
    </body>

image