美文网首页
Cordova之入门

Cordova之入门

作者: 木叶流年 | 来源:发表于2018-08-20 17:13 被阅读0次

    什么是Cordova

      Cordova前身是PhoneGap,而PhoneGap是Nitobi软件公司2008年推出的一个框架,旨在弥补web和iOS之间的不足,使得webiPhone SDK之间的交互更容易,后来又陆续加入了更多的平台。

    • Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
    • Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。
    • Cordova支持如下移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

    安装Cordova

    1. 下载和安装Node.js,安装成功后在命令行使用
    $ node -v  
    $ npm -v   
    
    1. 查看是否安装成功,npmnode.js的包管理器(Package manager)。
    2. 下载和安装Git,安装成功后,你可以在命令行使用git,在自定义导入插件时使用。
    3. 安装cordova使用node.jsnpm工具。cordova模板会被自动下载
    • 在Mac或Linux中,使用终端,安装cordova
    $ sudo npm install -g cordova
    
    • 在Windows中,使用cmd命令行全局安装cordova
     C:\>npm install -g cordova
    

    创建App

      打开命令或终端

    $ cordova create hello com.hello.demo HelloWorld
    

      这将会为你的cordova应用创造必须的目录。默认情况下,cordova create命令生成基于web的应用程序的骨骼,项目的主页是 www/index.html文件。

    项目结构介绍
    hello/
    | -- hooks/
    | -- node_modules/
    | -- platforms/
    |  |  | -- android/
    |  |  | -- ios/
    | -- plugins
    | -- res
    | -- www
    | -- config.xml
    | -- package.json
    
    • hooks 包含自定CLI命令的脚本,用于集成自己的版本控制系统或构建系统。
    • node_modules 文件夹是项目npm中所依赖的文件
    • platforms 添加平台后的目录文件
    • plugins 项目包含插件目录
    • res 资源文件目录
    • www 存放web项目的目录
    • config.xml 项目配置文件
    • package.json npm依赖项目配置

    注意:
    www目录下内容,在项目编译时,将把此文件下文件复制至/platforms/android/app/src/main/assets/
    node_moduses文件出错,可删除文件夹,检查package.json,使用命令$ npm install重新添加

    添加平台

    所有后续命令都需要在项目或项目目录中进行

    $ cd hello 
    

    进入hello目录,根据需要添加iosandroid平台,并确保他们保存在config.xml中。

    $ cordova platform add android --save
    $ cordova platform add ios --svae
    

    删除已添加平台

    $ cordova platform remove android 
    

    检查当前平台设置状态

    $ cordova platform ls
    

    运行addremove平台的命令将会影响项目platform的内容,在这个平台中,每个平台都有一个子目录。

    注意:在使用CLI创建应用的时候,不要修改 /platform/目录中的任何文件,当准备构建应用和安装插件时这个目录会被重写。

    编译安装

    要构建和运行App,需要安装每个你所需要的平台。

    检查是否满足构建标准

    $ cordova requirements
    Requirements check results for android:
    Java JDK: installed .
    Android SDK: installed
    Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
    Gradle: installed
    
    Requirements check results for ios:
    Apple OS X: not installed
    Cordova tooling for iOS requires Apple OS X
    Error: Some of requirements check failed
    

    系楼主android开发,所以只配置了 JDK SDK Gradle环境变量,具体配置及安装百度。

    构建App

    默认情况下,cordova create 创建基于web应用程序的结构,项目开始界面位于www/index.html文件。任何初始化任务应该放在www/js/index.js文件的deviceready事件的处理函数中。

    运行以下命令为所有添加的平台构建

    $ cordova build
    

    如果需要单独为某个平台构建

    $ cordova build android
    $ cordova build ios
    
    测试App

    以下命令使用SDK默认模拟器打开

    $ cordova emulate android
    

    或者,插入你的android手机,在手机上直接测试App

    $ cordova run android
    

    注意,在运行App时,可能会出现长时间编译不动,或者构建出错,是因为gradle被墙,项目依赖等文件无法下载导致的问题,可使用国内阿里云镜像

    具体使用过程,打开目录的/platforms/android/build.gradle文件 和 /platforms/android/app/build.gradle文件中添加。

        repositories {
            maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
            jcenter()
            mavenCentral()
        }
    

    添加插件

    如果App要接触设备级别的特性,就需要添加插件了,你可以在插件搜索页去查找自己所需的插件。

    • 例:添加相机插件
    cordova plugin add cordova-plugin-camera
    

    插件也可以通过目录git地址去添加

    通过plugin ls 或者 plugin list 可查看项目所有已添加的插件

    $ cordova plugin ls
    cordova-plugin-camera 4.0.3 "Camera"
    cordova-plugin-whitelist 1.3.3 "Whitelist"
    

    更新Cordova和项目

    在安装cordova工具之后,可运行一下命令更新到最新版本

    $ sudo npm update -g cordova
    

    用下面语法安装指定版本:

    $ sudo npm install -g cordova@3.1.0-0.2.0
    

    运行cordova -v查看当前版本。要查找最新的cordova版本,可以运行:

    $ npm info cordova version
    

    更新完cordova后,更新目标项目的平台:

    $ cordova platform update android --save
    $ cordova platform update ios --save
    ...etc.
    

    相关文章

      网友评论

          本文标题:Cordova之入门

          本文链接:https://www.haomeiwen.com/subject/capkiftx.html