1

背景:复宏汉霖APP的CR结束了.今天来打包.记录一下打包流程.Android+ios的打包流程
(项目所用技术+自身环境说明:ionic+ Angular + win10系统 + cordova)

第一步:下载需要的安装包

需要下载的安装包:
(1):android studio 最新版
(2):java JDK1.8
(3):gradle 最新版(官网下载)
(4):node 10.16.3
(5):全局安装ionic(不用指定版本,安装最新的就好了) npm install -g ionic
(6):全局安装cordova 8.0.0 ,命令: npm install -g cordova@8.0.0

附上我的前三个的安装包.也可以自行去网上下载.百度网盘(永久有效):
链接: https://pan.baidu.com/s/1z9ha0jyLw1ABRWEZui0cUQ 提取码: xrnn

第二步:安装,配置环境

gradle + java + android studio 配置环境变量.
自行在网上找环境变量配置教程.......一个个截图太多了..就不截图了...反正就配置下环境变量.有的在系统变量配置有的在用户变量配置.

  • 配置结束后.在桌面(或者任意文件夹下)运行cmd窗口.执行命令查看环境变量配置是否成功.以下六个命令运行成功后(参考我以下截图),版本对上了.就可以进行打包了.(我的框架是ionic的,所以查看了ionic的版本,如果用的不是ionic就不用查看)

(1): gradle -v
image.png
(2): java -version
image.png
(3): adb (没有截全,后面还有一些...)
image.png
(4): cordova -v
image.png
(5): node -v
image.png
(6): ionic -v
image.png

第三步:进行打包
  • 找到你需要打包的项目文件夹.
  • 配置好你需要的环境

一: 打包之前需要更改的配置(4-5个文件)(非常重要!!,这个配置代表你打包的环境!!):**
(我们公司的大平台会给出证书,签名密码,ios key,android key,app key.密钥等.其他公司的不太清楚你们放在哪里...自行寻找哈...)
(1): config.xml需要改的id.打安卓的就把-改为下划线_.打ios的改为-.(一定要改,不然会报错!!!)以及要改的key值(涉及到打包环境).
image.png
image.png
(2): package.json要改的内容:
image.png
(3): fetch.json要改的内容
image.png
(4): app.interceptor.ts里面的地址
image.png
(5): 由于这个项目涉及到其他部门.所以还有其他部门的接口地址(没有的自行忽略)global.variable.ts里面的地址:
image.png

二: 配置好了之后就可以打开命令窗口(最好用管理员身份运行,可以避免N多问题...).

  • 安卓打包:
  • 1:执行:ionic cordova platform rm android (保证平台环境干净)
  • 2:执行:ionic cordova platform add android (添加安卓打包平台)
  • 3:执行:ionic cordova build android (debug调试环境) 或者ionic cordova build android --prod --release (正式发版环境).以下用正式做练习:
    (1):命令开始执行的时候
    image.png
    (2):出现这个乱码的时候就代表要成功了!!!!
    image.png
    (3):命令执行成功的时候
    image.png
    (4):出现以下输出语句的时候就代表打包成功了.
BUILD SUCCESSFUL in 49s
46 actionable tasks: 46 executed
Built the following apk(s):
C:\timor\xiaosk_projects\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk

