资讯专栏INFORMATION COLUMN

使用Ionic3框架开始第一个混合开发APP

thursday / 2915人阅读

摘要:什么是框架框架是一个混合开发框架,其本身依赖于,,。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入,这是添加一个平台的命令。注意这个包是版本,并非正式包,正式包需要先生成签名至此,你就开始了第一个应用。

什么是混合开发?

简单来说,就是在开发移动应用中同时使用NativeWeb的开发方式。

什么是Ionic3框架?

Ionic3框架是一个混合开发框架,其本身依赖于AngularSassCordova

使用Ionic3框架可以做什么?

使用Ionic3可以使用前端相关技术快速开发多平台的移动APP。

Ionic3环境搭建

安装Visual Studio 2011以上版本。

安装python 2.7版本。

安装node

使用npm全局安装CordovaIonic。命令行输入npm install -g cordova ionic

安装Android Studio

安装Git。(可选)

安装完了之后,命令行输入ionic -h如下图

初始化第一个应用

输入ionic start -h查看初始化命令详情,如下图。

name是项目名

template是初始化的模板

--type是项目类型,有Ionic1Ionic-angular(也就是Ionic2Ionic3)

--app-name是App的名称,可以之后通过config.xml修改

--list是打印出所有可用模板

--cordova是集成Cordova

--no-deps是不安装npm依赖

--no-git是不初始化git仓库

--no-link是不链接到Ionic平台

好了,输入ionic start HelloWorld blank --cordova --no-deps --no-git --no-link来初始化一个项目。完成之后如下图。

这个时候工作目录下就生成了一个HelloWorld目录,进去。

输入npm install安装依赖,安装完如图。

无视掉那几个警告

输入ionic serve,第一次会出现下图,输入Y安装。

然后再次输入ionic serve,如图继续输入Y安装,安装完后用启动serve,如下图。

游览器会自动打开localhost:8100,如果没有就在游览器里面手动打开本网页,界面如下图。

F12打开控制台,然后切换到移动显示,如下图。

这个样子大概就是我们应用界面的样子了。

然后回到控制台,Ctrl + C结束调试服务器。然后输入ionic cordova,然后输入Y安装插件,如下图。

输入ionic cordova platform add android,这是添加一个Android平台的命令。如果是ios就是将Android那里替换为ios,成功后如下图。PS:ios需要安装XCode,也就是需要在MAC OSX系统上。

输入ionic cordova build android --prod生成一个Debug包,如下图。

这样就打包完毕了,去到platfrom/android/outputs/apk/目录下,android-debug.apk就是我们打包出来的APP。安装到手机上就可以使用或者调试了。注意:这个包是Debug版本,并非正式包,正式包需要先生成签名

至此,你就开始了第一个Ionic3应用。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112419.html

相关文章

  • 使用Ionic3框架开始一个混合开发APP

    摘要:什么是框架框架是一个混合开发框架,其本身依赖于,,。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入,这是添加一个平台的命令。注意这个包是版本,并非正式包,正式包需要先生成签名至此,你就开始了第一个应用。 什么是混合开发? 简单来说,就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架? Ionic3框架是一个混合开发...

    wangshijun 评论0 收藏0
  • 使用Ionic3框架开始一个混合开发APP

    摘要:什么是框架框架是一个混合开发框架,其本身依赖于,,。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入,这是添加一个平台的命令。注意这个包是版本,并非正式包,正式包需要先生成签名至此,你就开始了第一个应用。 什么是混合开发? 简单来说,就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架? Ionic3框架是一个混合开发...

    Mr_houzi 评论0 收藏0
  • 使用Ionic3框架开始一个混合开发APP

    摘要:什么是框架框架是一个混合开发框架,其本身依赖于,,。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入,这是添加一个平台的命令。注意这个包是版本,并非正式包,正式包需要先生成签名至此,你就开始了第一个应用。 什么是混合开发? 简单来说,就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架? Ionic3框架是一个混合开发...

    khs1994 评论0 收藏0
  • 来扯点ionic3[0] 吹完牛再入门也不迟

    摘要:让我们上音标第一行是美式音标,大致念法是爱啊尼克嗯这个啊要稍稍拖一下,第二行是英式的念法,大致读爱哦尼克。具体采用哪个,那是我们开发者的自由,说白了就是用两种语气词来感叹我们对尼克的爱慕尼克是谁我不知道啊。 showImg(https://segmentfault.com/img/remote/1460000012135806?w=1240&h=775); 目录 1.序2.ionic的...

    leejan97 评论0 收藏0
  • 来扯点ionic3[4] 结构型指令和列表渲染

    摘要:雷神上映已经一周,但因为各种原因还没来得去送票房,有多年不见的班纳和洛基娘娘,期待他们在诸神黄昏和明年无限战争中的表现。至此,准备就绪,开始了解第一个指令。参考文档结构型指令 showImg(https://segmentfault.com/img/remote/1460000012145196?w=650&h=350); 《雷神3》上映已经一周,但因为各种原因还没来得去送票房,有多年...

    sean 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<