Cordova基本使用(一) 简述 架构 基础使用 项目结合cordova

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

使用Apache Cordova的人群:

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

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

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

架构

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

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 查看。

Cordova基本使用(一)
简述
架构
基础使用
项目结合cordova

      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: '',


    //代码省略