前颜(yan)
最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa。
本文只讲解android开发环境,等以后有空了再介绍一篇关于ios的。
一、知识讲解
本文基于ionic4+cordova构建android应用,首先做一下以下的知识梳理。
1 ionic是一套用于开发混合手机应用的开源h5框架,包含一套适合于mobile application的ui组件库以及相关访问原生设备的native接口等。目前ionic已更新至ionic4,ionic4的特色在于兼容angular6以及rxjs6,有着angular6的特点,因此,angular的开发者可以很容易的切换到ionic4的开发。
ionic官方文档:https://beta.ionicframework.com/docs/intro
2 cordova是一套开源的移动应用开发框架。cordova能够利用web应用(如ionic构建的h5应用)构建android工程以及ios工程(今天只讲android工程)。并且可以编译android工程,最后生成android apk。
cordova官方文档:https://cordova.apache.org/docs/en/latest/guide/overview/index.html
3 android sdk
cordova在编译android工程的时候需要有android sdk等开发环境的支持。如果想对ionic和cordova更加详细的了解,请见官方文档。
接下来,开始搭建开发环境。
因此,综上所述,需要搭建的开发环境有:ionic、cordova以及android 开发环境。
我的开发环境如下(仅供参考):
node:v8.11.1
npm:5.5.1
ionic:4.0.3
cordova:8.0.0
jdk:1.8.0_45
gradle:4.9
二、安装nodejs
首先你都懂的,要装个node环境,因为Ionic和cordova的安装以及后续的许多前端工具的安装都依赖于node的包管理器npm。
建议安装最新版本的node。
没有装过的请看安装教程:
http://www.runoob.com/nodejs/nodejs-install-setup.html
三、安装ionic
1 安装全局的ionic cli:
npm install -g ionic
2 检测ionic是否安装成功:
ionic -v
3 创建ionic项目
安装成功后,即可通过ionic cli命令创建ionic项目:
ionic start myApp tabs --type=angular
(注意:目前ionic4是beta版,需要加上 --type=angular才能创建基于angular的项目,后面等发布正式版本,估计就不需要了)
说明:上面命令中tabs是ionic的其中一个模板,可以通过 ionic start --list
查看可选的模板。
比如: ionic start myApp blank --type=angular
可以创建空白模板的ionic项目
4 下载ionic项目的node_modules包
在第三步创建ionic项目的过程中,ionic cli会自动帮你下载依赖的node_modules包(可以通过package.json查看项目所依赖的包),
如果下载失败的话,可以删除node_modules文件夹,手动安装:npm install
5 运行ionic项目: ionic serve
ionic项目本身就是一个web h5项目,因此可以像vue、angular一样运行于浏览器。
好了,ionic项目搭建成功后,接下来搭建cordova环境,然后利用cordova把ionic项目构建android工程。
四、安装cordova
1 安装全局的cordova:
npm install -g cordova
2 检测cordova是否安装成功:
cordova -v
3 构建android工程
1) 查看支持的平台以及版本:ionic cordova platform ls
2) 构建android platform:ionic cordova platform add android
说明:此步骤会修改ionic的目录结构,让ionic支持cordova。构建成功后,会在platforms目录下生成一个android工程。
其他cordova命令:
移除android工程:ionic cordova platform remove android
添加指定版本的android工程:ionic cordova platform add [email protected]
至此,cordova环境已经搭建完成,并且利用ionic生成了一个android工程(位于/platforms/android)。
但是此时还不能通过cordova编译该android工程,因为cordova编译android工程需要有android sdk的开发环境。所以,接下来配置android sdk环境。
五、配置android sdk环境
1 安装jdk(下载、解压、配置环境变量)
安装jdk可以参考这篇文章的jdk章节:
https://blog.csdn.net/love4399/article/details/77164500
用cmd 运行 javac -version 检查是否安装成功
2 安装android-sdk(下载、解压、配置环境变量)
安装android-sdk可以参考这篇文章的android-sdk章节:
https://blog.csdn.net/love4399/article/details/77164500
用cmd 运行 adb --version 检查是否安装成功
3 安装gradle(下载、解压、配置环境变量)
安装安装gradle可以参考这篇文章:
https://jingyan.baidu.com/article/00a07f38706f0b82d028dcf3.html
用cmd 运行 gradle -v 检查是否安装成功
以上环境搭建成功之后,即可通过cordova命令进行编译:ionic cordova build android
,编译成功之后,会在/myApp/platforms/android/app/build/outputs/apk/debug目录下生成一个 xxx.apk。
六、构建第一个android应用
至此,一个android apk就生成啦。
最后总结一下利用ionic4+cordova构建android应用的过程:
1 ionic start myApp blank--type=angular (创建ionic项目)
2 ionic cordova platform add android (添加android平台)
3 ionic cordova build android (编译生成apk)
是不是很简单,前提是以上环境都已经搭建好了。
参考文档:
1)cordova:https://baike.baidu.com/item/Cordova/9192368?fr=aladdin
2)ionic:https://baike.baidu.com/item/ionic/1326386?fr=aladdin
3)ionic开发android app步骤
4)2017年Android SDK下载安装及配置教程:https://blog.csdn.net/love4399/article/details/77164500