淘宝SDK高级模板开发阶段总结

一、全局设置

全局设置，可以把全局模块加到header里面。因为，淘宝在J_TWidget的div里都会在debug的时候在J_TBox里加上一个ui-dd样式，而在非debug的时候是没有ui-dd样式的，所以利用这个特点，可以把全局模块设置成正常浏览不可见，debug可见的特性。

区域的具体代码：

<div  class = "layout grid-m cloudcome" > <div  class = "J_TRegion" > <? echo  include_local_module( 'global' , 'global-1' ); ?> </div> </div> global 模块的具体代码： <div  class = "J_TBox global_cloudcome"  <?  echo  $_MODULE_TOOLBAR ;?>> <div  class = "setting"  style= "height:40px;" > <center>★请不要在其他地方添加此模块!全局设置参数,保存后刷新页面,如有不明请咨询我们.★</center> <? //全局参数处理与输出 ?> </div> </div>

其CSS样式为：

.cloudcome{ height : 40px ;  overflow : hidden ;} .cloudcome .global_cloudcome{ visibility :  hidden ;   position : relative ;  background-color : #6E9B07 ;  height : 40px ;} .cloudcome .ui-dd{ display : block ;  visibility :  visible ;} .cloudcome .ui-dd .ds-bar-del{ display : none ; width :  0px ; height :  0px ; visibility :  hidden ;} .cloudcome .setting{  position : relative ;  width : 100% ;  height : 40px ;  color : #fff ;  font-size :  18px ;  line-height : 40px ;}

二、约定俗称

1、模块的命名

模块的命名在20字符以内，其名称为cloud99_slide_950，第一个参数为模块的类别【baby（宝贝列表）、focus（焦点图）、float（悬浮）、article（文章列表）、banner（店铺招牌+导航）、foot（店铺尾部）、search（搜索）等】，第二个参数为组件名，第三个参数为宽度【950、750、630、310、190、auto（100%宽度）、x（没有固定宽度）】。

也许这不是最好的命名方式，但随着模块更深入的开发和创新，将会出现更加明智、更加科学、更加有效的命名方式。

2、Css写法

在测试模块的时候，强烈推荐使用模块化CSS来管理各个模块，而在最后组装成一个模板的时候，就需要把模块化CSS拆开。这是因为这里存在着一个BUG，至少在SDK的1.17版本没有被修复。BUG是这样的：只要当有模块化CSS的模块数量大于2，就不能在debug的时候显示调试信息。而且，存在另外一个BUG，那就是模块化CSS里面，不能涉及标签的background-image的CSS样式，否则就不能加载所有CSS。

这里附带几个常用的CSS：

（1）、滤镜（所有都支持）：

opacity: 0.75 ; filter:progid:DXImageTransform.Microsoft.Alpha(opacity= 75 ); -ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity= 75 );

（2）、圆角（HTML5，ie9以下浏览器不支持）：

border-radius:  4px ; -moz-border-radius:  4px ; -webkit-border-radius:  4px ;

 （3）、ie独有的CSS标识：

下划线：_border【ie6以下版本】

星号：*border【ie7以下版本】

星号加号：*+border【ie7】

