• cordova 安装使用说明

    2016-11-04 19:15:11
    安装 Cordova 您需要在本地系统上安装 Cordova,然后才能使用 NetBeans IDE 将 HTML5 应用程序打包为本机 Mobile 应用程序。您将使用 NodeJS 包管理器 npm 来安装和更新 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;(变量)窗口的屏幕快照
    展开全文
  • cordova安装方法

    2019-06-15 14:44:55
    2019独角兽企业重金招聘Python工程师标准>>> ...

    安装cordova之前需要先安装node.js和npm

     

    然后在命令行运行:npm install -g cordova即可安装到最新版本的cordova

    如果要安装指定版本,命令为:npm install -g cordova@6.5.0最后+@+版本号,此命令意思为安装6.5.0版的cordova)

    转载于:https://my.oschina.net/u/1251858/blog/1799012

    展开全文
  • cordova环境搭建完整版

    2019-09-26 11:37:31
    安装cordova 使用npm install -g cordova命令往往安装错误因为关于安卓的东西,大部分服务器都是在国外所以 安装淘宝的 npm 镜像,从 registry.npm.taobao.org 安装所有模块 1、使用cnpm安装: 1)、首先:安装...

    安装NodeJS、java

    不在这里详细说明,百度...

     

     

    安装cordova

    使用npm install -g cordova命令往往安装错误因为关于安卓的东西,大部分服务器都是在国外所以

    安装淘宝的 npm 镜像,从 registry.npm.taobao.org 安装所有模块

    1、使用cnpm安装:

    1)、首先:安装cnpm

    npm install cnpm -g --registry=https://registry.npm.taobao.org

    运行此命令代表可以使用cnpm命令了

    2)、使用cnpm命令安装cordova

    cnpm install -g cordova

    注意:

    cnpm install -g cordova 默认安装的最新版本,可以安装指定版本cordova,例如

    cnpm install -g cordova@6.5.0

    表示安装版本为6.5.0的cordova

     

    2、使用ionic安装cordova

    npm install -g cordova ionic --registry=https://registry.npm.taobao.org

     

     

    注意:这只是在F盘下的wfsqz目录下安装的cordova,跟其他目录没有关系,如果在其他目录创建cordova项目,需要重新运行此命令

     

     

    使用cordova创建项目(错误总结)

    1、创建cordova命令创建项目

    cordova create project com.demo Demo

    注意:如果你运行上面的命令出错了,类似这样的错误信息

    Creating a new cordova project.
    Unhandled "error" event. (  Error from Cordova Fetch: Error: cmd: Command failed with exit code 1 Error output:
    npm ERR! code ENOLOCAL
    npm ERR! Could not install from "..\AppData\Roaming\npm\node_modules\cordova\node_modules\_cordova-app-hello-world@3.12.0@cordova-app-hello-world\index.js" as it does not contain a package.json file.
     
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\DELL\AppData\Roaming\npm-cache\_logs\2018-10-12T14_49_29_635Z-debug.log)

    说明你在当前目录还没有安装cordova,运行如下命令就行了:(默认是cordova最新版本)

    npm install -g cordova ionic --registry=https://registry.npm.taobao.org

    然后你再重新运行上次的cordova create命令,就可以创建项目了

     

    2、为已创建好的cordova项目添加Android平台

    命令:

    没有指定平台版本

    cordova platform add android

    指定平台版本:

    cordova platform add android@6.3.0

    注意目录位置:

     

    3、准备编译环境检查:注意是在你的项目目录下运行命令

    命令:

    cordova requirements

    必须要检查环境,不然最后你是打包不成apk的

    第一次搭建环境,肯定会显示,Android SDK、Android target、Gradle :not installed,没有安装,是因为我们没有配置AndroidSDK的环境变量,好了开始我们的第四步...

     

    4、下载AndroidSDK、配置环境变量....

    官网下载地址:https://www.androiddevtools.cn/

    这里用windows系统演示,解压后的文件样子:

    运行SDK Manager.exe文件

    出现以下画面,勾选我们需要安装的东西

     

    等待文件安装完成后在看看原来的AndroidSDK目录下文件有那些变化

     

    完成这些步骤了,就可以正式配置环境变量啦

     

     

    测试环境变量是否成功

     

    5、准备打包apk

    然后我们在次运行cordova requirements命令,检查编译环境是否满足,注意:需要把之前的dos窗口关闭掉,重新打开,定位到项目目录下,运行此命令才有效果

     

    注意:出现下图类似情况,不用在意,照常编译即可,因为这是没有安装android虚拟机,但实际上大部分时候都是用真机调试的,所以可以忽略这个错误。

     

    一切完成后编译工程 :

    cordova build 

     

    一般apk文件生成位置:

     

    此时就可以拿到这个apk文件发送至手机安装,界面

     

    到此,cordova环境算是搭建完成了!

    注意:cordova和android版本不是随便填个@加个数字就行的,需要注意版本对应关系

    参考cordova官网:cordova中文官网

    总结:总体来说环境搭建不是很麻烦,中途会遇到很多问题,不要着急,仔细研究一下肯定有解决的办法,以上是本人搭建cordova环境总结的,如有错误,还望大牛们指出,在此,小弟抱拳了!

     

    展开全文
  • cordova安装教程

    2018-10-12 23:10:14
    1.安装Node.js 安装nodejs,是为了使用其中...2.安装cordova Cli 这个是cordova开发的脚手架,其中集成了一些方法,比如构建,打包,方便开发。 [npm install -g cordova] 测试是否安装成功,cmd中执行[cordova -ver...

    1.安装Node.js
    安装nodejs,是为了使用其中安装的包管理工具npm(下载上传工具)
    测试是否安装成功,cmd中执行[node -v]以及[npm -version]

    2.安装cordova Cli
    这个是cordova开发的脚手架,其中集成了一些方法,比如构建,打包,方便开发。
    [npm install -g cordova]
    测试是否安装成功,cmd中执行[cordova -version]

    3.安装java JDK
    版本选择JAVA SE 8
    环境变量配置path:
    [JAVA_PATH   :  D:\java ](压缩包解压目录)
    [%JAVA_PATH%\bin]
    [%JAVA_PATH%\jre\bin]
    测试是否安装成功,cmd中执行[javav]

    4.部署andrid开发环境
    这一步是为了在cmd中使用cordova的时候涉及到的android命令
    adt-bundle-windows-x86_64-20140321.zip
    环境变量配置path:
    [ANDROID_PATH   :  D:\adt-bundle-windows-x86_64-20140321\sdk](压缩包解压目录)
    [%ANDROID_PATH%\platform-tools]
    [%ANDROID_PATH%\tools]

    5.安装ant
    Apache Ant,是一个将软件编译、打包,测试、部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发
    apache-ant-1.9.7-bin.zip
    解压压缩包到目录 D:\apache-ant-1.9.7
    配置环境变量
    [D:\apache-ant-1.9.7\bin]
    测试是否安装成功,cmd中执行[ant]


    6.创建第一个cordova应用
    [cordova create hello com.demo.hello hello]
    参数解释: 参数一:目录
    参数二:包名
    参数三:项目名称


    [cd hello]
    参数解释: 进入刚才创建的新项目中的目录


    [cordova platform add android --save]
    参数解释:cordova可以支持android和ios,windowPhone
    这里添加对android平台的支持(也就是下载一些android包)
    这一步很容易出错,一可能是网速慢卡住,二可能前面几步中的android没有正确配置
    (或者会弹出android target需要某一特版本,比如24,此时使用android-sdk-windows中的SDK manager下载android SDK 24,将文件夹(命名一般是android-24)放入部署的android环境 D:\adt-bundle-windows-x86_64-20140321\sdk\platforms\中)


    或者修改项目文件夹下 platforms\android\project.properties中的target值,以及AndroidManifest.xml中的target值

    安装构建先决条件
    $ cordova requirements

    [cordova build]
    参数解释:构建应用
    [cordova server android]
    参数解释: 运行到浏览器


    7.androidStudio导入Cordova项目
    完成上面步骤后,在目录中会有一个文件
    platforms\android、build.gradle
    通过androidStudio导入该文件,就可以在androidStudio编写应用了。


    备注:一些常用的指令
    检查是否满足构建平台要求[cordova requirements]
    检查是否满足构建平台要求[cordova platforms check]
    检查当前设置的平台[cordova platform ls]
    使用仿真器查看应用[cordova emulate android]
    查看仿真器列表[cordova run --list]
    链接手机查看应用[cordova run android]
    已安装的插件列表[cordova plugin ls]


    入坑:
    键入命令:cordova plugin add cordova-plugin-whitelist,会开始安装插件,同时会下载gradle和maven,但是非常慢
    解决办法:
    1.需要手动下载 gradle-2.14.1-all.zip
    2.到platforms\Android\cordova\lib\builders\GradleBuilder.js 文件里面找到“http\\://services.gradle.org/distributions/gradle-2.14.1-all.zip”将其改为自己已经下载的文件的http地址。
    3.在项目里面搜索[mavenCentral()]替换为[maven { url "http://maven.aliyun.com/nexus/content/groups/public" } ]


    报错:No installed build tools found. Install the Android build tools version 19.1.0 or higher时,
    部署andrid开发环境路径出错

    展开全文
  • Cordova安装使用

    2019-04-26 17:32:59
    本文来自... H5交互的框架很多,如ReactNative、Weex等,也有直接用JsBridge和WebAppInterface的方式,至于用哪种实现方式,主要看业务复杂度以及重要性。 拍板Cordova原因如下: ...

                                           本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处!

          H5交互的框架很多,如ReactNative、Weex等,也有直接用JsBridge和WebAppInterface的方式,至于用哪种实现方式,主要看业务复杂度以及重要性。

    拍板Cordova原因如下:

    1、支持Android、iOS、Sybian等主流手机操作系统

    2、使用时间长,被众多知名公司使用,踩过的坑足够多,资料查找方便

    3、总监自己比较熟悉,有助于支持项目快速推进。

    总之技术选型完毕,大家就开始准备落实方案。

         先去查一下官方介绍:http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html

    cordova安装
    要求:NodeJs
    要求:Jdk64位

    npm出现npm err windows_nt 6.1.7601错误

    npm config set https-proxy null

    npm config set strict-ssl false

    npm install -g cnpm –registry=https://registry.npm.taobao.org

    便利性在于:支持同步和异步调用(需要自己写相关插件)

    下载完之后,咱们把cordova加入项目

    1、这部分代码放入assets目录:


    2、这部分代码加入依赖

    3、把config.xml文件放在这里

    <?xml version='1.0' encoding='utf-8'?>
    <widget xmlns:cdv="http://cordova.apache.org/ns/1.0" id="com.company.packagename" version="1.0.0"
            xmlns="http://www.w3.org/ns/widgets">
    
        <feature name="Whitelist">
            <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin"/>
            <param name="onload" value="true"/>
        </feature>
    
        <feature name="SyncService">
            <param name="android-package" value="com.cordova.plugin.SyncServicePlugin"/>
            <param name="onload" value="true"/>
        </feature>
    
        <feature name="AsyncService">
            <param name="android-package" value="com.cordova.plugin.AsyncServicePlugin"/>
            <param name="onload" value="true"/>
        </feature>
    
        <name>HelloWorld</name>
        <description>
            A sample Apache Cordova application that responds to the deviceready event.
        </description>
        <author email="dev@cordova.apache.org" href="http://cordova.io">
            Apache Cordova Team
        </author>
    
        <content src="index.html"/>
        <access origin="*"/>
        <allow-intent href="http://*/*"/>
        <allow-intent href="https://*/*"/>
        <allow-intent href="tel:*"/>
        <allow-intent href="sms:*"/>
        <allow-intent href="mailto:*"/>
        <allow-intent href="geo:*"/>
        <allow-intent href="market:*"/>
        <preference name="loglevel" value="DEBUG"/>
        <preference name="errorUrl" value="file:///android_asset/client-local/500.html"/>
    </widget>

    重点有4,分别是packageName、syncServicePlugin(同步插件)、asyncServicePlugin(异步插件)和errorUrl

    4、设置CordovaPlugin的shouldAllowNavigation的返回值为true,否则H5调不到本地插件

    5、写插件实现功能

        @Override
        public boolean execute(String action, final String rawArgs, CallbackContext callbackContext)
                throws JSONException {
            if (action.equals("js_viewImageAction")) {
                try {
                    JSONArray array = new JSONArray(rawArgs);
                    JSONObject args = array.optJSONObject(0);
                    JSONArray imgArray = args.optJSONArray("img");
                    int index = args.optInt("index");
                    String[] target = new String[imgArray.length()];
                    for (int i = 0; i < imgArray.length(); i++) {
                        target[i] = imgArray.getString(i);
                    }
                    Intent intent = new Intent(cordova.getActivity(), ImageViewActivity.class);
                    intent.putExtra(IntentConstants.IMAGE_URLS, target);
                    intent.putExtra(IntentConstants.IMAGE_INDEX, index);
                    cordova.getActivity().startActivity(intent);
                    callbackContext.success();
                    return true;
                } catch (Exception e) {
                    Logger.t(TAG).e("js_viewImageAction failed" + e);
                }
            } 
          return super.execute(action, rawArgs, callbackContext);
        }

    js_viewImageAction即插件名字。

    通过JsonArray(据说iOS无法使用json传数据),获得json传递数据(注意要调callbackContext.success方法,使h5能确认native已经接收到;当然也可以用success方法回传json结果数据),同时return true 代码插件已被处理,不必再分发。

    注意点:插件每次进入都会被初始化。

    后面打算再插入一点WebView的知识点:

    WebView状态管理

    //激活WebView为活跃状态,能正常执行网页的响应
    webView.onResume() ;
    
    //当页面被失去焦点被切换到后台不可见状态,需要执行onPause
    //通过onPause动作通知内核暂停所有的动作,比如DOM的解析、plugin的执行、JavaScript执行。
    webView.onPause();
    
    //当应用程序(存在webview)被切换到后台时,这个方法不仅仅针对当前的webview而是全局的全应用程序的webview
    //它会暂停所有webview的layout,parsing,javascripttimer。降低CPU功耗。
    webView.pauseTimers()
    //恢复pauseTimers状态
    webView.resumeTimers();
    
    //销毁Webview
    //在关闭了Activity时,如果Webview的音乐或视频,还在播放。就必须销毁Webview
    //但是注意:webview调用destory时,webview仍绑定在Activity上
    //这是由于自定义webview构建时传入了该Activity的context对象
    //因此需要先从父容器中移除webview,然后再销毁webview:
    rootLayout.removeView(webView); 
    webView.destroy();

    Js交互,4.4以上

    // 只需要将第一种方法的loadUrl()换成下面该方法即可
        mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                //此处为 js 返回的结果
            }
        });
    }

    加载速度:使用本地资源(来源于随时服务端推送)

    public class MainActivity extends AppCompatActivity {
        
        WebView mWebview;
        
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            
            mWebview = (WebView) findViewById(R.id.webview);
            // 创建WebView对象
    
            mWebview.getSettings().setJavaScriptEnabled(true);
            // 支持与JS交互
    
            mWebview.loadUrl("http://ip.cn/");
            // 加载需要显示的网页
    
            mWebview.setWebViewClient(new WebViewClient() {
    
                 // 复写shouldInterceptRequest
                 //API21以下用shouldInterceptRequest(WebView view, String url)
                @Override
                public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
    
                    // 步骤1:判断拦截资源的条件,即判断url里的图片资源的文件名
                    // 此处网页里图片的url为:http://s.ip-cdn.com/img/logo.gif
                    // 图片的资源文件名为:logo.gif
    
                    if (url.contains("logo.gif")) {
    
                        InputStream is = null;
                        // 步骤2:创建一个输入流
    
    
                        try {
                            is =getApplicationContext().getAssets().open("images/error.png");
                            // 步骤3:打开需要替换的资源(存放在assets文件夹里)
                            // 在app/src/main下创建一个assets文件夹
                            // assets文件夹里再创建一个images文件夹,放一个error.png的图片
    
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                        // 步骤4:替换资源
    
                        WebResourceResponse response = new WebResourceResponse("image/png",
                                "utf-8", is);
                        // 参数1:http请求里该图片的Content-Type,此处图片为image/png
                        // 参数2:编码类型
                        // 参数3:替换资源的输入流
    
                        System.out.println("旧API");
                        return response;
                    }
    
                    return super.shouldInterceptRequest(view, url);
                }
    
    
                // API21以上用shouldInterceptRequest(WebView view, WebResourceRequest request)
                @TargetApi(Build.VERSION_CODES.LOLLIPOP)
                @Override
                public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
    
                    // 步骤1:判断拦截资源的条件,即判断url里的图片资源的文件名
                    // 此处图片的url为:http://s.ip-cdn.com/img/logo.gif
                    // 图片的资源文件名为:logo.gif
                    if (request.getUrl().toString().contains("logo.gif")) {
    
                        InputStream is = null;
                        // 步骤2:创建一个输入流
    
                        try {
                            is = getApplicationContext().getAssets().open("images/error.png");
                            // 步骤3:打开需要替换的资源(存放在assets文件夹里)
                            // 在app/src/main下创建一个assets文件夹
                            // assets文件夹里再创建一个images文件夹,放一个error.png的图片
    
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                        //步骤4:替换资源
                       
                        WebResourceResponse response = new WebResourceResponse("image/png",
                                "utf-8", is);
                        // 参数1:http请求里该图片的Content-Type,此处图片为image/png
                        // 参数2:编码类型
                        // 参数3:存放着替换资源的输入流(上面创建的那个)
                        
                        return response;
                    }
                    return super.shouldInterceptRequest(view, request);
                }
    
        });
    
    }
    }

    安全方面:

    禁用file协议及相关js调用

    // 需要使用 file 协议
    setAllowFileAccess(true); 
    setAllowFileAccessFromFileURLs(false);//true,则可从file里的js,读取本地私密源
    setAllowUniversalAccessFromFileURLs(false);//true,则可从file里的js,读取所有源
    
    // 禁止 file 协议加载 JavaScript
    if (url.startsWith("file://") {
        setJavaScriptEnabled(false);
    } else {
        setJavaScriptEnabled(true);
    }
    

    3.0以下删除WebView内置导出的“searchBoxJavaBridge_”、“accessibility ”、“accessibilityTraversal”

    更多WebView知识点:https://www.jianshu.com/p/3c94ae673e2a

    有问题欢迎评论!

    展开全文
  • 搞了一天,终于在晚上1点半的时候,把cordova安装在公司和自己的电脑上,真是心塞呀,废话不...第三、全局安装cordova sudo npm install -g cordova 第四、创建新项目 比如我们在桌面上用cordova创建一个test的文件
  • 前面讲过安装好node.js后通过 npm install -g cordova cmd命令安装Cordova 可是如果网速不好的话 安装会经常失败下面讲一个快速的方法1.首先安装Node.js 安装步骤:...
  • 手把手教你安装Cordova

    2020-04-30 15:07:24
    1. 安装Node.js 安装Node.js,是为了使用...2. 安装cordova Cli 这个是cordova开发的脚手架,其中集成了一些方法,比如构建,打包,方便开发。 [npm install -g cordova] 测试是否安装成功,cmd中执行[cordova -v...
  • 关于npm安装cordova错误解决办法 错误信息如下: C:\Users\username&amp;amp;amp;gt;npm install -g cordova npm WARN deprecated hoek@2.16.3: The major version is no longer supported. Please update to 4....
  • 本来想安装cordova,却出现了下面的问题。 昨天花了一下午没有解决问题。其实问题的原因很清楚。就是wmic的问题。楼主还傻子一样到处找问题。果然做程序员这一行要认真仔细,认真分析报错。 确定是wmic的问题...
  • 在通过命令npm install -g cordova时安装cordova是出错,最后找到原因是权限不够,解决办法在运行cmd时选择管理员运行。 。 权限不足时出现以下错误: 通过管理员运行后: 如果想验证是否安装成功,输入命令行 ...
  • ---恢复内容开始--- cmd 执行 npm install -g cordova 提示校验码不正确 本博客的解决方案采取网络上的 使用国内镜像 npm config set registry ...可以尝试安装cordova 如果还是慢,可执行 npm conf...
  • 问题描述: 使用npm install -g cordova命令安装cordova,安装到一半总是会报错 解决办法: 使用sudo npm install -g cordova命令,然后根据提示数据电脑的密码,即可完成cordova的安装
  • 通过npm安装 Cordova

    2019-10-03 20:36:29
    通过npm安装 Cordova 首先请确保你在本地已经安装了NodeJS(可以调用npm命令), 并且是联网状态的。如果不知道如何安装NodeJS, 请参考 ”四步完成NodeJS安装,配置和测试”。 第一步: 在命令行(CMD)里输入 ...
  • 安装Cordova遇坑

    2019-09-19 15:25:20
    最近想整合Cordova和vue开发app并构建打包,因此便开始倒腾。 昨天下午先在自己电脑上尝试着装Cordova,npm install cordova -g,熟悉使用命令行的er对这都不会陌生,我也是菜鸟一枚,只会简单的,哈哈哈。。。输入...
  • 安装cordova失败,Error: Command failed: wmic os get Caption 原因: 环境变量中没有wmic的地址。 解决方案: 查看环境变量的PATH中有没有如下的值,没有的话就加上。 %SystemRoot%;%SystemRoot%\system32;...
  • 在ubuntu下安装cordova

    2016-03-30 15:34:43
    主要讲了本人在ubuntu下安卓cordova的过程。
  • 因为前段时间开发的Android项目要用到cordova与H5进行交互,翻查了不少网站,故此写一遍博客来巩固一下。若有写不好之处请勿喷,谢谢!Android开发的程序员,JDK与ADT以及SDK的环境配置就不需要介绍了,这些环境...
  • 我们可以使用npm全局安装Cordova npm install -g cordova 创建Cordova项目 cordova create demo com.demo.hello HelloCordova #demo 文件名 #com.demo.hello 项目bundle name #HelloCordova 项目名 Parameter...
  • 安装cordova需要安装node.js和npm,已安装的可以使用node -v &amp; npm -v 验证 未安装的小伙伴可以请参考:https://blog.csdn.net/truesword/article/details/81292134, cordova的安装步骤: 打开终端,...
1 2 3 4 5 ... 20
收藏数 10,296
精华内容 4,118