如何使用Cordova打包H5源码为手机app

1、安装nodejs，https://nodejs.org/zh-cn/，下载到node-v14.17.3-x64.msi文件直接安装就行。

2、安装JAVA的JDK，这里注意一下，要安装jdk8，也就是jdk1.8版本。下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

安装完成后设置用户环境变量：我的电脑（右键属性）>>>高级系统设置>>>环境变量>>>用户变量>>>新建（变量名：JAVA_HOME，变量值：C:\Java\jdk1.8.0_291）。注：这里C:\Java是jdk的安装目录。

再设置Path变量为：%JAVA_HOME%\bin\

设置完后，在CMD模式下验证一下，运行命令：java -version如果出来下面

证明安装成功。（注：手动设置环境变量需要重启生效）

3、安装Android SDK，从http://tools.android-studio.org/index.php/sdk下载到installer_r24.4.1-windows.exe安装之。

安装完后设置用户环境变量：ANDROID_SDK_ROOT：C:\Android\android-sdk（注：C:\Android\是我的当前安装目录）

然后再设置两个Path变量：%ANDROID_SDK_ROOT%\tools\和%ANDROID_SDK_ROOT%\platform-tools\

设置完后，在CMD模式下验证一下，运行命令：adb version如果出来下面

证明安装成功。（注：手动设置环境变量需要重启生效）

4、安装Apache Ant，去http://ant.apache.org/bindownload.cgi下载得到apache-ant-1.10.10-bin.zip文件，直接解压到Android SDK的安装目录就行。

然后设置用户环境变量ANT_HOME：C:\Android\apache-ant-1.10.10，再设置一个Path变量：%ANT_HOME%\bin\

注：我是把它解压到了C:\Android的目录

设置完成后验证一下，在CMD模式：

出现上面如下信息证明成功。

5、通过npm安装Cordova，在命令行运行：npm install -g cordova

安装成功之后，运行cordova -v，验证安装成功与否。

6、安装Gradle，去https://gradle.org/install/下载得到gradle-7.1.1-bin.zip文件，解压到C:\Gradle目录。（注：Gradle在最后创建APP的时候需要用到，cordova build）

设置用户环境变量GRADLE_HOME：C:\Gradle，再设置Path变量：%GRADLE_HOME%\bin

在CMD下运行gradle -v验证成功与否：

7、安装Git，去https://git-scm.com/download/win下载得到Git-2.32.0.2-64-bit.exe安装包，安装之。注：如果git不安装，就会出现cordova的插件安装使用不了的情况。

在开始菜单中点Git Bash出现

就是安装成功。

8、现在就可以便建app了，步骤如下：

8-a、创建项目：

cordova create myApp com.example.myapp 云中医

myApp是创建一个项目为myApp的目录，最后的<云中医>是app安装后显示的名称。

8-b、添加Android平台：

cordova platform add android

特别提醒：这一步要CMD进入myApp目录运行上面的命令。

8-c、导入网页程序：把H5的源码放到myApp\www目录下，需要有一个index.html文件作为首页。

8-d、安装cordova-plugin-splashscreen插件：可以设置程序启动时地显示的一张初始图片。CMD运行：

cordova plugin add cordova-plugin-splashscreen

打开项上根目录的config.xml文件添加如下：

<preference name=”AutoHideSplashScreen” value=”true” /> //启动页展示

<preference name=”FadeSplashScreen” value=”true”/>

<preference name=”SplashScreenDelay” value=”3000″ /> //启动页的显示时间3秒

<preference name=”ShowSplashScreenSpinner” value=”true”/> //启动页中间位置会有个loading在旋转

<platform name=”android”>

<allow-intent href=”market:*” />

<!–

这部分是设置一个app ico图标

ldpi : 36×36 px

mdpi : 48×48 px

hdpi : 72×72 px

xhdpi : 96×96 px

xxhdpi : 144×144 px

xxxhdpi : 192×192 px

–>

<icon src=”res/android/ldpi.png” density=”ldpi” />

<icon src=”res/android/mdpi.png” density=”mdpi” />

<icon src=”res/android/hdpi.png” density=”hdpi” />

<icon src=”res/android/xhdpi.png” density=”xhdpi” />

<icon src=”res/android/xxhdpi.png” density=”xxhdpi” />

<icon src=”res/android/xxxhdpi.png” density=”xxxhdpi” />

<!–

这部分是设置一个app的启动图片

–>

<splash src=”res/screen/splash-land-hdpi.png” density=”land-hdpi”/>

<splash src=”res/screen/splash-land-ldpi.png” density=”land-ldpi”/>

<splash src=”res/screen/splash-land-mdpi.png” density=”land-mdpi”/>

<splash src=”res/screen/splash-land-xhdpi.png” density=”land-xhdpi”/>

<splash src=”res/screen/splash-port-hdpi.png” density=”port-hdpi”/>

<splash src=”res/screen/splash-port-ldpi.png” density=”port-ldpi”/>

<splash src=”res/screen/splash-port-mdpi.png” density=”port-mdpi”/>

<splash src=”res/screen/splash-port-xhdpi.png” density=”port-xhdpi”/>

</platform>

注：图标文件和启动图片文件需要放到项目的根目录

8-e、创建APP：

cordova build

生成的APP文件就在C:\myApp\platforms\android\app\build\outputs\apk\debug目录

拿到这个apk的文件就可以直接在安卓手机上安装，剩下的就是快乐地在手机上运行你自己的APP了。本文只以生成安卓手机APP为例说明了Cordova的使用，当然也可以生成苹果IOS系统的应用安装文件，在此就不再赘述。