淘宝装修 SDK高级模板开发流程

淘宝网装修市场

高级模板设计指南1

目录

1、本地开发环境 (3)

1.1 什么是SDK (3)

1.2 下载SDK (3)

1.3 安装SDK (4)

1.4 SDK的目录结构 (7)

1.5 启动SDK (8)

2、使用SDK后台 (10)

2.1 创建模板 (10)

2.2 预览模板 (17)

2.3 配置SDK本地属性 (18)

3、模板的标准结构 (18)

4、设计模块 (18)

4.1 创建相关文件资源 (18)

4.2 编写模块代码 (19)

4.2.1 引入标识 (19)

4.2.2 使用KISSY效果 (19)

4.2.3 使用模块参数 (19)

4.2.4 调用数据接口 (20)

4.3 配置模块信息 (20)

5、设计页面 (22)

5.1 结构化页面 (22)

5.2 设计页面 (24)

5.2.1 引入单个模块 (24)

5.2.2 划分页面片区 (25)

5.2.3 配置页面信息 (26)

6、特殊页面要求 (27)

6.1 宝贝详情页面 (27)

6.2 宝贝列表，文章列表页面 (27)

6.3 不可装修的页面 (27)

7、调试模板装修效果 (28)

8、关于白名单过滤 (28)

9、PHP函数 (28)

10、发布模板到装修系统 (28)

2

1、本地开发环境

1.1什么是SDK

SDK是淘宝提供给设计师在本地设计模板的软件开发包，SDK模拟了淘宝店铺环境。

SDK主要包括三个部分：Server，PHP引擎和模拟数据。

Server是指SDK会在本机上启动一个Server，这样我们可以通过浏览器浏览设计的作品。PHP引擎是指设计师只能使用PHP作为模板设计的语言。

模拟数据是指SDK包括了淘宝各个典型的店铺，这样设计师在设计模板时不用考虑实际的数据库。

目前，提供Windows操作系统和Mac操作系统的SDK工具。

1.2下载SDK

装修市场后台下载安装包，安装至本地，创建SDK web控制台。您将使用淘宝ShopSDK 来开发和上传设计模板。在开始设计之前，需在本地部署SDK环境。

设计师登录装修市场后，点击“设计师后台”导航按钮进入。(加入设计师注册流程帐号。)

进入设计师后台界面：

3

4

点击“高级版”进入SDK 模板设计界面，

1.3 安装SDK

下面给大家具体介绍Windows 版本的安装。

假设您已经下载好了Windows 版本的安装文件，马上双击安装可执行文件，

比如当前版本：

进入SDK 欢迎界面，

然后在许可证协议里选择“我接受”

5

进入安装选项界面，选定安装的组件，点击“下一步”

进入安装文件夹界面，选择意向的安装目录，点击“安装

进入安装进度界面，点击“关闭”，即完成SDK的安装。6

7

安装完成后将会在桌面生成“启动设计师SDK ”的图标。

1.4 SDK 的目录结构

首先以设计师身份从淘宝店铺装修市场下载SDK 安装包（Windows 版或者Mac 版），然后将安装包解压到任何一个本地磁盘目录：解压后的目录结构如下图所示：

各个目录的作用如下： • bin 目录：

bin 目录主要放置启动和关闭SDK Server 的脚本命令

• conf 目录：

conf

目录主要存放

SDK

的配置文件以及SDK web 控制台的war 应用

•db目录：

db目录主要存放SDK本体模拟数据文件，设计师设计的模板在本地渲染的时候，数据就是

从此目录的文件中读取的。

•htdocs目录：

htdocs目录存放设计师设计的模板文件，这个目录下可以存放多套模板文件

•jre目录

jre是SDK运行的Java环境。SDK Windows版本会绑定JRE，而Mac版则没有这一目录。Mac

已经提供了默认的Java运行环境

•lib 目录

lib目录主要存放SDK运行所需要的jar包

•logs目录

logs目录主要存放SDK运行的日志文件

•temp目录

temp 目录中存放已经制作好的的SDK模板的zip包，设计师制作模板之后，通过SDK后台

打包生成的zip文件就放在该目录下。

•Readme

Readme文档介绍启动SDK的方法

了解了目录结构以后，接下来介绍如何启动SDK。

1.5 启动SDK

如果你的操作系统是Windows的话，双击桌面上的“启动设计师SDK”图标，系统将自动运行后台文件“启动设计师”并在浏览器中打开SDK后台。

以下是后台启动界面，设计师不用关心细节。同时，为了保持运行状态，请不要关闭它。8

启动中的浏览器界面：

启动后的界面:

9

如果你使用的是Mac版本，这需要打开terminal，然后进入SDK的bin子目录，执行sh startServer.sh即可。

如果需要关闭SDK，只需要在启动窗口中按下Ctrl+C即可关闭SDK（Mac同样）。

SDK不要放在桌面或含有中文名称以及空格的目录下。

SDK Windows版本会绑定Java运行环境，直接启动即可。

SDK Mac或Linux版本不会绑定Java运行环境，Mac会使用系统自动的Java运行环境，而Linux则需要你手动设置JAVA_HOME路径。

OK，到此为止你已经打造好了你本地的SDK环境，让我们一起开始我们的模板设计之旅吧。

2、使用SDK后台

SDK中提供了一个管理后台，在启动SDK之后默认会进去SDK的管理后台，通过SDK 的管理后台，我们可以通过后台管理界面进行多方位本地管理。

2.1 创建模板

进入Web控制台首页，点击“设计新模版”按钮，

10