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

2024年3月24日 162次阅读 来源: FreeZinG

最近想玩一玩手机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后，我觉得这些上层脚本解析语言应该都不难~ 下来的一周及过年，会继续学习并开发一个应用来。

    原文作者：FreeZinG
    原文地址: https://segmentfault.com/a/1190000002536799
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