Jayway第一讲:ionic从搭建开发环境到生成apk详细教程 - wudizhukk的专栏 - 博客频道 - CSDN.NET

Jayway第一讲:ionic从搭建开发环境到生成apk详细教程 先叨几句:以下教程的过程中,是需要翻墙的。ionic cordova node等是干嘛的,有要了解。总而言之,你想用一次网页开发,同时多平台发布,来这里就对了。 软件材料准备:JDKAndroid SDKNode.js (为了安装 ionic 和 cordova)Visual Studio Code (轻量级) 或者

来源: Jayway第一讲:ionic从搭建开发环境到生成apk详细教程 – wudizhukk的专栏 – 博客频道 – CSDN.NET

Jayway第一讲:ionic从搭建开发环境到生成apk详细教程

先叨几句:以下教程的过程中,是需要翻墙的。ionic cordova node等是干嘛的,有要了解。总而言之,你想用一次网页开发,同时多平台发布,来这里就对了。

软件材料准备:

  1. JDK
  2. Android SDK
  3. Node.js (为了安装 ionic 和 cordova)
  4. Visual Studio Code (轻量级) 或者 VS2015
  5. Android Studio

安装步骤:

这里写图片描述

本来用vs2015开发的,虽然体积大,毕竟一条龙服务,试了一下还不错的,但,我还是喜欢自己搞,让vs做的多了,自己懂的就少了。所以用了vscode来做开发,需要用到的插件如图所示。

这里写图片描述

很多东西,相应的官网都有详细的说明,我不开发软件,我只是代码的搬运工。下载安装完vscode,如图所示安装一下 Cordova Tools 这个插件。 vscode 里按 Ctrl+P 输入 ext install cordova-tools 就可以了。

这里写图片描述

接下来安装 Node.js 也没什么好讲的,下载下来,一步一步直到Finish。Cmd里输入npm有反应就说明安装成功了。

这里写图片描述

开始安装Cordova 命令直接看图吧。

这里写图片描述

接着安装Ionic 这是今天的主角。 命令也可以看图,以上两个一起装,分开显示,只是为了明确点。装完后,运行命令 ionic start jwApp tabs 。其中app名字是 jwApp,tabs是模板的名字,当然也有空白的模板,可以自己搜索了解下。

这里写图片描述

运行成功后,会生成如图所示的ionic项目

这里写图片描述

添加Android平台,当然你也可以添加iOS平台的。成功后会有刚才的目录下生成一个Platforms的文件夹,里面有一个android的工程项目,这个项目是可以拉到android studio里跑的,如果你想自己再加点什么非网页的界面,可以导入这个android的文件夹。

这里写图片描述

都有项目了,那就编译,跑一下呗,唉,发现出错了,原来Android_Home 还没有指定,就是说Android的SDK还没有装。

这里写图片描述

你可以下载一个android studio ,里面是有一个sdk的,只有最新版本的api,之前的都没的,更新太麻烦,我试了一上会有一些问题,缺斤少两的。网上更新到最新的sdk很多,可以直接下载下来使用,当然你之前在开发安卓的,肯定有这玩样,这里就不多讲开了,本文章使用到的所有最新软件,都会直接分享,到时大伙自己拿走就是。我最后没用as自带的sdk,我的是这样的,就一个文件夹,即拿即用:

这里写图片描述

编译通过后,环境上的配置基本就结束了,结果如图所示:

这里写图片描述

现在回到vscode里来,用vscode打开app文件夹,点击Debug,Run Android on emulator 这样就会启动一个模拟器,开始跑app。前提你得先建了一个模拟器,怎么建我就不说了吧。在vscode里挖个断点,能断上,这样就能调试了,当然ionic是可以在网页上及时显示运行的,这个搜索一下都有的。

这里写图片描述

再去android studio 里转一下,导入platforms/android文件夹,问题不大,也能跑跑,如果是新安装的AS,一开始会联网gradle下载相应文件,然后就OK可以玩了。

这里写图片描述

能跑,能断点,大伙都开心,中间怎么开发怎么玩,就不说了,玩好后的生成发布得说一下,网上其他文章一般只搭环境,不管后面死活,这样是不对的,一条龙服务必须要有。先是Release一个没签名的apk。然后就是用jdk里的工具,生成证书,打个码,性能对齐一下。就算完工了。

这里写图片描述

最后的工作就直接上官方原文了,一目了然

这里写图片描述

结束,先写到这,有问题留言,会补充,软件大伙先网上下着吧,一搜一大把,太懒的我随后会发地址上来

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