Cordova封装打包vue H5项目到Android平台详解

安装Cordova

npm install -g cordova

安装完成之后终端输入cordova显示下图即表示安装成功

Cordova封装打包vue H5项目到Android平台详解

创建Cordova项目

进入你要创建项目的目录执行:

cordova create helloWorld

helloWorld即为你的项目名
成功创建之后文件夹如下:
Cordova封装打包vue H5项目到Android平台详解

创建平台(这里是Android)

进入刚才创建的Cordova项目helloWorld中
Cordova封装打包vue H5项目到Android平台详解

cordova platform add android

如果需要添加指定版本的android则在后面加上版本号

cordova platform add android@6.2.3

成功之后如下:
Cordova封装打包vue H5项目到Android平台详解
输入cordova platform ls可查看已安装的平台情况
Cordova封装打包vue H5项目到Android平台详解
此时项目文件夹已经有了platform文件夹了
Cordova封装打包vue H5项目到Android平台详解

整合vue H5项目和Cordova

vue项目npm run build生成dist文件夹这里就不多说了!
Cordova封装打包vue H5项目到Android平台详解
这里要注意两点

1.将vue的路由模式改为hash
Cordova封装打包vue H5项目到Android平台详解
2.将配置文件中的路径修改如下:
Cordova封装打包vue H5项目到Android平台详解

将dist文件夹中的static 和index文件复制到cordova项目的www文件夹中

Cordova封装打包vue H5项目到Android平台详解
这里面很多教程都说直接复制粘贴其实不是的!一定要注意!
要在index.html中引入cordova.js,不然后续所有的插件都不能使用!
Cordova封装打包vue H5项目到Android平台详解
接下来检测cordova编译环境

cordova requirements

运行结果:
Cordova封装打包vue H5项目到Android平台详解
这里面的环境缺一不可,如果没有安装会有提示,直接百度逐一安装就可以了否则无法编译成功的
所有需要的环境我放在这大家自行下载即可

运行项目生成apk包

cordova build android

首次编译需要一段时间,如果报网络错误请切换网络重试
Cordova封装打包vue H5项目到Android平台详解
这里生成的debug包就可以直接安装到手机进行测试了

连接手机直接测试

cordova run android

手机连接电脑,打开开发者模式,然后运行上述命令即可在真机进行安装包测试了

生成正式包

当测试好了之后我们就要生成正式的包了

cordova build --release android

执行成功后就会生成正式的apk包了
Cordova封装打包vue H5项目到Android平台详解
此时生成的包是没有签名的正式包

生成签名证书并签名apk包

生成证书就不说了网上百度一堆
接下来就是把生成的证书和上一步生成的未签名的正式的apk包放同一个文件夹
然后再该文件夹下执行

jarsigner -verbose -keystore XXX.keystore -signedjar XXX.apk app-release-unsigned.apk XXX.keystore

Cordova封装打包vue H5项目到Android平台详解
执行成功后就可以看到生成的签名了的apk的包了,这个包就可以手机直接安装使用了

总结

这些都是最基本的封装,实际过程中我们还需要使用很多Cordova插件来满足我们的项目需求
后面再慢慢丰富这个专题,今天时间有限就写这么多了
还有ios的封装包括打包申请证书pp文件生成ipa并上传上架AppStore

上一篇:关于Cordova iOS 工程极光推送通知自定义声音的设置


下一篇:cordova android高版本不支持http请求解决方法