淘宝SDk高级模板开发入门

社会越进步，人们就越懒。网络购物越来越迎合了宅客们的欢迎，淘宝网正是在这么一个大环境下越发走的稳健、强势。越来越多服务于淘宝的行业应运而生，SDK高级模板的开发就是其中的一种。SDK高级模板区别于其他的店铺模板就是，对于设计者有更多的自定义权限，可以灵活的使用各种效果，可以大胆的渲染页面；对于使用者，有更为简便的操作设置，可以自定义更多的参数，使开店的门槛降低到最低，只要能看懂设计者书写的label和description即可。

话说，上一个工作也是涉及到淘宝店铺的，但都是做宝贝处理、上传、维护等工作，甚是乏味，没有领略到后台开发的妙处，深感不合，于是在工作之余结合自己的兴趣点学习了很多，终于在11月结尾强势跳槽（有点夸张^^）。下面详细的说明下淘宝SDk高级模板的开发入门，只是个人的经验。

上头要求一个星期之内开发出一套模板，这样对于我一个新手来说，不知道难易，就那样接受了下来。如今周一到周六，6天的时间过去了，还是如期结束了，这不仅要归功于程序设计，更多的是美工方面的强烈配合。

以上是背景。

一、必备的知识

1、前端知识：html常用标签及语义和用法、CSS的常用样式和基本兼容写法。

2、后台知识：PHP的基本语句。

二、必需知识

1、服务于淘宝店铺，当然要符合淘宝官方的开发标准，详细可以了解官方的WIKI（http://wiki.zx.taobao.com/index.php/%E9%A6%96%E9%A1%B5）。主要的是模板的布局（layout）、区域（region）、模块（box）三个之间的关系（当然是主从关系）。

2、布局的写法：grid-,常用的是950通栏（grid-m），190+750左右布局（grid-s5m0），750+190左右布局（grid-m0s5）。

3、区域的写法：区域（J_TRegion）内可以用两种方式载入模块，一是array方法，二是直接echo方法，在区域外不能用array。

4、模块的写法：模块的第一层class名只为J_TBOX，特殊情况除外（设计到position=fixed），强烈建议不要设置宽高，第二层建议用div包裹，强烈建议设置他的宽和高，否则在debug的时候不能正常的定位到模块的宽高（个人见解）。

5、文件的命名规则和要求：

（1）、所有的标签不能使用id属性（原因是可能与淘宝官方的命名重复），所以只能用class属性，唯一的class也等于id，当然了也有class的规则，不能使用tb-shop前缀的class。

（2）、每一个模板文件都单独的文件夹区分开，放在根目录下的htdocs下面，每一个模板下都必须包含index.php（主页）、header.php（所有页面公共的头部）、footer.php（所有页面公共的尾部）、detail.php（宝贝详情页）、detail_left.php（宝贝详情页左）、detail_right.php（宝贝详情页右）、article.php（文章页）、article_list.php（文章列表页）、searchList.php（搜索列表页）、onsale.php（其他页），其中不需要特殊配置的就是宝贝详情页，需要详细配置的是主页。

（3）、所有的模块都放在modules文件夹下面，每一个模块单独的文件夹，包含配置文件module.xml和模块.php，每一个的模块的样式都写在静态文件夹assets下的stylesheets的blue.css里面，调用的图片放在images里面，建议每一个模块单独的文件夹区分开。

（4）、调用图片的路径：css（样式文件）里以“../images/”调用，xml（配置文件）里用“/assets/”调用，php（主文件）里用“./assets/”调用。

6、Widget写法和开放接口。

三、具体的模块

1、最主要的一个模块当然就是焦点图了。焦点图的轮播效果，可以直接调用官方（shop.picRound）的，详细的官方模块可以到官网查询（http://wiki.zx.taobao.com/index.php/%E6%A8%A1%E5%9D%97%E7%BC%96%E5%86%99%E8%A7%84%E8%8C%83）。其中必须要到的就是官方Widget里的Slide插件（http://wiki.zx.taobao.com/index.php/Widget%E8%A7%84%E8%8C%83#Slide.E5.8D.A1.E7.9B.98.E6.95.88.E6.9E.9C），官方也有样例和详细说明。

PHP代码:

<div class="J_TBox box" <? echo $_MODULE_TOOLBAR;?>>

<div class="J_TWidget m_focus" data-widget-type="Slide" data-widget-config="

```
{
```

'effect':'<? echo $_MODULE['m_focus_effect'];?>',

'autoplay':<? echo $_MODULE['m_focus_autoplay'];?>,

```
'easing':'easeBoth',
```
```
'countdown':true,
```

'delay':'<? $delay=$_MODULE['m_focus_delay']/1000;echo $delay;?>',

'duration':'<? $duration=$_MODULE['m_focus_duration']/1000;echo $duration;?>',

```
'steps':'1',
```
```
'activeTriggerCls':'m_focus-active',
```
```
'contentCls':'m_focus-content',
```
```
'navCls':'m_focus-nav'
```
```
}">
```

<!--delay:激活的时候延迟多少后激活;duration:每次动画的时间;-->

