使用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模式,一旦换了新的签名应用将不能覆盖安装,必须将原先的程序卸载掉,才能安装上。

相关推荐
Myli_ing20 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风23 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟32 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript