ionic3.x+angularJS windows系统搭建android混合开发环境

前言：ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

针对不会原生开发app的小伙伴也许这就是福音，随着技术的不断变革与进化，前端开发的小伙伴也可以开发app啦！！！！！

个人感觉现在能很好实现app跨平台开发体验比较友好的是uniapp和ionic,而这篇文章着重介绍ionic开发环境的搭建。

具体步骤：：：：

1、安装java jdk--参考安装https://www.runoob.com/java/java-environment-setup.html

2、安装node 环境--参考安装https://www.runoob.com/nodejs/nodejs-install-setup.html  

我们这里搭建的ionic3 的开发环境所以node版本最好安装最新的。同时检查npm命令工具的版本是否为最新的，没有更新为最新的

执行命令  npm i -g npm 

查看npm 版本 npm -v

查看node 版本 node -v

3、安装android sudio --参考安装https://www.runoob.com/android/android-studio-install.html

重点：因为ionic基于 Hybird 模式的 HTML5 移动应用程序开发，所以需要提供android sdk配置，但是在在搭建ionic3的环境中会出现各种错误，例如：android sdk环境变量配置？android studio 安装？gradle 安装？

1）、安装android studio 参考 https://www.runoob.com/android/android-studio-install.html

通过android studio 开发工具安装sdk ，打开工具 依次 configure -- SDK manager ---Android SDK --- 选择一个android 版本（注意api level >=28，因为在执行cordova build 中，版本太低会异常）

2）、安装 gradle （ionic cordova使用gradle构建android）安装参考https://www.w3cschool.cn/gradle/ctgm1htw.html 

下载zip https://services.gradle.org/distributions/

3）、android studio  配置gradle ，依次configure -- settings -- gradle 配置安装的gradle bin文件夹，同时配置gradle 环境变量

注意：注意查看gradle 版本

cmd执行刷新环境变量

set path=test

关闭cmd 命令窗口，再打开执行

echo %path%

（最好重启一下电脑）

执行 命令  gradle -v

4）、配置android sdk 环境变量，在第一步中通过android studio 安装了SDK ，找到SDK所在文件夹，配置环境变量

配置参考 1、https://www.jianshu.com/p/27c9c3835331 2、https://www.jianshu.com/p/0b9d705fc35f

 

4、安装ionic和cordova 命令行：

npm install -g cordova ionic

如果你已经安装了以上环境，可以执行以下命令来更新版本:

npm update -g cordova ionic

执行

cordova requirements

检查 cordova 环境配置是否健康。

等命令行工具安装完成就可以创建项目，打开电脑的命令行工具cmd，根据个人需要指定项目创建文件夹，

执行命令 

ionic start myApp tabs

说明：myApp ----项目名称，tabs ----指定项目使用模板（参考官方提供的模板）

执行如下命令：

cd ./myApp
ionic cordova platform add android
ionic cordova build android
ionic cordova emulate android

如果一切正常会弹出模拟器

异常归类：：：：：：：：：：：：：：：

1、no devices/emulators found  

注意android studio 配置模拟器

打开android studio 开发工具，依次configure -- AVD manager -- create virtual device 创建模拟器，如果没有安装对应版本的AVD 注意安装，版本对应sdk版本。

开发ionic：：：：：：：：：：：：：：：：

Ionic Lab 是桌面版的开发环境，如果你不喜欢使用命令行操作，Ionic Lab 将会满足你的需求。

Ionic Lab 为开发者提供了一个更简单的方法来开始，编译，运行，和模拟运行Ionic的应用程序。

Ionic Lab 支持的平台有：Window、Mac OS X、Linux，

下载 ionic lab 工具 下载地址 https://www.cnblogs.com/taceywong/p/5874661.html

Sublime Text 下载 http://www.sublimetext.com/3

备注：这里使用 ionic lab 一直卡顿，最后放弃

这里推荐使用过 vscode

下载地址 https://code.visualstudio.com/

参考文章：https://blog.csdn.net/yelllowcong/article/details/79354663

安装 cordova tool 方便调试

ionic Android发布：：：：：：：：：：：：：：：：

这里懒得去写了，请参考这位大侠的文章：：：

与开发版本不同，如若想要正式发布的话需要执行编译命令

ionic cordova build --release android
1
注意：发布要使用Release版本，所以这里加上–release选项。完成之后生成了未签名的apk，在目录platforms/android/build/outputs/apk/HelloWorld-release-unsigned.apk。

生产key

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
1
这里会问一些问题，填写之后生成keystore文件。（git可能会出现中文乱码的状况。右击git bash here => options => text => local选择zh_CN character set选择utf-8 或者GBK）

对apk文件进行签名 
首先切到platforms/android/build/outputs/apk/目录中。然后把之前生成的keystore文件粘贴到同级目录中。执行命令

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
1
HelloWorld-release-unsigned.apk 是之前未签名的apk 
alias_name是签名之后的apk . 
到这里基本上就可以正式发布了，不过个人建议还是使用zipalign优化一下apk

zipalign优化apk 
笔者按照网上许多教程执行命令：

zipalign -v 4 notepad_signed.apk notepad_signed_aligned.apk
1
结果报错找不到zipalign 最后笔者找到zipalign 所在目录（zipalign是sdk的压缩代码工具，可以将我们的apk体积最小化,一般都在sdk安装目录build tools\25.0.1\zipalign.exe下 25.0.1是android sdk版本号） 
在zipalign 所在文件目录打开命令行。执行命令

 zipalign -v 4 D:xxxxxxx\apk\android-release-unsigned.apk  alias_name.apk
1
D:xxxxxxx\apk\ 是apk所在目录 
android-release-unsigned.apk 是未优化的apk的名字 
alias_name.apk 是优化apk的名字

现在去你的zipalign所在的路径，可以看到压缩完成的apk文件。

现在就可以将我们压缩完成的apk文件上传到相应的应用市场，填写相应的APP信息，等待审核就可以了。
————————————————
版权声明：本文为CSDN博主「有梦想的风筝」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/samll_cat/article/details/80860151