cordova_cordova3 - CSDN
  • Cordova7.X系列视频教程

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

    2017-08-13 17:14:54
    Cordova初探最近研究hybrid应用了解到可以使用cordova这个框架,所以就简单尝试了一下使用cordova实现一个简单的Android应用。由于网上资料确实很少,所以记录一下自己的学习经历。概述 与以往做原生Android不同,...

    Cordova初探

    最近研究hybrid应用了解到可以使用cordova这个框架,所以就简单尝试了一下使用cordova实现一个简单的Android应用。由于网上资料确实很少,所以记录一下自己的学习经历。

    概述

    与以往做原生Android不同,使用cordova开发app其实就是写HTML+CSS+JS。基于这点Apache组织将原生访问设备相关的API封装成了插件,插件分为两部分一部分是原生Android代码,还有一部分就是js代码,编写者只需要调用js代码就可以访问系统设备,不用熟悉原生Android接口就可以编写移动端应用。但是如果你需要一些特别的功能,这时插件可能就不能完全满足你的要求了,所以你就需要自定义插件。

    1.环境搭建

    与原生Android不同,cordova应用需要使用node.js的一个依赖库cordova来创建cordova应用,然后将这个应用导入到我们的AndroidStudio中,具体可以看这篇博文http://blog.csdn.net/jia516967927/article/details/51517226

    下载nodejs以后会附带一个npm,它可以下载nodejs平台的各种库,但是用它下载速度极慢,所以可以用国内的一个镜像站来代替,现在比较常用的就是淘宝的
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    2.编写应用

        在启动应用的时候加载的是MainActivity,这个Activity是继承自CordovaActivity的,它在根视图上添加了一个webview控件,在执行onCreate方法中调用loadurl会到我的config.xml文件中加载我所配置的 url<content src="index.html" />,然后解析执行我的html,Android生命周期与js事件的关系可以参考下图

    cordova官网上的图
    在cordova中提倡的是单页模式,所谓的单页模式就是只用一个activity,其他页面都是通过webview请求服务器获取不同的页面数据,值得注意的的是在cordova的html中不允许内联脚本文件

    下面我们尝试使用Cordova完成一些功能

    1.使用cordova完成页面切换功能

    index.html

    <html>
    <head>
       <link type="text/css" rel="stylesheet" href="css/themes/icon.css"/>
        <link type="text/css" rel="stylesheet" href="css/themes/default/easyui.css"/>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js"></script>
    
    </head>
    <body>
    <a id="next" href="javascript:void(0);"></a>
    <a id="addContact" href="javascript:void(0);"></a>
    <a id="browser" href="javascript:void(0);"></a>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    
    </body>
    </html>

    index.js

    $("#next").bind("click", function(){
    
         location.href = "http://192.168.10.108:8080/cordovaDemo/hello/HelloAction";
    });

    这样我们就可以实现页面的切换了,但是需要在config.xml中加上几句话让它不打开系统自带的浏览器,是不是感觉很简单呢~

    2.使用官方提供的插件添加联系人
    在此之前我们需要为项目添加插件cordova plugin add cordova-plugin-contacts

     var myContact = navigator.contacts.create({"displayName": "张三"});
         var success = function() {
             alert("联系人已保存")
          };
    
          var error = function (){
             alert("保存失败:" + message);
          };
    
       myContact.save(success, error);

    这短短的几行代码,就可以将联系人信息保存到电话簿中。

    3.自定义插件
    ①编写自定义插件需要继承CordovaPlugin这个类。
    ②在config.xml中注册该插件
    ③用js代码调用该插件

    MyPlugin.java

    public class MyPlugin extends CordovaPlugin {
        private static final String CLICK_EVENT = "plugins";
        @Override
        public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
               if (action.equals(CLICK_EVENT)){
                   Intent intent = new Intent(Intent.ACTION_VIEW);
                   intent.setData(Uri.parse("http://www.baidu.com"));
                   cordova.getActivity().startActivity(intent);
                   callbackContext.success();
                   return true;
               }else{
                   callbackContext.error("事件不匹配");
                   return false;
               }
    
        }

    index.js

    var errorCallback = function(message){
    alert(message);
    };
    var successCallback = function(){
    alert("success")
    };
    cordova.exec(successCallback,  errorCallback,  "MyPlugin", "plugins", []);
    

    config.xml


    <feature name="MyPlugin">
    <param name="android-package" value="com.example.cordova.MyPlugin" />
    </feature>


    运行效果
    效果

    通过以上三个事例我们初步了解了cordova的使用,但是这个界面未免也太丑了吧,如何才能做到和原生应用一样呢?
    可以使用ionic+cordova进行开发ionic是一个专为移动平台打造的UI框架,基于Angular JS ,它可以为cordova应用提供界面支持,让他看上去与原生应用非常相似。但是对于设备功能的访问还是要依靠cordova这个桥梁。

    安装ionic

    npm install -g ionic

    官方demo的效果
    这里写图片描述

    有木有感觉与原生应用很相似了呢~~~~

    展开全文
  • 最近在做一个项目需要使用到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混合模式,一定是要基于具体业务场景去选择,而不是盲目和绝对化觉得哪种模式好就不做分析想当然的去选择,还是有选择的结合,要知道应用之美在于药到病除。

    展开全文
  • Cordova框架简单样例

    2020-07-30 23:32:14
    Cordova简介 【http://cordova.apache.org/docs/en/latest/guide/overview/】 Cordova是一个开源的移动终端开发框架,它提供使用html,css,javascript 技术进行跨平台开发能力,并且封装了一组javascript接口实现...
  • Cordova

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

    最近做项目,顺便学学cordova打包APK,踩过很多坑,最后总结出一份完整的cordova环境配置笔记和APP打包笔记:

    简介:

    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
    Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。

    检测是否满足构建平台的要求:

    cordova requirements

    打包常用命令:

    cordova create first com.example.first firstApp
    cd first
    cordova platform add android --save
    cordova platform ls
    cordova build android
    cordova plugin add cordova-plugin-camera
    cordova plugin ls

    项目中配置cordova

    npm install -g cordova

    cordova-plugin-themeablebrowser插件使用整理

    http://blog.csdn.net/u011127019/article/details/55259565

    cordova.ThemeableBrowser.open(url,config.browser_target, config.browser_options).addEventListener('loadstart', function(e) {
        $toast.hide();
    }).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
        $toast.show(e.message);
    });
    
    • 1.此插件可以实现独立窗口打开页面,但是全屏设置好像没有起作用
    • 2.此插件可以配置标题栏、关闭按钮、分享按钮,菜单按钮等
    • 3.此插件依赖InAppBrowser

    APP 兼容性测试

    • 腾讯 Wetest
      • http://wetest.qq.com/cloud/report/result?testid=e4e38b6e48e5c18382e274c29a694e7b
    • TestBird
      • https://www.testbird.com/

    报错

    • 把android SDK 27 卸载掉

    • android SDK 没下载全,需要检查更新

    注意: 打包文件中不能出现中文命名的文件、文件夹 打包路径上,不能有非iscii值,中文路径。
    注意更新cordova和android SDK

    设置 应用图标(android)

    在应用目录下找到
    platforms\android\res目录
    在res目录下找到所有有icon.png文件的
    然后把icon.png文件覆盖成你的。
    命令窗口下执行cordova build android即可生成带有自己图标应用的android程序。

    【环境搭建:】
    1、安装node.js
    下载安装node.js,https://nodejs.org/en/,安装cordova时需要使用。安装完成之后在终端(win+r,cmd)执行node -v,
    如果看到如下所示的版本号表示安装成功。

    D:\file\0000 wingconnFile\UI>node -v
    v6.11.2

    node -v

    2.安装java jdk

    下载http://www.oracle.com/technetwork/java/javase/downloads/index.html,
    【下载】java: jdk-8u151-windows-x64.exe

    【安装】到C盘, C:\Program Files\Java 下有两个文件夹: jdk1.8.0_151 jre1.8.0_151

    【配置环境变量】:
    JAVA_HOME : C:\Program Files\Java\jdk1.8.0_151
    path : %JAVA_HOME%\bin
    CLASSPATH : %JAVA_HOME%\bin

    【检查】安装是否OK
    我用的是:
    D:\file\001 ownnote_ktv\cordova\first>java -version
    java version “1.8.0_151”
    Java™ SE Runtime Environment (build 1.8.0_151-b12)
    Java HotSpot™ 64-Bit Server VM (build 25.151-b12, mixed mode)

    java -version
    javac

    3.安装ant
    下载连接:http://ant.apache.org/bindownload.cgi,下载完成之后解压到你想安装的目录,比如D:\ant。然后将目录添加到系统变量里,
    步骤如下:右击我的电脑,点击属性,左侧菜单点击高级系统设置,在弹窗中点击环境变量,
    然后在用户变量中添加变量ANT_HOME,值为D:\ant,添加变量path,值为D:\ant\bin,添加变量classpath,值为D:\ant\lib。
    配置好之后在终端输入ant -v,如果出现如下图所示则表示成功。

    D:\file\0000 wingconnFile\UI>ant -v

    Unable to locate tools.jar. Expected to find it in D:\software\JDK2\lib\tools.jar  
    Apache Ant(TM) version 1.9.9 compiled on February 2 2017  
    Trying the default build file: build.xml  
    Buildfile: build.xml does not exist!  
    Build failed  
      
    > ant -v  
    

    4.安装 Android SDK
    http://tools.android-studio.org/index.php/sdk/
    下载 android-sdk-windows 解压配环境变量
    输入命令: 检测是否安装成功,如果有一堆内容,就配置完成了

    android -h
    android adb
    android list target

    5.安装cordova. 在终端执行下面命令

    npm install -g cordova
    cordova -v

    测试安装是否成功,终端输入cordova -v,如果出现如下所示提示表示安装成功

    D:\file\0000 wingconnFile\UI>cordova -v
    6.0.0

    1. 检测是否满足构建平台的要求: 【编译app前进行检测】

    cordova requirements

    Requirements check results for android:
    Java JDK: installed .
    Android SDK: installed
    Android target: installed android-23,android-27
    Gradle: installed
    如果以上都已经完成了,那恭喜你环境配置成功了!

    提过遇到
    Android target: installed failed
    Gradle: installed failed
    把 android

    7.查看项目安装的插件

    cordova plugin list
    cordova plugin ls

    参考:【cordova官网】 http://cordova.axuer.com/docs/zh-cn/latest/guide/cli/index.html

    参考: http://www.cnblogs.com/xiyangbaixue/archive/2016/04/11/5374728.html

    【【【【创建第一个应用:】】】】

    1.在终端进入你想要创建的目录,执行下面的命令:

    cordova create first com.example.first firstApp

    CordovaDemo:项目文件夹名
    com.first.first:项目包名,first为目录
    firstApp:项目,app名称

    2.添加平台

    cd first
    cordova platform add android --save
    cordova platform ls

    添加android平台,下载可能会比较慢.
    到这里我们的cordova项目就创建好了。

    6.【可检测是否满足构建平台】

    3.编译app
    cordova build android
    编译android系统,最后如果看到build successful,就可以了
    如果报错: 是关于android-sdk的错。接下来就是苦逼的安装各种sdk了。我也不知道咋装,反正我现在还在装…

    cordova build android

    4.运行app

    模拟器上运行

    cordova emulate android

    浏览器上运行
    浏览器访问http://localhost:8000即可

    cordova serve android

    真机上运行

    cordova run android

    恭喜你第一个应用程序完成了!

    5、添加插件
    cordova plugin add cordova-plugin-camera

    6、查看插件
    cordova plugin ls

    D:\file\0000 wingconnFile\cordova\eservice>cordova plugin ls cordova-plugin-barcodescanner 0.7.3 "BarcodeScanner" // 二维码扫描插件 cordova-plugin-compat 1.2.0 "Compat" // 为了与以前版本的cordova保持向后兼容 cordova-plugin-device 1.1.7 "Device" // 获取设备基本信息 cordova-plugin-dialogs 1.2.1 "Notificati // 使用本地对话框UI元素 cordova-plugin-geolocation 2.1.0 "Geolocatio // 地理定位插件 cordova-plugin-network-information 1.2.1 "Network Informatio // 获取有关无线连接的信息 cordova-plugin-splashscreen 3.1.0 "Splashscreen" // 启动页面 cordova-plugin-statusbar 2.1.3 "StatusBa // 状态栏设置 cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser // cordova-plugin-whitelist 1.3.3 "Whitelis // cordova-plugin-x-toast 2.6.0 "Toast" // cordova-plugin-x5-webview 3.1.0 "X5 WebView Engi //

    常用命令:
    1、创建应用

    cordova create first com.example.first firstApp

    2、添加平台

    cordova platform add android
    cordova platform add ios
    cordova platform add amazon-fireos
    cordova platform add blackberry10
    cordova platform add firefoxos

    3、查看平台

    cordova platforms ls

    4、删除平台

    cordova platform remove android
    或者
    cordova platform rm android

    5、添加插件
    cordova plugin add cordova-plugin-camera

    6、查看插件
    cordova plugin ls

    7、打包app

    cordova build android

    8、运行app

    cordova emulate android
    cordova serve android
    cordova run android

    总结:
    hybrid app相对native app来说开发起来速度快,相对容易,但是没有native那么流畅,性能和体验稍微差些。
    并且文件大小相差也很大,同样一个应用native只要几k,二hybrid却要几兆。

    下面是我自己分别使用cordova和phonegap开发的新闻应用,欢迎大家安装使用。
    https://github.com/baixuexiyang/hybrid

    展开全文
  • cordova

    2019-01-18 17:02:35
    最近做项目,顺便学学cordova打包APK,踩过很多坑,最后总结出一份完整的cordova环境配置笔记和APP打包笔记: ###简介: **Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备...
    最近做项目,顺便学学cordova打包APK,踩过很多坑,最后总结出一份完整的cordova环境配置笔记和APP打包笔记:
    
    ###简介:
    **Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。**
    **Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。**
    
    
    检测是否满足构建平台的要求:
    > cordova requirements
    
    打包常用命令:
    > cordova create first com.example.first firstApp
    cd first
    cordova platform add android --save
    cordova platform ls
    cordova build android
    cordova plugin add cordova-plugin-camera
    cordova plugin ls
    
    
    ## 项目中配置cordova
    `npm install -g cordova`
    
    ##  cordova-plugin-themeablebrowser插件使用整理
    `http://blog.csdn.net/u011127019/article/details/55259565`
    ```javascript
    cordova.ThemeableBrowser.open(url,config.browser_target, config.browser_options).addEventListener('loadstart', function(e) {
        $toast.hide();
    }).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
        $toast.show(e.message);
    });
    ```
        
    + 1.此插件可以实现独立窗口打开页面,但是全屏设置好像没有起作用
    + 2.此插件可以配置标题栏、关闭按钮、分享按钮,菜单按钮等
    + 3.此插件依赖InAppBrowser
    
    
    ##  APP 兼容性测试
    + 腾讯 Wetest     
        + `http://wetest.qq.com/cloud/report/result?testid=e4e38b6e48e5c18382e274c29a694e7b`
    + TestBird
        + `https://www.testbird.com/`
    
    
    
    ##  报错
    + 把android SDK 27 卸载掉
    
    + android SDK 没下载全,需要检查更新
    
    
    `注意:
    打包文件中不能出现中文命名的文件、文件夹
    打包路径上,不能有非iscii值,中文路径。`
    `
    注意更新cordova和android SDK
    `
    
    ###  设置 应用图标(android)
    在应用目录下找到  
    `platforms\android\res`目录  
    在res目录下找到所有有icon.png文件的  
    然后把icon.png文件覆盖成你的。  
    命令窗口下执行cordova build android即可生成带有自己图标应用的android程序。  
      
      
    【环境搭建:】  
    1、安装node.js  
    下载安装node.js,https://nodejs.org/en/,安装cordova时需要使用。安装完成之后在终端(win+r,cmd)执行node -v,  
    如果看到如下所示的版本号表示安装成功。  
      
    D:\file\0000 wingconnFile\UI>`node -v`  
    v6.11.2  
      
    > node -v   
      
      
      
    2.安装java jdk  
      
    下载http://www.oracle.com/technetwork/java/javase/downloads/index.html,  
    【下载】java: jdk-8u151-windows-x64.exe  
      
    【安装】到C盘, C:\Program Files\Java      下有两个文件夹:   jdk1.8.0_151    jre1.8.0_151  
      
    【配置环境变量】:  
    JAVA_HOME :  C:\Program Files\Java\jdk1.8.0_151  
    path :  %JAVA_HOME%\bin  
    CLASSPATH : %JAVA_HOME%\bin  
      
    【检查】安装是否OK      
    我用的是:  
    D:\file\001 ownnote_ktv\cordova\first>`java -version`  
    java version "1.8.0_151"  
    Java(TM) SE Runtime Environment (build 1.8.0_151-b12)  
    Java HotSpot(TM) 64-Bit Server VM (build 25.151-b12, mixed mode)  
      
    > java -version  
    > javac  
      
      
      
      
      
    3.安装ant  
    下载连接:http://ant.apache.org/bindownload.cgi,下载完成之后解压到你想安装的目录,比如D:\ant。然后将目录添加到系统变量里,  
    步骤如下:右击我的电脑,点击属性,左侧菜单点击高级系统设置,在弹窗中点击环境变量,  
    然后在用户变量中添加变量ANT_HOME,值为D:\ant,添加变量path,值为D:\ant\bin,添加变量classpath,值为D:\ant\lib。  
    配置好之后在终端输入ant -v,如果出现如下图所示则表示成功。  
      
    D:\file\0000 wingconnFile\UI>`ant -v`  
    ```  
    Unable to locate tools.jar. Expected to find it in D:\software\JDK2\lib\tools.jar  
    Apache Ant(TM) version 1.9.9 compiled on February 2 2017  
    Trying the default build file: build.xml  
    Buildfile: build.xml does not exist!  
    Build failed  
      
    > ant -v  
    ```  
      
      
      
      
      
    4.安装 Android SDK  
    `http://tools.android-studio.org/index.php/sdk/`  
    下载  android-sdk-windows 解压配环境变量  
     输入命令: 检测是否安装成功,如果有一堆内容,就配置完成了  
       
     > android -h  
     > android adb  
     > android list target  
       
       
       
    5.安装cordova. 在终端执行下面命令  
    >  npm install -g cordova  
    >  cordova -v  
      
    测试安装是否成功,终端输入cordova -v,如果出现如下所示提示表示安装成功  
      
    D:\file\0000 wingconnFile\UI>`cordova -v`  
    6.0.0  
      
      
      
    6. 检测是否满足构建平台的要求: 【编译app前进行检测】  
      
    >  cordova requirements  
      
    Requirements check results for android:  
    Java JDK: installed .  
    Android SDK: installed  
    Android target: installed android-23,android-27  
    Gradle: installed  
    如果以上都已经完成了,那恭喜你环境配置成功了!  
      
      
      
    提过遇到    
    Android target: installed failed  
    Gradle: installed failed  
    把  android  
      
      
      
    7.查看项目安装的插件  
    > cordova plugin list  
    > cordova plugin ls  
      
      
    参考:【cordova官网】  http://cordova.axuer.com/docs/zh-cn/latest/guide/cli/index.html  
      
    参考: http://www.cnblogs.com/xiyangbaixue/archive/2016/04/11/5374728.html  
      
      
      
      
      
    【【【【创建第一个应用:】】】】  
       
    1.在终端进入你想要创建的目录,执行下面的命令:  
    >   cordova create first com.example.first firstApp  
       
    CordovaDemo:项目文件夹名  
    com.first.first:项目包名,first为目录  
    firstApp:项目,app名称  
      
      
      
    2.添加平台  
    >  cd first  
    >  cordova platform add android --save  
    >  cordova platform ls  
      
    添加android平台,下载可能会比较慢.  
    到这里我们的cordova项目就创建好了。  
      
    6.【可检测是否满足构建平台】  
       
      
    3.编译app  
    `cordova build android`  
    编译android系统,最后如果看到build successful,就可以了  
    如果报错:      是关于android-sdk的错。接下来就是苦逼的安装各种sdk了。我也不知道咋装,反正我现在还在装...  
      
      
    >   cordova build android  
       
      
    4.运行app  
      
    模拟器上运行  
    > cordova emulate android  
      
    浏览器上运行  
    浏览器访问http://localhost:8000即可  
    > cordova serve android  
      
      
    真机上运行  
    > cordova run android  
      
    恭喜你第一个应用程序完成了!  
      
      
    5、添加插件  
    cordova plugin add cordova-plugin-camera  
      
      
    6、查看插件  
    cordova plugin ls  
      
    `D:\file\0000 wingconnFile\cordova\eservice>cordova plugin ls  
    cordova-plugin-barcodescanner 0.7.3 "BarcodeScanner"    // 二维码扫描插件  
    cordova-plugin-compat 1.2.0 "Compat"    // 为了与以前版本的cordova保持向后兼容  
    cordova-plugin-device 1.1.7 "Device"    // 获取设备基本信息  
    cordova-plugin-dialogs 1.2.1 "Notificati    // 使用本地对话框UI元素  
    cordova-plugin-geolocation 2.1.0 "Geolocatio    // 地理定位插件  
    cordova-plugin-network-information 1.2.1 "Network Informatio    // 获取有关无线连接的信息  
    cordova-plugin-splashscreen 3.1.0 "Splashscreen"    // 启动页面  
    cordova-plugin-statusbar 2.1.3 "StatusBa    // 状态栏设置  
    cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser    //  
    cordova-plugin-whitelist 1.3.3 "Whitelis    //  
    cordova-plugin-x-toast 2.6.0 "Toast"    //   
    cordova-plugin-x5-webview 3.1.0 "X5 WebView Engi    //  
    `  
      
       
      
      
      
    常用命令:  
    1、创建应用  
      
    cordova create first com.example.first firstApp  
       
      
      
    2、添加平台  
      
    cordova platform add android  
    cordova platform add ios  
    cordova platform add amazon-fireos  
    cordova platform add blackberry10  
    cordova platform add firefoxos  
       
      
      
    3、查看平台  
      
    cordova platforms ls  
      
      
       
      
    4、删除平台  
      
    cordova platform remove android  
    或者  
    cordova platform rm android  
       
      
      
      
      
    5、添加插件  
    cordova plugin add cordova-plugin-camera  
      
      
      
      
      
    6、查看插件  
    cordova plugin ls  
      
      
      
      
    7、打包app  
      
    cordova build android  
       
       
       
      
    8、运行app  
      
    cordova emulate android  
    cordova serve android  
    cordova run android  
       
      
      
      
    总结:  
    hybrid app相对native app来说开发起来速度快,相对容易,但是没有native那么流畅,性能和体验稍微差些。  
    并且文件大小相差也很大,同样一个应用native只要几k,二hybrid却要几兆。  
      
    下面是我自己分别使用cordova和phonegap开发的新闻应用,欢迎大家安装使用。  
    https://github.com/baixuexiyang/hybrid  
    
    展开全文
  • 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入门

    2017-11-27 11:35:51
    Cordova入门 标签: 技术学习 Cordova入门 概述 1 移动端的开发模式 2 Cordova基本介绍 Cordova安装Mac环境 1 安装Nodejs 2 安装git 2 安装cordova 创建Cordova 工程 1 创建项目 1 添加平台 1 目录说明 ...
  • 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 ...
  • Cordova是一个开源的移动开发框架,可以使用前端Web技术进行跨平台开发,这里简单介绍如何通过Cordova初始化一个Andorid项目
  • Cordova简介 Cordova是一个开源的移动开发框架,它允许你使用WEB开发技术(HTML5、CSS3、JavaScript)进行跨平台开发,可以在每个平台的封装器中执行,并且依赖规范的API对设备进行高效的访问,比如传感器、数据、网络...
  • cordova安装和打包

    2015-12-11 10:21:00
    最近,实验室在做一个适配于手机的web项目(可以说是一个混合应用开发),最后需要打包成apk程序,作为一名对移动开发的研究者,这个打包的任务就自然落在了我的头上,下面讲解一下安装cordova和用cordova打包apk的...
  • Cordova项目中,Android端访问远程网站调用Cordova插件正文补充 正文 最近的Cordova项目中,采用了将前端项目放到服务器,App直接跳转到链接的方式开发。这样的目的是为了能频繁的更新,而不用发布新的版本。但是...
  • Cordova App 打包全揭秘

    2017-11-27 16:42:30
    本文作者:大师兄(高武军) 现就职于某公司移动端架构师兼产品开发。 主要开发产品:mdn(适配app和微信的移动端解决方案),pageui(移动端ui组件库),formBuilder(可以让前端建表和操作表的表单设计器)。...
  • 有关Cordova版本的问题

    2019-07-24 18:31:32
    此篇博客提供了一种降低cordova版本的方法,不过需要我们需要的版本的cordova的一个文件夹(下图的这个目录的文件夹)。 然后将自己的这个文件给替换了就ok了,就变成你想要的那个版本的cordova了。文末提供了...
  • vuecordova 一、建立vue项目和cordova项目 网上很多教程可自行查找-步骤略过 二、cordova 进入cordova项目添加相机插件 cordova plugin add cordova-plugin-camera 3.列出所有已安装的cordova插件 ...
  • 我们知道,按照cordova打包的流程,里面会生成一个www文件夹,里面是h5代码,也是app的启动页,在里面直接引入cordova.js,是可以使用cordova的,但是如果app里面嵌套了一个h5的网页链接,如果想使用cordova,怎么办...
  • 最近做了一个功能,公司是用html写的上层,需要调用android自带的语音合成和...由于是第一次用到Cordova,所以把它的搭建android项目和实现流程一并写上。一、用Cordova搭建一个android工程。 下载nodejs,并配置环境变
  • 最近项目需求,用unity实现功能,制作成Cordova的iOS插件。初次接触Cordova,集成Cordova生成iOS插件花费的时间比较长;在这简单说说过程和遇到的坑吧。 运用到的攻击:unity2018.314f1,xcode11,Cordova9.0.0 ...
  • 首先你得要有一个cordova的项目,因为太多太多的东西需要从那里复制粘贴了。。。 那我们就开始吧! 第一步:打开你的android原生项目; 第二步:将Cordova项目的Cordovalib导入安卓项目,并在app的build.gradle中...
1 2 3 4 5 ... 20
收藏数 24,465
精华内容 9,786
关键字:

cordova