Cordova基本使用（一）

简述

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

使用Apache Cordova的人群:

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

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

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

架构

这是cordova应用程序的几个组成部分。下面这幅图是cordova应用架构的高级视图。

　　　　　　　　　　　　　　　　　　　　　　　　专业盗图

WebView

Cordova启用的WebView可以给应用提供完整用户访问界面。在一些平台中，他也可以作为一个组件给大的、混合应用，这些应用混合和Webview和原生的应用组件。(查看Embedding WebViews获得详细内容。)

Web App

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

这个容器中包含一个非常重要文件- config.xml 文件他提供App的重要的信息和特定的参数用来影响App的工作，比如说是否响应方向的变动。

基础使用

　　

安装Cordova CLI：

1. 下载和安装Node.js。安装完成后你可以在命令行中使用node 和 npm 。

2. (可选)下载和安装git client, 如果你没有。安装成功后，你可以在命令行中使用git。 这个命令行使用下载git仓库中的资源。

3. 安装cordova 模块使用Nodejs的npm工具。cordova模块会被npm工具自动下载。

• 在OS X和Linux上:

     $ sudo npm install -g cordova
  

  在OS X和Linux上, npm命令加上前缀sudo因为cordova可能需要安装在其他的受限制目录比如 /usr/local/share。如果你使用可选工具nvm/nave或者具有安装目录的写权限，那么你可以省略sudo前缀。这里有更多提示 可用在使用 npm 没有 sudo前缀时，如果你想那么做。

• 在Windows上:

     C:\>npm install -g cordova
  

-g标志是告诉 npm 我们全局安装 cordova。否则我们将会安装在当前工作目录的 node_modules子目录。

安装完成后，你应该能够在命令行中运行cordova命令，在没有任何参数的时候会打印一些帮助信息

创建App

1. 熟悉命令，使用 cordova -h 查看。

　　　　　　2. 新建命令[链接]

　　　　　　

#cordova create path [id [name [config]]] [options] 

# 创建文件名为demoApp 包名 org.apache.cordova.demoApp 应用名为demoApp

cordova create demoApp org.apache.cordova.demoApp demoApp

　　　　　    3. 添加插件[链接]

　　　　　　　　eg:cordova plugin add cordova-plugin-camera

　　　　　   4.添加平台[链接]

　　　　　　　　cd demoApp

　　　　　　　　cordova platform add android

　　　　　　　　cordova platform add android@6.0.0

　　　　　　　　cordova platform add ios

　　　　　　　　cordova platform add brower

　　　　　　5.检测环境[链接]

　　　　　　　　cordova requirements [platformName]

　　　　　　6.生成APP[链接]

　　　　　　　　默认情况下, cordova create生产基于web应用程序的骨架，项目开始页面位于www/index.html 文件。任何初始化任务应该在www/js/index.js文件中的deviceready事件的事件处理函数中

　　　　　　　　cordova build

　　　　　　　　cordova build android 

　　　　　　　　cordova build android --verbose

　　　　　　　　cordova build ios
　　　　　　　　
　　　　　　　　cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey

　　　　　　 7.查看生成的apk

　　　　　　　　生成app后面，最后的信息里面有apk的路径

　　　　　　　　/demoApp/platforms/android/app/build/outputs/apk/debug

　　　　　　　　/demoApp/platforms/android/app/build/outputs/apk/release

项目结合cordova

　　根据cordova的描述，web的项目目录位于www文件夹里，那么也就是把静态文件生成到www文件夹就可以了。然后在index.html里面引入cordova.js

　　

<script src="cordova.js"></script>

普通h5项目结合cordova

　　直接把文件拷贝到www下

vue项目结合cordova

　　　　　　vue-cli项目可以修改webpack build的生成路径到www文件夹里

　　　　　　见：项目/config/index.js 修改如下

//代码省略
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',

    //代码省略