一、系统环境
操作系统:Macos Catalina 10.15.4
二、开发环境准备
1.java
1.1 安装java(官网:https://www.oracle.com/technetwork/java/javase/overview/index.html), 官网下载对应版本。
1.2 安装完成后在终端输入,出现版本号说明java安装成功
java -version

2.git
2.1 安装git(官网:https://git-scm.com/downloads), 官网下载对应版本安装。
2.2 安装完成后在终端输入
git --version
出现git的版本号说明安装成功。

3.node.js
3.1 安装node.js(官网:http://nodejs.cn/), 官网下载对应版本安装。
3.2 安装完成后在终端输入
node -v
出现node的版本号说明安装成功。

4.cordova
4.1 全局安装cordova(基于node.js安装), 终端输入
sudo npm install -g cordova
4.2 安装完成终端输入
cordova -v
出现cordova的版本好说明安装成功。

5.Android Studio
5.1 安装Android Studio (官网:https://developer.android.google.cn/studio/), 下载对应的安装包安装。
5.2 安装Phonegap/Cordova Plugin插件,在Studio的Plugins中搜索安装即可。
6.Android SDK
6.1 安装sdk可以自己在官网下载安装,也可以通过Android Studio来安装。这里介绍后者。
6.2 若没有装过sdk,第一次打开Studio会提示我们安装。选择SDK Platforms和SDK Tools对应版本安装即可。(安装不对或者想安装多个版本,在Android Studio-Preferences-Appearance&Behavior-System Settings-Android SDK中可修改)
6.3 配置环境变量,sdk安装完成将安装路径配置到环境变量中 ,将下面语句写入.bash_profile文件中。(环境变量配置参考:https://www.jianshu.com/p/a45dd533b8be)
export ANDROID_HOME=/Users/jiaojiajian/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools


7.GRADLE
7.1 安装gradle(官网:https://gradle.org/) ,下载对应的安装包安装。
7.2 配置环境变量,将下面语句写入.bash_profile文件中(环境变量配置参考:https://www.jianshu.com/p/a45dd533b8be)
#GRADLE
GRADLE_HOME=/Users/jiaojiajian/software/gradle/gradle-6.4.1
PATH=$PATH:$GRADLE_HOME/bin
export GRADLE_HOME PATH
三、搭建项目
搭建项目可以参考cordova的官网步骤(https://cordova.axuer.com/#getstarted)

1.在桌面下打开终端输入cordova create helloWord,创建helloWord文件夹。(可根据自己安排放在哪个目录)
cordova create helloWord

2.由于我们有Android Studio,官网的后续步骤可以在studio中操作。用studio打开桌面的helloWord文件夹。
3.配置Run/Debug Configurations,选择Phone Gap/Cordova作为启动器。

4.配置android模拟器设备。选择相应的型号和镜像安装。



5.启动模拟器和项目


6.启动后会在platforms目录下生成编译的文件,成功!

网友评论