这是一个系列的文档，长期目标是利用DeviceOne开发一些目前使用广泛的优质手机应用，我们会最大化的实现这些应用的每一个功能和细节，不只停留在简单的UI模仿和Demo阶段，而是一个基本可以使用的实际App。
在实现的过程中，会有很多困难，还会发现有一些功能目前缺乏组件支持而无法实现，也会碰见各种移动开发中都会碰到的常见技术问题。一步一步的操作和问题的解决可以让开发者直观的了解通过DeviceOne如何开发一个实际App，也可以了解移动开发本身的很多技术细节，可以让App开发者少走很多弯路。
这个文档主要介绍微信的模仿。
第一部分是框架的搭建
UE和UI设计，通常App的开发需要产品人员的UE设计和美工人员的UI设计，这二个步骤完成后才开始功能实现。我们现在是模仿已有的微信，这些步骤都可以省去，看下图是美工提供的主界面UI设计图，里面的元素的尺寸都标记了。
1.新建项目：我们选择了Simple template，选择空模板是因为我们可以更细致的讲解开发的过程。实际上这个项目是可以选择Multi View with ViewShower模板更合适。
2.简单分析一下主界面，整个主界面的尺寸是iphone6的尺寸750*1334. 分上下二个部分，底部是一个Bottom Bar导航栏，上面是4个独立的界面，这4个界面永远只有一个界面显示，其他三个界面在内存中，靠底部的导航来切换，这个适合用do_ViewShower为框架的主体如下图：
对应这个设计，我们在新建的项目上删除自动生成的button，添加一个do_ALayout组件和do_ViewShower组件，设置它们的高宽和x，y坐标：
3.接下来我们为ViewShower增加4个分页，在这里我还强调一下，实际App会多人参与，我们的代码结构要清晰易读，命名尽量使用英文，实在不行使用中文全拼，包括要建立多级子目录，不要都混在一起。在这里我们增加4个子目录：chats, contacts, discover, me. 右键每个子目录，选择New--Other--DeviceOne--UI File,创建4个index.ui,对应的index.ui.js会自动生成。
这里注意把这4个ui文件对应的根节点ALayout的高度设置为1220，因为这4个ui文件都是主界面的ViewShower的子view，不应该超过ViewShower的大小。
另外为每个ui里都添加一个label，标记中文名，只是一会儿debug看真实效果更清楚。
4.Bottom Bar内简单添加4个按钮，然后添加相应的js代码实现ViewShower的页面切换功能。这里提一个技巧，选中2个或以上组件，可以使用各种对齐方式的功能，如下图：
5.在index.ui.js里添加ViewShower初始化的代码和按钮的点击事件。
var viewshower = ui("viewshower"); var page = sm("do_Page"); // 为viewshower增加4个子页面 viewshower.addViews([ { id : "chats",// 页面的标示 path : "source://view/chats/index.ui"// 页面的路径 }, { id : "contacts", path : "source://view/contacts/index.ui" }, { id : "discover", path : "source://view/discover/index.ui" }, { id : "me", path : "source://view/me/index.ui" } ]); // 初始化先显示第一个页面 viewshower.showView("chats"); var button1 = ui("do_Button_1"); button1.on("touch", function() { viewshower.showView("chats"); }); var button2 = ui("do_Button_2"); button2.on("touch", function() { viewshower.showView("contacts"); }); var button3 = ui("do_Button_3"); button3.on("touch", function() { viewshower.showView("discover"); }); var button4 = ui("do_Button_4"); button4.on("touch", function() { viewshower.showView("me"); });
6.我们来真机看看运行效果，启动设计器的调试服务，启动手机端的调试程序，最后我们看到的效果图如下，iOS和Android界面完全一样。点击底部的4个按钮，切换效果都是好的：
7. 这一节的内容就到这里，框架工作完成了吗？只能说框架的第一步工作完成，如果我们有很多同事一起开发这个App的话，我们可以把工作开始分开并行，接下来分5个部分：