使用Cordova打包H5到安卓

1、配置开发环境

  • 安卓的话,随便搜一下都有很多,这里放一个相对比较详细的 传送门
  • 安装cordova 就直接看官方文档 官网链接

2、创建项目

官方文档 关于 cordova create 命令 传送门

javascript 复制代码
cordova create 文件名 包名 app名称

在官方文档中关于id的解释是:

反向域样式标识符,会映射到config.xml文件中widget节点的id属性。 这个值可以更改,但是可能会使用这个值生成代码,比如Java包名,建议您选择适当的值。

在安卓的AndroidManifest.xml清单文件中,红框中的package属性值跟config.xml中的id是一致的。

另外在build.gradle构建文件中,appId取的值也是上面文件的package属性。

所以在安卓平台 创建项目时这个id,也就是包名,同时也是默认的appid很重要

在ios平台,这个id就是Bundle Identifier,也就是在ios平台的唯一标识。

另外在安卓中关于包名和appid的区别,可以看这篇文章:传送门,虽然他也是翻译工具直译过来的,看起来很别扭,但核心意思就是: 1、包名用于资源文件(R class)的命名控件和清单文件声明一些元素。 2、appid 是 android平台app的唯一标识,就像一个人的身份证号一样。 3、appid是可以改的,可以用于区分debug版,和release版,这样可以在手机上同时装两个版本。而包名尽量不要修改。

创建后的项目目录如下图,www文件夹里放的就是你h5 build之后的代码 注意: cordova platform add android 在添加不同的android版本时,创建出来的platforms文件夹下面的文件目录是不同的,如果后面不跟具体版本号,默认应该是添加的最新稳定版,这里的api level为28,公司项目中用的是6.几的版本,api level 为 26。我没有去试其他版本的,但是就这两个版本,内部文件目录差异都挺大的。 不管哪个版本,大致的打包过程都是一样的,还有些cordova插件,对于不同版本的支持有问题,打包时会报错。这就需要慢慢踩坑了。

3、打包

修改app的图标,启动页

这两个地方,以上面的版本level28为例,目录地址在

以drawable-land-hdpi和drawable-land-ldpi为例,hdpi和ldpi的差别代表的是不同屏幕分辨率下,所展示的文件。 生成不同大小的图标,除了AndroidStudio之外, 推荐这个在线的网站 传送门 生成图标后,按照对应的名字替换默认图片即可。

对于app启动页的设置,还需要单独安装cordova插件 cordova-plugin-splashscreen 具体见 传送门

修改app名称
给apk签名

