摘要：本节教程将继续带领大家完善教学导入项目完善主框架完成子视图打开新页启动动画将要学习的效果图如下所示如何导入完整项目本节示例请参考下载地址，可以导入到设计器中学习。完成子视图接下来我们来完成需要展示的子视图。
本节教程将继续带领大家完善教学demo
导入项目
完善主框架
完成viewShower子视图
打开新页
启动动画
将要学习的demo效果图如下所示
如何导入完整项目
本节示例demo请参考下载地址，可以导入到设计器中学习。
完善主框架
在上一节教程搭建主框架中大家已经学会了如何主框架，本节教程使用上一节未完成的demo。
我们分析一下demo机构，通过点击Bottom Bar上的不同按钮来切换内容，这种情况下最适合用ViewShower这个组件，ViewShower是一个包含多个子VIew的UI容器组件。我们从组件列表里拖一个ViewShower到UI设计页面中，并通过调整x/y/width/height为0,0,750,1109将其固定在body的位置，把组件ID改为do_ViewShower_main。
双击index.ui.js打开代码编辑页面，先通过ID实例化ViewShower组件，再给ViewShower绑定数据，在DeviceOne的组件库中，ViewShower、ListView等这种容器类都是采用MVVM形式来绑定数据的，使得开发人员可以将View和业务逻辑分离出来。
这里先给ViewShower定义需要绑定的数据viewShower_data，其中id需要保持唯一，否则后id已经存在，会覆盖之前的View；path为需要展示的子View所在的UI页面的绝对路径，此时path所指的三个页面还不存在，一会来创建。定义好数据后，通过ViewShower的addViews方法将数据绑定进去，在调showView方法使其先默认显示第一个页面，即id为”news”的子页面。
想要完成每点击一个按钮就切换显示的子View，还需要在每个按钮的点击事件里加上切换子View的方法showView，并通过show不同id的子View来切换页面。
完成viewShower子视图
接下来我们来完成需要展示的子View视图。
在view目录上点击右键，选择New-Folder，填写要创建的目录名称为”news”，新建后再在news目录上点击右键，选择New-UI File新建名称为main的UI界面，在创建页面的同时IDE会同时创建一个跟main.ui关联的代码文件main.ui.js，双击打开main.ui文件，向页面的最外层ALayout中再拖进一个ALayout组件作为viewShower子View的最外层容器，修改它的id为do_ALayout_main，调整高度为1109，因为在主页面index.ui中viewShower的高度也为1109，如果子View的宽高超过它父容器viewShower的宽高会导致内容显示不全的问题，
再向该页面的do_ALayout_main中拖拽一个Label，修改Label的text为“新闻”。这样viewShower的一个子View就完成了，其他两个子View也是相同内容，所以只需负责该页面即可，在news目录上点击右键，选择Copy,再点击View目录选择Paste，填写目录名为“find”，打开main.ui修改Label的text为“搜索”即可，同样的再复制、粘贴一次，修改目录名为“contact”、Label的text为“通讯录”，这样viewShower的三个子View就完成了。（再多复制一份，目录名改成“feedback”，Label的text为“反馈”，为后续做准备）
打开新页
在Bottom Bar中，我们想通过点击第四个按钮“反馈”来另外打开一个新页面，让用户填写反馈信息。先双击打开feedback目录中的main.ui文件，在do_ALayout_main中继续添加一个ALayout作为该页面的top，ID改为do_ALayout_1，调整宽高分别为750/128；再向do_ALayout_1中添加一个ALayout用于点击，ID改为do_ALayout_back，调整位置、宽高分别为x=4，y=6，width=147，height=110；再向do_ALayout_back中添加一个Label用于展示文字，ID改为do_Label_3，将Label的text改为“返回”。
打开main.ui.js，订阅do_ALayout_back的点击事件用于关闭该页面。同时处理在点击android设备的虚拟返回按钮时也关闭该页面。
回到index.ui.js，在do_ALayout_b3的touch事件中调用app的openPage方法，将目标地址指向刚刚调整过的/feedback/main.ui页面，将顶部状态栏显示状态改为透明（控制statusBarState参数为“transparent”）以全屏形式打开新页，同时将打开页面的动画类型（animationType）改成从右往左推出（push_r2l）。
启动动画
为了让app有更生动的效果，我们让demo一进入的时候有一个动画效果作为欢迎页面，在source://view下创建一个跟index.ui平级的start.ui页面，在根ALayout里添加一个与根ALayout一样大小的ImageView，将ID改为do_ImageView_content,给这个ImageView一个source显示图片；再添加一个Label组件，修改ID为do_Label_welcome，修改do_Label_welcome的fontColor/fontSize属性调整显示字体的颜色和大小，页面就完成了。再双击打开start.ui.js页面，
先实例化当前页面的UI组件，并定义需要使用到的相关组件，在定义一个MM组件animation用于调用UI组件的动画，这个动画是控制ImageView组件的，所以ID定义为img_anima，通过修改img_anima的属性，我们可以操控这个动画的走向，这里想让ImageView的动画是缩放，所以选择scale方法，通过给scale方法的不同参数以不同的参数值来制作这个动画，比如delay设置成0既是让动画立即开始，duration设置成2000是让整个动画时间为2秒等等..
接下来也是同样的方法给Label定义一个旋转的动画，最后通过调用所有UI组件都通用的animate方法我们将定义的这些动画加在UI组件上并在动画完成后打开新页main.ui。
到此，本节教程就结束了，赶快拿起手机打开调试来查看效果吧！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49827.html
摘要：本节教程将继续带领大家完善教学导入项目完善主框架完成子视图打开新页启动动画将要学习的效果图如下所示如何导入完整项目本节示例请参考下载地址，可以导入到设计器中学习。完成子视图接下来我们来完成需要展示的子视图。 本节教程将继续带领大家完善教学demo 导入项目完善主框架完成viewShower子视图打开新页启动动画将要学习的demo效果图如下所示showImg(https://segmen...
iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。包含：文章、视频、源代码 showImg(https://segmentfault.com/img/remote/1460000011522427?w=1626&h=1242); 第二章：小程序中级实战教程之预...
iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。包含：文章、视频、源代码 showImg(https://segmentfault.com/img/remote/1460000011522427?w=1626&h=1242); 第二章：小程序中级实战教程之预...
iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。包含：文章、视频、源代码 showImg(https://segmentfault.com/img/remote/1460000011522427?w=1626&h=1242); 第二章：小程序中级实战教程之预...
摘要：一个完成入门篇二搭建主框架通过第一课的学习，你已经掌握了如何通过调试器来跟上的设计器联调来实时查看设计效果调试代码了，接下来通过一系列的开发教学你将很快上手学习到如何开发一个真正的。 一个App完成入门篇（二）-搭建主框架 通过第一课的学习，你已经掌握了如何通过debug调试器来跟PC上的设计器联调来实时查看UI设计效果、调试代码了，接下来通过一系列的demo开发教学你将很快上手学习到...
阅读 3293·2023-04-25 19:56
阅读 1433·2021-11-12 10:36
阅读 1548·2021-11-08 13:19
阅读 1368·2019-08-30 14:06
阅读 2848·2019-08-30 11:01
阅读 1580·2019-08-29 13:23
阅读 2573·2019-08-29 11:18
阅读 3300·2019-08-26 13:35
