用HTML和JS来开发移动app - 部署Cordova配套开发环境

yuxue 发布于2019-08-21 10:25 / 2960人阅读

摘要：安装完成后需要配置环境变量，将下的，添加到环境变量中，主要是可以执行等命令行工具运行，下载特定版本就是版本，比如的库及工具可以在里启动，也可以通过命令行来启动，然后参考说明下载特定版本比如。

最近想玩一玩手机app开发，以前都是自己DIY家里的一些硬件设备的，在这个天天喊智能的年代，不让它们上上网用手机控制都觉得这些玩意LOW得拿不出手了~ 决定要改造改造，第一步得学学怎么开发手机端控制应用。

本来想买本android 软件开发的书看看的，但是觉得难道学完android开发难道还要再学iso开发吗？Java跟objectC 难道都得去学一遍么.. 公司IT大牛推荐用HTML5（即 JavaScript + HTML + CSS）来开发应用程序~ 这样的好处是跨平台，可以在android上跑也可以在ios上运行。现在的跨平台技术真洋气~ 在大牛指点下，先要搭起开发环境，折腾了2个晚上终于搞定，总结如下：

安装 JDK（后续的 Android SDK 需要）

到 Oracle 官方网站下载最新的 JDK 8，Windows 和 Mac OS X 及基于 Yum 的 Linux （比如 Red Hat、CentOS）有二进制安装程序，基于 apt 的 Linux（比如 Debian、Ubuntu）需要自己编译或者安装系统自带的 OpenJDK（但 OpenJDK 现在没有 Java 8 版本，安装 Java 7 也行）

安装完成后需要配置环境变量（JAVA_HOME，Java 安装文件夹），将 JAVA_HOME 下的 bin 文件夹添加到环境变量 Path 中，主要是可以在命令行执行 java 和 javac 命令。

我是在MBP上搭的环境，所以下载安装包直接安装即可。接着终端打开bash_profile

#JAVA
export JAVA_HOME=/Library/Java/Home
export PATH=$JAVA_HOME/bin:$PATH

安装 Apache Ant（后续的 Android SDK 需要）

到 Apache 官方下载最新的 Ant（http://ant.apache.org/bindownload.cgi），放到特定文件夹下，将该文件夹下的 bin 目录添加到环境变量 Path 中，主要是可以在命令行执行 ant 命令。

#Apache Ant
export PATH=/oct/Apacheant/bin:$PATH

安装 Android SDK（后文的 Cordova 需要）

到 Android 官方网站下载最新的 Android SDK，可以安装多带带的 SDK，也可以安装打包了 SDK 的 Android Studio。

安装完成后需要配置环境变量（ANDROID_HOME），将 ANDROID_HOME 下的 tools，platform-tools 添加到环境变量 Path 中，主要是可以执行 adb、android 等命令行工具

#Andriod
export ANDROID_HOME=/oct/Library/Android/sdk
export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/platform-tools:$PATH

运行 Android SDK Manager，下载特定 API 版本（就是 Android 版本，比如 4.3、4.4、5.0）的库及工具

可以在 Android Studio 里启动 Android SDK Manager，也可以通过命令行 android update sdk 来启动，然后参考 GUI 说明下载特定版本比如 API 19（Android 4.4.2）。最低的安装要求是：

Android SDK Tools

Android SDK Platform-tools

Android SDK Build-tools

SDK Platform

Android Support Repository

Android Support Library

如果要用到 Google 服务的 API，则安装相应的：

Google APIs

Google Repository

Google Play Services

如果需要用虚拟设备调试（不过不建议使用 Android 自带的虚拟设备，建议使用 Genymotion 基于 VirtualBox 开发的虚拟设备），则安装相应的：

xxx System Image

安装 Nodejs、npm

到 Nodejs 官方网站下载安装最新的 Nodejs（http://nodejs.org/download/），针对 Windows 和 Mac OS 有安装包（包含了 nodejs 和 npm），Linux 上面可以直接安装软件仓库里面的 nodejs 和 npm。

安装 Git

