第六讲SDK高级模板大讲堂.docx

上传人:b****6 文档编号:8254241 上传时间:2023-01-30 格式:DOCX 页数:18 大小:1.77MB
下载 相关 举报
第六讲SDK高级模板大讲堂.docx_第1页
第1页 / 共18页
第六讲SDK高级模板大讲堂.docx_第2页
第2页 / 共18页
第六讲SDK高级模板大讲堂.docx_第3页
第3页 / 共18页
第六讲SDK高级模板大讲堂.docx_第4页
第4页 / 共18页
第六讲SDK高级模板大讲堂.docx_第5页
第5页 / 共18页
点击查看更多>>
下载资源
资源描述

第六讲SDK高级模板大讲堂.docx

《第六讲SDK高级模板大讲堂.docx》由会员分享,可在线阅读,更多相关《第六讲SDK高级模板大讲堂.docx(18页珍藏版)》请在冰豆网上搜索。

第六讲SDK高级模板大讲堂.docx

第六讲SDK高级模板大讲堂

【SDK高级模板大讲堂  第6讲】SDK模板中模块开发案例

本帖被采倩执行置顶操作(2012-05-30)

SDK模板中模块开发案例

1.       创建模块 

在SDK模板首页创建模块 

创建一个名为“小雨”的这么一个模板

 

接着往下填写信息 

 

点击下一步之后系统自动为我们生成一个文件夹,名称就是目录名称xiaoyu 

 

          SDK首页已经有新模板了点击进入就可以了 

 

进入到模块里面之后 

 

我们找到模块管理创建一个“宝贝展示”的模块,模块ID就是目录名 

 

我们继续单击保存,如果在模块管理里面有我们刚才创建的模块,代表你已经创建成功了. 

 

现在我们去找到我们刚才创建的模板和模块 

在SDK安装目录/htdocs/ 

 

找到我们创建的模板目录之后进入在找到”modules”这个文件夹 

 

在这个文件夹地下找到我们创建的模块,”宝贝展示”ID为”baobei” 

 

里面会有两个文件,一个是PHP类型文件,一个是XML类型文件 

 

那么现在我们就来开发我们的模块了 

1.       首先我们打开baobei.php这个文件,这里我用的是Dreamweaver为大家演示 

打开之后是一片空白,我们需要添加淘宝wiki提供的格式来开发,加入这段代码 

 

注意:

每个模块都必须要有这个DIV层,主要是为了JS编辑器渲染。

 

加入我们自己的代码:

我以table为例,在我们刚创建的“宝贝展示”模块里添加代码 

php 

/* 

  * 获取单个宝贝的属性 

  *$id 宝贝主键 

  *$arr 需要返回的数据 

  */ 

functiongetItemInfo($id,$arr='') 

