ionic3项目从基础安装到打包apk

这是我第一次写关于技术的文章,一方面是怕自己时间久了忘记,另一方面也是避免像我一样的初学小白踩坑出不来。文章内可能引用了网上某些大神的经验以及描述,感谢他们的分享,相同之处还望见谅。

废话不多说,直接上干货,我的电脑是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

如果这篇文章能帮助到你,我很荣幸,要是有错误的地方,还请指正出来,多包涵!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,056评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,842评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,938评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,296评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,292评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,413评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,824评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,493评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,686评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,502评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,553评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,281评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,820评论 3 305
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,873评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,109评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,699评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,257评论 2 341

推荐阅读更多精彩内容