apicloud apicloud

注册
查看: 10086|回复: 9

[新手教程] 从1开始学晋城(四) —— 热门活动

主题:
28
帖子:
88
云币:
757

[新手教程] 从1开始学晋城(四) —— 热门活动

10086 9 | 发表于 2014-12-12 20:20:35 |阅读模式 | |
本帖最后由 老邮局 于 2015-7-23 20:49 编辑

》》更多视频教程请关注 www.9y.cm《《


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


                    

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


1、获取用户的选择
main.html
  1. 49  <div class="item">
  2. 50          <a tapmode="" onclick="openActDetail('{{=it[i].id}}');">
复制代码
上一篇中,我们从云端数据库读取了数据,填充了“首页”,其中每个“热门活动”都对应一个ID。当用户点击某个“热门活动”后,会openwin一个窗口,再次连接到云端数据库,通过ID辨识,下载对应页面详细数据。

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

3、用获取的数据填充模板。
actDetail-con.html
  1. 14  <div id="main">
  2. 15          <script id="act-template" type="text/x-dot-template">     // 定义doT模板
  3. 16                  <div id="banner">                                                         // 定义banner部分
  4. 17                          <img src="{{=it.poster.url}}" />
  5. 18                          <label id="activeTitle">{{=it.title}}</label>
  6. 19                          <a class="fav" id="activeId" tapmode="" onclick="collect(this);" act-id="{{=it.id}}">收藏</a>
  7. 20                  </div>
  8. 21                  <ul id="info" class="shadow">                                     // 定义列表部分
  9. 22                          <li class="date">{{=it.date}}</li>
  10. 23                          <li class="address">{{=it.address}}</li>
  11. 24                  </ul>
  12.         
  13.         26-34行,是关于多图片的横滚,这里按下不表。

  14. 36                  <h2>【活动介绍】</h2>
  15. 37                  <p id="actIntro">                  //  具体的活动文字介绍
  16. 38                          {{=it.intro}}
  17. 39                  </p>
  18. 40          </script>
  19. 41          <div id="act-detail"></div>        // 最终上述模板会填充到这里!
  20. 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
  1. 11  html,body{
  2. 12          background-color: transparent;
  3. 13  }
复制代码

2、设置头部具体div的背景透明
ActDetail.css     (两Frame的css由上一级容器窗口ActDetail.css统一控制)
  1. #header{
  2.         background-color: transparent;
  3. }
复制代码


另外,其实对于晋城官方并没有怎么优化。比如每次打开页面都会重新在云端下载数据,其实加载完一次可以先缓存下来嘛,再次打开页面可以判断下是不是真的需要再次下载,这个任务就交给我们小白实现啦。





文章导航:
从1开始学晋城(一) —— 概览
从1开始学晋城(二) —— 首页main部分
从1开始学晋城(三) —— 蓝色样式

从1开始学晋城(四) —— 热门活动
从1开始学晋城(五) —— 下拉菜单

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

主题:
14
帖子:
114
云币:
561
发表于 2014-12-12 20:35:57 |
支持一下吧

主题:
0
帖子:
14
云币:
26
发表于 2014-12-15 00:49:26 |
醍醐灌顶      很详细  谢谢了

主题:
2
帖子:
9
云币:
25
发表于 2014-12-16 10:46:35 |
老邮局的帖子挺喜欢看!顶~

主题:
8
帖子:
363
云币:
2726

APICloud粉丝

发表于 2015-7-8 18:40:47 |
好东西,赞一下

驾校小白

UID:166352

主题:
0
帖子:
15
云币:
23
发表于 2015-9-26 15:44:20 |
谢谢分享

主题:
0
帖子:
6
云币:
14
发表于 2016-1-26 22:55:54 |
谢谢分享,让小白的大脑一点一点的开窍

主题:
0
帖子:
2
云币:
13
发表于 2016-9-22 18:21:53 |
牛, 图画的很好

马路杀手

UID:451969

主题:
77
帖子:
309
云币:
582

女朋友强者APICloud粉丝

发表于 2016-12-21 08:56:42 |

谢谢分享

主题:
1
帖子:
8
云币:
27
发表于 2017-4-6 15:07:51 |
https://community.apicloud.com/b ... hread&tid=55938

function tijiao(){
  
    var client = new Resource("A6945307925821", "8A5F43DE-2BBB-F6B4-DEB3-610CED2515E7");
var Model = client.Factory("jilu");
   var getUrl='/jilu/count?filter=';
            var urlParam={
                    where:{username:uname}
            }
               ajaxRequest(getUrl + JSON.stringify(urlParam) , 'GET', '', function (ret, err) {
              if( input[type="radio"]:checked ){
             
                     
                    var bodyParam = {
                        a1: '正常',
              }
             
             
                    };
                    ajaxRequest(registerUrl, 'post', JSON.stringify(bodyParam), function (ret, err) {
                        if (ret) {  api.alert({
                                msg: '数据保存成功!'
                             
                            }, function () {
                           
                                api.closeWin();
                            });
                            }
                            }
                            }
                            }
                            )}
                                       
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表