一、安装Android Studio,下载sdk
1、打开软件,找到SDK Manager选项,打开后选择SDK Tools,选择适合的SDK版本下载
2、配置环境变量:
系统变量 → ANDROID_HOME, 变量值填写sdk安装的目录
系统变量 → Path ,变量值填写 %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
二、安装JDK
1、点击下载JDK
2、环境配置可参考jingyan.baidu.com/article/6da…
两次 安装提示 。第一次是安装 jdk ,第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。
①、系统变量→新建 JAVA_HOME=jdk的安装目录。
②、系统变量→Path 变量→编辑
在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
③、系统变量→新建 CLASSPATH 变量
变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)
检测版本,cmd输入: Java -version
三、安装gradle
1、选择合适的版本 :services.gradle.org/distributio…
2、配置环境变量
系统变量→ Path,变量值追加gradle安装目录,例如:D:\Program Files\Gradle\gradle-4.10.2\bin
检测版本,cmd输入: gradle -v
四、创建cordova项目
Cordova本质上就是对webview的封装,核心点就是提供了丰富的插件可以让H5跟Native进行通信,很方便的实现两者之间的交互。
- 安装nodejs,先要有npm的环境
- 安装Cordova:
npm install -g cordova - 创建项目
cordova create <path>,具体命令cordova create 目录名包名项目名。 - 示例
cordova create helloworld com.xxx.cordovademo helloworld此时,一个Cordova项目就创建好了 - 添加平台,注意此时要切到刚到创建好的项目的根目录里,可以自己指定版本,目前最新的就是11.0.0。
cordova platform add android@^11.0.0

五、目录说明:
1、helloworld\platforms\android实际上是一个Android项目可以在Android Studio中运行
2、helloworld\www目录存放的是前端项目(或者打包后的dist文件)
六、在前端项目中使用cordova插件(以umi项目为例)
cordova官网中提供了很多插件
1、在cordava项目helloworld下安装cordava插件运行如下命令:cordova plugin add <插件>
2、在前端项目的入口文件中(document.ejs)引入cordava.js,代码如下:
<body>
<div id='root'></div>
<script type="text/javascript">
// app打包后,使用了cordova原生插件,需要引入cordova.js
if(navigator.userAgent.includes('Android')) {
const bodyDom = document.getElementsByTagName('body')[0];
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'cordova.js';
bodyDom.appendChild(script);
}
</script>
</body>
在其他文件中使用示例:
cordova.plugins.PrintlcPlugin.(打印插件)
cordova.plugins.barcodeScanner.scan(success, error)(扫描头\摄像头扫描插件)
cordova.scanlaser.startScan({ scanLaserMode: 8 }, success, error)(激光扫码插件)
/**
* 扫描二维码
* @param {function} onSuccess 成功回调方法
* @param {function} onError 失败回调方法
* @returns
*/
export const onCordovaScanlaser = (onSuccess, onError) => {
console.log('点击了扫码');
try {
// 成功回调
const success = (result) => {
if (result && onSuccess) onSuccess(result);
};
// scanlaser失败回调
const error = (scanlaserror) => {
cordova.plugins.barcodeScanner.scan(
({ text }) => {
success(text);
},
(err) => {
if (onError) onError(err);
}
);
};
cordova.scanlaser.startScan({ scanLaserMode: 8 }, success, error);
} catch (err) {}
};
七、系统项目打包配置,可定义打包的dist文件复制到www文件夹中
例如:"android": "cross-env NO_PROXY=true contextPath=/ umi build && node after.build.js && xcopy .\\dist\\*.* /e ..\\helloworld\\www\\",
八、打包APK文件
1、系统项目打包 npm run android, 会把dist文件打包到helloworld\www目录中(即上述配置中)
2、Android Studio运行android(即platforms\android),使用虚拟机或者真机调试
3、cordova项目打包cordova build android
4、打包成功后的apk文件,在项目根目录的\platforms\android\app\build\outputs\apk\debug文件夹下的app-debug.apk