• Android开发的程序员,JDK与ADT以及SDK的环境配置就不需要介绍了,这些环境少不了!下面来讲cordova安装的步骤: 第一步:安装Ant Ant具有自动编译打包android项目的功能。此处给出官网下载地址:...

    因为前段时间开发的Android项目要用到cordova与H5进行交互,翻查了不少网站,故此写一遍博客来巩固一下。若有写不好之处请勿喷,谢谢!


    Android开发的程序员,JDK与ADT以及SDK的环境配置就不需要介绍了,这些环境少不了!下面来讲cordova安装的步骤:
    第一步:安装Ant
    Ant具有自动编译打包android项目的功能。此处给出官网下载地址http://ant.apache.org/bindownload.cgi
    下载完解压之后得要配置环境,方法如下:
      变量: ANT_HOME 添加值: 刚解压到的路径:E:\apache-ant-1.9.6-bin\
      变量: Path 添加值:%ANT_HOME%\bin
    添加完成之后需要验证是否添加成功,检验方法如下:
    在cmd命令行窗口输入ant,若出现
    Buildfile: build.xml does not exist!
    Build failed
    或BUILD SUCCESSFUL则代表成功
    如右图:这里写图片描述
    第二步:安装 node.js
    因为cordova的安装少不了node.js中的npm,自然是先安装node.js。官网链接:http://nodejs.org/
    在官网找到对应的文件下载安装,安装完成之后需要确认安装的完成是否成功。检验方法:在cmd命令行窗口输入:npm -v 或npm -version
    若出现版本号即代表安装成功。
    例图如右:检验node.js是否安装成功的判断

    第三步:用npm命令安装cordova
    安装方法:在cmd命令行窗口输入:npm install -g cordova
    例图如右:cordova安装命令
    安装过程会等待比较长的时间,当然,这取决于你的网络,当安装完的时候就会出现很多数据。例图如下:
    这里写图片描述
    此时我们就可以输在cmd命令行窗口输入命令来检验是否安装成功。
    在cmd命令行窗口输入命令如右:cordova -v或者cordova -version
    若出现版本号即代表安装成功。
    例图如右:这里写图片描述

    我们这样安装的cordova是最新版本的,如需安装其它版本,只需要在命令行npm install -g cordova后面加上“@版本号”就可以了。
    例如安装5.4.1的版本:npm install -g cordov@5.4.1

    因为cordova安装的版本是与android sdk版本有关的,我安装的是cordova 6.0.0,所有必须使用sdk版本android-23。如果你的sdk版本过低,可以考虑安装低一点版本的cordova。注意:这一定是相对应的!

    这里也讲一下cordova的卸载命令,如果你不想用cordova或者是cordova安装错误可在cmd命令行窗口运行命令:npm uninstall cordova -g即可卸载cordova
    例图如右:这里写图片描述

    第四步:创建cordova项目
    转到想要创建项目的目录盘符,例如d:则可以进入d盘
    然后运行:cordova create cordovacheck com.example.test
    如下图:
    这里写图片描述
    这时我们在d盘下就能够找到cordovacheck的文件夹。
    接着在cmd命令行窗口运行命令进入cordovacheck文件夹
    然后添加Android平台,命令为:cordova platform add android
    例图如下:
    这里写图片描述

    当然除了android平台,你也可以添加其他的平台:
    cordova platform add wp8
    cordova platform add windows
    cordova platform add amazon-fireos
    cordova platform add android
    cordova platform add blackberry10
    cordova platform add firefoxos\
    卸载平台命令:
    cordova platform rm ios
    cordova platform rm firefoxos
    cordova platform rm windows
    cordova platform rm wp8
    cordova platform rm firefoxos
    cordova platform rm android
    查看自己已经安装的平台以及未安装的平台:
    cordova platforms ls
    例图如下:
    这里写图片描述
    增加插件:
    官网插件链接:http://cordova.apache.org/plugins/?platforms=cordova-android

    例如想添加phonegap-plugin-contentsync这个插件:
    这里写图片描述
    直接在cmd命令行窗口运行命令:phonegap plugin add phonegap-plugin-contentsync
    例图如下:
    这里写图片描述

    添加cordova-plugin-camera插件:
    这里写图片描述
    直接在cmd命令行窗口运行命令:
    例图如下:
    这里写图片描述
    自己想添加什么插件都可以去找来添加,很简单的。
    在D:\cordovacheck\plugins目录下就可以看到刚刚添加的插件了
    这里写图片描述

    你写好的html、css、js文件可以放到刚刚建立目录下的www文件所对应的位置。例如:D:\cordovacheck\www
    这里写图片描述

    此时在D:\cordovacheck\platforms\android下面就可以看到Demo了!
    您的Android cordova开发之路从此就可以开始了!
    这里写图片描述

    如若您觉得写的不好,望请提出,请见谅,谢谢!

    展开全文
  • cordova 安装使用说明

    2016-11-04 19:15:11
    安装 Cordova 您需要本地系统安装 Cordova,然后才能使用 ...您还将需要确认 Git 已安装本地系统并且配置正确。将应用程序打包为本机 Mobile 应用程序时,Cordova 将使用 Git 从资源库中检索所有必需的

    安装 Cordova

    您需要在本地系统上安装 Cordova,然后才能使用 NetBeans IDE 将 HTML5 应用程序打包为本机 Mobile 应用程序。您将使用 NodeJS 包管理器 npm 来安装和更新 Cordova。您还将需要确认 Git 已安装在本地系统上并且配置正确。将应用程序打包为本机 Mobile 应用程序时,Cordova 将使用 Git 从资源库中检索所有必需的 Cordova 源文件。

    在本练习中,您将在终端窗口中执行下面的多数步骤。

    1. 下载并安装 Node.js(如果尚未安装)。

      可以从 Node.js 站点下载此安装程序。

    2. 打开一个终端窗口。
    3. 运行下面的命令以确认已安装 Node.js。
      $ node -v

      如果已安装 node.js,您将会看到版本显示在终端窗口中。

      注:

      • 如果您受到代理的屏蔽,则需要配置 node.js 以使用代理访问网络。可以运行以下命令来设置代理,并将 http://proxy:8080 替换为您的代理。
        $ sudo npm config set proxy http://proxy:8080
        $ sudo npm config set https-proxy http://proxy:8080

        可以运行以下命令来查看当前配置设置。

        $ npm config list
      • 有关配置 node.js 的其他信息,请参见 https://npmjs.org/doc/config.html
    4. 运行下面的命令以安装 Cordova。
      $ npm install -g cordova

      注:

      • 如果您在运行安装命令时在终端窗口中看到错误消息,请确认代理配置正确。
      • 可以运行下面的命令将 Cordova 更新为最新版本。
        $ npm update -g cordova
    5. 运行下面的命令以确认 Cordova 已安装并查看版本。
      $ cordova --version

      如果已安装 Cordova,您将会看到版本显示在终端窗口中。

    6. 下载并安装 Git 版本控制系统(如果尚未安装)。

      可以从 Git 站点下载此安装程序。

      注:需要将 Git 添加到 Path 环境中。

    7. 运行下面的命令以确认已安装 Git。
      $ git --version

      如果已安装 Git,您将会看到版本显示在终端窗口中。

      注:

      • 如果您受到代理的屏蔽,则需要配置 Git 以使用代理访问网络。可以运行以下命令来设置代理,并将 http://proxy:8080 替换为您的代理。
        $ git config --global http.proxy http://proxy:8080
        $ git config --global https.proxy http://proxy:8080

        可以运行以下命令来查看当前配置设置。

        $ git config --list
      • 有关配置 Git 的其他信息,请参见 http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup 处的设置指令。

    现在,您具有了在 IDE 中开发和打包本机 Mobile 应用程序所需的所有工具。在下一练习中,您将使用新建项目向导创建应用程序。

    创建 Cordova 应用程序

    在本练习中,将在 IDE 中使用新建项目向导创建新的 Cordova 应用程序。通过在新建项目向导中选择 "Cordova Hello World" 模板作为站点模板来创建 Cordova 应用程序。Cordova 应用程序是含有一些其他库和配置文件的 HTML5 应用程序。如果您具有现有的 HTML5 应用程序,则可以在 IDE 中使用 "Project Properties"(项目属性)窗口来添加将此应用程序打包为 Cordova 应用程序所需的 Cordova 源和其他文件。

    在本教程中,您将创建包含一个 index.html 文件及一些 JavaScript 和 CSS 文件的非常基本的 HTML5 项目。在向导中创建此项目时,将选择一些 jQuery JavaScript 库。

    1. 从主菜单中选择 "File"(文件)> "New Project"(新建项目)(Ctrl-Shift-N 组合键;在 Mac 上为 ⌘-Shift-N 组合键),以打开新建项目向导。
    2. 选择 HTML5 类别,然后选择 Cordova Application(Cordova 应用程序)。单击 "Next"(下一步)。
      新建项目向导中的 Cordova 应用程序模板的屏幕快照
    3. 为 "Project Name"(项目名称)键入 CordovaMapApp,并指定计算机上要保存项目的目录。单击 "Next"(下一步)。
    4. 在第 3 步 "Site Template"(站点模板)中,确认选中 "Download Online Template"(下载联机模板),并且在列表中选中 "Cordova Hello World" 模板。单击 "Next"(下一步)。
      "New HTML5 Application"(新建 HTML5 应用程序)向导中的 "Site Templates"(站点模板)面板的屏幕快照

      注:要根据列表中的一个联机模板创建项目,您必须处于联机状态。

    5. 在第 4 步 "JavaScript Files"(JavaScript 文件)中,从 "Available"(可用)窗格选择 jqueryjquery-mobile JavaScript 库,单击右箭头按钮 ( > ) 以将所选库移动到向导的 "Selected"(选定)窗格。默认情况下,将在项目的 js/libraries 文件夹中创建库。在本教程中,您将使用 JavaScript 库的“缩小”版本。

      可以使用面板上的文本字段来过滤 JavaScript 库列表。例如,在字段中键入 jq 可帮助您查找 jquery 库。按住 Ctrl 单击库的名称可以选择多个库。

      "New HTML5 Application"(新建 HTML5 应用程序)向导中 "JavaScript Libraries"(JavaScript 库)面板的屏幕快照

      注:

      • 可以在 "Version"(版本)列中单击库版本号以打开弹出窗口,通过该窗口可以选择库的较早版本。默认情况下,向导显示最新的版本。
      • JavaScript 库的最小化版本是压缩版本,在编辑器中查看时,不太容易理解代码。
    6. 在第 5 步 "Cordova Support"(Cordova 支持)中,使用默认值。单击完成即可完成此向导。

      单击 "Finish"(完成)时,IDE 将创建项目、在 "Projects"(项目)窗口中显示项目的节点并在编辑器中打开 index.html 文件。

      "Projects"(项目)窗口的屏幕快照

      如果在 "Projects"(项目)窗口中展开 js/libs 文件夹,则可以看到在新建项目向导中指定的 JavaScript 库已自动添加到项目。右键单击 JavaScript 文件并在弹出菜单中选择 "Delete"(删除)可以从项目中删除 JavaScript 库。

      要将 JavaScript 库添加到项目,请右键单击项目节点,然后选择 "Properties"(属性)以打开 "Project Properties"(项目属性)窗口。在 "Project Properties"(项目属性)窗口的 "JavaScript Libraries"(JavaScript 库)面板中可以添加库。此外,您可以将本地系统上的 JavaScript 文件直接复制到 js 文件夹中。

      您现在可以测试,项目运行并且已部署到目标移动设备的仿真器中。

    7. 单击工具栏中的浏览器选择图标,并确认在表的 "Cordova" 列中选定目标移动设备仿真器。在 "Cordova" 列中,可以选择 "Android Emulator"(Android 仿真器)或 "iOS Simulator"(iOS 模拟程序)(需要 OS X 和 XCode)。
      工具栏中下拉列表的屏幕快照
    8. 单击工具栏中的 "Run"(运行)图标。

    选择 "Run"(运行)时,IDE 会将 Cordova 应用程序部署到仿真器。

    iOS 模拟程序中的应用程序的屏幕快照

    注:如果要部署到 iOS 模拟程序,此模拟程序应该会自动打开。如果要将应用程序部署到 Android 仿真器,则需要在运行应用程序之前配置并启动此仿真器。要观看演示如何将 Cordova 应用程序部署到 Android 仿真器的截屏视频,请参见 Cordova 开发入门指南的视频

    修改应用程序

    在本练习中,您将编辑 index.htmlindex.js 文件。将 Cordova Hello World 模板生成的代码替换为用于在应用程序中显示您的当前位置地图的代码。还将修改默认 Cordova 配置以删除应用程序中不需要的 Cordova 插件。

    编辑 HTML 文件

    在本练习中,您将在源代码编辑器中编辑 HTML 文件,以添加对库和 CSS 文件的引用以及添加页元素。

    1. 在编辑器中打开 index.html(如果尚未打开)。

      在编辑器中,您可以看到 IDE 根据 Cordova Hello World 模板生成了一些代码。

    2. 在编辑器中,添加对您在创建项目时添加的 jQuery JavaScript 库和 CSS 文件的引用。在开始和结束的 <head> 标记之间添加下面的代码(粗体)。
      <html>
          <head>
              <meta charset=UTF-8">
              <meta name="format-detection" content="telephone=no" />
              <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
              <link rel="stylesheet" type="text/css" href="css/index.css" />
              
              <link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.min.css"/>
              <script type="text/javascript" src="js/libs/jquery/jquery.min.js"></script>
              <script type="text/javascript" src="js/libs/jquery-mobile/jquery.mobile.min.js"></script>
              <title>Hello World</title>
          </head>
          <body>
          ...
      </html>

      您可以在 "Projects"(项目)窗口中查看这些文件的路径,并且可以在编辑器中使用代码完成来帮助您操作。

      编辑器中代码完成功能的屏幕快照
    3. 将下面指向 Google Maps JavaScript API 的链接添加到 <head> 标记之间。
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>

      注:此链接指向已过时的 JavaScript API v2。在本教程中,此 JavaScript 将用于演示目的,在实际应用程序中应使用较新的版本。

    4. 删除 <body> 标记之间的所有代码,只保留下面指向 index.js cordova.js JavaScript 文件的链接。
         <body>
              
              <script type="text/javascript" src="cordova.js"></script>
              <script type="text/javascript" src="js/index.js"></script>
              
          </body> 
      </html>

      创建项目时自动生成了 index.js 文件。您可以在 "Projects"(项目)窗口中的 js 节点下看到此文件。在本教程中,稍后您将修改 index.js 中的代码。

      cordova.js 在 "Projects"(项目)窗口中不可见,因为它是在构建 Cordova 应用程序时生成的。

    5. body 标记之间添加下面的代码(粗体)。
         <body>
              <div data-dom-cache="false" data-role="page" id="mylocation">
                  <div data-role="header" data-theme="b">
                      <h1 id="header">Searching for GPS</h1>
                      <a data-role="button" class="ui-btn-right" οnclick="showAbout()">About</a>
                  </div>
                  
                  <div data-role="content" style="padding:0;">
                      <div id="map" style="width:100%;height:100%; z-index:50">
                      </div>
      
                  </div>
                  <div data-role="footer" data-theme="b" data-position="fixed" >
                      <h4>Google Maps</h4>
                  </div>
              </div>
              <div data-dom-cache="false" data-role="page" id="about">
                  <div data-role="header" data-theme="b">
                      <a data-role="button" data-rel="back" href="#mylocation" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">Back</a>
                      <h1>About</h1></div>
                  <div data-role="content" id="aboutContent">
                  </div> 
                  <div data-role="footer" data-theme="b" data-position="fixed" >
                      <h4>Created with NetBeans IDE</h4>
                  </div>
              </div>
              
              <script type="text/javascript" src="cordova.js"></script>
              <script type="text/javascript" src="js/index.js"></script>
          </body>
      </html>

    修改 Cordova 配置

    在本练习中,您将修改在应用程序中安装的 Cordova 插件的列表。

    1. 在 "Projects"(项目)窗口中右键单击项目节点,然后在弹出式菜单中选择 "Properties"(属性)。
    2. 在类别列表中选择 Cordova。
      &quot;Project Properties&quot;(项目属性)窗口中的 &quot;Cordova Plugins&quot;(Cordova 插件)标签的屏幕快照

      您可以使用 "Application"(应用程序)标签查看和编辑在 config.xml 中指定的有关应用程序的 Cordova 配置详细信息。

    3. 在 "Cordova" 面板中单击 "Plugins"(插件)标签。

      "Plugins"(插件)标签包含两个窗格。"Available"(可用)窗格显示当前可用的 Cordova 插件列表。

      "Selected"(选定)窗格显示在应用程序中安装的插件列表。使用 Cordova Hello World 模板创建应用程序时,默认情况下会安装所有插件。多数应用程序并不需要所有插件。可以使用 "Project Properties"(项目属性)窗口中的 "Plugins"(插件)标签删除应用程序不需要的插件。

      注:还可以通过在编辑器中编辑 nbproject/plugins.properties 文件来编辑已安装的插件。

    4. 删除“设备 API”、“对话框(通知)”和“地理位置”除外的所有插件。单击 "OK"(确定)。
      &quot;Project Properties&quot;(项目属性)窗口中的 &quot;Cordova Plugins&quot;(Cordova 插件)标签的屏幕快照

    编辑 JavaScript 文件

    在本练习中,您将删除模板所生成的 JavaScript 代码,并添加一些简单方法用于显示您的当前位置地图。

    1. 在编辑器中打开 index.js

      在创建项目时,IDE 在 index.js 中生成了一些样板代码。对于此应用程序,您可以删除生成的所有代码。

    2. 将生成的代码替换为以下代码。保存所做的更改。
      var map;
      var marker;
      var watchID;
      
      $(document).ready(function() {
          document.addEventListener("deviceready", onDeviceReady, false);
          //uncomment for testing in Chrome browser
      //    onDeviceReady();
      });
      
      function onDeviceReady() {
          $(window).unbind();
          $(window).bind('pageshow resize orientationchange', function(e) {
              max_height();
          });
          max_height();
          google.load("maps", "3.8", {"callback": map, other_params: "sensor=true&language=en"});
      }
      
      function max_height() {
          var h = $('div[data-role="header"]').outerHeight(true);
          var f = $('div[data-role="footer"]').outerHeight(true);
          var w = $(window).height();
          var c = $('div[data-role="content"]');
          var c_h = c.height();
          var c_oh = c.outerHeight(true);
          var c_new = w - h - f - c_oh + c_h;
          var total = h + f + c_oh;
          if (c_h < c.get(0).scrollHeight) {
              c.height(c.get(0).scrollHeight);
          } else {
              c.height(c_new);
          }
      }
      
      function map() {
          var latlng = new google.maps.LatLng(50.08, 14.42);
          var myOptions = {
              zoom: 15,
              center: latlng,
              streetViewControl: true,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              zoomControl: true
          };
          map = new google.maps.Map(document.getElementById("map"), myOptions);
      
          google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
              watchID = navigator.geolocation.watchPosition(gotPosition, null, {maximumAge: 5000, timeout: 60000, enableHighAccuracy: true});
          });
      }
      
      // Method to open the About dialog
      function showAbout() {
          showAlert("Google Maps", "Created with NetBeans 7.4");
      }
      ;
      
      function showAlert(message, title) {
          if (window.navigator.notification) {
              window.navigator.notification.alert(message, null, title, 'OK');
          } else {
              alert(title ? (title + ": " + message) : message);
          }
      }
      
      function gotPosition(position) {
          map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
      
          var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
          if (!marker) {
              //create marker
              marker = new google.maps.Marker({
                  position: point,
                  map: map
              });
          } else {
              //move marker to new position
              marker.setPosition(point);
          }
      }

      注:在本教程中,注释掉了对 onDeviceReady 方法的调用,因为在将应用程序部署到移动设备仿真器时不需要此方法。如果要在 Web 浏览器中运行应用程序,则应取消注释对 onDeviceReady 方法的调用。

    3. 通过重新启动仿真器或重置设置来重置仿真器。
    4. 单击工具栏中的 "Run"(运行)将应用程序部署到仿真器。

      在 iOS 模拟程序上,系统会提示您允许应用程序使用您的当前位置。

      请求当前位置的对话框的屏幕快照

      通过从 iOS 模拟程序的主菜单中选择 "Debug"(调试)> "Location"(位置)> "Custom Location"(定制位置)打开 "Custom Location"(定制位置)对话框,可以测试 iOS 模拟程序中的模拟位置。

      iOS 模拟程序中的 &quot;Custom Location&quot;(定制位置)对话框的屏幕快照

      对于您的当前位置,如果在 "Latitude"(纬度)字段中输入 "48.8582" 并在 "Longitude"(经度)字段中输入 "2.2945",则应用程序会在地图上将您的位置显示为 "Eiffel Tower"(埃菲尔铁塔)。

      在 iOS 模拟程序中使用定制位置时的应用程序的屏幕快照

    调试应用程序

    在本练习中,您将在 JavaScript 文件中设置一个断点并再次运行应用程序。

    1. 重置或重新启动仿真器。
    2. 在编辑器中打开 index.js
    3. 通过单击 gotPosition 方法的以下行中的左旁注,放置断点。
      var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    4. 单击工具栏中的 "Run"(运行)以再次运行应用程序。

      运行应用程序时,调试器将在应用程序尝试确定您的当前位置时遇到断点。

      在断点处停止的调试器的屏幕快照

      如果您将光标悬停在变量上方,则可以看到显示变量的相关详细信息的工具提示。如果光标位于 latitude 变量上方,则此变量的值将显示在工具提示中。

      显示变量的工具提示的屏幕快照

      如果光标位于 positioncoords 上方,则工具提示将包含一个箭头,您可以单击此箭头展开工具提示。

      显示变量的工具提示的屏幕快照

      您可以在展开的工具提示中更详细地查看值。

      显示变量的工具提示的屏幕快照

      在这种情况下,更易于查看 "Variables"(变量)窗口中的值。在 "Variables"(变量)窗口中,可以查看您的当前位置的纬度和经度。

      &quot;Variables&quot;(变量)窗口的屏幕快照

      在 "Network Monitor"(网络监视器)窗口中,您可以查看应用程序请求的列表。

      &quot;Variables&quot;(变量)窗口的屏幕快照
    展开全文
  •  首先,搞清楚一个概念,phonegap与cordova之间的区别。其实, phoneGap是原先的名字,Adobe将phoneGap捐给apache之后,起了另外的一个名字——apache cordova,phoneGap的名字也被保留了。博文里也就不区分两者了...
    
       首先,搞清楚一个概念,phonegap与cordova之间的区别。其实, phoneGap是原先的名字,Adobe将phoneGap捐给apache之后,起了另外的一个名字——apache cordova,phoneGap的名字也被保留了。博文里也就不区分两者了。
    1. 下载和安装Cordova框架

      现在cordova是利用nodeJS进行管理,所以需要先下载nodeJS。其中,就包含了npm管理器。下载地址:

      https://nodejs.org/

      在命令行窗口确认安装完成:

    2. 在windows上安装Cordova

      在命令行窗口输入:

      npm install -g cordova

      过一段时间即可安装完毕,安装速度取决于网络情况。(安装挺慢的,而且有时会失败……,可以参考这篇文章设置镜像 http://npm.taobao.org/或者使用国内的镜像站:http://cnpmjs.org

      安装完成后,可以在C:\User\<用户名>\AppData\Roaming\npm\node_modules下可以看到cordova的安装包

            坐等安装完成,输入命令:

            cordova -v

           

             关于npm的常用命令可以参考:http://my.oschina.net/wootz/blog/468110

        3.安装JDK

          自个百度吧……

        4. 安装ADT

            下载ADT,地址:

            http://developer.android.com/sdk/

            下载 ADT Bundle for Windows会比较省事。什么,被墙了?自个想办法吧~~

            当然也可以选择分别下载ADT和SDK,在Eclipse中配置

            可以打开Android SDK Manager,选择安装或者更新套件,如下图:、

           

            在Android SDK管理器主菜单上选择Tools>Manage AVDs功能,可以创建Android虚拟设备,如下图:

            

        创建虚拟设备:

    点击Start,启动Android模拟器。(话说,真的很慢,还是直接在手机上调试比较好)

    手机连接电脑,打开USB调试模式,就可以选择直接在手机上调试程序:

        5.安装ANT

        cordova项目打包是用ant完成,所以需要安装ant。(在ubuntu下貌似默认是用Gradle打包 )

        下载地址:

        http://ant.apache.org/bindownload.cgi

        配置环境变量:

        ANT_HOME配置为放置ant的目录


    配置path,新增:

    展开全文
  • 关于Cordova项目打包配置,官网其实介绍的都比较详细,而本文所使用的方法也基本都是从官网而来,而且官网的实现方法多样,本文只取其中感觉比较方便的方法来实现。1、各变量配置平时使用gradle时,什么...

    关于Cordova项目打包配置,官网其实介绍的都比较详细,而本文所使用的方法也基本都是从官网而来,而且官网上的实现方法多样,本文只取其中感觉比较方便的方法来实现。

    1、各变量配置

    平时在使用gradle时,什么minSdkVersion、complieSdkVersion等变量都是自己直接定义的。而cordova生成项目里默认是一堆cdvCompileSdkVersion、cdvCompileSdkVersion这种变量,完全看不到对应的值是多少,认真浏览gradle文件可以发现可以在build-extras.gradle文件中对这些变量进行配置。但是默认项目中并没有这个文件啊,没关系在build.gradle文件同级目录下新建一个就是了,至于配置嘛直接按下面格式写就行了。

    ext.cdvMinSdkVersion = 18
    ext.cdvCompileVersion = 25

    有同学说好简单,的确比较简单,但是注意了官网提示build-extras.gradle文件容易被重写或者覆盖(虽然目前我并没有发现这个情况),所以在打包的时候请留意下。

    另外,versionCode的配置在cordova项目根目录下的config.xml文件中进行配置

    <widget id="io.cordova.hellocordova" version="1.0.0" android-versionCode="1"  xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

    细心的小伙伴可能会发现android项目中有也有一个config.xml文件,实际上根目录下的config.xml文件在执行cordova build android时候会修改android项目中config.xml中的version以及versionCode配置。
    这里写图片描述
    以上图片为android项目中的config.xml目录以及大致内容。

    2、打包过程

    把编译相关配置好后,我们就要准备打包了。发布到app store上的apk需要签名,而签名需要秘钥,那么边先生成一个秘钥吧。这里为了方便生成秘钥,使用android studio可视化方法来生成,直接build->generate signed apk->create new来生成。这里生成另一个jks类型的秘钥名字为demo.jks,别名为demo,还需要一些密码啥的,在生成的时候自己随便填写,只要记得住就行。

    生成秘钥后,在gradle.build同级目录下创建release-signing.properties文件(如果要打包debug apk,添加一个debug-signing.properties),这个文件名同样可以在build.gradle中找到。创建好文件后,把刚刚生成秘钥时候填写的参数添加到该文件中。

    storeFile=demo.jks
    storePassword=123456
    storeType=jks
    keyAlias=demo
    keyPassword=654321

    到这里准备工作基本结束,最后cd到cordova项目根目录下,执行编译命令

    cordova build android --release

    耐心等待后,会在项目中生成对应的*-release.apk文件,大功告成。本文只是以android为例来进行的配置,对于其它平台大同小异,也可以参考官网进行配置。

    3、参考文档

    1、cordova官网:http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
    展开全文
  • mac 电脑配置cordova

    2019-07-21 05:20:00
    最近发现这个cordova有很多公司用.所以想试试搭建一个ios平台cordova demo.搭建之前我先说一些跟cordova相关的一些条件.... 1.pythonmac电脑上一般都有默认安装.关于python的安装,更新和版本查看可以自己...

      最近发现这个cordova有很多公司在用.所以想试试搭建一个ios平台上的cordova demo.在搭建之前我先说一些跟cordova相关的一些条件.

    目前cordova项目在apache上开源.网站上的要求是要用nodejs的npm工具.而安装nodejs的前提是要有python.

     

      1.python在mac电脑上一般都有默认安装.关于python的安装,更新和版本查看可以自己去查找.

     

      2.到nodejs的官网https://nodejs.org/en/   下载最新最稳定的安装包.安装包里面已经包括了nodejs环境和npm.按照提示一步一步都安装上.

     

      3.接下来是用npm命令安装cordova,先到官网:http://cordova.apache.org/ 官网上的安装是用命令行:

      npm install -g cordova,直接运行会有很多问题.首先目前npm的官网被屏蔽了.不能直接用这个命令去下载;

      其次是下载的过程中可能会有目录读写权限问题.针对第一个问题的解决办法是用https://npm.taobao.org/ 淘宝对国外提供的npm网站镜像

      在命令行中设置: npm config set registry https://registry.npm.taobao.org   

      然后用 sudo npm install -g cordova  命令下载.网络好的话大概要20分钟就下载安装完毕.

     

      4.cd 一个目录用来存放cordova项目.然后执行:

      cordova create hello com.example.hello "HelloWorld"   // cordova create <path> 创建一个项目
      然后
    cd hello 再执行: cordova platform add ios //添加ios平台到cordova
      
     
    cordova prepare # or "cordova build" //这句可以不执行

    5.到目前为止电脑上已经创建好了一个集成了cordova的Xcode项目.直接打开xcodeproj.然后编译运行:
    如果成功将会有如下截图:

    到目前为止已经成功搭建了一个最简单的集成cordova的ios项目.具体参见:http://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html
      

     

     

    转载于:https://www.cnblogs.com/xuezizhenchengxuyuan/p/5067095.html

    展开全文
  • 配置cordova-android

    2016-03-15 09:30:45
    首先配置JDK环境,已经配置了就略过。 1、下载JDK安装包。 下载1.7版本方法 http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 下载完成后点击安装。之后配置环境变量,略。 2...
  • 安装Cordova遇坑

    2019-09-19 15:25:20
    昨天下午先自己电脑上尝试着装Cordova,npm install cordova -g,熟悉使用命令行的er对这都不会陌生,我也是菜鸟一枚,只会简单的,哈哈哈。。。输入命令行后,开始下载速度还行,无奈npm源下载本身...
  • 之前的文章:Cordova - 使用Cordova开发iOS应用实战1(配置、开发第一个应用)。介绍了如何Mac OS系统下安装使用Cordova。本文介绍如何Windows系统下搭建Cordova环境。并使用Cordova编译发布一个安卓(Android...
  • cordova环境配置

    2016-08-30 21:03:54
    cordova环境配置 转自:http://my.oschina.net/wootz/blog/464370 首先,搞清楚一个概念,phonegap与cordova之间的区别。其实, phoneGap是原先的名字,Adobe将phoneGap捐给apache之后,起了另外的一个名字——...
  • 使用电脑上的Chrome浏览器调试Cordova打包的app,对于开发人员真机调试非常方便 1.用Cordova 打包一个debug版的App(注意是debug版本的哦) 2.用USB线连接手机和电脑电脑必须安装有手机驱动和Chrome浏览器) 3....
  • 一、cordova-plugin-whitelist 插件用于配置协议的白名单。在Cordova引用创建时自动添加了这个插件。 说明: 1.Cordova的版本要求 Cordova4.0以上 2.Android 的版本要求 4.0.0或更高版本 3.包括Navigation WhiteList...
  • 搞了一天,终于晚上1点半的时候,把cordova安装公司和自己的电脑上,真是心塞呀,废话不多说。 第一、去node官网安装node http://nodejs.org/ 第二、去苹果商店里安装最近的xcode app 第三、全局安装...
  • 目录安装 Cordova安装 Java 和 Android 环境创建 Cordova 应用程序构建和运行 Cordova Cordova 简介:Cordova 原名 PhoneGap,是一个开源移动开发框架,它允许您使用标准的Web技术,如HTML5,CSS3和JavaScript进行跨...
  • Cordova /Ionic如何创建一个工程 运行到手机 前言简单创建Cordova|Ionic 工程将Cordova/Ionic项目运行起来附录 Cordova 常用命令2 前言 简单使用 CLI 创建一个 Cordova 工程 ,如果还没有配置环境请参考《Cordova ...
  • 安装完成之后终端(win+r,cmd)执行node -v,如果看到如下图所示的版本号表示安装成功。2.安装ant下载连接:http://apache.dataguru.cn//ant/binaries/...,下载完成之后解压到你想安装的目录,比如D:\ant。然后将...
  •  安装完后命令行输入  $ npm //(测试node.js是否安装成功) 全局安装cordova cli  $ npm install cordova -g  $ cordova //测试是否安装成功 部署android的开发环境 安装jdk(如果安装的a...
  • 我说的cordova真机调试不是通过手机浏览器访问,在电脑上调试,而是实实在在的一个apk,主要要求连接手机,还有sdk环境 5.1sdk环境  Sdk环境安装会存在很多问题,不可能将问题一一记录,只记录了自己开发的时候...
  • 第一次接触cordova,从环境搭建到打包第一个apk踩了蛮多坑的,写篇教程给大家参考一下 最后成果 安装前环境: 1、win10系统 2、java jdk 版本是 v1.8.0(java jdk是很早之前就安装了的,关于java jdk的配置...
  • 一篇文章:Cordova+Vue实现Android APP开发(一) 一、使用cordova打包运行app 打包静态资源,没有问题的,但是把自己的vue其他项目转成android app时候,发现接口请求不到数据。 1、对axios的统一加一个...
  • ionic 及cordova环境配置 1、安装nodejs 参见https://blog.csdn.net/liwan09/article/details/104651650 2、安装cordova和ionic cmd 执行命令 npm i -g cordova ionic 执行完成后,可通过 node -v 和cordova -...
1 2 3 4 5 ... 20
收藏数 1,406
精华内容 562