SDK模板开发简易教程.pptx

SDK模板开发教程 ——五代十国 2012年4月20日 SDK教程大纲 2009-8-22 1、开发SDK模板的前期准备工作 2、SDK的基本概念 3、制作流程 4、调试模板 5、示例（从SDK创建到调试的整个过程） 1、应具备技能： 网页设计师 Ps css html（要求比较高 不会请跳到最后的学习资料） PHP开发 php xml（略懂即可） 2、需要的工具： SDK开发环境 下载地址: Photoshop Dreamweaver（等网页制作工具及PHP开发） 常用网页浏览器 SDK开发前期准备 模板：在SDK新建模板后，模板是一个文件夹，成型的模板是个zip压缩包 页面：模板由多个页面组成，大致有店铺首页、搜索列表页、宝贝详情页等 布局：每一个页面可以有很多种布局，比如950通屏 750-190布局等 模块：构成模板的最小单位。 基本概念 模板的基本构成 点击这里了解如何安装SDK环境。SDK环境默认安装到D: \DC_SDK，在其中需要注意的是htdocs目录，htdocs目录存放着模板，temp是模板开发完成后打包存放的压缩包的目录。 安装后桌面会有 的图标，双击后启动一个命令行，不要关闭它。 然后在浏览器访问http://localhost:8080/ 就进入SDK web控制台了(注：允许开启多个SDK,多个SDK环境请复制多个文件夹，他们的端口会自动加1,如http://localhost:8081/)，如图。 可视化操作，这里就不再阐述如何使用。 基本概念 了解SDK本地开发环境 整个模板的文件夹template1是存在于 sdk安装目录的 基本概念 模板的文件结构 设计PSD，将PSD通过CSS+DIV或table制作成HTML模板,这个如果不知道的 可以去网络上搜索相关学习资料。 制作流程 一、设计模板 制作流程 二、SDK模板的创建 制作流程 模板目录的site.xml修改及设置 设置时请注意系统的默认值 拿首页（index.php）作为例子，用dreamwaver编辑index.php文件，在文件中添加布局结构具体的布局结构和坑可以参看淘宝SDK帮助手册（也可以参考 SDK自带的template1中的index.php文件）。 制作流程 页面布局和坑设置 其中?php ?中间部分为PHP输出的模块，每一个array()里面都是一个独立的模块 1.进入模板后台，点击创建新模块 制作流程 创建新模块 填写模块数据 制作流程 配置模块XML 进入这个文件 打开xx.php模块文件,将代码写入其中 制作流程 开发模块 每个模块都必需包含有box的DIV层,直接复制过来。 找到assets文件 制作流程 CSS样式及素材图片存放 进入 Imamges存放模板素材 Stylesheets存放CSS文件 Blue.css存放模块及模板自定义样式 Global.css存放系统样式 制作流程 模板首页引入模块 模板调试 模板预览及调试模块 正常预览 Debug调试模式预览 在地址后面在加入”?debug”就进入了调试模式 和在线编辑店铺功能一样 1、html css入门基础 /h.asp 2、php入门基础 /php/php_syntax.asp 3、sdk学习资料 学习资料 学习资料 SDK模板开发示例 创建一个名为“小雨”的这么一个模板 单击下一步继续 注：店铺数据行业不一样默认调试的数据也不一样 创建完成之后在SDK后台首页就会出现我们刚才创建的模板了 SDK模板开发示例 创建一个名为“宝贝展示”的模块 SDK模板开发示例 点击创建模块 创建成功之后 找到我们刚才创建的模块及模板 SDK模板开发示例 Htdocs存放所有创建的模板 这就是我们之前创建的模板了 Modules文件夹存放所有创建完成的模块 找到”baobei”这个我们刚才创建的模块 模块代码存放处 用于配置模块的XML文件 宝贝模块开发 SDK模板开发示例 打开’baobei.php’文件 添加模块代码 这个层每个模块必须添加 为baobei模块添加CSS样式和图片 SDK模板开发示例 图片素材放入images调用即可 打开stylesheets文件 打开blue.css文件 写入样式 加入淘宝数据接口调用店铺信息 SDK模板开发示例 我们调用店铺名称 店主昵称 开店时间 三个系统接口 跟多接口调用及系统信息请参看wiki帮助文档 添加模块到首页 SDK模板开发示例 将模块ID为’baobei’的模块加入首页，只需要将 array(‘id’ = ‘模块ID’); 加入首页就