Cordova(PhoneGap)

创建步骤:官方Guide

  1. 环境准备

    1. 安装 Node.js

      nodejs.org
    2. 安装 git

      git-scm.com (bin目录添加到path)
    3. 安装 cordova

      执行命令 npm install -g cordova
  2. 创建,移除项目

    1. 执行命令

      cordova create CordovaStudy xy.study.cordova CordovaStudy

      参数:

      • CordovaStudy: 指定项目的文件夹名为CordovaStudy,Cordova会自动创建该文件夹
      • xy.study.cordova: 指定项目的包名
      • CordovaStudy: 指定项目名
    2. 添加平台 (需要先配置好相应的SDK)

      cordova platform add ios

      cordova platform add android(需要先配置ANDROID_HOME)
    3. 删除平台

      cordova platform remove android

      cordova platform rm ios
  3. 运行项目(需要安装ant ANT_HOME)

    1. 构建应用

      • 执行命令:cordova build
      • 或者指定平台:cordova build android

      cordova build android

      相当于执行了cordova prepare android 和 cordova compile android

    2. 运行应用

      执行命令:cordova emulate android

      该命令重新生成该应用并在模拟器上运行

      执行命令:cordova run android

      该命令用于在真机上运行

  4. 插件的添加

    1. 插件搜索:

      执行命令:cordova plugin search bar code

      参数:bar,code 均为搜索的关键字
    2. 添加插件:

      执行命令:

      cordova plugin add org.apache.cordova.console(可以接多个插件,空格分隔)
    3. 查看已安装的插件

      执行命令:cordova plugin ls
    4. 删除插件:

      执行命令:cordova plugin remove org.apache.cordova.console (可以接多个插件,空格分隔)
  5. 多平台修改

    1. 根目录下创建文件夹merges
    2. merges下创建相应平台的文件夹,及要修改的对应的文件

      eg. merges/androids/css/overrides.css

      此文件就会覆盖掉 www/css/overrides.css
  6. 其他命令

    • 帮助:cordova help
    • 更新:Cordova:npm update -g cordova
    • 信息:npm info cordova
    • 安装指定版本:npm install -g cordova@3.1.0-0.2.0

常用插件:

设备API:
cordova plugin add org.apache.cordova.device(可以接多个插件,空格分隔) 網路連接和電池事件:
cordova plugin add org.apache.cordova.network-information
cordova plugin add org.apache.cordova.battery-status 加速度計、 指南針、 和地理定位:
cordova plugin add org.apache.cordova.device-motion
cordova plugin add org.apache.cordova.device-orientation
cordova plugin add org.apache.cordova.geolocation 相機、 媒體重播和捕獲:
cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.media-capture
cordova plugin add org.apache.cordova.media 訪問設備或網路 (檔 API) 上的檔:
cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer 通過對話方塊或振動發出通知:
cordova plugin add org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.vibration 連絡人:
cordova plugin add org.apache.cordova.contacts 全球化:
cordova plugin add org.apache.cordova.globalization 閃屏:
cordova plugin add org.apache.cordova.splashscreen 打開新的瀏覽器視窗
cordova plugin add org.apache.cordova.inappbrowser 調試主控台:
cordova plugin add org.apache.cordova.console

不同平台生成不同的代码的处理方式

  1. 项目的根目录下创建merges文件夹
  2. merges文件夹下创建要对应平台的文件夹(eg:android)
  3. 在对应平台目录(merges\android)下编写对应平台的特定内容

    eg: css , 创建css文件夹,css文件。

    该文件会在生成指定平台应用时(build),自动覆盖在www目录下(www\css)的对应文件

自定义插件:

1.创建目录结构如下:
myplugin
src
android
myplugin.java
www
myplugin.js
plugin.xml

调试

  1. Ripple

    • 安装Ripple Emulator :

      npm install -g ripple-emulator
    • 启动Ripple :(进入cordova项目根目录)

      ripple emulate
    • 访问项目:

      启动Chrome浏览器 访问 http://localhost:4400/
  2. Weinre

    • 安装 Weinre :

      npm -g install weinre

    • 端口设置:

      --httpPort 调试服务器运行的端口,默认的 8080,如果这个端口有在用,可以改为其它端口;

      --boundHost 调试服务器绑定的 IP 地址,也可以是域名,默认是 localhost

    • 启动

      weinre

    • 访问项目:(默认)

      http://localhost:8080/

示例项目

github - CordovaStudy