参考自 传送门 默认执行 cordova build 打包出来的是debug版本的apk。而发布release版本,则需要给apk签名。 给apk签名一共要用到3个工具,分别是:keytool、jarsigner和zipalign,下面是对这3个工具的简单介绍:

  • keytool:生成数字证书,即密钥,也就是上面说到的扩展名为.keystore的那类文件;
  • jarsigner:使用数字证书给apk文件签名;
  • zipalign:对签名后的apk进行优化,提高与Android系统交互的效率(Android SDK1.6版本开始包含此工具

从这3个工具的作用也可以看出这3个工具的使用顺序。通常我们自己所开发的所有应用程序,都是使用同样的签名,即使用同一个数字证书,这就意味着:如果 你是第一次做Android应用程序签名,上面的3个工具都将用到;但如果你已经有数字证书了,以后再给其它apk签名时,只需要用到jarsigner 和zipalign就可以完成。 为了方便使用上面3个命令,首先需要将上面3个工具所在路径添加到环境变量path中(我说的是为了方便使用,没有说必须要这么做)。怎么配置环境变量就不在此讲解了,这里需要说一下这3个工具默认所在的路径:

  • keytool:该工具位于jdk安装路径的bin目录下;
  • jarsigner:该工具位于jdk安装路径的bin目录下;
  • zipalign:该工具位于android-sdk-windows/tools/目录下

其中keytool和jarsigner两个工具是jdk自带的,另外从字面上理解jarsigner也能猜得出该工具主要是用来给jar文件签名的。 1、使用keytool工具生成数字证书

javascript 复制代码
keytool -genkey -v -keystore myapp.keystore -alias myapp.keystore -keyalg RSA -validity 20000

说明:

  • keytool是工具名称,-genkey意味着执行的是生成数字证书操作,-v表示将生成证书的详细信息打印出来,显示在dos窗口中。
  • keystore myapp.keystore 表示生成的数字证书的文件名为"myapp.keystore"。
  • alias myapp.keystore 表示证书的别名为"myapp.keystore"。
  • keyalg RSA 表示生成密钥文件所采用的算法为RSA;
  • validity 20000 表示该数字证书的有效期为20000天,意味着20000天之后该证书将失效

在platforms/android目录下 执行上面的命令生成数字证书文件,这时会提示你输入一些信息,包括证书的密码,示例如下:

2、使用jarsigner工具为Android应用程序签名

javascript 复制代码
jarsigner -verbose -keystore myapp.keystore -signedjar app-signed.apk app-debug.apk myapp.keystore

说明:

  • jarsigner是工具名称,-verbose表示将签名过程中的详细信息打印出来,显示在dos窗口中;
  • keystore myapp.keystore 表示签名所使用的数字证书所在位置,这里没有写路径,表示在当前目录下;
  • signedjar app-signed.apk app-debug.apk 表示给 app-debug.apk文件签名,签名后的文件名称为app-signed.apk;
  • 最后面的myapp.keystore 表示证书的别名,对应于生成数字证书时-alias参数后面的名称

注意:如果直接执行会报错

因为当前是在platforms/android目录下路径下执行的命令,找不到app-debug.apk文件。这时可以找到apk文件的位置,在app-debug.apk前面,加上绝对路径。 如:

javascript 复制代码
jarsigner -verbose -keystore myapp.keystore -signedjar app-signed.apk xxxxxxxxxx\myApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk myapp.keystore

如果没有配置环境变量的话,会继续报错,如下: 这是因为没有配置环境变量,在当前路径下找不到jarsigner.exe。 或者可以简单一点,在platforms\android 文件夹下,创建一个文件夹命名为:release-signing.properties 文件名字可以自定义,后缀必须为.properties) 添加以下内容:

javascript 复制代码
storeFile=your_file_name.jks
keyAlias=your_alias_name
storePassword=your_store_password
keyPassword=your_key_password

如上图,然后回到项目根目录下,执行cordova build --release

3、使用zipalign工具优化已签名的apk(非必须但建议这么做)

javascript 复制代码
   zipalign -v 4  app-signed.apk  app-release.apk

说明:

  • ipalign是工具名称,-v表示在DOS窗口打印出详细的优化信息;
  • app-signed.apk app-release.apk 表示对已签名文件 app-signed.apk进行优化,优化后的文件名为app-release.apk

这里要注意:如果你以前的程序是debug模式,一旦换了新的签名应用将不能覆盖安装,必须将原先的程序卸载掉,才能安装上。

相关推荐
玖釉-5 分钟前
解决PowerShell执行策略导致的npm脚本无法运行问题
前端·npm·node.js
Larcher39 分钟前
新手也能学会,100行代码玩AI LOGO
前端·llm·html
徐子颐1 小时前
从 Vibe Coding 到 Agent Coding:Cursor 2.0 开启下一代 AI 开发范式
前端
小月鸭1 小时前
如何理解HTML语义化
前端·html
jump6801 小时前
url输入到网页展示会发生什么?
前端
诸葛韩信2 小时前
我们需要了解的Web Workers
前端
brzhang2 小时前
我觉得可以试试 TOON —— 一个为 LLM 而生的极致压缩数据格式
前端·后端·架构
yivifu2 小时前
JavaScript Selection API详解
java·前端·javascript
这儿有一堆花2 小时前
告别 Class 组件:拥抱 React Hooks 带来的函数式新范式
前端·javascript·react.js
十二春秋2 小时前
场景模拟:基础路由配置
前端