这是我第一次写关于技术的文章,一方面是怕自己时间久了忘记,另一方面也是避免像我一样的初学小白踩坑出不来。文章内可能引用了网上某些大神的经验以及描述,感谢他们的分享,相同之处还望见谅。
废话不多说,直接上干货,我的电脑是win10系统,所以就按照我的系统来讲解了!
一,开发前需要软件的准备 (文章所提到的软件,文章最底部有提供)
1,nodejs环境安装(这个是先决条件,我的项目安装的是 node-v10.14.1-x64)
2,jdk安装 (java的开发基础类库 jdk-8u71-windows-x64)
3,SDK安装(安卓开发集成包,集成了安卓的开发工具,插件,API等)
4,gradle( Java的Weboack ,支撑app的编译,打包的流程,我项目安装的是 Gradle 4.1)
二,编译时需要的工具
1,GitBush(我自己挺喜欢的一个工具,代替win系统cmd很好的软件)我提供了Git安装包,可直接安装鼠标右键使用
2,Window系统自带的cmd(建议管理员运行,因为有些命令需要管理员权限才能正常运行)
3,VSCode(微软推出的一款很不错的IDE,个人感觉和Sublime很像,界面很友好,需要什么插件直接搜索下载安装就行。
这里主要是用到了它自带的“终端”功能,ctrl + shift + y 的组合键打开,和Win系统的cmd类似,建议使用这种在IDE环境
内操作命令方式来玩)
三,所需要环境的安装配置
1,安装nodejs ,顺带连npm都安装了,官网下载后直接Next安装就行,实在不会的请看 https://www.jianshu.com/p/03a76b2e7e00
2, jdk安装,根据自己电脑的系统选择x86和行x64的版本,按照提示安装,目录最好为 C:\Program Files\Java(x64系统)
或者 C:\Program Files(x86)\Java (x86系统)完成后cmd输入 java -version 验证是否安装成功
只要出来 java version 等信息,表示安装没有问题,可以进行下一步了
3,sdk (需要配置环境变量)
3.1 根据我提供的下载连接下载sdk后,解压sdk 放在 C:\Program Files\Java 目录下
3.2 配置环境变量,我的电脑——右键属性——高级系统设置——环境变量
在下面的环境变量中,新建,键值对如下:name: ANDROID_HOME key: C:\Program Files\SDK\androidsdk
如图所示:
然后在path中,全局声明一下,将 ;%ANDROID_HOME%\tools 缀在最后面,前面有【;】分隔符。
(注:win 10 系统不需要分号,SDK,JDK也是一样)。添加android-sdk下的tools与platform-tools到path路径下
见下图
然后运行CMD,输入android 和 adb命令 ,如果出现一大堆指令,说明你的SDK安装无误,并且环境变量配置OK。
见下图:
4,安装gradle
安装gradle到C:\Program Files 下然后添加系统变量,见下图
完成后,添加路径到path变量中,见下图
添加完成后,cmd输入 gradle -v来验证是否成功
5,安装python
安装python2.7到C盘目录下,同时设置path路径,见下图
安装完成后cmd输入python来验证是否成功
6,打开android-sdk下的SDK Manager (打开后直接进入界面,网上有说要在tools选项卡中选择options,然后配置国内镜像,但是我配置后,发现在packages选项卡中点击reload重载时,不能展示sdk列表,所以我没有配置国内镜像,直接就出来sdk列表了。有的小伙伴要是默认打开没有加载sdk列表,那就配置下国内镜像吧,tools选项卡中选择options,server处填写mrrors.neusoft.edu.cn,port处填写 80,勾选Other处的Force https:// xxxxxxxxx,然后回到packages选项卡中点击reload重载,就会出现sdk列表)
先勾选如下图的三个Tools,一个SDK platform
分别是 Android SDK Tools,Android SDK platform-tools,Android SDK Build-tools,SDK platform 见下图
注: 这里有个大坑,我爬了一天才出来,咱们先扯扯这个坑,这里SDK platform一定要结合项目平台选择正确,否则会出现命令打包后,ionic serve 浏览器可以访问接口数据,debug包安装真机后,不能访问数据的坑。不能访问数据的具体呈现为,所有接口返回 status:0,url: Null,你说坑不坑? 我查了很多资料,有的说是平台问题,有的说是cordova插件白名单的问题,还有说别的问题,但是大致上以这俩原因为主,那我就试试呗(其实我认为还是平台没匹配好造成的)我先查看了下cordova的插件有没有白名单,具体查询命令为:cmd输入 cordova plugin ls 结果还真有 cordova-plugin-whitelist 于是我卸载掉再安装,打包装机测试,哎,还是不能访问数据。这条路走不通,我又开始折腾SDK Manager 安装SDK,装来装去还是不对(其实我对这些也不太明白,瞎猫抓耗子呗,能有啥办法),最后,我想起来,可能是我之前安装的cordova-android版本较现在安装的旧,现在安装的是@9.0.0,之前是@6.4.0,于是我赶紧查看版本信息,命令: cordova platforms list 果然是9.0.0,赶紧执行命令 cordova platform remove android 移除平台,再 cordova platform add android@6.4.0 安装6.4.0版本的,最后debug打包,安装到真机后访问数据还是失败,仔细看了下报错的信息,说是没有 SDK platform API 26的授权,于是打开SDK Manager卸载了 SDK platform API 27 安装了SDK platform API 26 继续打包装机,果然可以访问数据了,折腾了一天,总算搞定了,这也证明了我当初的怀疑是正确的,的确是安装的cordova-android平台与SDK不匹配导致的问题。
四,项目开始前需要安装的步骤都已经完成了,现在进行项目的创建,运行,以及打包了
1,创建项目
安装ionic指定版本 ,我用的是Ionic CLI 4.12.0 命令 npm install -g ionic@4.12.0 cmd输入 ionic -v 验证
安装cordova指定版本 ,我用的是cordova 8.1.2 命令 npm install -g cordova@8.1.2 cmd输入 cordova -v 验证
当然也可以直接撸 npm install -g cordova ionic 命令来直接安装 ionic cordova
执行完ionic cordova的安装后,通过cmd 来输入 ionic start app tabs(GitBush进入到项目目录下输入)来创建我们的ionic项目
这个命令包含了tabs 是指要创建一个包含tabs的app项目,根据自己项目的实际需要选择,具体查看ionic3 CLI文档
执行完命令后,稍等片刻,浏览器自动弹出预览界面(Chrome浏览器),并且支持热更新,如下图所示
这里的图示引用我自己的项目,没有创建新的app,示意执行命令 ionic start app tabs 后Chorme 打开ionic 的界面
由此也证明了ionic cordova安装都没什么问题
五,打包项目(此处为Android打包)
执行命令 ionic cordova build android 默认是打的是debug包,要打签名包就带上后缀 ionic cordova build android --release
若是项目第一次打包的话,时间可能会久一点,具体见下图
Build Successful 构建成功(失败是 Build Fail 。假如失败的话,请仔细查看cmd的报错信息)
此次打包时间大致为1m 5s,生成的app名字为 android-debug.apk 位置在项目目录下 platform/android/build/outputs/apk/debug内
此时就可以手机安装这个debug的apk了,至于后面如何签名release包,不在本次教程范围内,有兴趣的同学请自行百度!
注:文章所提到的安装依赖,我提供下我的百度云下载链接:点这里获取
提取码:7rcu
如果这篇文章能帮助到你,我很荣幸,要是有错误的地方,还请指正出来,多包涵!