• 我们知道,按照cordova打包的流程,里面会生成一个www文件夹,里面是h5代码,也是app的启动页,在里面直接引入cordova.js,是可以使用cordova的,但是如果app里面嵌套了一个h5的网页链接,如果想使用cordova,怎么办...

    我们知道,按照cordova打包的流程,里面会生成一个www文件夹,里面是h5代码,也是app的启动页,在里面直接引入cordova.js,是可以使用cordova的,但是如果app里面嵌套了一个h5的网页链接,如果想使用cordova,怎么办呢?(cordova目录)
    cordova目录

    • cordova的config.xml很重要,属于app的一些配置,里面最重要的是包名,以及允许访问的域名及其他
    • 经过测试,h5中可以直接引入cordova文件,如果使用其插件,需要引入plugins文件夹及cordova_plugins.js插件配置文件(如果用到的插件,在cordova_plugins.js中没有配置,则插件失效。如果插件不存在,但是在cordova_plugins.js配置了,cordova失效)
      在这里插入图片描述

    常见问题

    在h5中使用cordova,经常会出问题,要么cordova失效,要么cordova报错,等等

    经测试验证,得出以下结论

    • h5如果想引本地的cordova东西,必须将包里的platform_www里面的文件复制过来
    • 如果加了新插件,包要更新的时候,不能只在你的cordova_plugins.js中加新插件的配置,必须将所有文件重新拷贝过来,因为新的插件,可能修改了你的cordova.js或其他,为避免出错,必须全部重新引入!!!
    • 如果你的cordova.js分为了cordova_ios.js和cordova_android.js,记得在cordova.js中修改两个地方
    1. 路径 pathPrefix
    exports.load = function (callback) {
        var pathPrefix = findCordovaPath();
        if (pathPrefix === null) {
            console.log('Could not find cordova.js script tag. Plugin loading may fail.');
            pathPrefix = '/person/js/appjs/ios/';
        }
        injectIfNecessary('cordova/plugin_list', pathPrefix + 'cordova_plugins.js', function () {
            var moduleList = require('cordova/plugin_list');
            handlePluginsObject(pathPrefix, moduleList, callback);
        }, callback);
    };
    
    1. 文件名cordova.js
    function findCordovaPath () {
        var path = null;
        var scripts = document.getElementsByTagName('script');
        var term = '/cordova_ios.js';
        for (var n = scripts.length - 1; n > -1; n--) {
            var src = scripts[n].src.replace(/\?.*$/, ''); // Strip any query param (CB-6007).
            if (src.indexOf(term) === (src.length - term.length)) {
                path = src.substring(0, src.length - term.length) + '/';
                break;
            }
        }
        return path;
    }
    
    展开全文
  • 项目添加到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目录

    展开全文
  • 如今混合开发方兴未艾,有的项目可能一开始是原生开发的,后期需要加入混合开发,如将Cordova工程引进到原生工程中。那么该如何操作呢?下面就来描述一下步骤。 1、首先我们来创建一个Cordova工程,取名MyCordova。...

    如今混合开发方兴未艾,有的项目可能一开始是原生开发的,后期需要加入混合开发,如将Cordova工程引进到原生工程中。那么该如何操作呢?下面就来描述一下步骤。

    1、首先我们来创建一个Cordova工程,取名MyCordova。在创建Cordova工程之前,需要先安装Cordova,具体安装方法网上很多,在此不累述。

    cordova create MyCordova
    进入MyCordova工程目录,其结构如下:


    2、接下来添加iOS平台,添加命令如下:

    cordova platform add ios
    该命令需要在MyCordova工程根目录下执行。执行成功后,我们进入MyCordova工程下的platforms目录下,我们发现它增加了一个名为ios的文件目录。



    3、回到MyCordova工程根目录,运行刚才添加的iOS工程。

    cordova run ios

    运行效果如下:

    4、通过xcode创建一个原生工程MyApp。如果原生工程已经存在,可以忽略此步骤。

    5、将MyCordova工程中iOS下的CordovaLib文件夹和www文件夹拷贝到MyApp工程目录下。

    MyCordova目录:

    MyApp目录:

    6、参看上图。删除CordovaLib下面的build文件夹,此文件夹是在执行cordova run ios命令过程中产生的,如果你没有执行过该命令就不会产生这个文件夹。然后通过xcode的Add files to “MyApp” ...将CordovaLib.xcodeproj文件和www文件夹添加到MyApp工程中。注意,在添加www文件夹时要勾选Create folder references。如下:

    7、将MyCordova工程根目录下的config.xml也添加到MyApp工程中。至此,所需的文件拷贝添加工作已经完成,其文件结构如下:

    下面开始对对MyApp工程进行配置工作。

    8、选择MyApp工程的Build Settings->Other Linker Flags, 设置-Objc -all_load


    9、选择MyApp工程的Build Phases->Target Dependencies添加CordovaLib


    10、选择MyApp工程的Build Phases->Link Binary With Librarys添加libCordova.a、 MobileCoreServices.framework、AssetsLibrary.framework相关框架。

    到此MyApp工程已经顺利导入MyCordova工程了,点击Product->Build编译通过。下面再来创建并弹出Cordova页面。

    11、创建一个视图控制器CordovaViewController。

    其中CordovaViewController.h文件内容如下:

    #import <Cordova/CDVViewController.h>
    #import <Cordova/CDVCommandDelegateImpl.h>
    #import <Cordova/CDVCommandQueue.h>
    
    @interface CordovaViewController : CDVViewController
    
    @end
    
    @interface CordovaCommandDelegate : CDVCommandDelegateImpl
    @end
    
    @interface CordovaCommandQueue : CDVCommandQueue
    @end
    CordovaViewController.m文件内容如下:

    #import "CordovaViewController.h"
    
    @implementation CordovaViewController
    
    - (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil
    {
        self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
        if (self) {
            // Uncomment to override the CDVCommandDelegateImpl used
            // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
            // Uncomment to override the CDVCommandQueue used
            // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
        }
        return self;
    }
    
    - (id)init
    {
        self = [super init];
        if (self) {
            // Uncomment to override the CDVCommandDelegateImpl used
            // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
            // Uncomment to override the CDVCommandQueue used
            // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
        }
        return self;
    }
    
    - (void)didReceiveMemoryWarning
    {
        [super didReceiveMemoryWarning];
    }
    
    #pragma mark View lifecycle
    
    - (void)viewWillAppear:(BOOL)animated
    {
        
        [super viewWillAppear:animated];
    }
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
    }
    
    - (void)viewDidUnload
    {
        [super viewDidUnload];
    }
    
    #pragma mark UIWebDelegate implementation
    
    - (void)webViewDidFinishLoad:(UIWebView*)theWebView
    {
        theWebView.backgroundColor = [UIColor blackColor];
        
        return [super webViewDidFinishLoad:theWebView];
    }
    
    
    @end
    
    @implementation CordovaCommandDelegate
    
    
    #pragma mark CDVCommandDelegate implementation
    
    - (id)getCommandInstance:(NSString*)className
    {
        return [super getCommandInstance:className];
    }
    
    - (NSString*)pathForResource:(NSString*)resourcepath
    {
        return [super pathForResource:resourcepath];
    }
    
    @end
    
    @implementation CordovaCommandQueue
    
    - (BOOL)execute:(CDVInvokedUrlCommand*)command
    {
        return [super execute:command];
    }
    
    @end

    12、为MyApp工程中的“进入Cordova”UIButton绑定事件方法,来弹出CordovaViewController视图控制器。运行效果如下:(左边为原生视图控制器,右边为弹出的CordovaViewController视图控制器)

                            

    是不是跟在MyCordova工程中通过cordova run ios命令运行出来的效果一样呢!

    ok,至此原生工程导入Cordova工程的方法步骤全部结束。


    展开全文
  • 有些项目一开始是原生开发的,后期可能需要进行混合开发。这里提供一个在原生工程中引入Cordova工程的demo。具体导入方法可以参考我在csdn上写的博文http://blog.csdn.net/e20914053/article/details/50170487
  • 2. 安装完成后,cmd执行 npm install -g cordova ,全局安装Cordova 3. cordova -v 查看版本号 二、创建项目 如图所示 1. 使用cmd命令,创建Android项目 2. 新建项目: cordova create 文件名 包名 工程名 3. 添加...
    一、安装
    1. 下载地址:https://nodejs.org/en/
    2. 安装完成后,cmd执行 npm install -g cordova ,全局安装Cordova
    3. cordova -v 查看版本号

    二、创建项目
    如图所示
    1. 使用cmd命令,创建Android项目
    2. 新建项目: cordova create 文件名 包名 工程名

    3. 添加Android平台(需进入上述所建立的目录内): cordova platform add android




    三、导入到AS及配置

    1. 打开AS,找到项目所在位置,导入


    2. 如出现,加载项目错误 com/android/build/gradle/AppPlugin:Unsupported major.minor version 52.0,则指定compileSdkVersion和buildToolsVersion值。
    3. 替换自己本地的java版本
    4. 如出现,Failed to apply plugin [id 'com.github.dcendents.android-maven'],则修改插件版本
    如下图所示

    重新编译通过,生成应用,显示图3


    展开全文
  • 先上项目目录结构cordova项目结构 android platform 结构 图中用红框框起来的为主要修改文件 这篇主要的讲cordova项目引用了cordova-plugin-splashscreen插件后,启动webapp的时候,会先显示黑屏,然后在显示...
        

    先上项目目录结构
    cordova项目结构
    图片描述

    android platform 结构
    图片描述

    图中用红框框起来的为主要修改文件


    这篇主要的讲cordova项目引用了cordova-plugin-splashscreen插件后,启动webapp的时候,会先显示黑屏,然后在显示cordova-plugin-splashscreen设置的启动页,主要解决 先闪黑屏的问题
    关与cordova-plugin-splashscreen插件的使用方法网上很多,这里就不详解了

    方法一

    思路:把先显示的黑屏改为透明的,这样就不会先显示黑屏,而是透明,这样会造成点击应用图标时,会慢那么一点,这是因为透明看起来没有差别
    解决办法:
    图片描述

    这个文件是AndroidManifest.xml 上面的图有用红框标注在哪里,
    把这个安卓的主题改为
    图片描述

    这样就解决了启动先显示黑屏的问题
    那么问题来了,点击到显示启动页中间停留的时间,虽然比较短,但是让人感觉不好,那么请看方法二,
    方法一只需要修改一句代码,则不用新增主题文件,因为这是android自带的主题

    方法二

    思路:参考安卓的启动方式,自定义启动页显示
    解决方法:更改为自定义主题
    图片描述

    增加主题文件
    图片描述

    文件的名称为styles.xml 文件的存放路径参考上面的项目图,aaa为示例图片,存放文件夹也有在项目图上标注出来
    这样做就避免了透明主题的等待时间,一点开webapp,就显示的是aaa.png那张图片

    展开全文
  • cordova可以把html css js写的代码打包成app,还可以让js调用原生的api,Ionic...下面我们看看Vue cordova开发混合app之Vue调用Cordova插件 Vue 调用 cordova插件有两种方法: 如果想通过视频教程学习请访问:...
  • 问题:根据项目路径引入cordova.js,一直频繁的发送“gap://ready"请求 解决方案:将cordova.js引入在页面元素body后面。 原因:cordova.js里面的pokeNativeViaIframe方法首先回去找页面元素的body,如果body不存在...
  • vue项目需要添加的代码: ...-- 引入cordova.js --> <script type="text/javascript" src="cordova.js"></script> <!-- 扫一扫包的引用 --> <script type="text/javascri...
  • ionic2 cordova插件、第三方JS库引入 ionic2 cordova插件: 从ionic-native npm包导入要使用的cordova插件 1、首先命令行安装插件(项目工程根目录下): ionic plugin add cordova-plugin-app-version 2、.ts...
  • 由于ionic项目要用到拍照和相册选择的功能,首先就想到了要用到cordova-plugin-camera这个插件,上网搜了一下这个插件的用法,贴两个比较好的文章:插件用法demo:...中文API文档:...
  • cordova(phonegap)通过插件,通过js调用oc原生代码,demo
  • cordova js 如何调用原生引用 cordova 安装插件 cordova 生成插件代码与引用文件是否一致。(xcode打包使用代码与web使用代码是否一致) 程序中如何调用cordova 插件 web 浏览插件效果 app 浏览插件效果
  • 例如:cordova-plugin-wechat 这个插件可以做微信登录,分享支付等 首先第一步:ionicplugin add cordova-plugin-wechat --variable wechatappid= 你的appid 然后引用的时候:首先要在组件里面 declare let ...
  • ionic cordova 引入外部网址(网页内容)
  • 这段时间在维护一个Cordova混合项目,以前稍微接触过Cordova,也写过简单的纯纯的Cordova的Demo,但是没有尝试过混合原生的Cordova。 在接到项目后比较了一下项目架构和Cordova的结构,发现其中的差别还是不少,主要...
  • ngCordova是对Cordova的进一步封装(我是由于创建项目是找不到cordova.js,于是就用了这个)主要用于获取手机的一些信息,像相机,文件夹,网络状态等。1,首先安装bower(包管理)npm(如果是淘宝镜像cnpm)install...
  • 继上篇博文拓展。 现在开发 环境: ionic 4 + cordova 9 + angular8 + ant design for angular; 正文 基于 angular 使用第三方库 的原理 https://angular.cn/guide/using-librar...
  • ionic5+如何调用cordova插件中的方法环境安装cordova插件ionic调用cordova插件中的方法总结 目前为止,网上搜到的有关ionic的帖子都是4以下的,但是我的ionic-cli是5.4.4的,所以目录结构与网上说的有所差异,所以在...
  • 一 安装node.js下载地址:https://nodejs.org/en/安装完成后,cmd执行 npm install -g cordova ,全局安装Cordova。 注意:可能会有点慢,请耐心等待!二 cmd创建Android项目1.新建一个项目: 路径名&gt;...
1 2 3 4 5 ... 20
收藏数 3,344
精华内容 1,337