xcode 集成cordova_xcode cordova - CSDN
  • 初次接触Cordova,集成Cordova生成iOS插件花费的时间比较长;在这简单说说过程和遇到的坑吧。 运用到的攻击:unity2018.314f1,xcode11,Cordova9.0.0 怎么安装Cordova环境,这就不去叙述了,官网上很详细;制作...

    最近项目需求,用unity实现功能,制作成Cordova的iOS插件。初次接触Cordova,集成Cordova生成iOS插件花费的时间比较长;在这简单说说过程和遇到的坑吧。
    运用到的攻击:unity2018.314f1,xcode11,Cordova9.0.0
    怎么安装Cordova环境,这就不去叙述了,官网上很详细;制作插件的相关的js代码,html代码 都不熟悉,是以前的同事写的;这个在Cordova官网上也有,也很详细;主要说说在集成到项目中的问题吧;

    可能是用的Cordova的其他插件版本不一样,在集成好制作好的iOS插件后会出现很多问题;换插件是没想过,因为其他的插件基本上是最新的,久一点的xcode都不支持;在我的解决办法中就是调整在集成自己所作好的插件后调整文件夹的结构;尽量的和unity发布的xcode工程里的结构一样:
    其实unity发布的iOS工程集成Cordova生成插件需要的文件几乎只有 Data、Classes、Libraries这三个文件夹下的所有文件;所以我插件里只复制了这三个文件;在添加到工程里之前要删除可能重复的文件
    在添加之后的调整
    1、在添加成功后在这里插入图片描述

    你的Xcode目标工程里会有这样的文件结构;要做的就是将这三个文件删除掉;注意以RemoveReference的形式删除
    2、选中你的工程名在这里插入图片描述
    “AddFile。。。。”添加这三个文件;data以“Createfolderreferences”的形式添加;其他两个以“creategroups”的形式添加;添加成功后会形成类似上图的文件结构
    3、修改文件:主要修改项目中。pch文件;要引用你的插件中的。pch文件在这里插入图片描述
    4、调整buildsettings参数,不要漏掉unity发布iOS工程中buildsettings一些项目保持一致,至少不能少了unity发布的Xcode项目中的配置;
    1、在这里插入图片描述
    other linker flags 不能少了前面的那一串;
    在这里插入图片描述
    headersearchpaths 中的引用不能少了你所引用的插件中的头文件
    在这里插入图片描述
    LibrarySearchPaths也不能少了你插件中文件
    在这里插入图片描述
    这个宏的引用要注意了,一定不能少unity所发布的xcode项目中的宏定义在这里插入图片描述
    少了之后会在il2cpp相关库文件中报错;
    最后就是这一块在这里插入图片描述
    不能少;
    5、修改buildphases:在这里面尽量不要有重复引用;最后就是DynamicLibEngineAPI.mm这个文件的引用;如果有相关报错,删除它就好了;

    这里我发一份我的插件要做修改的文档(也是我自己写的)在这里插入图片描述
    在这里插入图片描述

    其实unity集合Cordova制作iOS插件;主要就是将unity的发布的Xcode项目改造成iOS原生的项目后,再集成Cordova;写的有点乱,也不知道怎么叙述了。

    展开全文
  • 项目组准备开发一个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
     

    展开全文
  • 首先, 新建 Cordova 项目就不说...cordova生成的项目用cdv_project称呼, 需要集成的用project称呼. project的根目录新建Cordova目录; 默认cordova项目已经添加了ios 平台的相关代码, 进入 cdv_project/platfor...

    首先, 新建 Cordova 项目就不说了, 步骤: http://ionicframework.com/getting-started/ ,

    cordova生成的项目用cdv_project称呼, 需要集成的用project称呼.

     

    1. project的根目录新建Cordova目录;
    2. 默认cordova项目已经添加了ios 平台的相关代码, 进入 cdv_project/platforms/ios/, 将 CordovaLib, www, 这两个目录复制project下刚建的Cordova目录;
    3. 进入 cdv_project/platforms/ios/cdv_project 这个cordova生成的ios project目录中, 将config.xml 复制到project下刚建的Cordova目录;
    4. 进入xCode, 选中project, 新建group -> Cordova, 进入project/Cordova 目录, 将CordovaLib/CordovaLib.xcodeproj, config.xml, 这两个文件拖进Cordova这个group(复制选项选create group), 然后将 www 这个文件夹也拖进Cordova这个group, 这个文件夹的复制选项一定要是create folder references;
    5. 点击project, 选中app的target, 进入Build Setting, 为 Other Linker Flags 添加 -all_load 选项;
    6. 进入General, Link Frameworks and Libraries, 添加 libCordova.a;

     

    Command + B, 如果build没问题, 那就ok了, 使用的话, 只需要new 一个 CDVViewController, 设置 wwwFolder 属性(就是刚才复制的www目录的名称), startPager等, 就可以用了, 使Native方法的话, 别忘了加入相应的系统库.

    如果使用Ionic进行本地开发预览, 那么需要将cdv_project目录下的 ionic.config.json ,复制到 project/Cordova 目录中, 然后终端里cd到该目录, 然后 执行 

    ionic serve
    

    就可以了

    转载于:https://www.cnblogs.com/duwei/p/ios_project_integrate_cordova_ionic.html

    展开全文
  • CORDOVA 打包 IOS

    2018-12-03 22:31:48
    CORDOVA 打包 IOS 首先准备一台mac电脑 防止版本过低,提前将电脑升级到最高版本(我的是mac OS Mojave) 安装Xcode 或 升级到最新版本 安装cordova 去除滚定条 去除白边 调整icon ,启动页面 安装Xcode 或 升级到...

    CORDOVA 打包 IOS

    • 首先准备一台mac电脑
    • 防止版本过低,提前将电脑升级到最高版本(我的是mac OS Mojave)
    • 安装Xcode 或 升级到最新版本(预计需要半天时间)
    • 安装cordova
    • html 代码放置
    • 去除滚定条
    • 去除白边
    • 调整icon ,启动页面
    • 调试打开模拟器
    • 签名认证

    安装Xcode 或 升级到最新版本

    打开appstore
    在这里插入图片描述

    安装cordova

    首先需要安装 node
    tips 学习过前段的小伙伴就不用我介绍了吧,不懂的可以点击上面的node

    使用node 安装cordova

     sudo node install cordova -g //安装
     cordova create myApp //创建一个app
     cordova plugin add cordova-plugin-''name" --save // name 为变量
     cordova platform add android/ios --save  //  添加Android 或 IOS平台 添加以后会在platform文件夹下
     cordova build android/ios --verbose //build  
     cordova run android
     
    

    html 代码放置

    生成之后的代码结构如图所示
    在index.html 引入cordova.js 与cordova-pugins.js
    在这里插入图片描述
    在这里插入图片描述
    每次只需要替换ios/www下的html即可

    去除滚动条

    在这里插入图片描述

    
    {
        [super viewDidLoad];
        self.webView.scrollView.bounces = NO;
        // Do any additional setup after loading the view from its nib.
    }
    

    去除白边

    if (@available(iOS 11.0, *)) {
            self.webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
        }
    

    更换icon

    在这里插入图片描述

    根据自己需要适配的机型 制作相应的icon替换即可

    启动页面的更换在这里插入图片描述

    根据自己需要适配的机型 制作相应的图片替换即可

    调试打开模拟器

    在这里插入图片描述

    • 模拟器 如图选择相应的模拟器
    • 调试 点击三角图标开始将代码写入设备
    展开全文
  • iOS原生项目嵌入Cordova

    2018-01-19 11:09:00
    MAC OS High Sierra系统版本10.13Xcode版本Version 9.0.1 (9A1004)对于iOS原生项目嵌入cordova的一些记录,废话不说,开始正题!嵌入cordova,网上一顿搜,搜到的都很详细,但是运行出问题,自己总结后记录下来,方便...
  • 重写一个应用是一件简单的事,可是演进一个应用则是一件复杂的工作。过去的一年多里,我在工作上的主要职责是:手机 APP 开发。日常主要是编写基于 Ionic 和 Angul...
  • 很多跨平台开发的项目,会希望通过cordova插件调用iOS的原生API,实现JS与OC 的通信,集成iOS的一些相关功能。网上查了一些资料,再加上自己的理解,将一些心得分享给大家。下面将以调用系统相册或摄像头实现截图...
  • 安装 //安装 vue-cil npm install --global vue-cli //安装cordova ...//新建cordova 项目cordova create vue-cordova//进入目录cd vue-cordova//vue-cli新建vue项目vue init webpack vueprojectname/...
  • Cordova简介 Cordova是一个开源的移动开发框架,它允许你使用WEB开发技术(HTML5、CSS3、JavaScript)进行跨平台开发,可以在每个平台的封装器中执行,并且依赖规范的API对设备进行高效的访问,比如传感器、数据、网络...
  • 之前在网上查找过一些关于如何在iOS程序中添加cordova的例子,自己今天也总结一下。 1. 安装node.js命令 :node.js brew installnode 2. 安装cordova命令: sudo npm install –g cordova 3. 创建一个叫iOS ...
  • 1,安装plugman,Cordova需要用这个来创建插件命令: npm install -g plugman2,plugman安装完之后就可以创建一个插件了cordova plugin命令:plugman create --name [插件名] --plugin_id [插件ID] --plugin_version ...
  • 2、创建应用,现在选Android SDK,因为在cordova项目中添加插件的时候,使用的ANDROID_KEY用的Android SDK的key,而不是浏览器端的key,所以这里注意一下,同样的ios的也是,使用IOS SDK应用的key,这里以android为...
  • 前几天在给我的web打包时候报了这么一个错误,经过查找,解决办法如下,在BuildSettings->Header Search Paths 增加如下路径,问题解决  $(OBJROOT)/UninstalledProducts/include。
  • Cordova集成Sentry

    2018-10-20 11:13:04
    这是我们的Cordova SDK的文档。 SDK使用iOS和Android的原生扩展,但如果需要,将回退到纯JavaScript版本(@ sentry / browser)。 安装sentry-cordova时,Sentry Wizard将帮助您配置项目。我们还为您的Xcode项目添加...
  • 参考自:http://zhuoqiang.me/jailbroken-ios-device-debug-using-xcode.html 开发 iOS 程序时,如果要在真机上调试,开发者向苹果交 99 美金的年费来取得 iOS 开发者账号。钱虽不多,但有些开发者只想练练手玩一...
  • xcode7集成百度地图(framwork包) archive是bitcode问题 ,耽误了我一个小时终于找到以上博客解决了问题,再次纪录一下。 (1)问题描述:真机和模拟器测试都能编译安装,但是需要打包archive的时候 总是编译出错,眼...
  • Cordova入门

    2017-11-27 11:35:51
    Cordova入门 标签: 技术学习 Cordova入门 概述 1 移动端的开发模式 2 Cordova基本介绍 Cordova安装Mac环境 1 安装Nodejs 2 安装git 2 安装cordova 创建Cordova 工程 1 创建项目 1 添加平台 1 目录说明 ...
1 2 3 4 5 ... 20
收藏数 440
精华内容 176
关键字:

xcode 集成cordova