ionic实战项目从0开始

原创 2017年07月17日 19:32:49

开始ionic的学习,前置条件:熟悉ES6、nodejs,了解angular2,熟悉html5、ts、css等。
注:angular2的学习教程及其相关可参考大漠穷秋老师的码云:特别感谢大漠老师
ionic的官方网址:ionic官网

下面开始ionic项目的正式开发:
(这个项目是一个视频播放的app,暂定为纯前端,开发环境win8)
1

安装ionic的全局环境(关于nodejs的可以看一下这个网站:快速安装到使用npm
新建一个文件夹,在该文件夹中的命令行窗口执行cnpm install -g cordova ionic,将ionic安装到全局环境(也可以npm install -g cordova ionic,当然前提是你要科学的上网)

2

继续执行命令ionic start videoProject tabs,创建一个ionic项目(tebs是这个项目的类型,道友们也可以ionic start videoProject,命令行会告诉你ionic的几个类型)

3

到此,项目建立完成,可以看一下目录结构。github上我的项目对照一下,
修改app.component.ts、app.module.ts、app.html,
pages下的文件可以删了

4讲解一下相关文件

app.module:
declarations中引入项目中所有的component,imports中导入的支持app运行的模块,bootstrap中是app的入口,entryComponents这个是重点,区别于angular2的路由导航,ionic有这玩意儿进行页面跳转(后面会细讲,同样把app中的所有component导入),providers中放app会用到的provider。
app.component:
recommendPage: any = RecommendPage;
listPage: any = ListPage;
mePage: any = MePage;
对应app.html上的root。
app.html:
<ion-tabs class="tabs-icon-text" [color]='primary'>
<ion-tab tabIcon="home" tabTitle="推荐" [root]="recommendPage"></ion-tab>
<ion-tab tabIcon="flame" tabTitle="热点" [root]="listPage"></ion-tab>
<ion-tab tabIcon="apps" tabTitle="分类" [root]="listPage"></ion-tab>
*
</ion-tabs>

[root]是angular2的属性绑定写法,[root]="recommendPage"指这一页是recommendPage对应的页面。
页面的编写规范:(html)
普通页面<ion-header></ion-header>头、<ion-content></ion-content>主体、<ion-footer></ion-footer>脚
模态页面segment切换的页面直接写<ion-content></ion-content>主体部分
recommendPage.html:
<ion-segment [(ngModel)]="types" color="primary">
<ion-segment-button value="choiceness">
精选
</ion-segment-button>
<ion-segment-button value="opera">
番剧
</ion-segment-button>
</ion-segment>

通过绑定types,选取不同的segment来控制下面的主体中显示对应的内容。
<ion-content>
<div *ngIf="types == 'choiceness'">
<choiceness></choiceness>
</div>
<div *ngIf="types == 'opera'">
<opera></opera>
</div>
</ion-content>

me.html、me.ts:(click)=”xxx”是angular2 中的事件绑定,通过点击调用component中的函数完成相应动作。
ex:public register() {
console.log("register...");
let registerModal = this.modalCtrl.create(RegisterPage, { userId: 8675309 });
registerModal.present();
}

点击(click)=“register()”,创建一个名为RegisterPage的模态页面,并打开该模态页面;
register.html
<ion-header>
<ion-navbar>
<ion-buttons>
<button ion-button (click)="dismiss()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>注册账号</ion-title>
</ion-navbar>
</ion-header>
<ion-content></ion-content>

register.ts
`public register() {
console.log(“register…”);
//执行http请求
}

public dismiss() {
    this.viewCtrl.dismiss();
    //关闭模态页面
}`

目前就完成了这么多,后续完善吧,道友们有问题指出有不懂提出来哦,第一次写博客,感觉和写游戏攻略一点不一样啊

Ionic实战项目-跨平台App开发

功能技术分析 - 读取朋友圈消息状态 - 朋友列表可以列出朋友信息 - 用户中心请求API,实现用户登录。用户信息的读取功能 用户中心模块 - 用户登录状态判断 - 用户登录信息...
  • qq_33936481
  • qq_33936481
  • 2017年04月28日 17:25
  • 2461

ionic之实战2easyLife(ionic源码)

产品效果下载地址https://github.com/iceLemonTea/easyLife1.0用到的相关技术ionic之打包release签名apkionic之使用crosswalk编译ioni...
  • xuexiiphone
  • xuexiiphone
  • 2016年08月10日 16:04
  • 1937

从零开始的Android新项目7 - Data Binding入门篇

Data Binding自从去年的Google I/O发布到至今,也有近一年的时间了。这一年来,从Beta到如今比较完善的版本,从Android Studio 1.3到如今2.1.2的支持,可以说Da...
  • marktheone
  • marktheone
  • 2016年07月27日 12:37
  • 2853

Ionic项目打包Android版本实战

最近在带团队做一个前端用Ionic+angularjs 的web app项目,由于自身不是做前端的,所以不太了解ionic,正好前端人员也是半吊子,所以只有自力更生学着自己打android包,在网上不...
  • liujian19790518
  • liujian19790518
  • 2016年05月08日 15:41
  • 19821

ionic项目实战-小白踩坑走起【2017/3/7起·持续更新】

几个月的项目实战,走在适配安卓与ios的路上浪,总结经验,相互交流【2017/3/7起·持续更新】...
  • Z_pigeon
  • Z_pigeon
  • 2017年03月07日 15:59
  • 2008

ionic项目实战-小白踩坑走起

几个月的项目实战,走在适配安卓与ios的路上浪,总结经验,相互交流【2017/3/7起·持续更新】 【1】固定  副标题固定可使用          [html] v...
  • yiyinerjin
  • yiyinerjin
  • 2017年12月19日 16:25
  • 29

基于Ionic+Cordova+Bmob的开源项目实战

之前在Ionic+Cordova开发环境搭建一文中讲述了Ionic+Cordova的跨平台移动开发框架。其中Cordova可以将开发的Web App打包发布到不同手机平台下,并且提供了丰富的插件来使用...
  • GAMEloft9
  • GAMEloft9
  • 2016年04月14日 13:52
  • 4625

实战项目开发细节:C语言分离一个16进制数取出相应的位1或0

最近在公司开发一个关于钢琴的PCBA项目,项目大概是这样的,完成各种功能的测试,准备去工厂量产的时候可以通过软件快速甄别硬件是否短路,断路等问题。       其中,甄别好坏的方法是通过比如按键,或者...
  • morixinguan
  • morixinguan
  • 2016年05月21日 11:51
  • 4741

项目实战①—高仿知乎日报(0)-->NDK将私密数据隐藏起来

在安卓如此流行NDK的情况下,在不加入NDK就out了,看完这篇帖子 几分钟就搞定NDK环境配置,为你的APP的安全性提高一个等级...
  • Jack_King007
  • Jack_King007
  • 2014年12月05日 17:28
  • 5751

Vue项目实战(一)——从0到1的蜕变

1、环境配置 创建Vue项目需要node和npm支持,如果已经安装过了请跳过此步骤 1、node环境配置: 下载地址:https://nodejs.org/en/download/ ...
  • qq_22230511
  • qq_22230511
  • 2017年05月21日 15:46
  • 389
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ionic实战项目从0开始
举报原因:
原因补充:

(最多只允许输入30个字)