Cordova(PhoneGap) 环境搭建与基础的更多相关文章

  1. Apache Cordova开发环境搭建(二)VS Code

    原文:Apache Cordova开发环境搭建(二)VS Code 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u011127019/articl ...

  2. Apache Cordova开发环境搭建(一)-Visual Studio

    原文:Apache Cordova开发环境搭建(一)-Visual Studio 一.使用Visual Studio开发Apache Cordova手机App 1.版本要求,Visual Studio ...

  3. visual studio 2015 + Cordova 开发环境搭建

    简单的写一些,备忘,太折腾了,特别是通过代理上网的我们国内的开发者 1.当然是安装Visual Studio 2015,别忘了选择Tools For Apache Cordova. 对于通过Proxy ...

  4. 01scala环境搭建和基础

    1.环境搭建 1.下载安装jdk1.7以上版本,并进行环境变量的配置 2.下载scala-2.10.4.msi,安装后进行环境变量的配置 3.下载scala-SDK-4.1.1-vfinal-2.11 ...

  5. Redis学习系列二之.Net开发环境搭建及基础数据结构String字符串

    一.简介 Redis有5种基本数据结构,分别是string.list(列表).hash(字典).set(集合).zset(有序集合),这是必须掌握的5种基本数据结构.注意Redis作为一个键值对缓存系 ...

  6. 【入门教程】kafka环境搭建以及基础教程

    问题导读 1.Kafka独特设计在什么地方?2.Kafka如何搭建及创建topic.发送消息.消费消息?3.如何书写Kafka程序?4.数据传输的事务定义有哪三种?5.Kafka判断一个节点是否活着有 ...

  7. cordova开发环境搭建

    最近我在尝试了解跨平台技术的发展,首先则是想到了cordova.本文简单记录下cordova环境搭建的过程. 安装cordova 首先是要npm全局安装cordova npm install -g c ...

  8. JavaSE 学习笔记01丨开发前言与环境搭建、基础语法

    本蒟蒻学习过C/C++的语法,故在学习Java的过程中,会关注于C++与Java的区别.开发前言部分,看了苏星河教程中的操作步骤.而后,主要阅读了<Java核心技术 卷1 基础知识>(第8 ...

  9. Dubbo源码学习--环境搭建及基础准备(ServiceLoader、ExtensionLoader)

    环境搭建 Github上下载Dubbo最新发布版本,楼主下载版本为2.5.7. cd到源码解压目录,maven编译,命令为: mvn clean install -Dmaven.test.skip 生 ...

随机推荐

  1. 怎么在vue中使用less

    最近使用vue2.0重构项目, 使用vue-cli脚手架构建, 采用webpack模板, 要在项目中使用less进行样式的编写 首先, 打开终端, 在当前项目目录下安装less npm install ...

  2. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  3. 【JavaScript你需要知道的基础知识~】

    最近开始学习JavaScript,整理了一些相关的基础知识 JS注释方式:// 单行注释(Ctrl+/ )/* 段落注释(Ctrl+shift+/ )*/ [JavaScript基础]JavaScri ...

  4. 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...

  5. 什么是ZigBee、Wifi无线技术?有什么优势?

    Zigbee:是基于IEEE802.15.4标准的低功耗个域网协议.根据这个协议规定的技术是一种短距离.低功耗的无线通信技术.这一名称来源于蜜蜂的八字舞,由于蜜蜂(bee)是靠飞翔和"嗡嗡& ...

  6. R语言的导数计算(转)

    转自:http://blog.fens.me/r-math-derivative/ 前言 高等数学是每个大学生都要学习的一门数学基础课,同时也可能是考完试后最容易忘记的一门知识.我在学习高数的时候绞尽 ...

  7. C++ STL快速入门

    在数月之前的机试中第一次体验到STL的威力,因为自己本来一直在用C语言做开发,很多数据结构都是自己造的,比如链表.队列等,第一次接触C++ STL后发现这些数据结构都已经给我提供好了,我直接拿去调用就 ...

  8. 3.Node.js 自定义微信菜单

    文章目录:         1.Node.js 接入微信公众平台开发         2.Node.js access_token的获取.存储及更新         3.Node.js 自定义微信菜单 ...

  9. Selenium WebDriver + python 自动化测试框架

    目标 组内任何人都可以进行自动化测试用例的编写 完全分离测试用例和自动化测试代码,就像写手工测试用例一下,编写excel格式的测试用例,包括步骤.检查点,然后执行自动化工程,即可执行功能自动化测试用例 ...

  10. Buffer深入分析

    Buffer Buffer的类图如下: 除了Boolean,其他基本数据类型都有对应的Buffer,但是只有ByteBuffer才能和Channel交互.只有ByteBuffer才能产生Direct的 ...