如何制作一个发布版的ionic应用

如何为Android APK签名，已经在这里说过了。这里说说如何保护源代码，把Hybrid App（混合移动应用）工程变到发布的状态。对于Hybrid App，如果不做任何处理，把apk文件解压后在assets文件夹里就能看到所有的源代码。

以下通过gulp tasks和cordova hooks来保护你的源代码。

・gulp tasks - ionic serve时执行

・cordova hooks - ionic build/run时执行

（0）创建一个ionic工程

cordova@5.0.0

ionic@1.3.20

Java代码

C:\>ionic start myApp tabs

首先编译一个调试用的apk，以后的发布版apk作对比。

Java代码

C:\>cd myApp

C:\myApp>cordova plugin add https://github.com/apache/cordova-plugin-whitelist.git

C:\myApp>ionic platform add android

C:\myApp>ionic build android

生成C:\myApp\platforms\android\build\outputs\apk\android-debug.apk

（1）(cordova hook)JS代码的Lint

混淆JS代码的前提要保准JS代码没有错误。

安装jshint

Java代码

C:\myApp>npm install jshint --save-dev

C:\myApp>npm install async --save-dev

hook文件

Java代码

C:\myApp\hooks\after_prepare\01_jshint.js

编译

Java代码

C:\myApp>ionic build android

引用

Linting www/js/controllers.js

Errors in file www/js/controllers.js

9:4 ->Missing semicolon. -> }

ionic的sample工程controllers.js有错误，第九行缺少分号。

修改错误提示，直到build成功。

官方文档： Installing Ionic - Ionic Documentation

1.删除旧版本ionic

npm uninstall -g ionic

2.安装新版本

npm install -g @ionic/cli

值得注意的是，ionic的资源包变为了ionic/cli

在cmd或终端进入合适的目录，然后运行命令：

ionic start 项目名称 tabs

然后选择项目类型（Angular、React、Vue），这里选择的是Angular，回车

大概意思是是否集成capacitor，这里暂时先选NO，等待安装node_modules

是否创建ionic账号，选择NO，项目创建完成，然后进入创建的项目目录下，输入命令启动服务：

ionic serve  

启动成功！

3-1-1 添加安卓平台

ionic capacitor add android

没有www文件。尝试运行一下ionic build，然后再次运行添加平台命令，项目中多了android文件夹

因为官方并没有提供直接打包的命令，需要借助android studio来打开安卓项目，在项目中运行命令：

npx cap open android

这样直接启动android studio并打开该安卓项目

对于android studio的安装和android_SDK以及安卓模拟器的配置可以自行了解学习一下，我这里是已经搭建好的安卓开发环境。

点击运行按钮，就可以在模拟器上运行该程序

每次对ionic项目做更改需要把这些更新同步到安卓项目中，需要运行命令：

ionic capacitor copy android

3-1-2 添加iOS平台

在项目目录下运行命令： 

ionic capacitor add ios

报错了，大概是因为cocoapos没有安装或者版本过低，尝试更新一下cocoapos

打开终端，输入sudo gem install cocoapods来升级CocoaPods；

如果遇到

ERROR: While executing gem ... (Gem::FilePermissionError)

You don't have write permissions for the /usr/bin directory.

这个错误的话就改用sudo gem install cocoapods -n /usr/local/bin命令即可。

接下来删除ios文件夹，重新添加ios平台，

根据提示，用xcode打开该ios项目

npx cap open ios

点击运行按钮，在iOS模拟器上查看效果

使用cordova添加平台和以前的ionic版本是一样的，首先尝试添加一下android平台:

ionic cordova platform add android

发现报错了，提示在capacitor的项目中不可以使用cordova，如果使用cordova需要禁用capacitor：

ionic integrations disable capacitor

禁用成功。

再次添加安卓平台，提示是否集成cordova，输入y

然后又又又报错了。

这是什么鬼，以前用cordova添加平台没有遇见过，我猜测可能是跟capacitor添加的android文件冲突，于是删除android文件夹再试一次。

果然添加成功！

再尝试一下cordova能不能打包成功:

ionic cordova build android

打包也成功了。

接着又尝试了一下用cordova添加和打包iOS，跟处理android平台的方式一样，先把ios文件夹删除，再进行添加和打包 *** 作，都成功了。

事实证明，新版的ionic版本既可以集成最新的capacitor，也兼容集成cordova。

---