三: 签名.(签名文件和密码自行找公司相关人员咨询...这里默认签名文件和密码都已拥有...(我们公司的就在自身项目里.没有的找项目负责人要.))
第一种用签名命令签名
(1): 找到com.xiaosk.henlius_uat.jks签名文件.复制放在刚刚打包成功的路径C:\timor\xiaosk_projects\platforms\android\app\build\outputs\apk\release里面.如下图所示:
image.png
(2):在当前目录下打开命令窗口.运行命令jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore com.xiaosk.henlius_uat.jks app-release-unsigned.apk my-alias
其中com.xiaosk.henlius_uat.jks为你本次签名文件的文件名,自行跟着签名文件改名字!!.
(3):输入签名密码(自行准备的,每家公司都不一样,我们公司的在项目的README.md文件里面),回车运行.成功的结果如下图:
image.png
image.png
第二种用androidstudio签名
(1):打开androidstudio ,选择Open an Existing Project。 选择你的项目里的打好包的platforms下的android文件夹。
lQLPDhrVYqu4467NBBjNBlqwmNQgZTrbIl8Bitp-RcBVAA_1626_1048.png
(2):等加载完毕后。点击build下的Generate Signed Bundle /APK...
99e9fcde8ad31d647c50b23642b0e8d.png
(3):选择APK,点next
6be2df30cc4a28d563c94f580632623.png
(4):根据下图选择好签名文件,填好密码别名和签名密码后。选择记住密码。然后点击Next.
image.png
(5):选择release.V1和V2都勾上。再点击Finish。
e67ec6c65638fa11cc9c2d1f017877e.png
(6):等待它自动打包完毕。下方出现successfully的提示就代表签名成功了。
lQLPDhrVZsX0wQvNAkbNCr6wvtvb1VtEaUEBiuE3NoAGAA_2750_582.png
签名好的文件存在于以下目录:
image.png

  • 打包成功后,把apk后缀的文件.发送到QQ或者钉钉就可以直接安装安卓打包后的APP了.
  • ios打包:
  • 必备苹果电脑.可以先在window电脑上打包.后面在苹果电脑上改配置.(这样就可以安卓的包打完直接打ios的包.方便一些.)
    1:先保证平台的环境干净.运行命令ionic cordova platform rm android
    image.png
    2:创建ios平台的环境.运行命令ionic cordova platform add ios
    image.png
    3:开始打包,运行命令ionic cordova build ios --prod --release
    同事说一般打ios的都会成功.只要报的不是红色的err就代表成功了...
    我的打出来最后报的是这个:
    image.png
    但是后面更改配置发版没问题...
    1:把打出来的文件.解压到苹果电脑上面.
    image.png
    2:打开workspace后缀名的文件.
    image.png
    3:选择项目为ios
    image.png
    4:上传证书(我们公司在大平台上可以下载对应的证书)
    image.png
    把下载好的证书上传到这个位置
    image.png
    5:更改info下面的语言为中文
    image.png
    6:更改build settings里面的标识
    image.png
    7:点击左上角produce里面的archive,进行打包
    image.png
    image.png
    8:打完包后生成app,选择为企业版
    image.png
    image.png
    9:选择一下XSK
    image.png
    10:如果提示如下.就把Frameworks里面红色的JavaScriptcore.framework包删掉.重新点击左上角produce里面的archive,进行打包.
    image.png
    11:打包成功.可以导出了.
    image.png
    选择导出的位置
    image.png
    打开导出的文件夹,这个ipa就是打包后的项目了
    image.png
  • 把配置好的ipa文件,借助数据线和iTools(或者爱思助手)还有应用兔手机软件.到苹果手机上测试.手机上需要安装应用兔软件.配合使用.
  • 附上iTools安装链接(百度云盘,永久有效):
    链接: https://pan.baidu.com/s/1WWVpWeAtEMHG3ODQFnZHQA 提取码: uz9i
常见报错整理:

(1):第一种报错信息:
image.png
解决方法: 把id的-uat改为下划线_uat
image.png
(2):第二种报错信息:
image.png
解决方法:
重新运行add安卓包.运行命令为ionic cordova platform add android
(3):第三种报错信息:
image.png
解决方法:
真的是在网上搜索了各种方法.各种命令运行.后面还是没有用...最有用的一篇文章是参考这个文章 但是有个坑是:

1、在node_modules.bin 下的 *.cmd 文件中,有如下 "%_prog%"
2、修改 "%_prog%" 为 %_prog%,即去掉双引号
  • 我是怎么搜node_modules.bin里面的"%_prog%"内容都没有搜到.最后我想到.*.cmd 文件可能代表的是所有后缀为.cmd的文件....
  • 然后随意点开了一个...发现里面真的有"%_prog%"....后面没办法...一个个文件点开去把"%_prog%"内容给替换成了%_prog%.
    解决方法 : vscode 的首选项里面忽略了node_modules文件夹的查找.去掉就可以直接一键替换了
    image.png

(4):第四种报错信息:内存泄漏(会经常遇到....)
image.png
解决方法:

  • 1、删除项目中 node_modules文件夹
  • 2、执行 npm cache clear --force
  • 3、npm install 安装依赖
  • 4: 管理员身份全局安装 increase-memory-limit
  • 5: npm install -g increase-memory-limit
  • 6: 进入工程目录,执行:increase-memory-limit

(5):第五种报错信息:python报错
image.png
解决方法:
第一步:安装windows-build-tools : npm install --global --production windows-build-tools
第二步:安装node-gyp : npm install --global node-gyp

附带的知识点:

1: 关于nrm
安装nrm : npm i -g nrm
nrm ls查看指向源image.png
nrm use taobao把npm的指向源设置为taobao
image.png
再次运行nrm ls查看指向源,更改成功.(避免出现npm安装指向不一致的各种问题...)
image.png
2: 优化APK
zipalign -v 4 app-release-unsigned.apk app-release-signed.apk

总结:

内心感受: 今天打包从上午十点出头一直打到晚上九点半.真的非常惨...惨绝人寰...没有经验的小白就是各种踩坑.还好我一直对自己说今天打不好就不下班了.同事也过来帮我看报错..各种出主意.. 最后成功了..一把心酸泪...
遇到问题解决的方法:其实很多问题都是因为运行者的身份权限不够,或者有缓存.版本不正确,步骤不正确导致的.静下心来在网上找找答案.或者开口问问同事.最后还是不行就清空回收站,电脑杀个毒,清理下垃圾.然后关机重启.把运行的进程关掉一大部分.重新再来一次.要相信自己,一定能行.绝不轻言放弃!
打包最重要的三个因素:缓存,内存,网速

  • 写这篇文章.一:是给自己留下记忆.二:是分享出来,避免再有人和我一样踩坑.每个项目可能多少有点不同.但是大致思路是一样的.遇到的错误也是大同小异的.有问题的小伙伴可以好好参考.不要忽略了细节哦.
  • 有问题可以下方留言沟通.觉得有用的小伙伴记得点个赞~

Timor
37 声望20 粉丝