4. 设计模块

1. 创建相关文件资源； 2. 编写模块代码； 3. 配置模块信息；

 

一： 创建相关文件资源

    模板中的模块都是集中在模板标准目录的modules目录中。 模块的创建及管理可在SDK控制台的模板详情页进行。

    具体的模块创建及管理功能， 请参见wiki模块编写规范：

    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

 

    1. 模块描述符文件详解

        模板中会包含模块， 每一个模块都有一个名为“model.xml”的描述符wenjian， 包含以下信息：

        （1）基本信息： 名称、版本号、 change log、 描述、 示意图等。

        （2）module配置信息： module的元素类型采用html5中的数据类型， 如url, email, number, text, textArea, htmlArea等。

        （3）其他等。

        此处发生细微修改， 请设计师认真阅读：

        添加了themes， theme标签， 详情如下：

        <?xml version="1.0" encoding="GBK"?>

        <module>

 

            <!—模块ID—>

            <id>moduleid</id>

 

            <!—模块名称—>

            <name>modulename</name>

            

            <!—模块文件—>

            <file>module.php</file>

 

            <!—模块缩略图—>

            <thumbnail>assets/images/modulethumbnail.png</thumbnail>

 

            <!—模块描述—>

            <description  xsi:type="xs:string"  xmlns:xs="http://www.w3.org/2001/XMLSchema"  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">  

            moduleDescriptionText

            </description>

 

            <!—是否开启缓存—>

            <requiredCache>true</requiredCache>

 

            <!—宽—>

            <supportedWidth>950</supportedWidth>

        

            <!—用于标识模块的皮肤—>

            <themes default="default">

 

                <!—以当前模板作为根目录的地址—>

                <theme name="default">

                    <css>assets/stylesheets/default.css</css>

                </theme>

 

                <theme name = "red">

                    <css>assets/stylesheet/red.css</css>

                </theme>

            </themes>

 

        <parameters>          

       <param name="pic_1" label="轮播①图片地址" ptype="text" formType="text" description="图片尺寸748*298" >../tshop-um-p-950-036/assets/images/image_picture1.jpg</param>

        <param name="url_1" label="链接地址" ptype="text" formType="text" description="." >#</param>

        </parameters>

 

        <!—模块参数—>

        <parameters>

            <param  name = "title"  description = "标题"  type = "text">标题-1</param>

            <param  name = "content" description = "内容"    type = "text">内容-1</param>

        </parameters>

        </module>

        

    注意模块参数 param

        （1） name: 参数名称用于在模板中通过$_MODULE[name]来引用；

        （2） label: 用于在编辑模块的时候显示， 方便卖家设置；

        （3） descirption:　用于参数描述，此参数便于以后扩展；

　　　（4）ptype: 此处有细微改变， 请设计师认真阅读；

                    text: 文本参数类型， 此参数系统默认256个字符；

                    textarea: 文本域参数类型， 此参数系统默认4000个字符；

                    htmlarea: 代表一段html代码， 此参数系统默认最多32KB；

                    url： url类型， 系统默认最大长度256个字符；

                    date: 此类型代表日期， 后台会根据制定的日期格式进行校验；

                    email: 此类型代表电子邮件， 后台会校验是否是合法的电子邮件地址；

                    number: 此类型是数值类型， 后台会判断是否是合法的参数值；

        （5）formType: 此处有细微改变， 请设计师认真阅读

                    checkbox: 返回的多选的值是以英文都逗号的形式分割的；

                    formType用来配置html类型， 类型与html相对应， 用于在编辑模块时展示界面的DOM结构。 目前系统主要支持如下几个类型：

                    *text: 类似于html的input type = "text", 用于卖家输入文本；

                    *textarea: 类似于html的textarea标签， 用于卖家输入一段文本；

                    *select: 类似于html的select标签， 此参数的配置需要通过option来配置， 比如写入如下配置；

             <param  name = "number" label = "模块数量" description = "输入显示数量"  ptype = "number"  formType = "SELECT">

                 <option  value = "5">5</option>

                 <option value = "10">10</option>

                 <option value = "15">15</option>

                 <option value = "20">20</option>

             </param>

                           

二： 编写模块代码

    1. 引入标识

        模块代码要能够被JS识别为模块， 以便进行装修操作， 设计师需要引入在模块的html代码中引入模板规定的标识符J_BOX， 以及输出用以在装修中操作模块编辑删除， 移动的Toolbar-----<?php echo $_MODULE_TOOLBAR ?>

    代码示例如下：

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

    //模块代码

    </div>

 

   2. 使用kissy效果

        虽说设计师不能够直接书写JS， 但是淘宝kissy框架提供了一些通用的特效接口， 通过在html中配置使用， 比如跑马灯效果。 要使用kissy特效接口， 首先要在模块内部某个节点上加上class J_TWidget， 然后进行一系列参数配置， 要使用图片轮播效果， 可以有以下配置：

        <div class = "carousel J_TWidget" data-widget-type = "Carousel" data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','prevBtnCls':'prev','nextBtnCls':'next', 'contentCls': 'carousel-main', 'navCls': 'carousel-nav','activeTriggerCls': 'selected', 'lazyDataType':'img-src'}">

       

        具体的kissy使用说明和示例效果请见：

         http://wiki.zx.taobao.com/index.php/Widget%E8%A7%84%E8%8C%83

 

    3. 使用模块参数

        模块通常代表了一个独立的功能， 但是一个功能被不同的卖家使用起来， 通常卖家有一些特定要求， 比如模块中显示的图片，比如显示的宝贝的daxiao， 等等一系列的扩展要求， 该如何满足， 不可能让所有的卖家都使用完全一模一样的功能。 模块参数就是为此而生的， 首先我们需要配置说明该模块有哪些参数， 名称是什么等等信息（下一节具体讲）， 然后我们就可以在模块的php代码中使用。 渲染引擎会根据设计师配置的参数列表， 为每个模块生成一个参数录入的表单便于卖家输入， 然后引擎会将参数再渲染模块的时候作为环境信息提供出来， 由设计师调用。

        使用模块参数的示例代码属下：

        $_MODULE["module_name"]

        

    4. 调用数据接口

        SDK开发接口详解：http://wiki.zx.taobao.com/index.php/SDK%E5%BC%80%E6%94%BE%E6%8E%A5%E5%8F%A3%E8%AF%A6%E8%A7%A3

        SDK是通过php方式对外提供接口的， 详细的接口信息， 请阅读SDK安装目录下的htdocs/dcsdk_functions.php， 提供了全局变量， 函数， 和相关的接口。

 

三： 配置模块信息