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

相关推荐
前端小小王23 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发32 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪1 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6413 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻4 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云4 小时前
npm淘宝镜像
前端·npm·node.js
dz88i84 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr4 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook