前言

本文主要介绍了Cordova+vue 实现android开发，包括设置应用logo图标、设置启动页面splash，双击退出、app签名等。

简单介绍

混合开发是指在开发一款App的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。

Cordova 是使用HTML，CSS和JavaScript构建混合移动应用程序的平台。

优点：快速上手，跨平台支持，一次开发多平台部署，插件丰富。

缺点：性能方面稍差，跨浏览器兼容性可能会产生很多问题。

环境准备

安装node.js

安装cordova

安装android sdk（或者直接安装android studio）

1、初始化项目

>cordova create my_app com.test myapp

其中my_app 是项目目录，com.test是包名，myapp是应用程序的显示标题

cordova 项目结构

www文件夹存放静态资源

config.xml 配置文件，如设置版本号，app名称、描述，logo等。

2、添加android 环境

切换到项目目录

>cordova platforms add android --save

添加android 依赖

3、环境验证

>cordova requirements

环境验证

JDK、SDK、Gradle没问题就可以下一步了

4、生成apk

>cordova build android --release

生成apk

5、添加签名

如果已生成签名文件，可忽略这一步（根据提示填写，记住密码下面要用到）

>keytool -genkey -v -keystore D:\myapp.keystore -alias myapp -keyalg RSA -validity 20000

生成密钥

>jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore 密钥路径 未签名的apk路径 myapp -tsa http://sha256timestamp.ws.symantec.com/sha256/timestamp

签名

安装测试，默认的logo及页面，下一步改成自己开发的vue页面及logo

默认logo

默认页面

6、前端vue打包

使用Vue CLI开发，编译文件到www文件夹中，打包到app文件。注意事项：

1、使用vue 打包后生成静态页面，确保可以直接访问。

vue项目开发完成后，使用 npm run build打包成功之后，打开生成的dist文件夹中的 index.html， 如果访问前端提示报错，一般是资源路径问题，修改：

config/index.js->build->assetsPublicPath: './',

utils.js文件 添加 publicPath:'../../',

7、把打包的文件拷贝到项目www文件夹，先清空文件夹

8、设置双击退出，需要在vue项目中实现

1、index.html 文件增加引入cordova.js

<script type="text/javascript" src="cordova.js"></script>

2、APP.vue 添加逻辑

<script>

import mui from "@/assets/lib/mui/js/mui.min.js";

export default {

data() {

return {

exitAppTicker: 0, //判断是否双击

};

},

created() {

var _this = this;

document.addEventListener(

"deviceready",

function () {

document.addEventListener("backbutton", _this.eventBackButton, false);

},

false

);

},

//页面离开时销毁监听事件

destroyed() {

var _this = this;

document.removeEventListener("backbutton", _this.eventBackButton, false);

},

methods: {

//监听返回键按钮事件

eventBackButton() {

var _this = this;

if (_this.$route.path === "/index" || _this.$route.path === "/login") {

//是否主页

if (_this.exitAppTicker == 0) {

_this.exitAppTicker++;

mui.toast("再按一次退出");

setTimeout(function () {

_this.exitAppTicker = 0;

}, 2000);

} else if (_this.exitAppTicker == 1) {

navigator.app.exitApp();

}

} else {

history.back();

}

},

},

};

</script>

9、设置logo、APP启动页面

通过“图标工厂”网站可以在线生成所有图标，适配不同的分布率。

把生成的图标拷贝到项目中，然后在cordova config.xml配置添加

设置启动页面需要添加cordova插件，应用程序启动时显示和隐藏闪屏。

>cordova plugin add cordova-plugin-splashscreen

config.xml 添加声明

xmlns:android="http://schemas.android.com/apk/res/android"

<platform name="android">

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

<!--桌面图标设置-->

<icon density="ldpi" src="res/icon/drawable-ldpi/icon.png" />

<icon density="mdpi" src="res/icon/drawable-mdpi/icon.png" />

<icon density="hdpi" src="res/icon/drawable-hdpi/icon.png" />

<icon density="xhdpi" src="res/icon/drawable-xhdpi/icon.png" />

<icon density="xxhdpi" src="res/icon/drawable-xxhdpi/icon.png" />

<!-- 欢迎页面，竖屏 -->

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

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

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

<splash density="port-xxhdpi" src="res/screen/drawable-port-xxhdpi/screen.png" />

<splash density="port-xxxhdpi" src="res/screen/drawable-port-xxxhdpi/screen.png" />

<!--api接口不通，报错net::ERR_CLEARTEXT_NOT_PERMITTED-->

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">

<application android:usesCleartextTraffic="true" />

</edit-config>

</platform>

启动页面效果

设置的启动页面

cordova常用命令及插件

安装插件 cordova plugin add + 插件

删除插件 cordova plugin rm + 插件

常用插件

cordova-plugin-camera 相机

cordova-plugin-barcodescanner 条形码/二维码扫描

cordova-plugin-battery-status电池状态

cordova-plugin-contacts 联系人

cordova-plugin-device 设备信息

cordova-plugin-device-motion 加速计

cordova-plugin-vibration 振动

cordova-plugin-geolocation 地理位置

cordova-plugin-file 文件系统

......

总结

 通过cordova+vue 可以快速构建简单的app应用。