大家好，欢迎跟大家分享使用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"
)
var
do_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
就完成了。
效果图上：
下载地址