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

安德玛 • 2023-01-02 • 云技术社区 • 268 阅读

安装Cordova

npm install -g cordova

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

在这里插入图片描述

创建Cordova项目

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

cordova create helloWorld

helloWorld即为你的项目名

成功创建之后文件夹如下：

在这里插入图片描述

创建平台(这里是Android)

进入刚才创建的Cordova项目helloWorld中

在这里插入图片描述
cordova platform add android

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

cordova platform add android@6.2.3

成功之后如下：

在这里插入图片描述

输入cordova platform ls可查看已安装的平台情况

在这里插入图片描述

此时项目文件夹已经有了platform文件夹了

在这里插入图片描述

整合vue H5项目和Cordova

vue项目npm run build生成dist文件夹这里就不多说了！

在这里插入图片描述

==这里要注意两点==

1.将vue的路由模式改为hash

在这里插入图片描述

2.将配置文件中的路径修改如下：

在这里插入图片描述

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

在这里插入图片描述

这里面很多教程都说直接复制粘贴其实不是的！一定要注意！

要在index.html中引入cordova.js，不然后续所有的插件都不能使用！

在这里插入图片描述

接下来检测cordova编译环境

cordova requirements

运行结果：

在这里插入图片描述

这里面的环境缺一不可，如果没有安装会有提示，直接百度逐一安装就可以了否则无法编译成功的

所有需要的环境我放在这大家自行下载即可

运行项目生成apk包

cordova build android

首次编译需要一段时间，如果报网络错误请切换网络重试

在这里插入图片描述

这里生成的debug包就可以直接安装到手机进行测试了

连接手机直接测试

cordova run android

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

生成正式包

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

cordova build --release android

执行成功后就会生成正式的apk包了

在这里插入图片描述

此时生成的包是没有签名的正式包

生成签名证书并签名apk包

生成证书就不说了网上百度一堆

接下来就是把生成的证书和上一步生成的未签名的正式的apk包放同一个文件夹

然后再该文件夹下执行

jarsigner -verbose -keystore XXX.keystore -signedjar XXX.apk app-release-unsigned.apk XXX.keystore
在这里插入图片描述

执行成功后就可以看到生成的签名了的apk的包了，这个包就可以手机直接安装使用了

总结

这些都是最基本的封装，实际过程中我们还需要使用很多Cordova插件来满足我们的项目需求

后面再慢慢丰富这个专题，今天时间有限就写这么多了

还有ios的封装包括打包申请证书pp文件生成ipa并上传上架AppStore

本站文章资源均来源自网络，除非特别声明，否则均不代表站方观点，并仅供查阅，不作为任何参考依据！
如有侵权请及时跟我们联系，本站将及时删除！
如遇版权问题，请查看 本站版权声明
THE END
分享
二维码
海报
Cordova封装打包vue H5项目到Android平台详解
要在index.html中引入cordova.js，不然后续所有的插件都不能使用！
<<上一篇
下一篇>>