APICloud 社区从1开始学晋城(四)

智博文化传播 2016-10-03

展开全文

本帖最后由老邮局于 2015-7-23 20:49 编辑

OK，我们来分析一下“热门活动”页面。我们先来观摩一下这些页面的特点：

2.png (181.57 KB, 下载次数: 9)

下载附件

2014-12-12 19:34 上传

规律就是：所有热门活动的页面模板都是一样的，只是图片和文字不同。那好啦，我们就可以把页面模板定义好，然后根据用户不同的选择，更新不同的图片和文字内容。

1、获取用户的选择
main.html

49 <div class="item">
50 <a tapmode="" onclick="openActDetail('{{=it[i].id}}');">

复制代码

上一篇中，我们从云端数据库读取了数据，填充了“首页”，其中每个“热门活动”都对应一个ID。当用户点击某个“热门活动”后，会openwin一个窗口，再次连接到云端数据库，通过ID辨识，下载对应页面详细数据。

2、根据ID辨识，下载云端数据。
actDetail-con.js

9 model = api.require('model'); // 引入model
10 query = api.require('query'); // 引入query
11 var dataId = api.pageParam.dataId; // 获取触发页面传递来的活动ID参数
12 query.createQuery(function(ret, err) { // 创建查询
13 if (ret && ret.qid) { // 创建查询成功后返回句柄qid
14 var queryId = ret.qid;
15 query.whereEqual({ // 设置查询条件，where id=dataId
16 qid: queryId,
17 column: "id",
18 value: dataId
19 });
20 model.findAll({ // 进行云端查询，SELECT * FROM 'activity' where id=dataId
21 class: "activity",
22 qid: queryId
23 }, function(ret, err) {
24 if (ret) {
25 // alert(JSON.stringify(ret[0]));
26
27 var content = $api.byId('act-detail'); // 这里上一篇讲过了,doT模板解析
28 var tpl = $api.byId('act-template').text;
29 var tempFn = doT.template(tpl);
30 content.innerHTML = tempFn(ret[0]);
31
32 var picLen = ret[0].picture.split(',').length; // 获取横向滚动图片的个数
33 if(picLen >= 4){ // 如果滚动图多余4张
34 //carousel
35 $('#picture').carousel(); // 调用国内滚动图片效果，这个地方先按下不表，后面会说明
36 }
37 } else {
38 // alert(JSON.stringify(err));
39 }

复制代码

3、用获取的数据填充模板。
actDetail-con.html

14 <div id="main">
15 <script id="act-template" type="text/x-dot-template"> // 定义doT模板
16 <div id="banner"> // 定义banner部分
17 <img src="{{=it.poster.url}}" />
18 <label id="activeTitle">{{=it.title}}</label>
19 <a class="fav" id="activeId" tapmode="" onclick="collect(this);" act-id="{{=it.id}}">收藏</a>
20 </div>
21 <ul id="info" class="shadow"> // 定义列表部分
22 <li class="date">{{=it.date}}</li>
23 <li class="address">{{=it.address}}</li>
24 </ul>
26-34行，是关于多图片的横滚，这里按下不表。
36 <h2>【活动介绍】</h2>
37 <p id="actIntro"> // 具体的活动文字介绍
38 {{=it.intro}}
39 </p>
40 </script>
41 <div id="act-detail"></div> // 最终上述模板会填充到这里！
42</div>

复制代码

》行16-20对应红色区域
》行21-24对应蓝色区域
》行26-34对应空白区域
》行37-39对应绿色区域
页面对应的css样式很简单，不再赘述。

上半部分说明的是程序的处理过程。下半部分我们从框架设计角度审视一下(虽然我只有中专文化水平)。

活动详情页面分为两部分：header和main部分。两个页面各自独立的好处是便于修改维护；如果以后我再有需求，直接再写个html页面也载入进来就可以，扩展性极强。这种功能性的扩展就好比C++的继承，增加的新功能不需要改已有代码，而是继承原有部分再添加自己的业务逻辑。

晋城是这样的：
1、主窗口(main.html)中，openWin打开一个容器窗口（ActDetail.html）
2、在容器窗口的js加载事件(apiready)中，openFrame两个页面（ActDetail-head.html和ActDetail-con.html）
3、Frame的数据由云端获取，样式统一由容器窗口的ActDetail.css控制。

我画个图感觉一下：

①、将用户选择的“活动ID”，传递到窗口容器ActDetail.html中。
②、在ActDetail.html其js的加载事件中，openFrame两个窗口，并传递“活动ID”至新页面（ActDetail-con.html）。
③、ActDetal-con.html页面的js部分，会根据不同的“活动ID”，发起云端数据查询。
④、云端返回的数据给ActDetail-con.html页面，并同ActDetail-head.html组合后，于容器窗口ActDetail.html中显示，样式由容器窗口的ActDetail.css统一控制。

其他：关于header的透明(ActDetail-head.html)，我们需要设置两个地方：
1、设置其所在html页面整体背景透明。
ActDetail-head.html