phoneGap 被收购后衍生出了 Cordova

Android 的开发工具也由 Eclipse 向 Android Studio 靠拢

行业动态在更新,所以资料也要跟着变化...

在开始之前,作为一个前端,我默认你的电脑上已经装好 node 了

 

1.全局安装 Cordova CLI

npm install -g cordova

 

 

2.创建一个应用

cordova create MyApp

 

 

3.进入应用的项目根目录下,执行下面命令,为应用添加平台

cordova platform add android --save
cordova platform add browser --save

上面我们添加了 android 平台和浏览器平台

 

如果你想移除平台(如想移除 android 平台),可执行下面命令

cordova platform remove android

 

或者想列出当前项目的平台情况

cordova platform list

此命令也可以查看当前系统下支持的平台有哪些

 

 

4.安装 JDK

到官网下载:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

这里我选择了 dk-8u171-windows-x64.exe 来下载安装

安装完成后,根据你的 JDK 安装路径,为系统添加 JAVA_HOME 环境变量(比如我的是:C:\Program Files\Java\jdk1.8.0_171)

 

 

5.安装 Android Studio

到官网下载:https://developer.android.com/studio/

安装过程按默认傻瓜式安装即可

安装完成后,运行,在界面下方找到 Configure —— SDK Manager 进入设置并下载 SDK

我的配置如下图(注意红框部分):

选完后就可以下载 SDK 了,由于天朝网络环境的关系,不排除会出现下载失败的情况...

如果你不幸碰到这种情况,那就找安卓开发把他本地的 SDK 拷一份给你放到你所指定的 SDK 目录下吧...

当 SDK 下载完后,根据你的 SDK 安装路径,为系统添加 ANDROID_HOME 环境变量(比如我的是:D:\Android\Sdk)

 

 

6.检测是否满足平台编译需求

cordova requirements

如果 Android 平台的需求都满足,则可开始执行编译

 

 

7.编译APP

前面的第 4,5 两步是 Android 平台的编译前置条件,接下来我们在项目根目录执行下面命令编译 APP

cordova build android

这里只编译了 Android 平台的,命令最后的部分是指定编译的平台

 

 

7.使用 Android Studio 打开编译后的项目

 

需要导入根目录下的 platforms\android 目录

 

导入成功后,会出现下面的弹窗。注意!这里千万别点 Update (点了之后会导致后面 Cordova build android 编译APP报错...)

 

然后点击 IDE 右上角的运行按钮

 

首次运行可能会没有任何虚拟设备,这时你需要新建一个虚拟设备

注意图中红框部分,这里选择创建的虚拟设备都是比较低版本的,原因是我的电脑配置不高...

新版本的也试过下,没办法成功跑起来,原因不明,毕竟我不是专业的 Android 开发...

 

OK,当你看到下面这个状态时,说明你的应用已经成功在虚拟设备你跑起来了

接下来,你只要对项目根目录下的 www 目录下做开发(其实就是一个再常规不过的前端项目目录,但要保证入口文件是 www 目录下的 index.html)

开发完后再编译一次,就可以看到最新的 APP 了

环境搭建工作到此结束~

 

posted @ 2018-04-26 11:50 前端攻城师-CZF 阅读(178) 评论(0) 推荐(0) 编辑
摘要: 基本语法 7种请求API get(url, [options]) head(url, [options]) delete(url, [options]) jsonp(url, [options]) post(url, [body], [options]) put(url, [body], [opti 阅读全文
posted @ 2018-01-30 10:26 前端攻城师-CZF 阅读(158) 评论(0) 推荐(0) 编辑
摘要: function add(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) { c = 0; } try { d = b.toString().split(".")[1].length; } ca... 阅读全文
posted @ 2017-05-23 10:55 前端攻城师-CZF 阅读(657) 评论(0) 推荐(0) 编辑
摘要: sinopia搭建 这里默认你已经有node环境了,执行下面命令,全局安装 sinopia 安装好后,执行下面命令启动 sinopia 你会看到下面两行提示: 上面一行是 sinopia 的配置文件所在路径,下面一行是 sinopia 服务的域名和端口号 然后打开 http://localhost: 阅读全文
posted @ 2017-05-16 11:24 前端攻城师-CZF 阅读(9671) 评论(0) 推荐(0) 编辑
摘要: session 在 web 应用中使用很普遍,不过在 node 上面,要用 session 还真得折腾一番才行。 从加入中间件,到 session 的写入、清除,当时是遇到了不少坑的。 当然也可能是我研究还不够透彻,我所写的只是我在实际使用中的所得与总结。 当中如果有什么不对的地方,还望见谅 and 阅读全文
posted @ 2016-03-01 10:43 前端攻城师-CZF 阅读(1438) 评论(0) 推荐(0) 编辑
摘要: 通常来说,前后端分离的项目,前端负责界面渲染和操作型的业务逻辑,后端则负责数据存取和数据处理相关的业务逻辑。 既然设计数据,那就少不了数据库的使用。目前市面上流行着各种各样的数据库,这里不打算一一列举,我所选用的是 mysql。 如果对各数据库之间的差异感兴趣的,可以自己去查阅相关资料。 先打开命令 阅读全文
posted @ 2016-02-29 15:18 前端攻城师-CZF 阅读(296) 评论(0) 推荐(0) 编辑
摘要: 上一篇对项目的目录结构和 app.js 等一些文件做了一些改造,然而那只是开始。 接下来将做进一步的改造和完善。 我们先看看几个主要的脚本文件,下面的代码是我稍微修改过并添加注释的,方便理解每句代码的意思。 app.js: var express = require('express'), path 阅读全文
posted @ 2016-02-29 11:01 前端攻城师-CZF 阅读(270) 评论(0) 推荐(0) 编辑
摘要: 安装 node 和 Express 4 node官网:http://nodejs.org/ Express Github:https://github.com/expressjs/express 到 node官网 下载并安装 node 之后,打开命令行工具,执行下面命令安装 Express: npm 阅读全文
posted @ 2016-02-26 16:44 前端攻城师-CZF 阅读(376) 评论(0) 推荐(0) 编辑
摘要: 这篇文章通篇都是转的...原文出处无从考究,转载的网站本身就没有标明原文出处,SO,这里也没必要帮它做宣传了。指令,我将其理解为 AngularJS 操作 HTML element 的一种途径。由于学习 AngularJS 的第一步就是写内置指令 ng-app 以指出该节点是应用的根节点,所以指令早... 阅读全文
posted @ 2015-10-30 17:24 前端攻城师-CZF 阅读(201) 评论(0) 推荐(0) 编辑
摘要: 咳咳,终于迈出这一步了...这篇文章将是边学边写的真正笔记...用于mark下学习过程中的点滴~开篇先把我学习参考的文章来源给出,以表示对前人的尊敬:https://github.com/nswbmw/N-blog/wiki/_pagesStep01首先,先安装一堆东西,当然我默认的已经把 node... 阅读全文
posted @ 2015-10-27 10:59 前端攻城师-CZF 阅读(233) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示