{       

global$itemManager; 

if($arr==''){ 

          return$itemManager->queryById($id); 

else 

          return$itemManager->queryById($id)->$arr; 

           

$ditems  =$itemManager->queryByKeyword("","",6);//默认数据 

$results=""; 

foreach($ditemsas$item) 

          $results.=$item->id.',';                                               

$item_list=  $_MODULE['items']?

$_MODULE['items']:

rtrim($results,','); 

$item_id_s  =explode(',',$item_list); 

//分离右侧小图 

$right_s_imgs=$_MODULE['right_s_img']?

explode(',',$_MODULE['right_s_img']):

""; 

//分离小图文字 

$s_img_texts=$_MODULE['s_img_text']?

explode(',',$_MODULE['s_img_text']):

""; 

//分离左侧大图 

$left_b_imgs=$_MODULE['left_b_img']?

explode(',',$_MODULE['left_b_img']):

""; 

?

=$MID?

>"

=$_MODULE_TOOLBAR?

>> 

 

           

=$_MODULE['title_height']?

>px;"> 

 

=$_MODULE['title_text']?

 

 

—JS组件部分 --> 

          'effect':

'scrollx', 

                    'prevBtnCls':

'prev', 

                    'nextBtnCls':

'next', 

                    'contentCls':

'more', 

                    'navCls':

'more-nav', 

                    'activeTriggerCls':

'm-active', 

                    'autoplay':

true, 

                    'duration':

0.5 

              }"> 

           

 

           

 

php 

                                                for($i=0;$i

                                                         

                                                ?

  •  

    =$uriManager->detailURI(getItemInfo($item_id_s[$i]));?

    >"target="_blank">

    =empty($_MODULE['items'])?

    "modules/new/images/big.jpg":

    ($left_b_imgs[$i]?

    $left_b_imgs[$i]:

    "modules/new/images/big.jpg")?

    >"/> 

  •  

     

    =$uriManager->detailURI(getItemInfo($item_id_s[$i]));?

    >"target="_blank"class="intro">

    =getItemInfo($item_id_s[$i],'title')?

    RMB:

    =getItemInfo($item_id_s[$i],'price')?

    >已售:

    =getItemInfo($item_id_s[$i],'soldCount')?

    >件人气:

    =getItemInfo($item_id_s[$i],'collectedCount')?

    >点 

     

     

    php 

                                                            if($i>=5)break;}?

     

     

     

    php 

                                                    for($i=0;$i

                                                    ?

  •  

    =$uriManager->detailURI(getItemInfo($item_id_s[$i]));?

    >"target="_blank">

    =empty($_MODULE['items'])?

    "modules/new/images/pic$i.jpg":

    (!

    empty($right_s_imgs[$i])?

    $right_s_imgs[$i]:

    "modules/new/images/pic$i.jpg")?

    >"/> 

     

    =empty($_MODULE['items'])?

    getItemInfo($item_id_s[$i],'title'):

    ($s_img_texts[$i]?

    $s_img_texts[$i]:

    getItemInfo($item_id_s[$i],'title'))?

    > 

  •  

    phpif($i>=5)break;}?

     

     

     

               

              

    --}主内容区 --> 

     

     

    这里的这个模块我把它定性成950的模块,如果要其他类型只需要设置其宽度即可. 

    接下来我们就要添加自定义图片和样式了,在”xiaoyu”的目录里面找到”assets” 

    进入之后如下图所示 

     

    Images存放所用到的素材文件 

    Stylesheets存放css文件,进入到stylesheets文件夹 

     

    blue.css是我们模板自定义的样式了,而global.css是系统样式文件(可以修改但是请适当,建议不修改),系统会同时加载这两个文件,(当然你如果喜欢将自定义的样式加到global.css里面也没啥问题,只是便于管理和开发所以建议写到blue.css里面) 

    我们打开“blue.css”文件,同样文件是空的,我们添加自己的样式在里面, 

     

     

     

     

     

    .wd-new.content.more-nav.m-activespan{ 

            background:

    #f64557; 

            opacity:

    0.93; 

            -ms-filter:

    progid:

    DXImageTransform.Microsoft.Alpha(opacity=93); 

            filter:

    progid:

    DXImageTransform.Microsoft.Alpha(opacity=93);         

    --}模块主样式 --> 

    我们正对wd-new层设置样式 

     

    现在添加我们的图片(图片路径是完整路径),及调用系统的一些接口 

     

    调用宝贝数据

     

     

    $_MODULE[‘xxxxxxx’]里面的名称和xml里的配置文件name=”xxxxx”一直,这样前端就能调用xml里面的数据了。

     

    XML 数据文件代码:

     

    xmlversion="1.0"encoding="GBK"standalone="yes"?

    noNamespaceSchemaLocation="../../../module.xsd"xmlns:

    xsi="http:

    //www.w3.org/2001/XMLSchema-instance"> 

    —程序运行时需要使用的模块ID,通过此ID来加载模块到页面 --> 

    new           

    — 模块使用过程中添加模块时所显示的模块名称 -->             

    [950]长图轮播推荐 

    new.php 

    /modules/new/images/icon.jpg 

    — 模块使用时对模块的描述内容 --> 

    支持6个宝贝展示。

    每个对应大图小图各一张。

     

    true 

     

            modules/new/images/hd.jpg 

            

    70(留空显示默认)"> 

                      热卖新品推荐 

                       

                      

    188*283 多个已英文逗号隔开(与“选择宝贝”一一对应,留空为默认)"> 

                       

                       

                       

                      

    375*570 多个已英文逗号隔开(与“选择宝贝”一一对应,留空为默认)"> 

           

     

     

    回到首页现在模块已经开发完成,那么效果在那里看,在模板首页点击预览 

     

    首页什么都没有,不要慌,这里我们还需要一个最后的步骤,那就是将模块添加到首页, 

    在xiaoyu的文件夹底下找到index.php文件,并打开它,里面也是一如既往的空啊(建议淘宝以后SDK创建时能够把默认通用的布局代码给添加进去 ),现在添加布局代码提供给大家,复制即可使用 

    --index.php--> 

     

     

     

    —注意J_TRegion这个必须要有 --> 

    php 

              echoinclude_modules("index-top",array( 

                              //自定义模块添加 

                              array('id'=>"baobei"), 

                                  //系统模块调用 

                                  array("shortname"=>"shop.autoSpread","version"=>"1.0-wangpu"), 

              )); 

            ?

     

     

     

    -- 系统模块左右分栏 --> 

     

    --750分栏 --> 

     

     

            

    php 

              echoinclude_modules("index-m",array( 

                            //自定义 

                      //array('id'=>"xxxxx"), 

                                //系统 

                                array("shortname"=>"shop.autoSpread","version"=>"1.0-wangpu"), 

              )); 

            ?

     

     

    --190分栏 --> 

     

                      

    php 

              echoinclude_modules("index-s",array(   

                          //自定义 

                          array('id'=>"xxxx"), 

                          //系统 

                          array("shortname"=>"shop.itemCategory","version"=>"1.0-common"), 

              )); 

          ?

     

     

     

    现在我们在来看看首页,已经出来了,这样已经成功制作完成了。

     

    关于模块XML配置请参考wiki地址是:

     

    附:

    SDK高级模板大讲堂课程汇总:

    [此帖被采倩在2012-05-3014:

    33重新编辑]

    展开阅读全文
    相关资源
    猜你喜欢
    相关搜索

    当前位置:首页 > 小学教育 > 语文

    copyright@ 2008-2022 冰豆网网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1