dospace第一个版本开源啦！

大家好，欢迎跟大家分享使用deviceone平台开发的dospace这个应用，我先总结一下这个应用的功能点，然后在逐步讲解下。

1.    首页的广告也是服务器获取，随时更新。

2.    视频播放的功能。

3.    朋友圈的功能。

4.    二维码扫描

5.    推送

6.    摇一摇功能。

 

下面我逐步来分析一下我这个应用是如何完成的。

首页分析：

一、首页分两个部分，第一部分是上面的展示部分，使用的是viewshower这个组件，第二部分是下面的bottombar，因为deviceone这个布局都是绝对的，所以将宽度分四部分计算一下，然后将ALayout的宽度设置为屏幕宽度/4的大小，这样下面就平分为四部分，在将里面的图片和文字拖进去，下面就完成了。上面的viewshower就是配置他的template的属性就可以了，我们看下配置的template的代码：

var viewShower =ui("do_ViewShower_1");

var ivs = [ iv0,iv1, iv2, iv3 ];

var labels = [label0, label1, label2, label3 ];

 

var data = [

            {

            "id" : "view0",

            "path" : "source://view/application/index.ui"

            },

            {

            "id" : "view1",

            "path" : "source://view/recommend/recommend.ui"

            },

            {

            "id" : "view2",

            "path" : "source://view/wlt/wlt.ui"

            },  

            {

            "id" : "view3",

            "path" : "source://view/my/index.ui"

            }

         ];

这样就完成了配置。

二、我们看下搜索页面。

这个页面主要使用了摇一摇这个组件，在摇一摇的时候，下面的四个按钮会随机切换来进行点击搜索。
三、下面我们来看看APP的首页是如何来做的。

从上图可以看出我讲这个页面分为3个部分，第一个部分就是topbar的部分，这个部分主要用于展示一些功能和搜索。第二部分就是广告栏的位置。第三部分就是下面的一些推荐的展示。

第一部分主要就是使用ALayout来实现，然后拖拽就可以了。

第二部分主要用到的是do_sliderview这个组件，通过定时器来时间定时滑动，完成自动轮播的功能。

第三部分主要是使用的linerlayout的这个组件，然后使用的垂直的方式，因为这个组件可以垂直或者水平分布，垂直就是一个一个都是向下排列的，我只需要一个一个的放进去就可以了。

通过上述的方式我就实现了APP首页的一个布局了。

四、我们看下推荐APP的页面

通过首页的APP的页面点击进入精品展示。

我们进入到推荐页面，推荐页面就是一个listview的列表页面，使用的主要组件就是do_listview的组件。

我们来解析一下这个部分：

我们看到这页面很简单，就是listview的页面，我们看下他的cell和代码：

 

这个是他的cell的布局，看下代码：

var servicelist = ui("do_ListView_1")

vardo_ListView_data = mm("do_ListData");

servicelist.bindItems(do_ListView_data);

do_ListView_data.addData([

                  { template :0,Name : "纳豆", Brief : "在家中、公司，提前选择要去的餐厅，提前选好菜支付后，到点即可就餐，全城美食、中餐、快餐、小吃等！动动手指即可送达您的手中。",Image : "source://image/nadoupic.jpg" },

                  { template :0,Name : "慧影时间流", Brief : "由慧影Cydow团队精心打造的一款独特的时间管理应用，它的独特主要体现在以下3点：1.对时间显示更加符合人自然感受的设计。2.对日程安排的灵活性。3.他不是一个独立一个应用，未来将与慧影个人智能信息系统同步，有效的个人智能信息库。",Image : "source://image/shijianliu.png" },

                  { template :0,Name : "易经造命", Brief : "良心网推出的一款学习《易经》并灵活运用《易经》的使用教学工具。App提供多套学习的方法和多种《易经》的占卜玩法。！",Image : "source://image/yijing.jpg" },

                  {template : 0,Name : "移动OA", Brief : "主要是用于办公的OA系统，增加了添加好友和即时通信等主流功能。用户在5000以上。",Image : "source://image/OA.png" },

          ]);

 

servicelist.refreshItems();

 

这样就实现了绑定数据。

五、接下来看下朋友圈这个页面，下面是页面。

可以看到上面的布局分为上下两部分，上面的部分就是topbar，主要用户发布消息和登录用的，下面是listview部分，用来展示消息的。解析一下。

上图为添加页面，上面的返回和提交用的，下面就是gridview，这个gridview主要是实现了添加图片这块，添加图片一共可以显示9个。

看下这些cell，因为我们在朋友圈里面发布的时候，会有一些发布文字、发布一行图片、两行图片、三行图片的情况，一行是3个图片。这样我就需要给不同情况做一个判定，然后根据情况来适应。

 

六、我的页面

这个页面相对来说布局就简单多了，主要就是计算的问题。

 

通过上面6步，基本这个APP就完成了。

效果图上：








下载地址