到 Git 官方网站下载最新的 Git（http://git-scm.com/），针对 Windows 和 Mac OS 有安装包，Linux 上面可以直接安装软件仓库里面的 git。

安装 Apache Cordova 跨平台 HTML5 环境

在命令行使用 npm install cordova 即可安装 Cordova 命令行工具（也建议到 Cordova 官方了解下 Cordova 命令行的使用 - 嗯！没免费图形界面工具的~要图形界面的软件就找A逗比买吧）

使用 Cordova 命令行创建手机 HTML5 项目

在命令行里使用 cordova create DirectoryName project_id product_name 即可以创建手机 HTML5 项目，比如 cordova create IoTgoAppDir com.iteadstudio.iotgo IoTgo

如果针对 Android 平台开发，需要执行命令 cordova platform add android 添加 android 相关工具，如果需要安装扩展，需要执行命令 cordova plugin add pluginNameOrGitUrl，如果需要打包 Android Apk，需要执行 cordova build android，如果需要安装到通过 USB 连接的手机，需要执行 cordova run android

安装 HTML5 项目依赖的 JavaScript 库

所有 HTML5 相关的文件，放在 Cordova 创建的项目根目录下的 www 文件夹下，可以手动将相关的 HTML、JavaScript、CSS 文件放到该文件夹下，也可以通过 bower 等软件包管理工具来自动下载。

使用文本编辑器或 IDE 编写 HTML5 程序

写代码可以直接修改 www 文件夹下的文件，也可以用 NetBeans 或 WebStorm 之类的 IDE。建议用 WebStorm，对 Nodejs 和 Cordova 有比较好的支持。

完成上面的配置后~ 就可以开始用前端开发熟悉的HTML+CSS+JS来开发手机APP了！当然...作为一个嵌入式系统工程师，我对汇编对C很熟悉，对C++也还比较了解，对HTML及JS一窍不通...不过在一周速成过python后，我觉得这些上层脚本解析语言应该都不难~ 下来的一周及过年，会继续学习并开发一个应用来。

专线服务云服务器开发移动app 移动app开发 app开发环境配置开发环境部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85508.html

用HTML和JS来开发移动app - 部署Cordova配套开发环境

摘要：安装完成后需要配置环境变量，将下的，添加到环境变量中，主要是可以执行等命令行工具运行，下载特定版本就是版本，比如的库及工具可以在里启动，也可以通过命令行来启动，然后参考说明下载特定版本比如。最近想玩一玩手机app开发，以前都是自己DIY家里的一些硬件设备的，在这个天天喊智能的年代，不让它们上上网用手机控制都觉得这些玩意LOW得拿不出手了~ 决定要改造改造，第一步得学学怎么开发手机端控...

Salamander 2019-08-02 18:10 评论0 收藏0
用HTML和JS来开发移动app - Hello Cordova

摘要：发现对一个习惯了硬件设备侧开发的人来说，不管是用还是直接用开发，都是一样的都是从开始。之前虽然高中时代做个网站，也仅限于用和所见即所得开发对都是一窍不通。为了给设备开发，在上硬着头皮看了个小时课程。发现对一个习惯了硬件设备侧C开发的人来说，不管是用cordova（HTML+JS）还是直接用android studio（JAVA）开发，都是一样的...都是从0开始。之前虽然高中时...

legendmohe 2019-08-21 10:26 评论0 收藏0
用HTML和JS来开发移动app - Hello Cordova

摘要：发现对一个习惯了硬件设备侧开发的人来说，不管是用还是直接用开发，都是一样的都是从开始。之前虽然高中时代做个网站，也仅限于用和所见即所得开发对都是一窍不通。为了给设备开发，在上硬着头皮看了个小时课程。发现对一个习惯了硬件设备侧C开发的人来说，不管是用cordova（HTML+JS）还是直接用android studio（JAVA）开发，都是一样的...都是从0开始。之前虽然高中时...

dkzwm 2019-06-24 18:59 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

livem 2019-08-05 12:46 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

stormgens 2019-08-01 18:25 评论0 收藏0