cordova入门教程(一)

作者: 我是午饭 | 来源:发表于2016-08-04 16:19 被阅读14357次

安装cordova cli

1、下载安装node.js(js的运行环境),安装时勾选npm(js包的管理工具)。
2、下载安装git(配置好环境变量)。
3、使用npm安装cordova。

  • 在os或Linux上
$ sudo npm install -g cordova
  • 在Windows上
C:\>npm install -g cordova

创建App

创建cordova项目

$ cordova create hello com.example.hello HelloWorld

创建出来的工程目录如下图所示

cordova工程目录

添加平台

后续的命令都需要在cordova工程目录下进行,所以先进到工程根目录

cd hello

添加目标平台,以下命令行添加了ios和Android平台,并保存到根目录下的config.xml配置文件中

cordova platform add ios --save
cordova platform add android --save

添加目标平台需要的时间可能跟网络速度有关,下图是cmd添加Android平台的截图:

添加Android平台.png

成功后,在cordova工程中的platforms文件夹中生成对应平台的工程文件。


各平台工程文件.png

通过下面的命令查看已添加的平台

cordova platform ls

对应平台环境搭建

打包,编译和运行app,需要搭建各个平台的开发和运行环境,如果只是开发前端项目无需各平台环境。这里先放上cordova官网上各平台环境的要求:

打包App

创建cordova工程的时候,生成的www文件夹为前端工程的放置的位置,目录基于web应用架构,如下图所示:


前端工程目录.png

index.html为混合App的入口,一些初始化要放在www/js/index.js文件中的deviceready中。前端工程开发完成后就可以打包成对应各平台的App了。

cordova build

可以打包指定的平台

cordova build ios

更多的打包指令
Cordova build command reference documentation
当然打包的时候可能会出现一些问题,比如:


虽然你装了gradle了但cordova还是要去再下一个,而且下个半天下不下来。我们可以到..\platforms\android\cordova\lib\builders文件下找到GradleBuilder.js文件将
var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'http\\://services.gradle.org/distributions/gradle-2.13-all.zip';

修改成

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'file:///C:/Users/User/Desktop/gradle-2.13-all.zip';//自己的gradle路径

修改后再次打包,就生成apk了(其他问题待补充...),下图为打包成功后cmd的提示:


最后到该目录拿到apk,或者使用下面的命令行就可以运行App了

cordova run android

相关文章

网友评论

  • 蟹老板吃罐头鱼:你好出现了这种情况该怎么解决
    C:\Users\hm\Desktop\project\myapp>cordova build android
    ANDROID_HOME=C:\Users\hm\AppData\Local\Android\sdk
    JAVA_HOME=C:\Program Files\Java\jdk1.8.0_121
    Subproject Path: CordovaLib
    Error: cmd: Command failed with exit code ENOENT
  • 过客:后续的开发就是在www目录下写html 和 js了吧?
    我是午饭:@过客 是的
  • a0bb3de247fa:你好 请问下出现下面这个错误是什么原因?
    cordova build ios
    Error: xcodebuild was not found. Please install version 7.0.0 or greater from App Store
    枫林带:@枫林带 自己来吧,file后面是三个斜杠。亲测。
    枫林带:额,要是在Mac环境下替换Gradle的路径是file:///path/to/gradle,还是file:////path/to/gradle?:joy:
    我是午饭:@a0bb3de247fa 找不到 xcode,你要安装xcode
  • dongshangtong:学习一下啊!
  • dongshangtong:值得学习

本文标题:cordova入门教程(一)

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