美文网首页
Cordova入门配置

Cordova入门配置

作者: 氵可 | 来源:发表于2016-09-20 13:07 被阅读0次

    [TOC]

    Cordova

    安装

    • 安装NodeJS

      1. 下载NodeJS https://nodejs.org/en/
      2. 解压缩
      3. 进入目录
      $ cd node-linux-x64/bin
      $ ./node -v
      -> #正常输出版本号
          v4.5.0
      -> #异常输出
         未找到命令 或 其他
      
      1. 设置环境变量
      $ 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 cordova-android@5.2.2
          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名,描述,插件配置等
      

    相关文章

      网友评论

          本文标题:Cordova入门配置

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