<div class="m_focus-imgs"><!--图片区-->

```
<ul class="m_focus-content">
```
```
<?php
```

 echo '<li><a href="'.$_MODULE['m_focus_href_1'].'"><img src="'.$_MODULE['m_focus_url_1'].'"></a></li>';

```
for($i=2;$i<=4;$i++)
```
```
{
```

 echo '<li><a href="'.$_MODULE['m_focus_href_'.$i].'"><img src="'.$_MODULE['m_focus_url_'.$i].'"></a></li>';

```
}
```
```
?>
```
```
</ul>
```
```
</div>
```
```
<ul class="m_focus-nav">
```
```
<?
```

 echo '<li><a><img width="230" height="96" src="'.$_MODULE['m_focus_thumbnail_1'].'"></a></li>';

```
for($i=2;$i<=4;$i++)
```
```
{
```

 echo '<li><a><img width="230" height="96" src="'.$_MODULE['m_focus_thumbnail_'.$i].'"></a></li>';

```
}
```
```
?>
```
```
</ul>
```
```
</div>
```
```
</div>
```

CSS代码

/******************************************

```
      **  模块 m_focus
```
```
      **  焦点图(4个图)
```
```
      **  2011年12月15日13:01:52
```
```
      **  底部带有缩略图
```

*******************************************/

```
.m_focus{
```
```
      width:946px;
```
```
      height:409px;
```
```
      overflow:hidden;
```

      /*background-image:url(../images/m_focus/m_focus-bg.jpg);

```
      background-repeat:no-repeat;*/
```
```
      border:2px solid #888888;
```
```
}
```
```
/*焦点图*/
```
```
.m_focus-imgs{
```

      width:942px;/*950-2*2-2=944;图像的大小是944-2=942px;*/

```
      overflow:hidden;
```
```
      height:300px;
```
```
      margin-left:2px;
```
```
      margin-top:2px;
```
```
}
```
```
.m_focus-imgs li{
```
```
      float:left;
```
```
}
```
```
/*滚动的操作区*/
```
```
.m_focus-nav{
```
```
    height: 100px;
```
```
    position: relative;
```
```
    width: 942px;
```
```
    z-index: 9;
```
```
      margin-top:3px;
```
```
      margin-left:2px;
```
```
}
```
```
.m_focus-thumbnail{
```
```
      float:left;
```
```
      display:block;
```
```
      width:230px;
```
```
      height:96px;
```
```
      margin-left:2px;
```
```
      overflow:hidden;
```
```
      border:1px solid #888888;
```
```
}
```
```
.m_focus-nav li:first-child{
```
```
      margin:0;
```
```
}
```
```
.m_focus-active{
```
```
      border:2px solid #72AA25;
```
```
}
```

XML代码

<parameters>
<param label=“焦点图自动播放” formType=“select” readonly=“false” ptype=“text” name=“m_focus_autoplay” description=“是否”><![CDATA[]]>
<option value=“true”>自动播放(默认)</option>
<option value=“false”>不自动播放</option>
</param>
<param label=“选择焦点图的特效” formType=“select” readonly=“false” ptype=“text” name=“m_focus_effect” description=“是否”><![CDATA[]]>
<option value=“fade”>淡入淡出(默认)</option>
<option value=“scrollx”>左右滑动</option>
<option value=“scrolly”>上下滑动</option>
</param>
<param label=“特效延迟时间” formType=“text” readonly=“false” description=“建议100-500,格式:数值,单位:毫秒” ptype=“number” name=“m_focus_delay”><![CDATA[100]]></param>
<param label=“特效持续时间” formType=“text” readonly=“false” description=“建议100-1000,格式:数值,单位:毫秒” ptype=“number” name=“m_focus_duration”><![CDATA[500]]></param>
<param label=“◆——->缩略图1” formType=“text” readonly=“false” description=“234*100px” ptype=“text” name=“m_focus_thumbnail_1”><![CDATA[assets/images/m_focus/a1–0.jpg]]></param>
<param label=“焦点图1地址” formType=“text” readonly=“false” description=“942*300px” ptype=“url” name=“m_focus_url_1”><![CDATA[assets/images/m_focus/a1–1.jpg]]></param>
<param label=“焦点图1链接” formType=“text” readonly=“false” description=“焦点图的链接地址” ptype=“text” name=“m_focus_href_1”><![CDATA[#]]></param>
<param label=“◆——->缩略图2” formType=“text” readonly=“false” description=“同上” ptype=“text” name=“m_focus_thumbnail_2”><![CDATA[assets/images/m_focus/a2–0.jpg]]></param>
<param label=“焦点图2地址” formType=“text” readonly=“false” description=“同上” ptype=“url” name=“m_focus_url_2”><![CDATA[assets/images/m_focus/a2–1.jpg]]></param>
<param label=“焦点图2链接” formType=“text” readonly=“false” description=“同上” ptype=“text” name=“m_focus_href_2”
未经允许不得转载：哈勃私语 » 淘宝SDk高级模板开发入门
本文共5438个字创建时间：2016年10月1日10:44

相关推荐