Ionic v3.3.0官方中文版 附教程

Ionic 3.3.0 于近日发布，全称Ionic Framework，是一款基于HTML5的移动端应用框架，可以帮助用户使用html5开发出混合移动应用的前端框架。适用于基于Hybird 模式的 HTML5 移动应用程序开发，一个轻量的手机UI库，速度快，界面简洁，是您进行移动app开发的好帮手，欢迎下载！

Ionic3特点：

1.Ionic为性能而生-追求性能 运行速度快

2.轻量级框架

3.Ionic完美的融合下一代移动框架 AngularJS 基于 Angularjs，支持 Angularjs的特性， MVC ，代码易维护

4.漂亮的设计让你立马爱上它，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。

5.Ionic让你看不出混合应用和原生的区别-专注原生

6.强大的命令行工具

7.基于angular语法简单易学

Ionic安装教程

首先需要安装好node.js(网上教程很多)

这是为了使用npm来安装ant，cordova，ionic

验证是否安装好node.js的方法是在命令提示符中输入“node -v”

若出现版本号，证明安装成功。

下载jdk，并配置java环境(网上教程很多)

验证是否安装好的方法是在命令提示符中输入“javac”

若出现如下内容，证明安装成功。

安装ant,并配置相应的环境(网上搜教程)

验证是否安装好ant的方法是在命令提示符中输入“ant -v”

若出现版本号，证明安装成功。

现在就可以安装cordova了，根据下图一步一步来就好了，官网有，可以自己搜下;

验证是否安装好cordova的方法是在命令提示符中输入“cordova -v”

若出现版本号，证明安装成功。

接下来是安装成功ionic的重要一步了，就是安装express,

cmd 输入：npm install express

等待一会即可

接下来就可以安装ionic了，也是按下图，或是去官网查看步骤;

注意：如果按步骤执行到最后三步，发现出错，请先安装android sdk

或者可以直接省略最后三步(即只用执行到 cd myApp)，在命令提示符中输入“ionic serve”

直接在浏览器中查看效果;

验证是否安装好ionic的方法是在命令提示符中输入“ionic -v”

若出现下图，证明安装成功。

Ionic基本布局之item嵌入图教程

.item : 嵌入头像

很多社交App中，一个相当固定的UI模式是包含用户头像的信息列表：

在ionic中，头像被设置为40x40固定大小。和插入图标类似，向.item 中插入头像需要满足两个条件：

在.item元素上声明头像位置。头像可以位于列表的左侧或右侧， 分别使用.item-avatar-left和.item-avatar-right声明

在.item元素内使用img标签插入头像。

.item : 嵌入缩略图

回到今日头条的新闻列表，我们给它加上两张新闻图片：

在ionic中，缩略图被定义为80px大小，比头像大，适合新闻图片。 和插入头像类似，向.item中插入缩略图需要满足两个条件：

在.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧， 分别使用.item-thumbnail-left和.item-thumbnail-right声明

在.item元素内使用img标签插入头像。

注意：将img标签放到.item内容的开头!

.item : 嵌入大图

大图非常有冲击力，在图片类App中很常见：

更新日志

修复

range: 在最小/最大值更改时更新 UI

searchbar: 搜索栏填充应该在左边

segment: 将 z-index 添加到 ios 返回按钮

select: 搜索栏 RTL 修复

VirtualScroll: 初始化 trackByFn 引用

特性：

item: deprecate item-left / item-right attributes for item-start / item-end (#11125) (26c653e)

select: close select programatically (a04b577)

wk: built-in support for WK (#11048) (325cc5e)

性能改进：

virtual-list: relaxed restrictions for fast path (88e5642)

virtual-scroll: fast path for removing (8baa647)