一个App完成入门篇（二）-搭建主框架
经由过程第一课的进修，你已控制了怎样经由过程debug调试器来跟PC上的设想器联调来及时检察UI设想结果、调试代码了，接下来经由过程一系列的demo开辟教授教养你将很快上手进修到怎样开辟一个真正的App。
要开辟App，最重要的就是肯定主框架，好的主框架能起到削减工作量、简化代码的作用，而页面一般须要产物职员的UE设想和美工职员的UI设想，如下图所示，这两个步骤完成后才最先完成功用，因为篇幅限定，本教程不再赘述怎样设想UI和UE，直接经由过程开辟一个仿微信主页面的页面来做树模。
完全的demo请参考下载地点，能够导入到设想器中进修，导入教程：
下载到当地后，解压到某个目次中
在设想器中挑选File-Import-DeviceOne-Existing projects into Workspace点击Next挑选方才解压后的目次，再次点击Next即可将完全的demo导入设想器中。
在上一节教程从Hello world最先中人人已学会了怎样建立项目，这里直接运用该项目。
起首在IDE中睁开项目层级构造
app.js是全部项目的进口剧本环境，双击该文件在右边进入编辑。须要注重的是app.js较为特别，假如要在该文件内运用DeviceOne的组件，须要先require(“DeviceOne”)，如第一句代码所示，而其他.js剧本环境是不须要援用能够直接运用的。在这个剧本环境中我们要做的操纵是翻开一个新页面，须要挪用的是App组件的openPage要领，openPage总共有八个参数，这里先简朴引见用到的个中三个，其他参数的用法详见App的openPage。这里整段代码寄义就是先定义一个sm类组件分类引见的App，在App的loaded事宜中翻开一个新页。loaded事宜会App启动完成时触发，所以我们把翻开新页的翻开写在这内里。个中openPage要领的source参数表示的是须要翻开的页面的地点（相对路径）；statusBarState参数表示的是顶部状况栏显现状况，这里挑选的是transparent，如许设置能让翻开的index.ui页在手机上显现的为全屏结果，即隐蔽手机的顶部状况栏；animationType参数表示的是翻开页面时的过渡动画范例，这里挑选fade淡入淡出的体式格局，如许就可以以淡入淡出的过渡动画全屏翻开到index.ui页面了。
接着我们双击翻开index.ui，进入ui视图的编辑。
一切的页面展现都是经由过程在.ui文件中排列组件来完成，如上图绿框所示；若须要增加ui组件，只需在组件列表Components（红框所示）中拖拽组件到ui画布上，黄框OutLine中展现的是当前页面的层级关联，在OutLine中越靠下面的组件会展现在页面越上层。
再简朴剖析一下主界面，全部项目的尺寸是iphone6的尺寸750×1334，分高低两个部份，底部是一个Bottom Bar导航栏，上面是跟着底部导航切换的界面
Jonh.Felix
Stay hungry Stay foolish
一个App完成入门篇（二）-搭建主框架
经由过程第一课的进修，你已控制了怎样经由过程debug调试器来跟PC上的设想器联调来及时检察UI设想结果、调试代码了，接下来经由过程一系列的demo开辟教授教养你将很快上手进修到怎样开辟一个真正的App。
要开辟App，最重要的就是肯定主框架，好的主框架能起到削减工作量、简化代码的作用，而页面一般须要产物职员的UE设想和美工职员的UI设想，如下图所示，这两个步骤完成后才最先完成功用，因为篇幅限定，本教程不再赘述怎样设想UI和UE，直接经由过程开辟一个仿微信主页面的页面来做树模。
完全的demo请参考下载地点，能够导入到设想器中进修，导入教程：
下载到当地后，解压到某个目次中
在设想器中挑选File-Import-DeviceOne-Existing projects into Workspace点击Next挑选方才解压后的目次，再次点击Next即可将完全的demo导入设想器中。
在上一节教程从Hello world最先中人人已学会了怎样建立项目，这里直接运用该项目。
起首在IDE中睁开项目层级构造
app.js是全部项目的进口剧本环境，双击该文件在右边进入编辑。须要注重的是app.js较为特别，假如要在该文件内运用DeviceOne的组件，须要先require(“DeviceOne”)，如第一句代码所示，而其他.js剧本环境是不须要援用能够直接运用的。在这个剧本环境中我们要做的操纵是翻开一个新页面，须要挪用的是App组件的openPage要领，openPage总共有八个参数，这里先简朴引见用到的个中三个，其他参数的用法详见App的openPage。这里整段代码寄义就是先定义一个sm类组件分类引见的App，在App的loaded事宜中翻开一个新页。loaded事宜会App启动完成时触发，所以我们把翻开新页的翻开写在这内里。个中openPage要领的source参数表示的是须要翻开的页面的地点（相对路径）；statusBarState参数表示的是顶部状况栏显现状况，这里挑选的是transparent，如许设置能让翻开的index.ui页在手机上显现的为全屏结果，即隐蔽手机的顶部状况栏；animationType参数表示的是翻开页面时的过渡动画范例，这里挑选fade淡入淡出的体式格局，如许就可以以淡入淡出的过渡动画全屏翻开到index.ui页面了。
接着我们双击翻开index.ui，进入ui视图的编辑。
一切的页面展现都是经由过程在.ui文件中排列组件来完成，如上图绿框所示；若须要增加ui组件，只需在组件列表Components（红框所示）中拖拽组件到ui画布上，黄框OutLine中展现的是当前页面的层级关联，在OutLine中越靠下面的组件会展现在页面越上层。
再简朴剖析一下主界面，全部项目的尺寸是iphone6的尺寸750×1334，分高低两个部份，底部是一个Bottom Bar导航栏，上面是跟着底部导航切换的界面
页面规划表示图
这节重要引见怎样完成Botton Bar。
起首翻开OutLine，
在RootView中只允许有一个容器类组件，其他组件都是放在这个容器类组件中的，一般我们挑选ALayout相对规划组件来当这个容器组件。我们点击选中该组件（如上图红框所示），经由过程属性列表修正该组件的id为do_ALayout_root，默许大小是跟全部项目的大小雷同的750×1334，再继承像该容器内增加四个ALayout，id离别修正成do_ALayout_top、do_ALayout_body、do_ALayout_line和do_ALayout_bottom，它们的id对应了它们的功用离别如页面规划表示图中所示的top、body、line和bottom。离别调解着四个ALayout的x、y、width、height属性，以调解它们在页面中的位置。再继承向do_ALayout_bottom容器中增加四个ALayout，id离别改成do_ALayout_b0/b1/b2/b3，
再离别向这四个ALayout中增加一个Label和ImageView组件，并调解它们的x、y、width、height以到达下图所示结果
此时你的项目中ImageView没有显现出图片，须要在source://image或许建立其他想要寄存图片的目次将想要展现的图片放进去
再离别选中四个ImageView组件，修正它们的source属性指向寄存图片的相对路径，就可以显现图片了。
这里须要注重的是，DeviceOne有壮大的屏幕适配手艺，但可能会在某些部分对图片显现外形请求严厉的处所会轻微有些变形，为了保证点ALayout有一个特别属性isStretch，这里将该属性设置成false来保证ImageView不变形。
有了页面结果，接下来就须要使页面动起来。双击index.ui.js进入代码编辑页，
先经由过程组件范例定义三个sm组件Notification、Global和Page，在须要的处所能够经由过程自定义对象名+.的体式格局来运用该组件的属性、要领和事宜。再将所须要用到的ALayout、ImageView、Label定义一下，ui组件的定义体式格局跟sm组件相似，差别的是ui(“”)括号里填的是方才在.ui页面修正的对应组件的id名。
ImageView和ALayout都有点击事宜（touch），为了让用户有更好的体验，我们加大点击相应局限，将touch事宜定阅在Bottom的四个ALayout中，并在该事宜中经由过程转变其他ALayout里Label的笔墨色彩和ImageView图片source来到达点击选中的结果。
别的我们想让这个demo在android装备上能经由过程点击手机上的“返回”假造按键来返回到debug首页，须要用到方才我们定义过的Notification、Global和Page组件，另有一个mm组件Timer定时器，mm组件的定义体式格局跟sm组件雷同，只须要组件范例即可定义。
点击android手机上的“返回”假造按键会触发Page组件的back事宜，所以我们定阅back事宜并在back事宜里处置惩罚返回照样退出。
到这里，一个能相应点击事宜并切换图片的demo就完成了，是否是很简朴易学呢？！我们能够从上一节教程中所学的手机和电脑联调代码的要领来连忙考证一下所学内容啦。
