cordova_cordova 白屏 - CSDN
精华内容
参与话题
  • 在当前项目中执行命令创建my-app: ...cordova platform add ios cordova platform add android 因为电脑是windows的截图如下:   到这里我们已经创建成功了: www目录下放置的就是网页代码 ...

    在当前项目中执行命令创建my-app:

    添加安卓或IOS环境(注意ios需要mac环境才能编译,安卓可以在windows环境)

    cordova platform add ios
    cordova platform add android

    因为电脑是windows的截图如下:

     

    到这里我们已经创建成功了:

    www目录下放置的就是网页代码

    展开全文
  • 什么是Cordova?Cordova在Android中的应用

    千次阅读 2018-12-25 10:02:03
    最近在做一个项目需要使用到H5混合开发,需要研究Cordova框架,看了其中的源码和实现方式,当场在看的时候马上能理解,但是事后再回去看相关源码时候却发现之前理解的内容又忘记了,又不得不重新开始看,所以总觉得...

    前言

    最近在做一个项目需要使用到H5混合开发,需要研究Cordova框架,看了其中的源码和实现方式,当场在看的时候马上能理解,但是事后再回去看相关源码时候却发现之前理解的内容又忘记了,又不得不重新开始看,所以总觉得需要记录下来,这样也表明之前也是学习过,俗话说「好记性不如烂笔头 」,想必也是体现了笔记的重要性。

    目录

    • 为何要用Cordova

    • 什么是Cordova

    • Cordova中UML类图

    • Cordova实现机制

    • 小结

    为何要用Cordova

    随着移动互联网的发展,现在基本是APP满天飞,不知在大家印象中,如果我去下载一个APP,那么基本都能看到有两种选择,一种是Android版本,一种是IOS版本。不管我的手机是哪种操作系统,安装完一个APP之后,后续如果有新的版本发布的时候,我还必须去更新,才能享用新版本里的功能,比如我装了“京东”这个APP,前几天正好碰到“618”活动,那么之前一个月APP Store就提醒我要去更新最新的APP版本,以免错过“618”活动中新的功能使用。相对来说IOS系统更新APP比起Android系统用户体验会好一点,但是还是稍显麻烦点。

    那么有没有一种方式,我只需要开发一个APP版本,就能去适配通用的操作系统呢,不仅可以适配Android、IOS,还可以适配其他系统,比如Windows Phone、 Palm WebOS、Blackberry等等。有,Cordova就能提供这种能力,代码写一次,就能到处运行,跟我们日常开发网站效果一样,基于写Web APP,根据输出平台要求不同,就能提供不同类型的安装包。Cordova其设计初衷是希望用户群体能够通过跨平台开发的方法降低原生开发的成本,为此,开发人员需要安装原生开发环境,配置工程,使用HTML5CSS3JS和原生SDK生成应用。

    什么是Cordova

    官网定义如下:

    Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。

    使用Apache Cordova的人群:

    • 移动应用开发者,想扩展一个应用的使用平台,而不通过每个平台的语言和工具集重新实现。

    • web开发者,想包装部署自己的web App将其分发到各个应用商店门户。

    • 移动应用开发者,有兴趣混合原生应用组建和一个WebView(一个特别的浏览器窗口) 可以接触设备A级PI,或者你想开发一个原生和WebView组件之间的插件接口。

    架构图

    框架图

    从图中,我们可以看到它提供了Web APP、WebView、Cordova Plugins。

    Web APP

    这是存放应用程序代码的地方,体现是你的具体业务逻辑模块。应用的实现是通过web页面,默认的本地文件名称是是index.html,这个本地文件应用CSS,JavaScript,图片,媒体文件和其他运行需要的资源。应用执行在原生应用包装的WebView中,这个原生应用是你分发到app stores中的。

    WebView

    Cordova启用的WebView可以给应用提供完整用户访问界面。在一些平台中,他也可以作为一个组件给大的、混合应用,这些应用混合和Webview和原生的应用组件。

    Cordova Plugins

    插件是Cordova生态系统的重要组成部分。他提供了Cordova和原生组件相互通信的接口并绑定到了标准的设备API上,这使你能够通过JavaScript调用原生代码。

    Cordova中UML类图

    其实Cordova通过命令来添加项目的,但是可以选择哪个平台去编译,比如我们添加Android平台,在Android默认mainActivity类,我们可以看到它其实继承CordovaActivity类,一切初始化条件是从loadUrl方法开始。

    package com.example.hello;
    
    import android.os.Bundle;
    import org.apache.cordova.*;
    
    public class MainActivity extends CordovaActivity
    {
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
    
            // enable Cordova apps to be started in the background
            Bundle extras = getIntent().getExtras();
            if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
                moveTaskToBack(true);
            }
    
            // Set by <content src="index.html" /> in config.xml
            loadUrl(launchUrl);
        }
    }
    

    进而得到以下UML类图

    UML图

    简单分析下,CordovaActivity内依赖一个WebView类,一个Preferences类,一个CordovaInterface接口,并同时初始化一些配置信息。WebView具体实现是由CordovaWebViewImpl类,CordovaInterface接口具体实现是由CordovaInterfaceImpl类实现。

    CordovaWebViewImpl是核心类,里面会把一些插件能力初始化,用一个PluginManager进行管理,包含一个引擎类—CordovaWebViewEngine,这个引擎是通过反射的方式创建,自身初始化的时候把NativeToJsMessageQueue关联起来,里面包含着以Js字符串为主的双向链表,把每次从前端通过JS代码存储起来,然后通过绑定的桥接方式Pop出到相应的Native代码中去。

    最终实现由SystemWebViewEngine类来对Android系统中WebView控件进行二次包装,这个类的初始化是在CordovaWebViewImpl类反射创建,相关插件和消息传递也是通过SystemWebViewEngine进行绑定。

    Cordova实现机制

    当Cordova框架启动时候,CordovaActivity类中的onCreate方法调用loadUrl方法即可启动,最终在SystemWebViewEngine类的init方法中,会调用webView的addJavascriptInterface方法,看到这个方法是不是很熟悉,我们常规让webView支持开启JavaScript调用接口也是使用此特性。

     private static void exposeJsInterface(WebView webView, CordovaBridge bridge) {
            if ((Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1)) {
                LOG.i(TAG, "Disabled addJavascriptInterface() bridge since Android version is old.");
                // Bug being that Java Strings do not get converted to JS strings automatically.
                // This isn't hard to work-around on the JS side, but it's easier to just
                // use the prompt bridge instead.
                return;
            }
            SystemExposedJsApi exposedJsApi = new SystemExposedJsApi(bridge);
            webView.addJavascriptInterface(exposedJsApi, "_cordovaNative");
        }

    那么SystemExposedJsApi类new出来的对象就等同抛出“_cordovaNative”对象给JS端调用,进去看下SystemExposedJsApi类包含哪些内容,

    class SystemExposedJsApi implements ExposedJsApi {
        private final CordovaBridge bridge;
    
        SystemExposedJsApi(CordovaBridge bridge) {
            this.bridge = bridge;
        }
    
        @JavascriptInterface
        public String exec(int bridgeSecret, String service, String action, String callbackId, String arguments) throws JSONException, IllegalAccessException {
            return bridge.jsExec(bridgeSecret, service, action, callbackId, arguments);
        }
    
        @JavascriptInterface
        public void setNativeToJsBridgeMode(int bridgeSecret, int value) throws IllegalAccessException {
            bridge.jsSetNativeToJsBridgeMode(bridgeSecret, value);
        }
    
        @JavascriptInterface
        public String retrieveJsMessages(int bridgeSecret, boolean fromOnlineEvent) throws IllegalAccessException {
            return bridge.jsRetrieveJsMessages(bridgeSecret, fromOnlineEvent);
        }
    }

    其中最关键是exec方法,其中bridgeSecret代表选择哪个桥接方式,service一般对应着你本地Java文件类名,action代表java文件中方法名,callbackId代表回调函数的Id,也就是句柄,arguments代表传递的参数。看出其中设计思想了没,service往往是本地能力集的类名,比如web端想调用相机,一般起个Camera类代表这个相机服务类,然后在这个类中定义方法,也就是action参数,这个action名称可扩展,因为方法名称可各种各样,适合自定义功能扩展。

    SystemExposedJsApi对象初始化

    在创建SystemExposedJsApi时需要CordovaBridge类,CordovaBridge类初始化需要CordovaWebView的PluginManager对象和NativeToJsMessageQueue对象。因为所有的JS端与Android native代码交互都是通过SystemExposedJsApi对象的exec方法。在exec方法中执行PluginManager的exec方法,PluginManager去查找具体的Plugin并实例化然后再执行Plugin的execute方法,并根据同步标识判断是同步返回给JS消息还是异步。由NativeToJsMessageQueue统一管理返回给JS的消息。

    何时加载Plugin,如何加载

    Cordova中很重要的部分是插件,Cordova在启动每个Activity的时候都会将配置文件中的所有plugin加载到PluginManager,在第一次loadUrl方法时,就会去初始化PluginManager并加载plugin,PluginManager在加载plugin的时候并不是马上实例化plugin对象,而是只是将plugin的Class名字保存到一个hashmap中,用service名字作为key值。当JS端通过JavascriptInterface接口的SystemExposedJsApi对象请求Android时,PluginManager会从hashmap中查找到plugin,如果该plugin还未实例化,利用java反射机制实例化该plugin,并执行plugin的execute方法。

    Cordova的数据返回

    Cordova中通过exec()函数请求android插件,数据的返回可同步也可以异步于exec()函数的请求。在开发android插件的时候可以重写public boolean isSynch(String action)方法来决定是同步还是异步。Cordova在android端使用了一个队列(NativeToJsMessageQueue)来专门管理返回给JS的数据。

    1,同步
    Cordova在执行完exec()后,android会马上返回数据,但不一定就是该次请求的数据,可能是前面某次请求的数据;因为当exec()请求的插件是允许同步返回数据的情况下,Cordova也是从NativeToJsMessageQueue队列头pop头数据并返回。然后再根据callbackID反向查找某个JS请求,并将数据返回给该请求的success函数。
    2,异步
    Cordova在执行完exec()后并不会同步得到一个返回数据。Cordova在执行exec()的同时启动了一个XMLHttpRequest对象方式或者prompt()函数方式的循环函数来不停的去获取NativeToJsMessageQueue队列中的数据,并根据callbackID反向查找到相对应的JS请求,并将该数据交给success函数。

    webView.sendJavascript 发送到js队列,onNativeToJsMessageAvailable 负责执行js.

    Native 调用 JS 执行方式有三种实现 LoadUrlBridgeMode、 OnlineEventsBridgeMode、PrivateApiBridgeMode

    1、webView.sendJavascript 发送js方法到JS队列

    2、onJsPrompt 方法拦截,获取调用方式

    • 如果是gap_bridge_mode,则执行 appView.exposedJsApi.setNativeToJsBridgeMode(Integer.parseInt(message));
    • 如果是gap_poll, 则执行 appView.exposedJsApi.retrieveJsMessages("1".equals(message));

    3、调用setBridgeMode 方法调用onNativeToJsMessageAvailable 执行javascript调用

    小结

    总的来说,使用Cordova框架开发优缺点很明显。

    优点:

    • 跨平台,开发简单,学习成本低
    • 框架多,插件多,可自定义插件
    • 发展最早,社区资源丰富,

    缺点:

    • WebView性能低下时,用户体验差,反应慢
    • 毕竟是老外的框架,中文文档资源少
    • 调试不方便,既不像原生那么好调试,也不像纯web那种调试

    最后想说一句,无论是选择原生模式开发还是Hybrid混合模式,一定是要基于具体业务场景去选择,而不是盲目和绝对化觉得哪种模式好就不做分析想当然的去选择,还是有选择的结合,要知道应用之美在于药到病除。

    展开全文
  • Cordova7.X系列视频教程

    千人学习 2018-10-22 21:38:11
    本套课程详细的讲解了Cordova平台的应用开发,插件使用,如何自定一个Cordova插件。
  • Cordova入门

    万次阅读 多人点赞 2017-11-27 11:35:51
    Cordova入门 标签: 技术学习 Cordova入门 概述 1 移动端的开发模式 2 Cordova基本介绍 Cordova安装Mac环境 1 安装Nodejs 2 安装git 2 安装cordova 创建Cordova 工程 1 创建项目 1 添加平台 1 目录说明 ...

    Cordova入门


    标签:Cordova


    名词 链接 描述
    Cordova http://cordova.apache.org/ Hybrid App中间件
    ios-deploy https://github.com/phonegap/ios-deploy 使用命令行部署iOS项目
    PhoneGap https://phonegap.com/ 使用Web快速开发、打包Hybrid APP
    Node.js https://nodejs.org/en/ 基于 Chrome V8 引擎的 JavaScript 运行环境。
    npm https://www.npmjs.com/ Node.js的包管理器
    Git https://git-scm.com/ 分布式版本控制库
    ionic http://ionicframework.com/ 基于Angular的H5框架
    Angular https://angularjs.org/ 优秀的前端JS框架
    PhoneGap100 http://www.phonegap100.com/ Hybrid App社区

    1 概述

    1.1 移动端的开发模式

    • Native App
      传统的原生APP开发模式,Android基于Java语言,底层调用Google的API;iOS基于OC或者Swift语言,底层调用Apple官方提供的API。体验最好。

    • Web App
      移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指SPA(SinglePageApplication)模式开发出的网站。体验最差。

    • Hybrid App
      混合开发,由Native通过JSBridge等方法提供统一的API,然后用Html5+JS来写实际的逻辑,调用API,这种模式下,由于Android,iOS的API一般有一致性,而且最终的页面也是在webview中显示,具有跨平台效果。

    • React Native App
      Facebook开源的一套新的APP开发方案,使用JS+部分原生语法来实现功能。初次学习成本较高,但是在入门后,经过良好的封装也能够实现大部分的跨平台。而且体验很好。

    React Native不属于Hybrid 开发。虽然同样是一处编写,处处运行,但是 Hybrid是 HTML 和原生代码混合实现,而React Native只不过是以 JavaScript 的形式告诉 Objective-C 该执行什么代码。

    1.2 Cordova基本介绍

    Cordova前身是PhoneGap,而PhoneGap是Nitobi软件公司2008年推出的一个框架,旨在弥补web和iOS之间的不足,使得web和iPhone SDK之间的交互更容易,后来又陆续加入了更多的平台。
    2011年被Adobe收购,同年晚些时候,该项目核心代码被捐赠给Apache软件基金会(ASF),以保持透明和开放的发展,而Apache将其更名为Cordova。

    • Cordova提供了一组设备相关的API,通过这组API,移动应用能够以 JavaScript 访问原生的设备功能,如摄像头、麦克风等。
    • Cordova还提供了一组统一的 JavaScript 类库,以及为这些类库所用的设备相关的原生后台代码。
    • Cordova支持如下移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

    现在,Adobe PhoneGap™提供了其他Adobe服务的附加工具,包括PhoneGap Developer App,PhoneGap Desktop App,PhoneGap Build和PhoneGap Enterprise等工具。
    但是Apache Cordova依然是支持Adobe PhoneGap™的引擎,类似于WebKit为Chrome或Safari提供引擎。可以理解为Adobe PhoneGap™是Apache Cordova™的应用发行版。

    原理图如下

    架构说明图

    2 Cordova安装(Mac环境)

    2.1 安装Node.js

    要安装Cordova,需要先安装Node.js。在[Node.js官网][2]上下载并安装即可。
    运行命令 正常输出信息则安装成功

    node -v
    npm -v

    2.2 安装git

    macOS和linux都自带git,使用命令

    git --version

    检查git,如果没有安装可以到[git官网][3]下载安装一个git客户端。

    2.3 安装Cordova

    在终端执行

    sudo npm install -g cordova

    等待一段时间即可安装完毕,使用

    cordova -v

    查看安装是否成功。

    此外还有更新Cordova的命令

    sudo npm update cordova -g

    Cordova更新完成后,还需要更新平台(比如更新ios)

    cordova platform update ios

    3 创建Cordova 工程

    3.1 创建项目

    在终端中切换目录到工作目录下,执行以下命令

    cordova create hello com.example.hello HelloWorld

    参数说明

    名称 必填 描述
    hello 必填 工程的文件夹名,会创建一个同名文件夹
    com.example.hello 可选 应用程序的id名,与Xcode中类似,可以在 config.xml 中修改,如果不指定的话默认为 io.cordova.hellocordova
    HelloWorld 可选 App的名称,也可在 config.xml 中修改

    同时我们也可以通过npm平台在本地创建模板工程,可以在这里寻找.
    找到想使用的模板后,使用该模板创建项目,方法是–template在create命令中指定标志,然后指定模板源。
    从NPM,Git存储库或本地路径创建一个cordova项目:

    $ cordova create hello com.example.hello HelloWorld --template <npm-package-name>
    $ cordova create hello com.example.hello HelloWorld --template <git-remote-url>
    $ cordova create hello com.example.hello HelloWorld --template <path-to-template>

    3.2 添加平台

    然后我们需要为我们的项目添加运行的平台,比如我们添加iOS和安卓,就可以执行以下命令:(下列命令都是在项目根目录下执行,cd到hello

    cordova platform add ios
    cordova platform add android

    同时,我们也可以使用下面的命令查看Cordova 支持的平台和项目已经添加的平台:

      cordova platforms ls

    3.3 目录说明

    项目已经创建完毕, 展现出来的目录结构如下图所示:

    项目目录

    同时官方给出的目录结构是这样的:
    myapp/
    |– config.xml
    |– hooks/
    |– merges/
    | | |– android/
    | | |– windows/
    | | |– ios/
    |– www/
    |– platforms/
    | |– android/
    | |– windows/
    | |– ios/
    |– plugins/
    |–cordova-plugin-camera/

    名称 描述
    config.xml cordova的配置文件
    hooks 存放自定义Cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_build、after_build
    platforms 各个平台的项目,不要手动修改,因为在build的时候会被覆盖。
    plugins 插件目录(Cordova提供的原生API也是以插件的形式提供的)
    www 源代码目录,在Cordova prepare的时候会被copy到各个平台工程的assets\www目录中。 其中index.html为应用的入口文件。
    node_modules npm的依赖文件

    merges目录 4+的版本取消了这个文件夹
    存放各个平台特殊的文件,会和www进行合并编译,相同的文件merges下的文件优先。 比如:
    merges/
    |– ios/
    | |– app.js
    |– android/
    | |– android.js
    www/
    | |– app.js
    编译成iOS应用的话,包含merges/ios/app.js;而Android应用的话,包含www/app.js、merges/android/android.js

    3 开发项目

    3.1 工程目录和Cordova的生命周期

    使用xcode打开platforms/ios/HelloWorld.xcworkspace 来打开项目,默认的Cordova工程看起来是这个样子:
    工程

    可以看到 Staging 文件夹下面有个 www 文件夹和一个 config.xml 文件(黄色标注)。
    而在 Staging 文件夹外也有个 www 文件夹和一个 config.xml 文件(红色标注的)。
    实际上Staging 外的www文件夹就是cordova/hello下的, Staging 下的www文件夹是在platforms/ios里的, Staging 下的config.xml 金仅作用于iOS平台,主要是配置插件。
    也就是说每次Cordova编译的时候,或者更新工程、安装插件时都会重新把红色里的文件覆盖到各个平台下的文件(黄色标注的)。而且如果同时只编辑单个平台工程文件夹下的html页面,也不符合一次编写,同时编译发布多平台的跨平台应用开发思想。
    所以一般都是编辑外面的(红色标注)www文件夹里的文件,然后重新 build 工程。

    初始工程在模拟器中运行效果如下:
    运行效果



    Cordova提供APP状态的监测(iOS),包括:

    名称 描述
    deviceready 当Cordova加载完成会触发
    pause 当应用程序进入到后台会触发
    resumes 应用程序从后台进入到前台会触发



    详细的事件以及支持列表如下:
    事件监听



    我们将index页面修改为如下内容,展示APP的状态监测:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Pause Example</title>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
            <script type="text/javascript" charset="utf-8">
                //页面加载后添加各事件监听
                function onLoad() {
                    document.addEventListener("deviceready", onDeviceReady, false);
                    document.addEventListener("resume", onResume, false);
                    document.addEventListener("pause", onPause, false);
                }
    
                //Cordova加载完毕
                function onDeviceReady() {
                    alert("Cordova加载完毕!");
                }
    
                //进入后台
                function onPause() {
                    console.log("应用进入到后台!");
                }
    
                //恢复到前台
                function onResume() {
                    alert("应用回到前台运行!");
                }
            </script>
        </head>
        <body onload="onLoad()">
        </body>
    </html>

    3.2 Cordova build

    在开发完页面以后,我们需要构建项目将新的修改部署到各平台的项目中。
    如果我们向使用命令行构建和运行iOS APP需要先安装 ios-deploy
    android需要安装JDK和androidSDK。

    安装xcode命令行工具:

     xcode-select --install

    执行下列命令安装 ios-deploy:

    sudo npm install -g ios-deploy
    //如果安装失败可以使用
    sudo npm install -g ios-deploy --unsafe-perm=true
    xcodebuild

    安装后我们就可以运行以下命令为所有平台构建项目:

    cordova build

    也可以构建特定的平台 如“ios”:

    cordova build ios

    利用 ios-deploy我们可以直接使用命令:

    cordova run ios

    或在模拟器中运行:

    cordova emulate ios
    //指定模拟器使用的模拟设备:
    cordova emulate ios --target iPhone-6s
    cordova emulate ios --target iPhone-6s-Plus

    APP运行后就可以接收到状态监听如下图:
    状态监听

    3.3 浏览器访问和调试

    我们也可以启动Cordova自带的服务器,通过浏览器来访问程序页面
    (1) 运行如下命令输出访问地址:

    cordova server

    访问地址

    在浏览器中即可打开
    浏览器访问

    (2) 在Safari 中调试

    打开 Safari 的“偏好设置”-> “高级” -> “在菜单栏中显示开发菜单”

    开发菜单


    在Safari菜单项“开发” -> “Simulator”中选择对应的html页面:
    选择网页



    在调试器中可以添加断点跟踪调试:
    断点调试



    在“控制台”中就可以看到输出的调试信息:
    控制台输出

    最新的Cordova 中,iOS平台自动集成了一些开发插件,比如控制台输出,所以在Xcode的控制台我们也可以看到console.log的输出。

    4 Cordova插件

    4.1 使用核心插件

    Cordova插件使的微博APP得到了调用设备功能的能力,插件通常托管在npm上,我们可以在插件搜索页面上搜索。
    同事一些关键的API由Apache Cordova提供开源项目,这些API被称为核心插件API
    我们可以使用CLI命令打开搜索页面:

    cordova plugin search camera

    使用plugin add命令添加插件:

    cordova plugin add example

    使用下面的命令来查看当前使用的插件:

    cordova plugin ls

    插件列表

    下面我们使用相机插件来实现拍照功能
    执行下面命令来添加相机插件:

    cordova plugin add cordova-plugin-camera

    安装相机插件



    可以看到在hello/plugin目录下成功添加了相机插件
    相机目录


    同时在iOS工程下的Plugins组下也多了相机相关的代码文件

    相机代码


    修改index.html 修改为以下内容:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Capture Photo</title>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
            <script type="text/javascript" charset="utf-8">
    
                var destinationType;
    
                document.addEventListener("deviceready",onDeviceReady,false);
    
                //Cordova加载完成会触发
                function onDeviceReady() {
                    destinationType=navigator.camera.DestinationType;
                }
    
                //拍照并编辑
                function capturePhotoEdit() {
                    //拍照并获取Base64编码的图像(quality : 存储图像的质量,范围是[0,100])
                    //allowEdit: true 拍照完毕后允许简单编辑
                    //correctOrientation: true 自动旋转照片 保证照片方向正确
                    //saveToPhotoAlbum: true 拍摄后保存到相册
                    //cameraDirection: Camera.Direction.FRONT  打开前置摄像头
                    //cameraDirection: Camera.Direction.BACK  默认值 后置摄像头
                    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,
                                                allowEdit: true,
                                                destinationType: destinationType.DATA_URL });
                }
    
                //拍照成功
                function onPhotoDataSuccess(imageData) {
                    console.log(imageData);
                    var smallImage = document.getElementById('smallImage');
                    smallImage.style.display = 'block';
                    smallImage.src = "data:image/jpeg;base64," + imageData;
                }
    
                //拍照失败
                function onFail(message) {
                    alert('拍照失败: ' + message);
                }
            </script>
        </head>
        <body style="padding-top:50px">
            <button style="font-size:23px;" onclick="capturePhotoEdit();">拍照并编辑</button> <br>
            <img style="display:none;width:240px;height:240px;" id="smallImage" src="" />
        </body>
    </html>

    在iOS10 下,调用相机需要进行权限提示,需要在info.plist中添加NSCameraUsageDescription值,否则会出现crash。
    相册权限值为 NSPhotoLibraryUsageDescription

    4.2 实现自定义插件

    插件包括一个JavaScript接口以及相应的本地代码,用于支持不同的平台,同时还需要实现配置文件。

    Cordova通过JavaScript 接口来调用插件的本地原生代码,其中最核心的就是cordova.exec

    cordova.exec(function(winParam) {},
                 function(error) {},
                 "service",
                 "action",
                 ["firstArgument", "secondArgument", 42, false]);

    以下是每个参数的描述:

    名称 描述
    function(winParam) {} 成功回调函数。假设你的 exec调用成功完成,这个函数和你传递给它的参数一起执行。
    function(error) {} 错误回调函数。如果操作未成功完成,则此函数使用可选的错误参数执行。
    service 在本机平台调用的服务名称,对应于本地的同名类。
    action 在本机端调用的方法名称。这通常对应于上述类的同名方法。
    [/* arguments */] 传入本地环境的参数数组。

    Plugins 文件夹下创建 IPaynowTestPlugin类,继承自CDVPlugin,同时要引入CDVPlugin.h

    插件类

    代码如下:

    //
    //  IPaynowTestPlugin.h
    //  HelloWorld
    //
    //  Created by Chuck on 2017/11/22.
    //
    
    #import <Cordova/CDVPlugin.h>
    
    @interface IPaynowTestPlugin : CDVPlugin
    
    - (void)verifyPassword:(CDVInvokedUrlCommand*)command;
    
    @end
    //
    //  IPaynowTestPlugin.m
    //  HelloWorld
    //
    //  Created by Chuck on 2017/11/22.
    //
    
    #import "IPaynowTestPlugin.h"
    
    @implementation IPaynowTestPlugin
    
    - (void)verifyPassword:(CDVInvokedUrlCommand *)command{
    
        //插件回调
        CDVPluginResult* pluginResult = nil;
        NSString* code = @"";
        //取参
        if(command.arguments.count > 0){
             code = [command.arguments objectAtIndex:0];
        }
        //验证
        if(code .length<3){
            pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"密码格式错误"];
        }else if([code isEqualToString:@"ipaynow"]){
            pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];      
        }else{
            pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"密码错误"];
        }
        [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
    }
    
    @end



    Staging 目录下的config.xml 配置文件的widget 节点下添加如下内容:

       <feature name="iPaynowTestPlugin">
            <param name="ios-package" value="IPaynowTestPlugin" />
             <param name="onload" value="true" />
        </feature>



    修改index.html 代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <title>密码验证</title>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
                <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
                <script type="text/javascript" charset="utf-8">
                    function verify() {
                        //获取输入的字符
                        var password = document.getElementById("pwd").value;
                        //调用自定义的插件
                        Cordova.exec(successFunction, failFunction, "iPaynowTestPlugin",
                                     "verifyPassword", [password]);
                    }
    
                    //验证成功
                    function successFunction(){
                        alert("密码验证成功!");
                    }
    
                    //验证失败
                    function failFunction(message){
                        alert("验证失败:"+message);
                    }
                </script>
    
                <style> * {  font-size:1em; } </style>
        </head>
    
        <body style="padding-top:50px;">
            <input type="text" id="pwd" >
            <button onclick="verify();">验证</button>
        </body>
    
    </html>



    运行效果如下

    验证失败

    4.3 封装多平台插件

    上面的密码验证仅是iOS平台下的插件,根据一处编写多处运行的优点,我们应该将其封装为多平台通用。

    (1)安装plugman

    使用版本命令检查安装:

    plugman -v

    执行以下命令安装:

    //sudo 是为获取 `/usr/local/lib/node_modules` 的写入权限
    sudo npm install -g plugman

    安装plugman

    plugman的相关命令如下

    Create A Plugin
    ---------------
    
        $ plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
    
    Parameters:
    
     - <pluginName>: The name of the plugin
     - <pluginID>: An ID for the plugin, ex: org.bar.foo
     - <version>: A version for the plugin, ex: 0.0.1
     - <directory>: An absolute or relative path for the directory where the plugin project will be created
     - variable NAME=VALUE: Extra variables such as description or Author
    
    Add a Package.JSON file to plugin
    ---------------------------------
    Creates a package.json file in the plugin based on values from plugin.xml.
    
     $ plugman createpackagejson <directory>
    
    
    Add a Platform to a Plugin
    --------------------------
    
        $ plugman platform add --platform_name <platform>
    
    Parameters:
    
    - <platform>: One of android, ios
    
    Remove a Platform from a Plugin
    -------------------------------
    
        $ plugman platform remove --platform_name <platform>
    
    Parameters:
    
    - <platform>: One of android, ios

    (2)创建一个插件
    命令格式如下:

    $ plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
    
    名称 描述
    pluginName 插件的名称
    pluginID 插件的ID
    version 插件的版本
    directory 一个绝对或相对路径的目录,该目录将创建插件项目,缺省的话将在当前目录下创建一个插件名称的文件夹
    variable NAME=VALUE 额外的描述,如作者信息和相关描述



    示例:

    plugman create --name iPaynowTestPlugin --plugin_id iPaynowTestPlugin  --plugin_version 1.0.0



    为插件添加支持的平台,这里添加iOS和android
    cd到插件的根目录下执行:

    plugman platform add --platform_name android
    plugman platform add --platform_name ios

    执行完毕后的目录是这样的:

    创建插件

    (3)将我们的iOS 源码文件拷贝到src/ios/ 路径下

    修改plugin.xml内容如下:

    <?xml version='1.0' encoding='utf-8'?>
    <plugin id="iPaynowTestPlugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
        <name>iPaynowTestPlugin</name>
        <description>This plugin use to verify password</description>
    
        <js-module name="iPaynowTestPlugin" src="www/iPaynowTestPlugin.js">
            <clobbers target="cordova.plugins.iPaynowTestPlugin" />
        </js-module>
    
         <!-- iOS -->
        <platform name="ios">
            <config-file parent="/*" target="config.xml">
                <feature name="iPaynowTestPlugin">
                    <param name="ios-package" value="IPaynowTestPlugin" />
                </feature>
            </config-file>
    
            <header-file src="src/ios/IPaynowTestPlugin.h" />
            <source-file src="src/ios/IPaynowTestPlugin.m" />
    
        </platform>
    
           <!-- android -->
        <platform name="android">
            <config-file parent="/*" target="res/xml/config.xml">
                <feature name="iPaynowTestPlugin">
                    <param name="android-package" value="iPaynowTestPlugin.iPaynowTestPlugin" />
                </feature>
            </config-file>
    
            <config-file parent="/*" target="AndroidManifest.xml">
            </config-file>
    
            <source-file src="src/android/iPaynowTestPlugin.java" target-dir="src/iPaynowTestPlugin/iPaynowTestPlugin" />
        </platform>
    
    </plugin>
    
    



    修改iPaynowTestPlugin.js 内容如下:

    'use strict';
    
    var exec = require('cordova/exec');
    
    var iPaynowTestPlugin = {
    
      verifyPassword: function(sendMsg, onSuccess, onFail) {
        return exec(onSuccess, onFail, 'iPaynowTestPlugin', 'verifyPassword', [sendMsg]);
      }
    
    };
    
    module.exports = iPaynowTestPlugin;;

    关于Node.js 的 module 可以查看这里

    (4)配置基本完成,但是我们还需要创建一个 package.json 文件。package.json 是npm的一个描述文件,用于管理等等,
    如果没有这个文件在我们添加插件的时候,可能会出现needs a valid package.json 错误而无法安装插件。
    生成该文件的命令如下

    plugman createpackagejson <directory>

    但是目前可能是由于保留字冲突的bug,这个命令无法正常使用,总是提示pkg is not defined详细信息在这里

    不过我们可以使用下面的命令生成,开发时按提示常规填写信息即可,发布到npm平台可以再行编辑,在这里查看示例

    npm init

    npminit



    到此插件基本配置完成,效果如下
    配置成功

    (5)现在我们将本地的插件添加到项目中,我们新建一个项目 pluginTest,添加iOS和android平台

    cordova create pluginTest com.example.pluginTest pluguinTest
    cordova platform add ios
    cordova platform add android

    进入项目的根目录执行命令:

    cordova plugin add /Users/liuning1/Playground/iPaynowTestPlugin

    卸载拆件使用 cordova plugin rm iPaynowTestPlugin

    我们可以看到 在pluginTest/plugins 目录下以及iOS、android工程下都添加了我们自定义的插件。

    plugin代码

    安卓代码

    iOS代码



    (6)我们使用iOS项目演示插件的使用。
    我们依然可以使用之前使用的代码来调用插件:

    cordova.exec(successFunction, failFunction, "iPaynowTestPlugin",
                                     "verifyPassword", [password]);

    不过我们已经对插件进行了封装,可以使用更插件名称.插件方法() 来调用插件了:

       cordova.plugins.iPaynowTestPlugin.verifyPassword(password, successFunction, failFunction);

    其中 cordova.plugins.iPaynowTestPlugin 对应在插件的 plugin.xml 配置文件中的 <clobbers target="cordova.plugins.iPaynowTestPlugin" />



    再进行进步一的优化,使用匿名函数处理回调,添加插件验证,代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <title>密码验证</title>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
            <script type="text/javascript" charset="utf-8">
                function verify() {
                    //获取输入的字符
                    var password = document.getElementById("pwd").value;
                    //调用自定义的验证插件
                    if (cordova.plugins.iPaynowTestPlugin) {
                        cordova.plugins.iPaynowTestPlugin.verifyPassword(password,
                                                                         function() { alert("密码验证成功!");},
                                                                         function(message){
                                                                             alert("验证失败:"+message);
                                                                         });
                        }else{
                            alert("未安装插件!");
                        }
                    }
            </script>
            <style> * {  font-size:1em; } </style>
        </head>
        <body style="padding-top:50px;">
            <input type="text" id="pwd" >
            <button onclick="verify();">验证</button>
        </body>
    
    </html>
    

    验证成功

    (7)上传插件到npm平台
    上面我们都是在本地进行开发使用,如果想共享和远程安装,就需要上传到npm平台。
    现将插件上传到github,然后完善package.json文件内容,同时需要npm账户,如果没有注册用户,先执行:

    npm addUser

    已有用户执行登录操作:

    npm login

    最后执行发布:

    npm publish

    然后在npm中就可以找到自己上传的包,便可以通过cordova plugin add **进行插件的安装了。

    5 现有项目嵌入Cordova模块

    上面的例子中我们都是在 Cordova 创建的iOS 项目中演示,但是当我在现有的 iOS 项目中也是可以嵌入Cordova模块的。

    5.1 添加文件

    首先需要创建一个新的Cordova项目并添加 iOS 平台。

    进入新建Cordova项目的/platforms/ios文件夹,将cordova、CordovaLib、platform_www、www以及config.xml文件复制到新建Xcode项目的根路径中。

    文件

    将 Cordova/platforms/ios/HelloCordova 目录下的 config.xml,拷贝到 XcodeProject/XcodeProject 目录下:
    配置文件

    右键 Add Files to … ,将 CordovaLib.xcodeproj 添加进来

    同样 Add Files to … ,将 config.xml 添加进来

    把前面拷贝过来的 www 文件夹拖到工程中来(注意选择不复制文件,保持目录结构)

    www

    5.2 添加配置

    在配置页的 Build Settings -> Other Linker Flags 中添加”-ObjC -all_load”

    flag

    (5)在配置页的 Build Phases 标签中添加如下两个库
    Target Dependencies -> CordovaLib
    Link Binary With Libraries -> libCordova.a

    lib

    path

    点击配置页的 Build Phases 标签坐上角的加号,添加一个 Run Script

    scrp

    名字改成:Copy www directory
    去掉 show environment variables in build log 勾选
    Shell脚本的内容如下:

    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

    mul

    5.3 使用CDVViewController

    #import <Cordova/CDVViewController.h>
    #import <Cordova/CDVCommandDelegateImpl.h>
    #import <Cordova/CDVCommandQueue.h>
    #import <Cordova/CDVPlugin.h>
    - (IBAction)click:(UIButton *)sender {
        CDVViewController*cdvController = [[CDVViewController alloc]init];
    
        [self presentViewController:cdvController animated:YES completion:^{
    
        }];
    
    }

    yunx

    6 Ionic/Angular和Cordova

    6.1 三者的关系

    目前比较流行的一个开发方案是Ionic+Cordova。
    Ionic是一个基于谷歌angualr的HTML5框架,它提供了很多 UI 组件和本地原生应用组件,基于PhoneGap/Cordova的编译平台来帮助开发者快速创建跨平台的移动应用。
    Ionic是Angular的衍生品,Angular是单独的js库,和jQuery一样能够独立用于开发应用,而Ionic只是对Angular进行了扩展,利用Angular实现了很多符合移动端应用的组件,并搭建了很完善的样式库,是对Angular最成功的应用样例。
    即使不使用Ionic,Angular也可与任意样式库,如Bootstrap、Foundation等搭配使用,得到想要的页面效果。
    它们在混合开发中扮演的是不同的角色–Ionic/Angular负责页面的实现,而Cordova负责将实现的页面包装成原生应用(Android:apk;iOS:ipa)。

    ionic主页

    Angular主页

    腾讯开源的一个H5框架VasSonic

    6.1 ioniccreator

    一个可视化编辑工具,生成 ionic 项目
    点击这里

    在线编辑

    7 问题解决

    7.1 Error: spawn EACCES

    ANDROID_HOME=/Users/Chuck/Library/Android/sdk
    JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_144.jdk/Contents/Home
    Error: spawn EACCES
    

    原因是cordova中的android项目下可执行文件没有权限执行,解决办法

    cd platforms/android/cordova
    chmod 777 build log run clean version
    

    或者使用下面命令输出错误的文件路径

    cordova build --release --verbose android
    
    //输出
    
    Command finished with error code 0: /usr/libexec/java_home
    ANDROID_HOME=/Users/Chuck/Library/Android/sdk
    JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_144.jdk/Contents/Home
    Running command: "/Applications/Android Studio.app/Contents/gradle/gradle-4.1/bin/gradle" -p /Users/Chuck/Playground/1124/hello/platforms/android wrapper -b /Users/Chuck/Playground/1124/hello/platforms/android/wrapper.gradle
    Error: spawn EACCES
    

    最终解决(空格需要转义)

    $ sudo chmod -R 777 /Applications/Android\ Studio.app/Contents/gradle
    

    相关查看这里

    7.2 npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules

    $ npm install -g ios-deploy
    npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
    npm ERR! path /usr/local/lib/node_modules
    npm ERR! code EACCES
    npm ERR! errno -13
    npm ERR! syscall access
    npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
    npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
    npm ERR!   stack: 'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
    npm ERR!   errno: -13,
    npm ERR!   code: 'EACCES',
    npm ERR!   syscall: 'access',
    npm ERR!   path: '/usr/local/lib/node_modules' }
    npm ERR!
    npm ERR! Please try running this command again as root/Administrator.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/Chuck/.npm/_logs/2017-11-24T07_53_38_901Z-debug.log
    
    
    
    
    
    ** BUILD FAILED **
    
    
    The following build commands failed:
        Check dependencies
        Write auxiliary files
    (2 failures)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 65
    npm ERR! ios-deploy@1.9.2 preinstall: `./src/scripts/check_reqs.js && xcodebuild`
    npm ERR! Exit status 65
    npm ERR!
    npm ERR! Failed at the ios-deploy@1.9.2 preinstall script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/Chuck/.npm/_logs/2017-11-24T07_55_03_125Z-debug.log
    

    解决办法,使用

    sudo npm install -g ios-deploy --unsafe-perm=true
    

    7.3 ARCHIVE FAILED

    ** ARCHIVE FAILED **
    
    
    The following build commands failed:
        Check dependencies
    (1 failure)
    Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/Chuck/Playground/1124/hello/platforms/ios/cordova/build-debug.xcconfig,-workspace,HelloWorld.xcworkspace,-scheme,HelloWorld,-configuration,Debug,-destination,generic/platform=iOS,-archivePath,HelloWorld.xcarchive,archive,CONFIGURATION_BUILD_DIR=/Users/Chuck/Playground/1124/hello/platforms/ios/build/device,SHARED_PRECOMPS_DIR=/Users/Chuck/Playground/1124/hello/platforms/ios/build/sharedpch
    

    原因是开发者证书没有配置,打开Xcode,配置 signing 即可。

    展开全文
  • Cordova开发篇

    千次阅读 2019-02-01 22:47:55
    支持的Android API级别和过去几个cordova-android版本的Android版本: cordova-android 版本 支持的 API 级别 实际安卓版本 7.X.X 19 - 27 4.4 - 8.1 6.X.X 16 - 26 4.1 - 8.0.0 ...

    Android 平台

    支持的Android API级别和过去几个cordova-android版本的Android版本:

    cordova-android 版本 支持的 API 级别 实际安卓版本
    7.X.X 19 - 27 4.4 - 8.1
    6.X.X 16 - 26 4.1 - 8.0.0
    5.X.X 14 - 23 4.0 - 6.0.1
    4.1.X 14 - 22 4.0 - 5.1
    4.0.X 10 - 22 2.3.3 - 5.1
    3.7.X 10 - 21 2.3.3 - 5.0.2

    需要注意的是,此处列出的版本适用于Cordova的Android软件包,cordova-android,而不适用于Cordova CLI。 要确定Cordova项目中安装的Cordova Android软件包的版本,请在包含项目的目录中运行命令cordova platform ls。

    通常情况下,当某个Android版本在谷歌的发布平台上的支持率低于5%时,Cordova 就不再支持该Android版本。

    需求安装

    1. Java Development Kit(JDK)

    下载安装 Java 开发工具包 JDK8

    1. Gradle

    从Cordova-Android 6.4.0 起, 要构建 Android应用就必须安装Gradle

    1. Android SDK

    安装 Android Studio, 具体安装说明请查看 Android 开发网站。

    1. 添加 SDK 包

    在安装完 Android SDK后,您还必须安装您希望开发的任何API级别的包,建议您安装您的cordova-android 所支持的最高 API 版本。

    具体:打开 Android SDK 管理器,并且确保安装以下内容:

    • 您要开发的 Android SDK 版本
    • Android SDK 管理工具,版本在 19.1.0 以上。
    • Android支持库(可在“Extras”下找到)

    环境变量设置

    1. 将 $JAVA_HOME 环境变量设置为JDK安装的位置
    2. 将 $ANDROID_HOME 环境变量设置为 Android SDK 安装的位置
    3. 同时也将 Android SDK 安装目录中的 tools, tools/bin 和 platfrom-tools 添加到环境变量。

    如果您是 OS X 或 Linux 系统,可以编辑 ~/.bash_profile 文件进行环境变量设置,如:

    export ANDROID_HOME=/Development/android-sdk/
    

    更新系统 PATH:

    export PATH=${PATH}:/Development/android-sdk/platform-tools:/Development/android-sdk/tools
    

    使添加的环境变量生效:

    $ source ~/.bash_profile
    

    如果您是windows 系统,网上有很多设置设置安卓环境变量的教程,这里不再说明。

    项目配置

    模拟器配置:

    如果您希望你的Cordova App 运行在安卓模拟器上,您首先需要创建一个安卓虚拟机(AVD), 通常可以在 Android Studio 上快速创建和配置。AVD 创建完后,便可以通过 Cordova 命令运行App在模拟器上:

    $ cordova run --emulator
    
    Gradle 配置:

    对于cordova-android@4.0.0 以上,Cordova的安卓项目是使用Gradle构建的。 有关使用Ant构建的说明,请参阅文档的旧版本,注意,从Android SDK Tools 25.3.0开始,就已经不推荐使用Ant版本。

    Gradle属性配置:

    可以通过设置 Cordova 公开的一些属性来配置 Gradle,以下是关于这些属性的说明:

    属性 说明
    cdvBuildMultipleApks 配置这个属性,将生成多个 APK 文件,分别对应支持 X86、ARM 等平台,如果您的项目使用大型本地库,这个很重要,可以大大增加生成的APK 大小。如果不设置,则会生成一个可在多平台架构上使用的APK。
    cdvVersionCode 会覆盖 AndroidManifest.xml 中的版本号
    cdvReleaseSigningPropertiesFile 配置发行应用的签名文件,默认:release-signing.properties
    cdvDebugSigningPropertiesFile 构建调试应用的签名文件,默认:debug-signing.properties, 在需要与其他开发人员共享签名密钥时非常有用
    cdvMinSdkVersion 覆盖 AndroidManifest.xml 中的 minSdkVersion, 在根据 SDK 版本创建多个 APK时有用。
    cdvBuildToolsVersion 覆盖自动检测到的 android.buildToolsVersion 值
    cdvCompileSdkVersion 覆盖自动检测到的 android.compileSdkVersion 值

    你可以通过以下 4 种方式来设置这些属性:

    1. 通过设置环境变量:
      $ export ORG_GRADLE_PROJECT_cdvMinSdkVersion=20
      $ cordova build android
    
    1. 在 Cordova build 或 run 命令中使用 --gradleArg 参数:
    $ cordova run android -- --gradleArg=-PcdvMinSdkVersion=20
    
    1. 在 /platforms/android 目录下创建一个文件:gradle.properties,输入类似以下内容:
    # In <your-project>/platforms/android/gradle.properties
    cdvMinSdkVersion=20
    
    1. 使用 build-extras.gradle 文件对 build.gradle 进行扩展,类似如下所示设置属性:
    // In <your-project>/platforms/android/build-extras.gradle
    ext.cdvMinSdkVersion = 20
    

    后面两种方式都是通过在您的安卓平台目录下添加一个额外的文件来进行属性配置,通常,不建议您编辑此文件夹的内容,因为这些更改很容易丢失或覆盖。 相反,应使用before_build hook 将这两个文件从另一个位置复制到该文件夹中作为构建命令的一部分。

    扩展 build.gradle 文件

    如果您需要自定义 build.gradle 文件,您应该创建一个名为build-extras.gradle的兄弟文件。此文件必须放在android平台目录( / platforms / android)中,因此建议您通过附加到before_build挂钩的脚本将其复制。

    一个例子如下:

    // Example build-extras.gradle
    // This file is included at the beginning of `build.gradle`
    ext.cdvDebugSigningPropertiesFile = '../../android-debug-keys.properties'
    
    // When set, this function allows code to run at the end of `build.gradle`
    ext.postBuildExtras = {
        android.buildTypes.debug.applicationIdSuffix = '.debug'
    }
    

    请注意,插件还可以通过以下方式包含build-extras.gradle文件:

    <framework src="some.gradle" custom="true" type="gradleReference" />
    
    设置版本号

    要更改应用程序生成的apk的版本代码,请在应用程序的config.xml文件的widget元素中设置android-versionCode属性。 如果未设置android-versionCode,则将使用version属性确定版本代码。 例如,如果版本是MAJOR.MINOR.PATCH:

    versionCode = MAJOR * 10000 + MINOR * 100 + PATCH
    

    如果您的应用程序已启用cdvBuildMultipleApks Gradle属性(请参阅设置Gradle属性),则应用程序的版本代码也将乘以10,以便代码的最后一位数字可用于指示apk构建的体系结构。 无论版本代码是从android-versionCode属性获取还是使用 version 生成,都会发生这种乘法。 请注意,添加到项目中的某些插件(包括cordova-plugin-crosswalk-webview)可能会自动设置此Gradle属性。

    请注意:更新android-versionCode属性时,从构建的apks获取的版本号来增加是不明智的。 相反,您应该根据config.xml文件的android-versionCode属性中的值来增加。 这是因为cdvBuildMultipleApks属性导致版本号在构建的apks中乘以10,因此使用该值将导致您的下一个版本代码是原始版本号的100倍,等等。

    签署应用程序

    使用标志

    要签署应用程序,您需要用到以下参数:

    参数 标志 说明
    Keystore –keystore 二进制文件的路径,可以容纳一组密钥
    Keystore Password –storePassword 密钥库的密码
    Alias –alias id指定用于签名的私钥
    Password –password 指定私钥的密码
    Type of the Keystore –keystoreType 默认值:基于文件扩展名自动检测

    无论是pkcs12还是jks默认值:基于文件扩展名自动检测
    无论是pkcs12还是jks

    可以使用上面的命令行参数为Cordova CLI构建或运行命令指定这些参数。

    注意:您应该使用双 “-” 表示这些是特定于平台的参数,例如:

    cordova run android --release -- --keystore=../my-release-key.keystore --storePassword=password --alias=alias_name --password=password
    
    使用 build.json

    或者,您可以使用相同命令的–buildConfig参数在构建配置文件(build.json)中指定它们。 以下是构建配置文件的示例:

    {
        "android": {
            "debug": {
                "keystore": "../android.keystore",
                "storePassword": "android",
                "alias": "mykey1",
                "password" : "password",
                "keystoreType": ""
            },
            "release": {
                "keystore": "../android.keystore",
                "storePassword": "",
                "alias": "mykey2",
                "password" : "password",
                "keystoreType": ""
            }
        }
    }
    

    对于发布签名,可以排除密码,构建系统将发出询问密码的提示。

    还支持在build.json中混合和匹配命令行参数和参数。 命令行参数中的值将优先。 这对于在命令行上指定密码很有用。

    使用 Gradle

    您还可以通过包含.properties文件并使用cdvReleaseSigningPropertiesFile和cdvDebugSigningPropertiesFile Gradle属性指向它来指定签名属性(请参阅设置Gradle属性)。 该文件应如下所示:

    storeFile=relative/path/to/keystore.p12
    storePassword=SECRET1
    storeType=pkcs12
    keyAlias=DebugSigningKey
    keyPassword=SECRET2
    

    storePassword和keyPassword是可选的,如果省略则会提示输入。

    调试

    有关Android SDK随附的调试工具的详细信息,请参阅Android的开发人员文档以进行调试。 此外,Android的用于调试Web应用程序的开发人员文档提供了有关调试Webview中运行的应用程序部分的简介。

    Android Studio中打开一个项目

    Cordova-Android 项目可以在 Android Studio中打开。 如果您希望使用Android Studio内置的Android调试/分析工具,或者您正在开发Android插件,这将非常有用。 请注意,在Android studio中打开项目时,建议您不要在IDE中编辑代码。 这将编辑项目的平台文件夹(而不是www)中的代码,并且可能会覆盖更改。您应该编辑www文件夹并通过运行cordova build复制您的更改。

    希望在IDE中编辑其本机代码的插件开发人员在通过cordova插件添加将其插件添加到项目时应使用–link标志。 这将链接文件,以便对平台文件夹中的插件文件的更改反映在插件的源文件夹中(反之亦然)。

    要在Android Studio中打开Cordova-Android 项目:

    1. 启动 Android Studio
    2. 选择导入一个项目
      在这里插入图片描述
    3. 选择 Android 平台目录,(/platforms/android).
      在这里插入图片描述
    4. 对于Gradle Sync问题,您只需回答“是”即可。

    完成导入后,您应该能够直接从Android Studio构建和运行应用程序。 有关详细信息,请参阅Android Studio概述以及从Android Studio构建和运行。
    在这里插入图片描述

    以平台为中心的工作流程

    cordova-android包含许多脚本,允许在没有完整Cordova CLI的情况下使用该平台。 在某些情况下,此开发路径可为您提供比跨平台cordova CLI更多的开发选项。 例如,在将自定义Cordova WebView与本机组件一起部署时,需要使用shell工具。 在使用此开发路径之前,您仍必须按照上面的“要求和支持”中的说明配置Android SDK环境。

    有关下面讨论的每个脚本,请参阅 Cordova CLI。 每个脚本都有一个与相应CLI命令匹配的名称。 例如,cordova-android / bin / create相当于cordova创建。

    首先,从npm或Github下载cordova-android软件包。

    要使用此包创建项目,请在bin文件夹中运行create script:

    $ cordova-android/bin/create
    

    创建的项目将在其中包含一个名为cordova的文件夹,其中包含项目特定Cordova命令的脚本(例如,运行,构建等)。 此外,该项目将采用与普通Cordova项目不同的结构。 值得注意的是,/ www被移至/ assets / www。

    生命周期

    Cordova 与 Android

    原生Android应用程序通常包含用户与之交互的一系列活动。 可以将活动视为构成应用程序的各个屏幕; 应用程序中的不同任务通常会有自己的活动。 每个活动都有自己的生命周期,在活动进入和离开用户设备的前台时进行维护。

    相比之下,Android平台上的Cordova应用程序在嵌入在单个Android活动中的Webview中执行。 此活动的生命周期通过触发的文档事件向您的应用程序公开。 这些事件不能保证与Android的生命周期一致,但它们可以提供保存和恢复状态的指南。 这些事件大致映射到Android回调,如下所示:

    Cordova 事件 对应的 Andrid 事件 说明
    deviceready onCreate() 应用程序正在启动(不是从后台)
    pause onPause() 应用程序进入后台运行
    resume onResume() 应用程序返回到前台

    大多数其他Cordova平台都有类似的生命周期概念,并且当用户的设备上发生类似的操作时,应触发这些相同的事件。 然而,Android带来了一些独特的挑战,由于原生活动生命周期,这些挑战有时会出现。

    为什么 Android 与众不同?

    在Android中,操作系统可以选择在后台终止活动,以便在设备内存不足时释放资源。 不幸的是,当您的应用程序活动被终止时,您的应用程序所在的Webview也将被销毁。 在这种情况下,您的应用程序维护的任何状态都将丢失。 当用户导航回您的应用程序时,操作系统将重新创建活动和Web视图,但不会为您的Cordova应用程序自动恢复状态。 因此,您的应用程序必须了解触发的生命周期事件并维护适当的状态,以确保应用程序中的用户上下文在离开应用程序时不会丢失。

    什么时候会发生?

    您的应用程序在离开用户视线时很容易被操作系统破坏, 有两种主要情况可能发生。 第一个也是最明显的情况是用户按下主页按钮或切换到另一个应用程序。

    但是,某些插件可以引起第二种(更微妙的)情况。 如上所述,Cordova应用程序通常仅限于包含Webview的单个活动。 但是,有些情况下插件可以启动其他活动,并暂时将Cordova活动推送到后台。 通常会启动这些其他活动,以便使用设备上安装的本机应用程序执行特定任务。 例如,Cordova相机插件会启动设备上原生安装的任何相机活动以拍摄照片。 以这种方式重新使用已安装的相机应用程序会使您的应用程序在用户尝试拍照时更像本机应用程序。 不幸的是,当本机Activity将您的应用推送到后台时,操作系统有可能会将其杀死。

    为了更清楚地理解第二种情况,让我们来看一个使用相机插件的例子。 想象一下,您有一个需要用户拍摄个人资料照片的应用程序。 一切按计划进行时,应用程序中的事件流将如下所示:

    1. 用户正在与您的应用进行交互,需要拍照
    2. 相机插件启动本地相机活动
      • Cordova活动被推送到后台(触发暂停事件)
    3. 用户拍了一张照片
    4. 相机活动结束
    5. Cordova活动被移到前台(恢复事件被触发)
    6. 用户返回到他们中断的应用程序

    但是,如果设备内存不足,则可能会中断此事件流。 如果活动被操作系统杀死,则上述事件序列将显示如下:

    1. 用户正在使用您的应用程序并且需要拍一张照片
    2. 相机插件启动本地相机活动
      • 操作系统破坏Cordova活动(暂停事件被触发
    3. 用户拍了一张照片
    4. 相机活动完成
      • 操作系统重新创建Cordova活动(deviceready 和resume 事件被触发)
    5. 用户对于他们突然回到您应用的登录屏幕的原因感到困惑

    在这种情况下,操作系统在后台杀死了应用程序,并且应用程序没有将其状态维持为生命周期的一部分。 当用户返回到应用程序时,Webview被重新创建,并且应用程序似乎已从头开始重新启动(因此用户感到困惑)。 这一系列事件等同于按下主页按钮或用户切换应用程序时发生的事件。 防止上述情况出现的关键是订阅事件并将状态正确地保持为活动生命周期的一部分。

    遵循生命周期

    在上面的示例中,触发的javascript事件(斜体显示部分)。 这些事件是您保存和恢复应用程序状态的机会。 您应该在应用程序的 bindEvents 函数中注册回调,该函数通过保存状态来响应生命周期事件。 您保存的信息以及保存方式由您自行决定,但您应确保保存足够的信息,以便用户可以在用户返回应用程序时将其恢复到原来的位置。

    在上面的示例中还有一个附加因素仅适用于第二个讨论的情况(即插件启动外部活动时)。 当用户完成拍照时,不仅应用程序的状态丢失,而且用户拍摄的照片也是如此。 通常,该照片将通过在相机插件中注册的回调传送到您的应用程序。 然而,当Webview被破坏时,回调永远丢失了。 幸运的是,cordova-android 5.1.0及更高版本提供了一种在应用程序恢复时获取该插件调用结果的方法。

    获取插件回调结果(cordova-android 5.1.0+)

    当操作系统破坏通过插件推送到后台的Cordova活动时,任何挂起的回调也会丢失。 这意味着如果您将回调传递给启动新活动的插件(例如相机插件),则在重新创建应用程序时不会触发该回调。 但是,从cordova-android 5.1.0开始,resume 事件的有效负载将包含插件请求中的任何挂起的插件结果,这些结果来自于在活动被销毁之前启动外部活动的插件请求。

    resume事件的有效负载遵循以下格式:

    {
        action: "resume",
        pendingResult: {
            pluginServiceName: string,
            pluginStatus: string,
            result: any
        }
    }
    

    该有效载荷的字段定义如下:

    • pluginServiceName:返回结果的插件的名称(例如“Camera”)。 这可以在插件的plugin.xml文件的标记中找到
    • pluginStatus:插件调用的状态(见下文)
    • result:无论插件调用的结果是什么

    pendingResult字段中pluginStatus的可能值包括以下内容:

    • “OK” - 插件调用成功
    • “No Result” - 插件调用结束,没有结果
    • “Error” - 插件调用导致一些常见错误
    • 其他杂项错误
      • “找不到类”
      • "非法访问”
      • "实例化错误”
      • "格式错误的网址”
      • "IO错误”
      • "无效的动作”
      • "JSON错误”

    请注意,由插件决定结果字段中包含的内容以及返回的pluginStatus的含义。 查看您正在使用的插件的相关API,这些字段应该包含的内容以及如何使用它们的值。

    例子

    下面是一个简短的示例应用程序,它使用resume和pause事件来管理状态。 它使用Apache相机插件作为如何从resume事件有效负载检索插件调用结果的示例。 处理resume的event.pendingResult对象的代码部分需要cordova-android 5.1.0+

    // This state represents the state of our application and will be saved and
    // restored by onResume() and onPause()
    var appState = {
        takingPicture: true,
        imageUri: ""
    };
    
    var APP_STORAGE_KEY = "exampleAppState";
    
    var app = {
        initialize: function() {
            this.bindEvents();
        },
        bindEvents: function() {
            // Here we register our callbacks for the lifecycle events we care about
            document.addEventListener('deviceready', this.onDeviceReady, false);
            document.addEventListener('pause', this.onPause, false);
            document.addEventListener('resume', this.onResume, false);
        },
        onDeviceReady: function() {
            document.getElementById("take-picture-button").addEventListener("click", function() {
                // Because the camera plugin method launches an external Activity,
                // there is a chance that our application will be killed before the
                // success or failure callbacks are called. See onPause() and
                // onResume() where we save and restore our state to handle this case
                appState.takingPicture = true;
    
                navigator.camera.getPicture(cameraSuccessCallback, cameraFailureCallback,
                    {
                        sourceType: Camera.PictureSourceType.CAMERA,
                        destinationType: Camera.DestinationType.FILE_URI,
                        targetWidth: 250,
                        targetHeight: 250
                    }
                );
            });
        },
        onPause: function() {
            // Here, we check to see if we are in the middle of taking a picture. If
            // so, we want to save our state so that we can properly retrieve the
            // plugin result in onResume(). We also save if we have already fetched
            // an image URI
            if(appState.takingPicture || appState.imageUri) {
                window.localStorage.setItem(APP_STORAGE_KEY, JSON.stringify(appState));
            }
        },
        onResume: function(event) {
            // Here we check for stored state and restore it if necessary. In your
            // application, it's up to you to keep track of where any pending plugin
            // results are coming from (i.e. what part of your code made the call)
            // and what arguments you provided to the plugin if relevant
            var storedState = window.localStorage.getItem(APP_STORAGE_KEY);
    
            if(storedState) {
                appState = JSON.parse(storedState);
            }
    
            // Check to see if we need to restore an image we took
            if(!appState.takingPicture && appState.imageUri) {
                document.getElementById("get-picture-result").src = appState.imageUri;
            }
            // Now we can check if there is a plugin result in the event object.
            // This requires cordova-android 5.1.0+
            else if(appState.takingPicture && event.pendingResult) {
                // Figure out whether or not the plugin call was successful and call
                // the relevant callback. For the camera plugin, "OK" means a
                // successful result and all other statuses mean error
                if(event.pendingResult.pluginStatus === "OK") {
                    // The camera plugin places the same result in the resume object
                    // as it passes to the success callback passed to getPicture(),
                    // thus we can pass it to the same callback. Other plugins may
                    // return something else. Consult the documentation for
                    // whatever plugin you are using to learn how to interpret the
                    // result field
                    cameraSuccessCallback(event.pendingResult.result);
                } else {
                    cameraFailureCallback(event.pendingResult.result);
                }
            }
        }
    }
    
    // Here are the callbacks we pass to getPicture()
    function cameraSuccessCallback(imageUri) {
        appState.takingPicture = false;
        appState.imageUri = imageUri;
        document.getElementById("get-picture-result").src = imageUri;
    }
    
    function cameraFailureCallback(error) {
        appState.takingPicture = false;
        console.log(error);
    }
    
    app.initialize();
    

    对应的 html:

    <!DOCTYPE html>
    
    <html>
        <head>
            <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
            <meta name="format-detection" content="telephone=no">
            <meta name="msapplication-tap-highlight" content="no">
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
            <link rel="stylesheet" type="text/css" href="css/index.css">
            <title>Cordova Android Lifecycle Example</title>
        </head>
        <body>
            <div class="app">
                <div>
                    <img id="get-picture-result" />
                </div>
                <Button id="take-picture-button">Take Picture</button>
            </div>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
        </body>
    </html>
    
    测试 Activity(活动)的生命周期

    Android提供了一个开发人员设置,用于测试低内存上的Activity销毁。 在设备或仿真器的“开发人员选项”菜单中启用“不要保留活动”设置,以模拟低内存情况。 您应始终在启用此设置的情况下进行一些测试,以确保您的应用程序正确维护状态。

    IOS 平台

    要求与支持

    构建iOS应用程序所需的Apple®工具需在基于Intel的Mac上的OS X操作系统上运行。 Xcode®7.0(最低要求版本)需要在OS X版本10.10.4(Yosemite)或更高版本上运行,并包含iOS 9 SDK(软件开发工具包)。 要将应用程序提交到Apple App Store,需要最新版本的Apple工具。

    您可以使用随iOS SDK和Xcode一起安装的iOS模拟器测试许多Cordova功能,但在提交到App Store之前,您需要一个实际的设备来完全测试应用程序的所有设备功能。 该设备必须至少安装iOS 8,从Cordova 4.0.0开始支持最低iOS版本。 支持的设备包括iPhone 4S,iPhone 5,iPhone 5C,iPhone 5S,iPhone 6,iPhone 6 Plus,iPhone 6S,iPhone 6S Plus,iPhone SE,iPad 2,iPad 3,iPad 4,iPad Air,iPad Air 2,iPad Pro ,iPad Mini,iPad Mini 2,iPad Mini 3,iPod Touch 5th gen和iPod Touch 6th或更高版本。

    要求安装

    Xcode

    有两种方式可以安装 Xcode:

    • App Store中下载,可通过在App Store应用程序中搜索“Xcode”获得。
    • Apple 开发平台中下载,需要注册为Apple 开发人员。

    安装Xcode后,需要启用多个命令行工具才能运行Cordova。 在终端执行命令:

    $ xcode-select --install
    
    部署工具

    ios-deploy工具允许您从命令行在iOS设备上启动iOS应用程序。在终端执行命令:

    $ npm install -g ios-deploy
    

    项目配置

    安装完上面的东西后,您现在就可以创建和构建一个 Cordova 项目了,更多细节,请参考另一篇博文《Cordova快速入门篇》。

    部署应用到模拟器

    要在iOS模拟器中预览应用程序:

    1. 从Xcode或命令行打开工作区文件(platforms / ios / HelloWorld.xcworkspace):
    $ open ./platforms/ios/HelloWorld.xcworkspace/
    
    1. 确保在左侧面板中选择了HelloWorld项目(1)。
      在这里插入图片描述
    • 从工具栏的 Scheme 菜单中选择目标设备,例如(2)中突出显示的iPhone 7 Plus Simulator
    • Scheme 菜单左侧相同工具栏中的 Run 按钮(3)。 它将在模拟器中构建,部署和运行应用程序。 将打开一个单独的模拟器应用程序以显示该应用:
      在这里插入图片描述
      一次只能运行一个模拟器,因此如果要在不同的模拟器中测试应用程序,则需要退出模拟器应用程序并在Xcode中运行不同的目标。

    Xcode捆绑了最新版iPhone和iPad的模拟器。 可以从Xcode→首选项…→组件 面板中获得旧版本。

    部署应用到设备

    有关部署到设备的各种要求的详细信息,请参阅Apple的 App 部署流程 。 简而言之,在部署之前需要执行以下操作:

    1. ios 配置面板 中创建配置文件。 您可以使用 Apple 的 开发配置助手 来创建和安装 Xcode 所需的配置文件和证书。

    2. 验证构建设置中代码签名部分中的代码签名标识设置是否设置为您的配置文件名称。

    部署应用到设备:

    1. 使用 USB 接口将您的设备连接到 Mac。
    2. 在 Xcode 的左侧面板的项目列表中选择您要运行的项目
    3. 在 Xcode 的 Scheme 菜单左侧的下拉列表中选择您的设备。
    4. 按下 Run 按钮,将会执行构建,部署并运行应用程序到您的设备上。

    App 签名

    首先,请查看 Apple 开发人员网站的 代码签名支持应用部署流程

    使用标识符

    要对 App 进行签名,您需要了解以下参数:

    参数名 标识符 说明
    代码签名身份 –codeSignIdentity2 用于签名的代码签名身份。 它可以使用Xcode创建并添加到您的钥匙串中。 从Xcode 8开始,您应该使用–codeSignIdentity =“iPhone Developer”进行调试和发布。
    开发团队 –developmentTeam 用于代码签名的开发团队(团队ID)。 您可以使用此设置和简化的代码签名身份(即只是“iPhone开发人员”)来签署您的应用程序,无需提供配置文件。
    打包类型 –packageType 这会决定 Xcode 构建什么类型的 App。 有效选项包括开发(默认),企业,ad-hoc和应用商店。
    配置文件 –provisioningProfile (可选)用于手动签名的配置文件的GUID。 它会在 Mac 上复制:〜/ Library / MobileDevice / Provisioning \ Profiles /。 在文本编辑器中打开它,如果使用手动签名,您可以找到需要在此处指定的GUID。
    代码签名资源规则 –codesignResourceRules (可选)用来配置哪些文件会作为代码签名的捆绑,查看 OS X 代码签名 了解更多信息。
    自动配置 –automaticProvisioning (可选)启用以允许Xcode自动管理配置文件。 有效选项为false(默认值)和true。
    使用 build.json

    或者,您可以使用相同命令的–buildConfig参数在构建配置文件(build.json)中指定它们。 以下是构建配置文件的示例:

    对于自动签名,配置配置文件由Xcode自动管理(推荐):

    {
        "ios": {
            "debug": {
                "codeSignIdentity": "iPhone Developer",
                "developmentTeam": "FG35JLLMXX4A",
                "packageType": "development",
                "automaticProvisioning": true,
                "buildFlag": [
                    "EMBEDDED_CONTENT_CONTAINS_SWIFT = YES",
                    "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO",
                    "LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\""
                ]
            },
            "release": {
                "codeSignIdentity": "iPhone Developer",
                "developmentTeam": "FG35JLLMXX4A",
                "packageType": "app-store",
                "automaticProvisioning": true,
                "buildFlag": [
                    "EMBEDDED_CONTENT_CONTAINS_SWIFT = YES",
                    "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO",
                    "LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\""
                ]
            }
        }
    }
    

    对于手动签名,要根据 UUID 指定配置文件:

    {
        "ios": {
            "debug": {
                "codeSignIdentity": "iPhone Development",
                "provisioningProfile": "926c2bd6-8de9-4c2f-8407-1016d2d12954",
                "developmentTeam": "FG35JLLMXX4A",
                "packageType": "development"
            },
            "release": {
                "codeSignIdentity": "iPhone Distribution",
                "provisioningProfile": "70f699ad-faf1-4adE-8fea-9d84738fb306",
                "developmentTeam": "FG35JLLMXX4A",
                "packageType": "app-store"
            }
        }
    }
    

    Xcode 构建标志符

    如果您有自定义情况需要将其他构建标志传递给Xcode - 您将使用一个或多个 --buildFlag 选项将这些标志传递给 xcodebuild。 如果您使用 xcodebuild 内置标志,它将显示警告。 您还可以在上面的build.json中指定buildFlag选项(buildFlag键的值是字符串或字符串数组)。

    cordova build --device --buildFlag="MYSETTING=myvalue" --buildFlag="MY_OTHER_SETTING=othervalue"
    cordova run --device --buildFlag="DEVELOPMENT_TEAM=FG35JLLMXX4A" --buildFlag="-scheme TestSchemeFlag"
    

    调试

    有关Xcode附带的调试工具的详细信息,请查看这篇Apple 开发调试部分

    用于iOS项目的Cordova可以在Xcode中打开。如果您希望使用内置调试/分析工具的Xcode,或者您正在开发iOS插件,这将非常有用。请注意,在Xcode中打开项目时,建议您不要在IDE中编辑代码。这将编辑项目的平台文件夹(而不是www)中的代码,并且可能会覆盖更改。而是编辑www文件夹并通过运行cordova build复制您的更改。

    希望在IDE中编辑其原生代码的插件开发人员在通过cordova插件添加将其插件添加到项目时应使用–link标志。这将链接文件,以便对平台文件夹中的插件文件的更改反映在插件的源文件夹中(反之亦然)。

    将ios平台添加到项目并使用cordova构建后,您可以在Xcode中打开它。双击打开$ {PROJECT_NAME} / platforms / ios / $ {PROJECT_NAME} .xcworkspace文件或从终端打开Xcode:

    $ open -a Xcode platforms/ios
    

    界面如下所示:
    在这里插入图片描述

    更新

    有关升级cordova-ios版本的说明,请参阅此文章

    展开全文
  • cordova详解及介绍

    千次阅读 2015-11-04 16:06:31
    一、Cordova 核心java类说明   CordovaActivity:Cordova Activity入口,已实现PluginManager、WebView的相关初始化工作, 只需继承CordovaActivity实现自己的业务需求。 PluginManager: 插件管理器 ...
  • Cordova

    2019-01-18 17:04:13
    最近做项目,顺便学学cordova打包APK,踩过很多坑,最后总结出一份完整的cordova环境配置笔记和APP打包笔记: 简介: Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如...
  • cordova实际使用总结

    千次阅读 2016-08-09 08:30:30
    新入职安卓开发,遇到的第一个任务是优化之前的一个hybird项目,cordova+jquerymobile,cordova目前版本是6.3.0,很多以前的文章都不能解决实际开发中遇到的问题,特地总结此文,希望玩cordova6.3.0的同志们少走点...
  • CORDOVA介绍

    2017-01-26 12:02:17
    Apache Cordova is an open-source mobile development framework.(Cordova是一个开源的移动开发框架) It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform d
  • Cordova小结

    千次阅读 2015-12-30 15:18:13
    环境配置1. 安装node.js主要有两种方法: 源安装(.tar.gz) 或者 apt-get install 安装方法一:准备一些包 sudo apt-get install g++ curl libssl-dev apache2-utils git是不可少的 sudo apt-get install git-core ...
  • cordova

    千次阅读 2018-07-17 09:23:32
    先了解Cordova cordova的作用是提供JavaScript调用移动设备的API接口,cordova只完成这一个工作,并且完成的很好。   Cordova并没有提供UI框架,因为开发人员需要使用css、HTML、JavaScript等技术来开发UI界面...
  • Android混合开发环境搭建(cordova

    千次阅读 2017-05-24 11:05:55
    开发软件准备:Android Studio、Node.js、cordova(混合开发框架) 第一步,安装Node.js,下载Node.js的安装包,直接安装即可。之前下载的6.10.3的版本,在dos命令下怎么也安装不成功cordova,后来改成6.10.2的版本,...
  • 1. 建立专案(cordova) 打开cmd命令行 cordova create ACESMobile aces.mobile ACES cd acesmobile 如图 2. 安装插件 cordova pluginadd命令需要您指定的外掛程式代碼的存儲庫。以下是您可能會添加的功能的示例...
  • cordova安装和打包

    万次阅读 2015-12-11 10:21:00
    最近,实验室在做一个适配于手机的web项目(可以说是一个混合应用开发),最后需要打包成apk程序,作为一名对移动开发的研究者,这个打包的任务就自然落在了我的头上,下面讲解一下安装cordova和用cordova打包apk的...
  • 在PhoneGap里添加Android平台的方式是在node.js中输入cordova platform add --save android 但是通常会下面显示 Using cordova-fetch for cordova-android@6.2.2 然后长时间没有响应,这时你可以分别依次执行...
  • cordova插件汇总大全

    万次阅读 2017-08-01 15:46:44
    cordova plugin add cordova-plugin-app-version 2、获取网络连接信息 cordova plugin add cordova-plugin-network-information 3、获取GPS数据 cordova plugin add cordova-plugin-geolocation
  • Cordova 卸载

    千次阅读 2017-12-21 10:01:53
    一、如何卸载Cordova Cordova是npm的一个模块,可以使用npm uninstall命令卸载 npm uninstall cordova -g 如果cordova依赖插件等不完整,则卸载会失败。 解决方案是:手动删除模板和缓存等 1.删除模块 2....
  • Cordova添加android平台时选择安装版本

    万次阅读 2016-12-16 23:55:05
    Cordova添加平台的时候都会有个默认值,一般都是选择最新的版本。 我使用的Cordova版本是6.4.0,在进行添加android平台是它给我选了6.0.0版本,当我使用 cordova platform add android 的时候它是成功的帮我创建了...
  • 问题: 安装cordova 相机插件时提示:插件不支持这个项目的cordova-android版本。应该 到platform下的android文件夹下的platforms.json文件夹下果然看到是6.3版本,既然提示了应低于该版本,安装一个低的安卓平台就...
  • phonegap/cordova 升级版本

    万次阅读 2014-03-05 11:23:53
    随着 phonegap的版本升级 大家都需要同步更新 升级是在大家以官方的...npm update -g cordova 如果是 mac系统的用户 使用: sudo npm update -g cordova   查看cordova信息 npm info cordova   查看cordova 版本
1 2 3 4 5 ... 20
收藏数 23,488
精华内容 9,395
关键字:

cordova