[详细内容:http://blog.163.com/koala8211@126/blog/static/411592532010452755415/ ]

在这里不得不说的是，为了买家的购物安全和快捷需求，为了适应社会前进的方向，我们作为前端开发er，不能总是为了去兼容一些已经被淘汰的东西而浪费精力，而羁绊了我们去开发更完美的显示效果。这也是督促中国消费者改变一成不变的慵懒习惯，积极的拥抱新科技、新成果。

3、模块结构

一直推荐模块的结构是这样的：第一层为box，添加一个没有样式的div，其目的就是为了便于debug的时候计算模块内容的高度（值得一提的是，如果debug的时候不能获得高度，我们需要注意这个空白的div是否被添加），然后里层添加两个div，第一个是hd，第二个是bd，按照官方模块的书写方式，便于模块的全局管理。

其主要的结构如下： 

<div  class = "J_TBox box tshop-um tshop-um-image1_popup_750"  <?  echo  $_MODULE_TOOLBAR ;?>> <div> <?php $title = $_MODULE [ 'title' ]; if ( $title != '' ) { echo  '<div><h3><span>' . $title . '</span></h3></div>' ; } /*=============================================*/ $html = '<div></div>' ; echo  $html ; ?> </div> </div>

 还有一点需要说明的就是，在$html里，强烈推荐把所有的bd里面的DOM都书写在一起，最后再echo出来，而不是在中间echo，更不推荐在for循环、foreach循环里echo。

三、开放接口

淘宝的开发接口比较少，但基本可以满足SDK高级模板的开发。主要用到的接口是宝贝类、分类类两类。

1、宝贝类接口

首先需要宝贝的id，宝贝id可以通过直接获取id、间接通过分类、关键词、排行3种方式获得，其主要代码为：

【XML】

?

<param label= "◆-->宝贝的获取方式"  formType= "select"  readonly= "false"  description= "1"  ptype= "number"  name= "method" ><![CDATA[]]> <option value= "1" >█方式1-->自动获取宝贝(默认)</option> <option value= "2" >▲方式2->根据分类获取宝贝</option> <option value= "3" >★方式3->根据关键字获取宝贝</option> <option value= "3" >▼方式4->手动选择宝贝</option> </param> <param label= "█方式1-->自动获取(无参数)"  formType= "text"  readonly= "false"  description= "留空即可"  ptype= "number"  name= "method_1" ><![CDATA[]]></param> <param label= "▲方式2-->选择分类(1个分类,如果选择了多个分类优先读取第1个分类)"  formType= "categoryForm"  readonly= "false"  description= "choose"  ptype= "category"  name= "method_2" /> <param label= "★方式3-->输入关键字(1个关键字)"  formType= "textarea"  readonly= "false"  description= "1个关键字"  ptype= "textarea"  name= "method_3" ><![CDATA[关键字1]]></param> <param label= "▼方式4-->选择宝贝(可以选择多个宝贝)"  formType= "itemForm"  readonly= "false"  description= "choose"  ptype= "item"  name= "method_4" /> <param label= "◆-->宝贝排序方式"  formType= "select"  readonly= "false"  description= "select"  ptype= "text"  name= "sort" ><![CDATA[]]> <option value= "hotsell" >以热销宝贝升序排序(默认)</option> <option value= "_hotsell" >以热销宝贝降序排序</option> <option value= "ceofp" >以宝贝人气升序排序</option> <option value= "_ceofp" >以宝贝人气降序排序</option> <option value= "price" >以宝贝价格升序排序</option> <option value= "_price" >以宝贝价格降序排序</option> <option value= "newOn" >以最新上架宝贝升序排序</option> <option value= "_newOn" >以最新上架宝贝降序排序</option> <option value= "HotKeep" >以热门收藏升序排序</option> <option value= "_HotKeep" >以热门收藏降序排序</option> </param> <param label= "◆-->宝贝的数量"  formType= "text"  readonly= "false"  description= "大于0的数值,最多20"  ptype= "number"  name= "num" ><![CDATA[8]]></param> <param label= "◆-->宝贝的计数单位"  formType= "text"  readonly= "false"  description= "比如:个/件/箱/张/片/笔等"  ptype= "text"  name= "unit" ><![CDATA[笔]]></param>

 【php】

$method  = $_MODULE [ 'method' ];  //宝贝获取方式,1=自动,2=分类,3=关键字,4=手动,5=半自动 $method_1  = $_MODULE [ 'method_1' ]; $method_2  = $_MODULE [ 'method_2' ]; $method_3  = $_MODULE [ 'method_3' ]; $method_4  = $_MODULE [ 'method_4' ]; $method_5  = $_MODULE [ 'method_5' ]; $sort  = $_MODULE [ 'sort' ];  //宝贝排序方式 $num  = $_MODULE [ 'num' ];  //宝贝的数量 // function  ids( $items ) { $k =0; foreach ( $items  as  $item ) { $ids [ $k ]= $item ->id; $k ++; } return  $ids ; } // if ( $method ==1) //自动 { $items = $itemManager ->queryByKeyword( ' ' , $sort , $num ); $ids =ids( $items ); } else  if ( $method ==2) { $category =json_decode( $method_2 ); if ( count ( $category )==0) //没有选择分类 { $items = $itemManager ->queryByKeyword( ' ' , $sort , $num ); $ids =ids( $items ); } else //选择了分类 { $cat_ids = array (); // $items = $itemManager-> queryByCategory ($categoryId,"hotsell",10);/ foreach ( $category  as  $jsonObject ) { $category_1  =  $shopCategoryManager ->queryById( $jsonObject ->{rid}); // echo 'id1='.$category_1->id; // echo '<br>'; $cat_ids []= $category_1 ->id; $subcategory = explode ( "," , $jsonObject ->{childIds}); foreach ( $subcategory  as  $subcategoryid ) { $category_2  =  $shopCategoryManager ->queryById( $subcategoryid ); // echo 'id2='.$category_2->id; // echo '<br>'; $cat_ids []= $category_2 ->id; } } // $k=count($cat_ids)-1; $cat_id = $cat_ids [0]; $items  =  $itemManager -> queryByCategory ( $cat_id , $sort , $num ); $ids =ids( $items ); // var_dump($cat_ids); } } else  if ( $method ==3) //关键字 { $words =trim( $method_3 ); $items = $itemManager ->queryByKeyword( $words , $sort , $num ); $ids =ids( $items ); } else  if ( $method ==4) //手动 { $ids = $method_4 ; }

 在获得宝贝id之后，可以循环ids获得各个id而读取宝贝相关信息，其主要代码为

foreach ( $ids  as  $key => $value ) { $item = $itemManager ->queryById( $value ); //查询宝贝 $link  = $uriManager ->detailURI( $item );  //宝贝的链接 $price  = $item ->price;  //宝贝的价格 $name  = $item ->title;  //宝贝的标题 $sold  = $item ->soldCount;  //宝贝的销量 $collected  = $item ->collectedCount ;  //宝贝的收藏量 $pic  = $item ->getPicUrl(160);  //宝贝图片【有40、60、80、100、120、160、220、310、620】 }

2、分类类接口

分类的获取和宝贝类似，其主要代码如下：

【XML】

<param label= "获取分类方式"  formType= "select"  readonly= "false"  description= "选择获取分类方式"  ptype= "number"  name= "method" ><![CDATA[]]> <option value= "0" >自动获取分类(默认/建议)</option> <option value= "1" >手动选择分类</option> </param>

【PHP】

if ( $_MODULE [ 'method' ]==0) //auto自动获取所有分类 {      //1级分类      $category_arr = $shopCategoryManager ->queryAll();      foreach ( $category_arr  as  $shopCategory )      {          $name1 = $shopCategory ->name;          $href1 = $uriManager ->shopCategoryURI( $shopCategory );          //2级分类          $subcategory_arr = $shopCategoryManager ->querySubCategories( $shopCategory ->id);          foreach ( $subcategory_arr  as  $shopCategory )          {              $name2 = $shopCategory ->name;              $href2 = $uriManager ->shopCategoryURI( $shopCategory );          }      } } else //1===>手动分类 {      //1级分类      $category_arr =json_decode( $_MODULE [ 'hand' ]);      foreach ( $category_arr  as  $jsonObject )      {          $category_1  =  $shopCategoryManager ->queryById( $jsonObject ->{rid});          $name1 = $category_1 ->name;          $href1 = $uriManager ->shopCategoryURI( $category_1 );          //2级分类          $subcategory_arr = explode ( "," , $jsonObject ->{childIds});          foreach ( $subcategory_arr  as  $subcategoryid )          {              $category_2  =  $shopCategoryManager ->queryById( $subcategoryid );              $name2 = $category_2 ->name;              $href2 = $uriManager ->shopCategoryURI( $category_2 );          }      } }

3、其他接口

（1）、店铺收藏：

$link_fav = $uriManager ->favoriteLink();

 （2）、店铺首页：

$pageLinks = $shopManager ->getShopPageLinks();   $link_home = $pageLinks [0]->href;

 （3）、宝贝收藏【未开放】：

$link_baby = 'http://favorite.taobao.com/popup/add_collection.htm?id=' . $baby_id ';

（4）、掌柜说【未开放】：

$link_shuo = 'http://shuo.taobao.com/microshop/front.htm?follow=true&userId=' . $_user ->id;

（5）、旺旺客服【半开放】

//客服分流   $link_wangwang = 'http://amos.im.alisoft.com/getcid.aw?v=2&uid=' . $id . '&site=cntaobao&s=2&groupid=0&charset=utf-8' ;   //客服不分流   $link_wangwang = 'http://www.taobao.com/webww/ww.php?ver=3&touid=' . $id . '&siteid=cntaobao&status=2&charset=utf-8' ;

 （6）、购物车【未】

http: //cart.taobao.com/my_cart.htm

  （7）、我的订单【未】

http: //trade.taobao.com/trade/itemlist/list_bought_items.htm