之前一直跟Linux驱动打交道,上层应用几乎为零,业余时间也不是很多,所以博客也不会写的非常详细,大家有问题尽管评论哦, 我有空会及时回复!

摘要

上一篇文章主要介绍了ionic的开发环境配置, 以及如何创建运行一个app。这篇文章主要搭建wechat的外壳,介绍一个ionic项目的标准目录结构,header标签的使用,以及页面之间的切换。先看完成的效果

强烈建议,做ionic之前把angularJS入门过一遍, 还有ui-router, 至少要了解个大概, 不然真做不下去

项目的目录结构

当我们创建一个blank项目的时候,目录结构是下面这个样子:

├── bower.json
├── config.xml
├── gulpfile.js
├── hooks
├── ionic.project
├── package.json
├── plugins
├── README.md
├── scss
└── www

那我们的工作目录,就主要集中在www目录中,相信大家看到cssjsindex.html都比较熟悉,这里不准备详细介绍目录结构,只说一下一个AngularJs项目的常用的目录结构吧。

大部分情况下,我们会把一个应用的控制器,指令,路由,服务分别放在独立文件中,然后在app.js中注入.

所以创建一个blank项目后,先在www/js目录下创建四个文件controllers.js,directives.js,routes.js,services.js,并在www/js/app.js中引用进来

<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>

最后我们还需要在www下创建一个目录templates,用来存放各个模板,模板简单点说,就是把我们看到的界面拆开,分成一小个一小个的view,方便我们管理和复用

所以最后我们项目的目录结构看起来应该是这样的:

├── css
│   └── style.css
├── img
│   └── ionic.png
├── index.html
├── js
│   ├── app.js
│   ├── controllers.js
│   ├── directives.js
│   ├── routes.js
│   └── services.js
├── lib
│   └── ionic
└── templates

页面头部

其实创建ionic的应用,界面部分有两种模式,可以使用纯CSS创建,也可以使用AnjularJS指令模式创建.

当然还是推荐大家使用指令模式,AngularJS的优点和学习路线可以参考这篇文章

ionic中创建一个头部非常简单

<ion-header-bar align-title="center" class="bar-dark">
<h1 class="title">Title!</h1>
</ion-header-bar>

AngularJS一个神奇的地方就是,可以在html中使用自己定义的标签,这里的ion-header-bar就是一个官方定义好的指令,表示这是一个header,同时指令也可以有自己的属性,bar-dark表示一个黑色的header,另外官方还有其它八种颜色,可以点这里

可以看到这已经跟微信的header很像了,还需要两个图标,我们可以放两个button图标

<ion-header-bar align-title="left" class="bar-dark">
<div class="h1 title">微信(16)</div>
<div class="buttons">
<button class="button no-animation button-icon icon ion-android-search">
</button>
<button class="button no-animation button-icon icon ion-android-add">
</button>
</div>
</ion-header-bar>

这里的ion-android-searchion-android-add其实是两个icon font,官方还有更多的图标,点这里

到这里header就有模有样了,看到这,相信大家已经跃跃欲试了,其它组件的使用大同小异,把官方docs过一遍,很快就会了

不过我得吐槽一句,官方的文档写的太粗糙了,像这里的<div class="button">官方就没有介绍,大家可以去掉看看,界面变成啥样了- -!!

模板和路由

首先我们先在templates目录下创建三个文件tabs.html, tab-message.html, tab-frends.html

//tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-balanced">
<ion-tab title="微信" icon-on="ion-ios-chatbubble" icon-off="ion-ios-chatbubble-outline" ui-sref="tab.message">
<ion-nav-view animation="slide-left-right" name="tab-message"></ion-nav-view>
</ion-tab>
<ion-tab title="通讯录" icon-on="ion-ios-people" icon-off="ion-ios-people-outline" ui-sref="tab.friends">
<ion-nav-view animation="slide-left-right" name="tab-friends"></ion-nav-view>
</ion-tab>
<ion-tab title="发现" icon-on="ion-ios-paperplane" icon-off="ion-ios-paperplane-outline" ui-sref="tab.find">
<ion-nav-view animation="slide-left-right" name="tab-find"></ion-nav-view>
</ion-tab>
<ion-tab title="我" icon-off="ion-ios-person-outline" icon-on="ion-ios-person" href="#/tab/setting">
<ion-nav-view animation="slide-left-right" name="tab-setting"></ion-nav-view>
</ion-tab>
</ion-tabs> //tab-message.html
<ion-view>
<ion-content>
<h1>消息页面</h1>
</ion-content>
</ion-view> //tab-friends.html
<ion-view>
<ion-content>
<h1>通讯录页面</h1>
</ion-content>
</ion-view>

