Cordova入门配置

[TOC]

Cordova

安装

• 安装NodeJS

  1. 下载NodeJS https://nodejs.org/en/
  2. 解压缩
  3. 进入目录

  $ cd node-linux-x64/bin
  $ ./node -v
  -> #正常输出版本号
      v4.5.0
  -> #异常输出
     未找到命令 或 其他
  

  4. 设置环境变量

  $ ln -s /home/xxx/cordova_soft/node-v4.5.0/bin/node /usr/local/bin/node
  $ ln -s /home/xxx/cordova_soft/node-v4.5.0/bin/npm /usr/local/bin/npm
  

• 安装Cordova

  $ sudo npm install -g cordova
  # 国内网络连接等问题,此过程非常慢,去解半个小时bug以后再回来看看进度吧
  $ cordova -v
  -> #正常输出版本号
      6.3.1
  

新建

• 创建App

  $ cordova create [目录名] [软件包名] [项目名]
  ex:
  $ cordova create CordovaTest com.ri7er.test FirstCordovaApp
  -> #正常输出
      Creating a new cordova project.
  -> #异常输入
      没有异常过,不清楚
  

• 添加平台

  • 安装配置JDK和AndroidSDK环境,略

  • 开始添加平台

  $ cd CordovaTest
  $ cordova platform add android --save
  -> #次过程会非常慢(5mins+),小光标顺时针转动表示正在创建,耐心等待
  -> #正常输入
      打印创建的Android项目的信息
      Creating Cordova project for the Android platform:
          Path: platforms/android
          Package: com.ri7er.test
          Name: FirstCordovaApp
          Activity: MainActivity
          Android target: android-23
      Android project created with [email protected]
      Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
      Fetching plugin "cordova-plugin-whitelist@1" via npm
      Installing "cordova-plugin-whitelist" for android
  -> #异常输入
      Error: Failed to fetch platform android@~5.2.0
      Probably this is either a connection problem, or platform spec is incorrect.
      1.保持网路通常
      2.删除主目录下的Cordova的cache目录
         rm -rf .cordova/
  $ cordova platform ls
  -> 正常输出
      Installed platforms:
        android 5.2.2
      Available platforms:
        amazon-fireos ~3.6.3 (deprecated)
        blackberry10 ~3.8.0
        browser ~4.1.0
        firefoxos ~3.6.3
        ubuntu ~4.3.4
        webos ~3.7.0
  

调试运行

• 构建运行App

• Cordova构建运行(没试过,不知道好用不)

  • 构建App

  $ cordova build android
  

  • 运行App

  $ cordova emulate android
  $ cordova run android
  

• 导入项目到Android Studio(不推荐Android开发使用Eclipse,太难用)

  • 先去改Project gradle的版本号为你当前工作配置的版本号,不然又要去下载对应版本的gradle,神费事!

      ../CordovaTest/platforms/android/build.gradle
          -->
      classpath 'com.android.tools.build:gradle:2.2.0'
      # 改为你现在使用的版本号
  

  • 再去改CordovaLib的gradle版本,理由同上

      ../../CordovaTest/platforms/android/CordovaLib/build.gradle
          -->
      classpath 'com.android.tools.build:gradle:2.2.0'
  

  • AndroidStudio -> Open an existing Android Studio project
    -> 选择 ../../CordovaTest/platforms/android/build.gradle -> OK

  • 接下来按照普通App的开发方法 , 运行就可以了

• 目录结构

  └──Cordova                          //Cordova库,Java端的代码都在这,对实现方式感兴趣的同学可以看看
  └──android
    └──java
    │ └──com.ri7er.test           //Android入口Activity目录
    │ └──org.apache.cordova.whitelist //默认whitelist插件Java实现目录
    │ └──其他                           //其他插件Java实现目录
    └──assets
    │ └──www                           //主Html、JS实现目录(主要代码在这里完成)
    └──res
      └──xml
        └──config.xml                 //配置目录,包括包名,App名,描述,插件配置等