• 关于在新项目中加插件,不再赘述,也很简单,困难的是在一个已有项目中增加新的插件,因为cordova要求的方法是从命令行安装,这样安装的插件是作用在整个cordova项目下的,而我们平时更多的是在操作platform下...
    在用H5,或者说cordova做开发的时候,不可避免的要增加新的插件,因为需求总变更啊,这一点长期和需求斗争的开发人员应该深有体会。关于在新项目中加插件,不再赘述,也很简单,困难的是在一个已有的项目中增加新的插件,因为cordova要求的方法是从命令行安装,这样安装的插件是作用在整个cordova项目下的,而我们平时更多的是在操作platform下android或ios目录,如果在cordova项目下装插件,会导致我们之前所写的自定义插件给覆盖清除(叨叨了半天不知道说明白了没,做过cordova开发的应该会了解的吧)
    在项目中之前的需求是拍照,后来2.1版本跟我说还要能从相册里选照片,翻了翻camera插件的代码,发现了一个sourceType属性,算是解决了从相册选的问题;然后昨天又和我说,咱们这个选照片啊,得一次能选多张才行,一听这个需求我是拒绝的,因为我差不多把camera的所有参数翻的烂熟于心了,并没有提供能多选的功能。
    然后几经google,找到了一个imagepicker插件,插件的github地址:https://github.com/wymsee/cordova-imagePicker
    如果你是要创建新项目,且需要拍照,那我强烈建议加上这个插件,说不定什么时候就用到了,手动虽然能加,但是也是很费力的
    下面是手动添加的过程,以这个imagepicker插件为例:
    1、从github上下载源码,地址上边贴着呢

    2、下载解压完毕,可以看到如图的目录,红色框框住的,除了那个plugin.xml,其他都是纸老虎!(其实也不是,package.json好像是发布到npm有关的信息,我们手动加插件主要是加src和res里的内容)

    解压完的目录.jpg

    3、打开plugin.xml,先看<platform name="android">……</platform>标签里的内容吧(——明明还有个ios在上边,为什么先看android啊?——因为楼主不会ios啊!)
      里边的内容大体上两类:(1)<config-file target="res/xml/config.xml" parent="/*">
                            <feature name="ImagePicker">
                                    <param name="android-package" value="com.synconset.ImagePicker"/>
                            </feature>
                    </config-file>
                                          (2)<source-file src="src/android/com/synconset/ImagePicker/ImagePicker.java" target-dir="src/com/synconset" />
    这两类一个一个说,(1)中的target是我们要添加到哪个文件中,比如这个例子就是要添加到res/xml/config.xml中,打开你的编辑器,android studio或者idea,应该可以找到这个config.xml文件吧。
    接下来继续说,找到这个文件了,我们要往它里边加什么呢,很简单,加config-file标签里的内容,比如这个例子就是<feature name="ImagePicker">
                                    <param name="android-package" value="com.synconset.ImagePicker"/>
                            </feature>
                               (2)第二类,类似,不过不再是添加内容,而是整个添加文件,比如例子中就是把这个插件的src/android/com/synconset/ImagePicker/ImagePicker.java复制到我们自己项目的src/com/synconset路径下,不存在的文件夹自己创建
    这里的内容就够你加的了,眼花什么的是正常现象。不过这里也是主要的工作,其他地方都好弄了。
    4、然后我们再返回来看上边,其实也有一定的对应关系,时间关系,我没深究,因为有更好的办法。
    用命令行在你以前的cordova项目里(注意是cordova项目)增加这个插件,然后打开platforms\android\platform_www这个文件夹,看看哪些是和插件有关的,直接修改到已有项目的platform_www就好了,比如这里plugins文件夹增加了cordova-plugin-image-picker(复制的),cordova_plugin.js里也做修改,这里不再赘述,打开就能看懂哪里该复制。
    这里修改完了别忘了还有assets\www目录下还有个plugins文件夹和一个cordova_plugin.js,也一并修改。

    大概就是这么多了,只是我自己的一点小经验,分享给大家,如果哪里有什么问题,欢迎指出来,我也不敢保证这样做没问题,所以如果你们的项目按我的方法出了什么问题,可别怪我啊!

    91792102012083023.jpg

    展开全文
  • 之前在网上查找过一些关于如何在iOS程序中添加cordova的例子,自己今天也总结一下。 1. 安装node.js命令 :node.js brew installnode 2. 安装cordova命令: sudo npm install –g cordova 3. 创建一个叫iOS ...

    之前在网上查找过一些关于如何在iOS程序中添加cordova的例子,自己今天也总结一下。

    1.    安装node.js命令 :brew install node

    2.    安装cordova命令: sudo npm installg cordova

    3.    创建一个叫CordovaDemo的iOS工程 命令:cordova create cordovaDemo com.example.cordovaDemo CordovaDemo


     添加iOS端 命令:cordova platform add ios

    在platforms中会多一个ios的文件夹以及内容


    4.    新建一个iOS新工程,一会将cordova添加到该工程中


    5.    添加cordova的相关文件到工程中:cordova、CordovaLib、platform_www  www


    6.    将CordovaLib.xcodeproj添加到DemoTest工程中,右键选择Add Files To Demo


    7.    添加www到工程中,勾选Create folder references


    8.    添加config.xml到工程中


    9.工程中BuildSettings->Other Link Flags设置-Objc -all_load


    10.     选择BuildPhases->New Run Script Phase,将新增New Run Script Phase命名为copy www directory

      NODEJS_PATH=/usr/local/bin;NVM_NODE_PATH=~/.nvm/versions/node/`nvm version 2>/dev/null`/bin; N_NODE_PATH=`find/usr/local/n/versions/node/* -maxdepth 0-type d 2>/dev/null | tail -1`/bin; XCODE_NODE_PATH=`xcode-select--print-path`/usr/share/xcs/Node/bin;PATH=$NODEJS_PATH:$NVM_NODE_PATH:$N_NODE_PATH:$XCODE_NODE_PATH:$PATH &&node cordova/lib/copy-www-build-step.js 粘贴到下图中,将Show environment variables in build log 的打钩去掉


    11.Build Phases->Link Binary WithLibraries中添加libCordova.a,MobileCoreServices,AssetsLibrary


    12.   BuildSettings->HeaderSearch Paths 中添加$(OBJROOT)/UninstalledProducts/include解决该问题连接.(如果不添加这步会报错:Cordova/CDVViewController.h file not found)

     


    展开全文
  • 项目添加cordova过程

    2018-10-22 15:40:31
    cordova部分 安装 npm install -g cordova 新建一个工程 进入到创建目录 添加Android vue部分 build vue工程 修改config/index.js配置中路径 npm run build 复制dist目录到cordova工程的www目录...

    cordova部分

    安装

    npm install -g cordova

    新建一个工程

    进入到创建目录

    添加Android


    vue部分

    build vue工程

    修改config/index.js配置中路径

    npm run build

    复制dist目录到cordova工程的www目录下

    最后运行


    不复制Vue打包后的文件      -         修改vuebuild路径,路径为corvoda/www目录

    展开全文
  • 项目组准备开发一个APP,要求Android和iOS端页面完全一致,除了一个页面跟业务相关的不同,其他界面基本一致,因此,萌生一个想法,关于webAPP的想法。于是乎苦逼的我们开始调研可行性以及整体的方案流程。为了达到...

    项目组准备开发一个APP,要求Android和iOS端页面完全一致,除了一个页面跟业务相关的不同,其他界面基本一致,因此,萌生一个想法,关于webAPP的想法。于是乎苦逼的我们开始调研可行性以及整体的方案流程。为了达到除了业务数据页面用web,其他页面全是原生APP的作用。其中,关于业务的web页面需要调用原生的相机,相册,地理位置,麦克风,扬声器,扫描二维码等一系列功能,这就涉及到js与原生交互的问题了。
    我们iOS端提出的方案是直接用WebView或者用WKWebView嵌套在实现web与原生的交互就可以了,不过安卓同事说安卓因为其平台多样性和特殊性这个就不兼容而且可行性交差,列出了集中方案,最终确定双方都用Cordova实现该功能。然后,开始了iOS端关于Cordova的学习之路(如果已经集成,请下翻到5节)

    1 Cordova简介

    Cordova前身是phonegap,而PhoneGap是Nitobi软件公司2008年推出的一个框架,旨在弥补web和iOS之间的不足,使得web和iPhone SDK之间的交互更容易。后来又加入了Android SDK 和BlackBerry SDK,再然后又陆续加入了更多的平台。但是在2011年,Nitobi公司被Adobe收购,PhoneGap也被提交到Apache Incubator。由于Adobe现在拥有PhoneGap商标,PhoneGap v2.0版产品就更名为Apache Cordova。

    据说Cordova是Nitobi团队当时坐落的街道名称,用此名来纪念Nitobi团队的贡献。Apache Cordova是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎。

    1.2 Cordova的工程结构

    有下图可以看出,关于Cordova的工程结构以及与Native API之间的关系:

     

    cordova机构图.png

    由上图可以看出,其实Cordova的使用分为上面几个框架结构,在Native与web之间交互。

    2 Cordova安装

    2.1 准备工作

    因为本人从事iOS工作,所以只阐述在Mac端安装Cordova的步骤及解释,至于windows下安装Cordova的步骤,这里不再赘述。
    (1)首先,你要有一台Mac电脑,如果没有,那么,你就把这篇文章关了吧,看了也没什么用。
    (2)然后你需要安装xcode,当然,你要开发,这一点必不可少。
    (3)你需要申请证书,然后在xcode中设置配置文件开发者账号...(可后面再做)。
    (4)好了,你可以开始安装Cordova了。

    2.1 安装Node.js

    要安装Cordova,需要先安装Node.js在Node.js官网,上下载并安装,下载好以后,一步一步点击下去就好。如果你实在不会,可以参考文章Mac下安装Node.js

    nodejs.png

     

    2.2 安装git

    git一般不用安装,osx和linux都自带git,可以在命令行输入git --version检查一下。如果没有git,需要到git官网下载安装一个git客户端。

    git.png

     

    2.3 使用node.js的依赖包管理工具npm来进行cordova安装

    接下来,在终端输入命令:

     sudo npm install -g cordova
    

     

     

    过程可能稍微有点枯燥和漫长,请耐心等待,其实需要输入的安装命令只有npm install -g cordova,之所以输入sodu,是因为有点Mac直接输入前一句代码是安装不起的,安装效果如下图:

    install.png

    为了写文章所以第二次安装,第一次安装的效果不记得了,哈哈~

    3 创建你的第一个Cordova工程

    3.1 新建项目

    继续,打开终端,cmd切换目录到工作目录下,输入以下命令,同样,可能需要点时间来完成

     cordova create Demo com.cordova.demo.hello HelloWorld 
    

    参数描述:
    Demo(参数是必填):将为你的项目生成一个Demo目录 www子目录是应用程序的主页,以及各种资源(css,js,img),遵循共同的web开发文件命名规范。这些资源将存储在设备上的本地文件系统,而不是远程服务。config.xml文件包含重要的需要生成和分发应用程序的元数据。
    com.cordova.demo.hello(参数可选):App ID,如果不填写这个参数,第三个参数就要省略,默认值是 io.cordova.hellocordova,但建议你填写一个适当的值。
    HelloWorld(参数可选):应用程序的项目名 这个参数的默认值是 HelloCordova,但建议你填写一个适当的值。

    3.2 添加平台支持

    所有后续命令在项目的目录中进行,可在该项目任何子目录中,cmd切换到项目目录下:

      cd Demo
    

    在构建项目之前,你需要指定一组目标平台。你能够运行这些命令取决于您的机器是否支持每一个SDK,合理是否已安装SDK。在MAC上运行命令:

     cordova platform add ios
    

    如果需要查看Cordova支持平台以及已经添加的平台,终端输入命令:

      cordova platforms ls
    

    3.3 添加插件

    根据项目具体功能需要,可添加插件以简单方便调用原生接口,如需添加插件,可以去Cordova插件库 搜索需要的插件:

     cordova plugin add com.phonegap.plugins.barcodescanner
     cordova plugin add org.apache.cordova.file-transfer
     cordova plugin ls
    

    并非所有的插件都是全平台支持的,有些可能只支持安卓,也有的可能同时支持安卓和iOS,所以在多平台开发时,请慎重选择插件。个人建议,可自定义插件类,可参考官网Cordova自定义插件

    3.4 迭代项目

     // 在工程目录下运行下面的命令来构建项目:
      cordova build  
     // 或者,指定生成iOS平台代码项目:
      cordova platform add iosiOS_Cordova
    

    4 运行项目

    4.1 打开工程

    步骤走完第三章,那么,一个简单的Cordova项目就已经搭建完成了,现在,我们运行下我们工程。打开目录下

    /Users/****/Desktop/测试cordova/Demo/platforms/ios
    

    为了避免引起混淆,建议移除掉下图中两个文件/文件夹引用(应用哦):

    config.png

    4.2 Events Cordova生命周期事件

    生命周期函数 释义
    deviceready 当Cordova加载完成会触发
    pause 当应用程序进入到后台时触发
    resume 应用程序从后台进入到前台会触发

    4.3 Plugin APIs 自定义Plugin方法

    这里看Api就可以的。

    到此cordova环境的搭建集成基本完成了。有一些项目已经完成了突然要集成cordova,该怎么办呢?往下看。

    5 将Cordova本地相关文件copy到已存的项目中

    5.1 找到相关路径,复制文件到工程目录

    首先,进入到上一篇文章中创建的Cordova项目的路径中/Users/****/Desktop/Demo/platforms/ios,找到下面需要copy的4个文件夹( CordovaLib ,cordova, www, platform_www

     

    )copy到工程项目的根路径中,如下

    copy.png

    5.2 拷贝对应的config.xml文件到对应的工程目录

    然后将下面图中所示的config.xml文件copy到需要的iOS项目路径文件夹内,如图:

     

    config

    6 配置相关参数

    6.1 打开工程,进入工程TARGETS -> Build Phases 下,然后入下图所示,点击①中的按键,创建New Run Script Phase,②为创建的Run Script:

    image

    6.2 将下图示意图中,①原名称Run Script修改为Copy www directory;然后讲②中的选项去掉,最后将下面的代码字段复制到③中:

    NODEJS_PATH=/usr/local/bin; NVM_NODE_PATH=~/.nvm/versions/node/`nvm version 2>/dev/null`/bin; N_NODE_PATH=`find /usr/local/n/versions/node/* -maxdepth 0 -type d 2>/dev/null | tail -1`/bin; XCODE_NODE_PATH=`xcode-select --print-path`/usr/share/xcs/Node/bin; PATH=$NODEJS_PATH:$NVM_NODE_PATH:$N_NODE_PATH:$XCODE_NODE_PATH:$PATH && node cordova/lib/copy-www-build-step.js
    

     

     

    如图:

    image

    6.3 在工程 Build Settings -> Other Linker Flags 中添加-ObjC -all_load

    image

    6.4 Add Files to ... -> CordovaLib.xcodeproj

    image

    6.5 Add Files to ... -> config.xml

    image

    6.6 Add Files to ... -> www文件夹

    image

    6.7 Schemes按照下图配置,然后编译一次程序(command+R),最后导入下面两项

    Build Phases -> Target Dependencies -> CordovaLib

     

    Build Phases -> Link Binary With Libraries -> libCordova.a

    image

    6.8 Schemes按照下图配置,将"ViewController.h" 文件改为:

    #import <Cordova/CDVViewController.h>
    #import <Cordova/CDVCommandDelegateImpl.h>
    #import <Cordova/CDVCommandQueue.h>
    @interface ViewController : CDVViewController
    @end
    

    至此,Cordova嵌入已存的开发项目就已经完成了,运行程序就可看到工程中www文件目录下,index.html文件中的网页信息了。只需要将该文件内容,改为公司需要的网页内容即可。具体交互以及自定义插件,将在后面文章中介绍。

    7 自定义插件

    7.1 在config.xml文件中加入下面代码:

    <feature name="YourPluginName"> 
        <param name="ios-package" value="Plugin" /> 
        <param name="onload" value="true" /> 
    </feature>
    

    config.png

    3.1 创建一个Plugin类,实现下面的方法

    下面介绍一个简单的web端调用原生手机相机以及选择相册图片并返回web显示的自定义插件调用:

    • (1)YanSYPlugin.h 的实现
    #import <Cordova/CDVPlugin.h>
    @interface Plugin : CDVPlugin
    {
        UIImagePickerController *_imagePickerController;//相机
    }
    - (void)myMethod:(CDVInvokedUrlCommand *)command;
    @end
    
    • (2)YanSYPlugin.m 的实现
    #import "Plugin.h"
    
    typedef void(^imgBlock)(NSString *data);
    @interface Plugin() <UIImagePickerControllerDelegate, UINavigationControllerDelegate>
    @property (copy, nonatomic) imgBlock myBlock;
    @end
    
    @implementation Plugin
    
    - (void)myMethod:(CDVInvokedUrlCommand *)command {
        [self.commandDelegate runInBackground:^{
            NSString* myarg = [command.arguments objectAtIndex:0];
            if (myarg !=nil) {
                [self switchMethodWithName:myarg andCommand:(CDVInvokedUrlCommand*)command];
            }else{
                return ;
            }
        }];
    }
    
    // 根据方法选择判断调用具体内容
    - (void)switchMethodWithName:(NSString *)name andCommand:(CDVInvokedUrlCommand*)command{
        _imagePickerController = [[UIImagePickerController alloc] init];
        _imagePickerController.delegate = self;
        _imagePickerController.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
        _imagePickerController.allowsEditing = YES;
        __block CDVPluginResult* pluginResult = nil;
        NSString * standbyJSStr = [NSString stringWithFormat:@"%@",@"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAVCAYAAACt4nWrAAAEDWlDQ1BJQ0MgUHJvZmlsZQAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VVBg/m8AAAEFSURBVDgRY/z969//GO9HDAd3f2agNmDKjX9KE4NBDmXasPwDTgcX14sxPP+vg4JBYsQCJmIVkqNu1HCsoUbTYGEJiBBgCE8SZLCw5WTg4CDeLkt7bgYrB24UFx878JXh+MGvcDGW6ctl4BxSGCCDSxpQk2VPwysUw4l3Kik2Q9XS1HAWkCV//vxn2LL2M8Od6z9Q3AfyOnq4oiggwGF5++YvQ4TzA4Yrl75jUSpGkeFMM3re4DAYi10kCjHt3kb9ohbmBqZHN3/B2FSnmdg4GaluKMxAJitn1FwGk6AGzZRXKcrAykId16Obw2RgwsmwYJMcg4omBwOlVniH8jFISbPBPQ0Ay3NHXHSKRhIAAAAASUVORK5CYII="];
    
        if ([name isEqualToString:@"调用相机"]) {
            [self selectImageFromCameraWithBlock:^(NSString *data) {
                // 因当前转码格式为iOS原生转码,web端无法解析 ,所以百度了一波图片转码成功后复用,若转码格式正确 可直接上传字符串
                // NSString *jsStr = [NSString stringWithFormat:@"data:image/png;base64,%@",data];
                // 使用备用字符串上传
                pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:standbyJSStr];
                [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
            }];
        }else if ([name isEqualToString:@"查看相册"]){
            [self selectImageFromAlbumWithBlock:^(NSString *data) {
                // 因当前转码格式为iOS原生转码,web端无法解析 ,所以百度了一波图片转码成功后复用,若转码格式正确 可直接上传字符串
                // NSString *jsStr = [NSString stringWithFormat:@"data:image/png;base64,%@",data];
                // 使用备用字符串上传
                pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:standbyJSStr];
                [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
            }];
        }else {
            pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"You Are Error"];
            [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
        }
    }
    
    #pragma mark 从摄像头获取图片或视频
    - (void)selectImageFromCameraWithBlock:(imgBlock)block{
        self.myBlock = block;
        _imagePickerController.sourceType = UIImagePickerControllerSourceTypeCamera;
        //相机类型(拍照、录像...)字符串需要做相应的类型转换
        //视频上传质量
        //UIImagePickerControllerQualityTypeHigh高清
        //UIImagePickerControllerQualityTypeMedium中等质量
        //UIImagePickerControllerQualityTypeLow低质量
        //UIImagePickerControllerQualityType640x480
        _imagePickerController.videoQuality = UIImagePickerControllerQualityTypeHigh;
        //设置摄像头模式(拍照,录制视频)为录像模式
        _imagePickerController.cameraCaptureMode = UIImagePickerControllerCameraCaptureModePhoto;
        [self.viewController presentViewController:_imagePickerController animated:YES completion:nil];
    }
    
    #pragma mark 从相册获取图片或视频
    - (void)selectImageFromAlbumWithBlock:(imgBlock)block{
        self.myBlock = block;
        _imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
        [self.viewController presentViewController:_imagePickerController animated:YES completion:nil];
    }
    
    #pragma mark UIImagePickerControllerDelegate
    //该代理方法仅适用于只选取图片时
    - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(nullable NSDictionary<NSString *,id> *)editingInfo {
        
        NSString *encodedImageStr = [self imageProcessing:image];
        self.myBlock(encodedImageStr);
    }
    
    //适用获取所有媒体资源,只需判断资源类型
    - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{
        NSString *encodedImageStr = [self imageProcessing:info[UIImagePickerControllerEditedImage]];
        self.myBlock(encodedImageStr);
        [self.viewController dismissViewControllerAnimated:YES completion:nil];
    }
    
    // 图像处理 若未下载base64者 可不用查看
    - (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);
        }
        // 创建一个bitmap的context
        // 并把它设置成为当前正在使用的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);
            }
        }
        NSLog(@"imagedata == %lud,size.width = %f==%f",(unsigned long)imageData.length,tailoringImage.size.width,tailoringImage.size.height);
       
        // 最后进行 base64 转码
        // NSString * encodedImageStr = [GTMBase64 stringByEncodingData:imageData];
          // 原生转码方法
        NSString * encodedImageStr = [imageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
        return encodedImageStr;
    }
    @end
    
    • (3)编写index.html文件如下
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="cordova_plugins.js"></script>
            <script type="text/javascript" src="jquery.min.js"></script>
            <script type="text/javascript">
                document.addEventListener("deviceready", yourCallbackFunction, false);
                
                function cameraBTClick(){
                    Cordova.exec(successFunction, failFunction, "YanSYPlugin", "myMethod", ["调用相机"]);
                }
            function PhotoAlbumBTClick(){
                Cordova.exec(failFunction, failFunction, "YanSYPlugin", "myMethod", ["查看相册"]);
            }
            
            function failFunction(error){
                alert("error");
                document.getElementById("returnValue").value = img;
            }
            function aaaa(){
                document.getElementById("2").innerHTML = "<img src='data:image/png;base64,"
            }
            
            function successFunction(img){
                document.getElementById("returnValue").value = img;
                document.getElementById("2").innerHTML = "![]("+img+")"
            }
            
                </script>
            
        </head>
        
        <body>
            <p>点击下面按钮调用相机拍照</p>
            <button onclick="cameraBTClick()">调用相机</button>
        </body>
        
        <body>
            <p>点击下面按钮选择相册照片</p>
            <button onclick="PhotoAlbumBTClick()">查看相册</button>
            <button onclick="aaaa()">测试</button>
            <h1>这是回调结果展示区</h1>
            <textarea id ="returnValue" type="value" rows="5" cols="40">
            </textarea>
            
        </body>
        
        <body>/Users/YanSY/Desktop/代码运行示意11.gif
            <p>
            <img id="1" src=“”/>
            </p>
            <p id="2" > </p>
            
        </body>
        
     
    </html>
    

     

     

    将以上代码,按步骤写入程序中,可测试调用原生相机,注意,需要在plist文件中添加隐私权限。运行效果示例如下只做到调用原生相机相册。

    result.gif

    到这里基本结束了,需要Demo的点这里.

    这样集成Cordova需要依赖cordova的一个工程,下篇文章介绍一种不需要依赖关系的方式,直接导入相关文件使用。


    链接:https://www.jianshu.com/p/90605320bb28
     

    展开全文
  • 在iOS项目添加Cordova

    2019-07-21 11:35:41
    1.创建项目 ABCDemo 2.创建Cordova项目 ( 创建的命令是cordova create 列如: cordova create aaaa iddd Pnameee 第一个参数hello表示在工程目录中创建一个 hello 的文件夹 第二个参数com.cool.hello表示...

    1.创建项目 ABCDemo 

    2.创建Cordova项目 

    创建的命令是cordova create

    列如:

    cordova create aaaa iddd Pnameee

    • 第一个参数hello表示在工程目录中创建一个 hello 的文件夹
    • 第二个参数com.cool.hello表示包名(反向域名),用于标志不同的 app
    • 第三个参数HelloWorld表示项目的名称,可以在 config.xml 文件中修改        )

    3.添加平台

    3.1 进入创建的项目目录 

    cd aaaa

    3.2 查看已有的平台

     

    cordova platforms list

    3.3添加所需要的平台  

    cordova platform add ios

     

    如果想移除已经添加的平台的话 cordova platform remove ios 或者cordova platform rm ios

     (需要等待一定时间)

     

    4.插件开发(自己用的插件 也就是JS 调用你的原生代码用的)  记得继承CDVPlugin ,,相关资料百度很多(关键词:自定义插件)

     

    5.拷贝Cordova中以下六个文件到ABCDemo 中

    CordovaLib  cordova  www  platform_www   connfig.xml(2共个,ios 目录那个放在工程ABCDemo并列关系的文件中,就是WWW,Platform_www它们并列放一起   cordova ios里面那个的放在ABCDemo工程中)
    导入时要注意www 文件 的option选择 工程在编译时需要将cordova 先编译要用到资源文件 (我是这样理解的,后期有空再验证)

    6.

    配置相关环境   添加link  添加dependence  

    7.self.navigationController push......   用这个方法  

     

    8.继承 CDVViewController   

     

    #import <UIKit/UIKit.h>

     

    #import <Cordova/CDVViewController.h>

    #import <Cordova/CDVCommandDelegateImpl.h>

    #import <Cordova/CDVCommandQueue.h>

     

    @interface CDVWeb : CDVViewController

     

    @end

     

     

     

    .m 文件中

     

        UIView *view= [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 150)];

        view.backgroundColor = [UIColor redColor];

        [self.view addSubview:view];

        

        self.webView.frame = CGRectMake(0, 200, 320, self.view.frame.size.height-200);

        

    转载于:https://www.cnblogs.com/tony0571/p/5621913.html

    展开全文
  • 环境: ...配置好 cordova 环境,并新建一个 cordova 项目添加 ios 运行平台 step 2 拷贝 cordova 代码到现有项目中 在新建的 cordova 项目中 ios 项目下的 cordovaLib 与 cordova 两个文件...
  • 命令行添加插件的方法为: cordova add [ git地址/...看完这些步骤后能更好的理解插件是怎么添加到我们工程项目里的. 比如我们当前一个cordova-plugin-device插件. 1、把cordova-plugin-device插件整个
  • *使用Cordova进行ios开发 下面主要介绍一个开源的框架: Cordova,它的前身是PhoneGap,被Apache收购之后就改成Cordova了. Cordova 是一个开源的移动开发框架。它可以让你使用标准的WEB技术比如HTML5,CSS3...
  • 一 安装node.js下载地址:https://nodejs.org/en/安装完成后,cmd执行 npm install -g cordova ,全局安装Cordova。 注意:可能会有点慢,请耐心等待!...添加Android平台:cordova platform add and...
  • 实际项目开发中可能需要添加Cordova到已经存在的工程中,近期就遇到了这个问题。虽然网上也一些教程, 但不适用于最新版本的Cordova了,故特将步骤纪录如下。 1.加入我们已经存在名为Demo项目,目录结构...
  • cordova 运用到iOS项目中 ,刚开始学习,求大神指导
  • 在此之前,你可能需要看另外一篇博客:...通过上面博客,得到了hello项目。准备现有的Android项目,我的是project_code,效果图如下(图一是平常练习的demo): 按如下步骤操作: 一:(前面得到的hello...
  • 这段时间在维护一个Cordova混合项目,以前稍微接触过Cordova,也写过简单的纯纯的Cordova的Demo,但是没有尝试过混合原生的Cordova。 在接到项目后比较了一下项目架构和Cordova的结构,发现其中的差别还是不少,主要...
  • vue+cordova项目整合

    2019-11-25 17:53:28
    经过网上查找很多资料,发现很多只有vue+cordova项目整合,但是vue使用cordova插件的文章很少,现在把从创建cordova和创建vue到vue使用插件到项目打包到android手机运行过程记录下来; 先上项目结构目录 cordova...
  • 使用Cordova6添加插件

    2016-06-30 10:34:41
    使用Cordova6添加插件最近项目上需要用cordova...会出现各种奇葩问题,这里把我碰到的问题及解决方法分享给大家作为参考,由于应用需要使用拍照功能,所以需要使用拍照插件,使用cordova添加插件是很简单的,比如使用
  • cordovaBadge 修改应用程序图标的角标数量。 cordova plugin add https://github.com/katzer/cordova-plugin-badge.git 方法(Methods) hasPermission() 检测是否修改权限 module.controller
  • Swift - 在现有的项目添加Cordova支持1(添加Cordova核心库) 2016-04-29 09:13 发布:hangge 浏览:204 使用 Cordova 的目的是实现跨平台应用的开发,即只要写一套H5页面就可以自动构建成各个平台的应用,让...
1 2 3 4 5 ... 20
收藏数 2,588
精华内容 1,035