webapp开发学习---Cordova环境搭建

Posted 蒙小米

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webapp开发学习---Cordova环境搭建相关的知识,希望对你有一定的参考价值。

Cordova 使用html, CSS & JS进行移动App开发;多平台共用一套代码;免费开源

步骤:(来自Cordova官网)

1.安装Cordova(在node.js环境下进行安装)  

命令提示行   npm -v  可以查看是否安装成功node.js  

                     npm install -g cordova   安装cordova

2.创建一个项目 

使用命令行创建一个空的Cordova项目。导航到你希望创建项目的目录

Example
     cordova create myapp com.mycompany.myteam.myapp MyApp

3.添加一个平台

在创建完一个Cordova项目后,导航到项目目录。cd MyApp

在项目目录中,你需要添加你想构建app的平台  cordova platform add browser   /  cordova platform add android

4.运行APP 

cordova run browser   /  cordova run android

这个是run browser 的运行的结果:

5.打包Cordova应用

好了,现在尝试修改一下www/index.html,然后执行

cordova prepare android

cordova build android

OK了,如果命令行无错误信息的话就会在/platforms/android/build/outputs/apk目录下会生成一个apk,把它安装到你的手机试试看吧!

TIPS:

如果有错误信息,以下是一些通用的解决方法(不一定管用)

清理项目

cordova clean 

或者重新添加平台

cordova platform remove android

cordova platform add android

 

基本上一个Cordova应用过程就是这样了,有一点要注意,每次在www目录下做的所有的修改,生成应用前都要先 cordova prepare [platform] 一遍再build

补充一点,以上前提是你已经拥有某个平台的开发环境,例如Android开发环境搭建好的前提下,才可能打包出APK

 

打开创建的项目,如下:

用Android Studio这样打开:

 Android Studio 打开如下

用模拟器或者真机测试如下:

 

以上是关于webapp开发学习---Cordova环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

Ionic+Cordova WebApp Android打包及环境搭建

使用ionic+cordova WebApp项目环境搭建与项目创建

Android开发学习--Ionic+Cordova 环境搭建

hybrid cordova+vue开发APP 环境搭建