这三个模板一看就知道,一个是底部导航tabs,一个是消息界面,一个是通讯录界面,那他们应该如何放到界面中?如何实现跳转?

我觉得有必要先理一下他们三者的关系,tabs模板应该是直接放置在index.html中的,消息界面和通讯录应该放置在tabs模板中的。

所以剩下的就是通过某种方式,按他们的关系,把他们安置好,并能实现页面切换。主角来了ui-router! ui-router是一个AngularJS的路由框架,它通过状态机制来组织你项目的各个部分,比自带$route service好用多了,更多介绍请点这里

下面来看看,ionic中ui-router是如何使用的

首先模板是通过ion-nav-view来嵌入到界面中的, 也就是说有这个标签的地方,ui-router就会根据状态把对应的模板放置到这个标签中. 可以看到index.htmltabs.html中都有这个标签. 到时候对应的模板就要放置到这些位置.

模板位置安排好了, 再来看看如何放置和跳转的. 先在js/routes.js文件中添加这些代码:

//这里声明了一个模块, 名字叫wechat.routes, 等会要在app.js中注入这个模块, 才会生效
angular.module('wechat.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
//默认状态是tab.message
$urlRouterProvider.otherwise("/tab/message");
$stateProvider
//如果是tab状态被激活, 加载tabs.html模板, 注意这里的abstract: true, 表示tab只有在子状态显示的时候, 它才显示, 它本身是无法主动被激活的
.state("tab", {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
})
//tab.message状态被激活,会显示tab-message.html模板, tab.message状态是在tabs.html中的ui-sref中设置的. 同时注意views中的tab-message名字, 这个也需要跟tabs.html中的ion-nav-view中的name一致哦
.state('tab.message', {
url: '/message',
views: {
'tab-message': {
templateUrl: 'templates/tab-message.html',
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
}
}
})

还有tab-friends.htmltab-setting.html大家自己加一下. 最后别忘了在app.js中注入这个模块:

angular.module('wechat', ['ionic', 'wechat.routes'])
//这个地方的config不能少哦, 不然安卓平台的tabs会跑到顶部的
.config(['$ionicConfigProvider', function($ionicConfigProvider) { $ionicConfigProvider.tabs.position('bottom'); // other values: top }])

ok, 赶紧运行ionic serve在电脑上欣赏一下吧~

最后

其实这个功能看起来很简单, 但还有很多细节我没说, 比如如何添加滑动切换? 比如安装到手机, tabs跟浏览器上效果不一样, 有个黑边...大家可以尝试改改, 有问题, 尽管评论, 我有时间会及时回答的~

Git项目代码

Ionic-wechat项目边开发边学(二):目录结构,header标签与路由的更多相关文章

  1. Ionic-wechat项目边开发边学(一):环境搭建和创建一个项目

    之前学AngularJS,教程过了一遍觉得很简单,但真正写几个Demo就错误百出,一个小小的功能要折腾很久.所以这次学Ionic,准备以开发一个项目为切入点去学,那么问题来了,开发什么项目呢? 纠结了 ...

  2. Ionic-wechat项目边开发边学(四):可伸缩输入框,下拉刷新, 置顶删除

    摘要 上一篇文章主要介绍了ion-list的使用, ion-popup的使用, 通过sass自定义样式, localStorage的使用, 自定义指令和服务. 这篇文章实现的功能有消息的置顶与删除, ...

  3. 开源项目SMSS开发指南(二)——基于libevent的线程池

    libevent是一套轻量级的网络库,基于事件驱动开发.能够实现多线程的多路复用和注册事件响应.本文将介绍libevent的基本功能以及如何利用libevent开发一个线程池. 一. 使用指南 监听服 ...

  4. Ionic-wechat项目边开发边学(三):自定义样式,指令,服务

    摘要 上一篇文章主要介绍了一个ionic项目的标准目录结构,header标签的使用,以及页面之间的切换.这篇文章实现的功能有: 消息数据的获取, 消息列表的展示, 消息标为已读/未读, 主要涉及的到的 ...

  5. Android开发第一讲之目录结构和程序的执行流程

    1.如何在eclipse当中,修改字体 下面的这种办法,可以更改xml的字体 窗口--首选项--常规--外观--颜色和字体--基本--文本字体--编辑Window --> Preferences ...

  6. 【AngularJS学习笔记】开发时候的建议目录结构,基本开发步骤

    项目目录结构划分 Debug Node.JS的生成目录 Node_modules Node.Js的依赖项 Src 项目源文件 ----|framework  项目框架 --------|app --- ...

  7. 【Unity3D游戏开发】之游戏目录结构之最佳实践和优化 (十一)

    游戏目录结构之最佳实践 前置条件 1.多人协作开发,git管理 2.游戏不大,所有Scene合并到一起Scene中,eg.RoleScene.MapScene.StoreScene 3.Master一 ...

  8. vue cli3项目发布在apache www/vue目录下并配置history路由

    注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...

  9. Android开发学习2--Android Studio目录结构、Module目录介绍、Android创建及运行和HelloWord的扩展----极其简单的游戏界面

    学习笔记: 1.Android Studio项目结构 Android Studio提供了很多项目结构,最常用的是Android 和 project Project列举出了所有文件. 建议使用Andro ...

随机推荐

  1. synchronize 和volatile 实现共享变量在多线程中的可见性

    1.什么是线程可见性 可见性:一个线程对共享变量值的修改能够及时被其他线程看到. 共享变量:如果一个变量在多个线程工作内存中都存在副本,那么着给按量就是这几个线程的共享变量. 2.导致共享变量在线程间 ...

  2. ZooKeeper开发者指南(五)

    引言 这个文档是为了想利用ZooKeeper的协调服务来创建分布式应用的开发者提供的指南.它包括概念和实践的信息. 这个文档的一开始的的四部分呈现了不同ZooKeeper高级概念的的讨论.理解Zook ...

  3. 【51NOD-0】1049 最大子段和

    [算法]DP [题解]开long long…… #include<cstdio> #include<algorithm> #include<cstring> usi ...

  4. Lua中调用C++方法

    目前项目,使用了Lua脚本,至于使用Lua的好处不再赘述了.于是对Tolua做了一些小小的学习,总结一下吧. 主要说一下如何在Lua中调用C++方法. Lua调用C++的桥梁,是tolua.tolua ...

  5. %和format 细说

    Python中格式化字符串目前有两种阵营:%和format,我们应该选择哪种呢? 自从Python2.6引入了format这个格式化字符串的方法之后,我认为%还是format这根本就不算个问题.不信你 ...

  6. python开发第二十六天CMDB

    概要: 1.采集资产 2.API 一.资产采集 1.采集方式的配置 2.插件的定制 3.测试模式 4.错误日志(必须是行级的详细错误信息) 5.汇报数据-->遵循资产的唯一性 (1)只针对物理机 ...

  7. JS中的日期内置函数

    用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   ...

  8. linux编程之多线程编程

    我们知道,进程在各自独立的地址空间中运行,进程之间共享数据需要用mmap或者进程间通信机制,有些情况需要在一个进程中同时执行多个控制流程,这时候线程就派上了用场,比如实现一个图形界面的下载软件,一方面 ...

  9. python 学习笔记 sqlalchemy

    数据库表是一个二维表,包含多行多列.把一个表的内容用Python的数据结构表示出来的话,可以用一个list表示多行,list的每一个元素是tuple,表示一行记录,比如,包含id和name的user表 ...

  10. Python2.7.3 Tkinter Entry(文本框) 说明

      Python学习记录--关于Tkinter Entry(文本框)的选项.方法说明,以及一些示例. 属性(Options) background(bg) borderwidth(bd) cursor ...