本帖最后由 gongxiu 于 2017-3-20 14:37 编辑
移动端设计师平台模板制作教程： 移动端设计师平台是提供给设计师，可以将设计出来的店铺主页样式录入编辑为设计师模板，然后售卖给商家，提供给商家店铺装修使用。设计师使用此平台需要入驻京东设计师平台，然后学习相关的预发规范以及规则。 1、语法规范
组件的基本语法以xml指可扩展标记语言为标准，较为简单。如下： <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don'tforget the meeting!</body> </note> 首先必须要有根节点，根节点只有一个，如文档中的<note>。与HTML不同，所有标签必须要有闭合标签，可以没有标签之间的内容，但是如果标签没有闭合，则是非法的。 然后所有标签的名称都是大小写敏感，如<to>与<To>是2个不同的标签。 另外，在标签中可以定义属性，如下： <notedate=”12/31/2016”> <to>George</to> </note> 标红的内容为属性，date为属性名称，=号后为属性值，属性值必须要加上双引号。 2、组件使用
在设计师平台中，一个模板就会包含多个组件，例如一个轮播图，一个单图活动或者一个多列的商品列表，每次只能新建、编写一个组件，然后使用多个组件来组合成一个模板。 元素分类: 一个组件和可以由多种元素组合而成，当前协议中包含的元素分为两种类型: 1. 容器元素：container、slider、list、grid、simpleTab 2. 基本元素: text、image、line 详细内容请参阅《京东移动端模板制作协议》文档 基本结构: 一个组件的XML基本结构如下： <?xmlversion="1.0" encoding="utf-8" ?> <floor> ... </floor>
第一行为xml声明，定义了xml版本为1.0，所使用的编码为UTF-8，再编写过程中可以省略。然后文档必须是以floor为根节点，floor不包含任何属性声明，floor只能有一个子节点，该子节点可以是容器元素也可以是基本元素。模板的第一个元素节点必须要需要设置height高度，如果容器高度设置为-1，则需要保证父级容器中有一个是有高度的。 该示例包含了一个基本的容器container,容器中包含了一段文本：
<floor> <container> <style> <attribute name="width" value="-1"/> <attribute name="height" value="90"/> <attribute name="backgroundColor"value="#ffffff"/> </style> <text value="我是一段文案"> <style> <attribute name="fontSize"value="15"/> <attribute name="fontWeight" value="500"/> </style> </text> </container> </floor>
布局定位：当前布局包含了2种布局方式： 相对布局布局之间元素会互相影响,会按照元素声明的先后顺序，从上到下或从左到右的排列。 相对布局纵向：
<container> <style> <attribute name="width"value="-1"/> <attributename="height" value="500"/> <attributename="visible" value="true"/> <attributename="backgroundColor" value="#f7ffe4"/> <attributename="layout" value="linear"/> <attributename="orientation" value="vertical"/> </style> <imageurl="//img13.360buyimg.com/zx/jfs/t3073/114/4368933366/29361/50a9dafa/583fc2e2Ncbe3d4b5.jpg"> <style> <attributename="width" value="80"/> <attributename="height" value="80"/> </style> </image> <imageurl="//img13.360buyimg.com/zx/jfs/t3073/114/4368933366/29361/50a9dafa/583fc2e2Ncbe3d4b5.jpg"> <style> <attributename="width" value="80"/> <attributename="height" value="80"/> </style> </image> </container> 相对布局横向： <container> <style> <attribute name="width" value="-1"/> <attribute name="height" value="500"/> <attribute name="visible"value="true"/> <attribute name="backgroundColor"value="#f7ffe4"/> <attribute name="layout" value="linear"/> <attribute name="orientation"value="horizontal"/> </style> <imageurl="//img13.360buyimg.com/zx/jfs/t3073/114/4368933366/29361/50a9dafa/583fc2e2Ncbe3d4b5.jpg"> <style> <attribute name="width" value="80"/> <attribute name="height"value="80"/> </style> </image> <imageurl="//img13.360buyimg.com/zx/jfs/t3073/114/4368933366/29361/50a9dafa/583fc2e2Ncbe3d4b5.jpg"> <style> <attribute name="width"value="80"/> <attribute name="height"value="80"/> </style> </image> </container> 绝对布局元素之间独立，使用marginTop,marginleft,marginRight,marginBottom来确定元素基于父元素的位置，元素之间可以相互叠加，后声明的元素排列在最上。 <container> <style> <attribute name="width" value="-1"/> <attribute name="height" value="500"/> <attribute name="visible"value="true"/> <attribute name="backgroundColor"value="#f7ffe4"/> <attribute name="layout" value="absolute"/> </style> <imageurl="//img13.360buyimg.com/zx/jfs/t3073/114/4368933366/29361/50a9dafa/583fc2e2Ncbe3d4b5.jpg"> <style> <attribute name="marginTop"value="30"/> <attribute name="marginLeft" value="30"/> <attribute name="height"value="80"/> <attribute name="width"value="80"/> <attribute name="height"value="80"/> </style> </image> <imageurl="//img13.360buyimg.com/zx/jfs/t3073/114/4368933366/29361/50a9dafa/583fc2e2Ncbe3d4b5.jpg"> <style> <attribute name="marginTop"value="60"/> <attribute name="marginLeft"value="90"/> <attribute name="width"value="80"/> <attribute name="height"value="80"/> </style> </image> </container>
editProperty使用: EditProperty用来声明当前元素的编辑项，一个元素在元素节点内可以editProperty节点，然后定义dataDefines子节点，dataDefines可以包含多个dataDefine，例如： <editProperty> <dataDefines> <dataDefinename="imageUrl" type="image" width="640"height="188" propertyName="图片配置"> </dataDefine> <dataDefine name="quality"type="radio" propertyName="图片质量"> <config> <data text="一般" value="0" defaultSelect="true"/> <data text="较高" value="1" defaultSelect="false"/> <data text="极高" value="2" defaultSelect="false"/> </config> </dataDefine> </dataDefines> </editProperty>
dataDefine中name的定义了自身的名称，如name为imageUrl的dataDefine，元素中需要引用次图片，表达式则可定义为$imageUrl。type则是dataDefine的类型，下边会详细列出。propertyName则是定义了右侧属性编辑区域当前dataDefine显示的titile名称。 dataDefine中配置的数据，可以被本元素以及本元素的子元素访问，但是如果name名称定义重复，则子元素的数据会覆盖父元素的数据。同级相邻的元素dataDefine中定义的数据不能互相访问。父元素不能访问子元素中dataDefine定义的数据。
当前版本编辑项目如下： image声明了一张上传的图片。 <dataDefine name="imageUrl"type="image" width="640" height="188"propertyName="图片配置"></dataDefine> 图片带SKU信息： <dataDefine name="imageUrl"type="image" width="640" height="188"propertyName="图片配置"> <config> <data text="sku" value="1" defaultSelect="false"/> <data text="promotion" value="2" defaultSelect="true"/> </config> </dataDefine> 图片带活动链接： <dataDefine name="imageUrl"type="image" width="640" height="188"propertyName="图片配置"> <config> <data text="sku" value="1" defaultSelect="false"/> <data text="promotion" value="2" defaultSelect="true"/> </config> </dataDefine>
text一段文本、样式 <dataDefinename="text" type="text" propertyName="title文案"> </dataDefine> 文本编辑带SKU信息 <dataDefinename="text" type="text" propertyName="title文案"> <data text="sku" value="1" defaultSelect="true"/> <data text="promotion" value="2" defaultSelect="false"/> </dataDefine> 文本编辑带活动链接： <dataDefinename="text" type="text" propertyName="title文案"> <data text="sku" value="1" defaultSelect="false"/> <data text="promotion" value="2" defaultSelect=" true"/> </dataDefine>
radio 单选列表 radio选择图片质量： <dataDefine name="ImgFullA_Quality"type="radio" propertyName="图片质量"> <config "> <data text="一般"value="0" defaultSelect="true" /> <data text="较高" value="1"defaultSelect="false" /> <data text="极高"value="2" defaultSelect="false" /> </config> </dataDefine> radio控制容器布局:
<dataDefine name="orientation" type="radio"propertyName="布局方式"> <config> <data text="横向"value="horizontal" defaultSelect="true"/> <data text="纵向"value="vertical" defaultSelect="false"/> </config> </dataDefine>
jsonArray图片列表 min指定了最小配置的数量，max制定了最大配置数量，2者都可以不配置。Min默认是1，max不配置则不限制数量。 <dataDefinename="slide_array" type="jsonArray" min="2"max="3" width="640" height="188"propertyName="轮播图配置"></dataDefine> 带sku信息: <dataDefinename="slide_array" type="jsonArray" max="3"width="640" height="188" propertyName="轮播图配置"> <config> <data text="sku" value="1" defaultSelect="true"/> <datatext="promotion" value="2" defaultSelect="false"/> </config> </dataDefine>
带活动链接：
<dataDefine name="slide_array" type="jsonArray"max="3" width="640" height="188" propertyName="轮播图配置"> <config> <data text="sku" value="1" defaultSelect="false"/> <datatext="promotion" value="2" defaultSelect="true"/> </config> </dataDefine>
sku商品列表
min和max的配置与jsonArray相同
<dataDefine name="grid_array" type="sku" min="1"max="3" propertyName="商品列表配置"></dataDefine>
simpleTabsimpleTab的dataDefine对simpleTab的header以及内容进行配置，simpleTab当前支持jsonArray以及sku两种配置，需要用parent来进行关联，关联的数量则确定了header标签的数量以及数据内容。 <dataDefine name="tabName" type="simpleTab"propertyName="tab标签"> </dataDefine> <dataDefine name="tab1" type="jsonArray"width="640" height="188" parent="$tabName"/> <dataDefine name="tab2" type="sku"parent="$tabName"/>
Style的使用 Style用来声明元素的样式，如果是容器元素，还可以声明内部元素的布局。具体每个元素可以使用那些style属性，可以参考《京东移动端模板制作协议》。
Event使用 event的详细属性可以参考《京东移动端模板制作协议》,该节点定义了点击元素的交互行为，本期只支持openUrl的链接交互。 如下，定义了当前的container可以跳转到活动配置配置相关页面（type为image以及text的dataDefine）： <container> <style> <attributename="width" value="-1"/> <attributename="height" value="-1"/> </style> <imageurl="$imageUrl"> <style> <attributename="width" value="320"/> <attributename="height" value="94"/> </style> </image> <editProperty> <dataDefines> <dataDefine name="imageUrl" type="image" width="640"height="188" propertyName="第一张图片配置"> <config> <datatext="sku" value="1" defaultSelect="false"/> <datatext="promotion" value="2" defaultSelect="true"/> </config> </dataDefine> </dataDefines> </editProperty> <events> <eventtype="click"> <actions> <openURL> <params> <paramname="页面跳转"value="$image**data"/>//如果dataDefine中sku为true，也是使用$image**data </params> </openURL> </actions> </event> </events> </container>
如下，定义了当前的slider轮播图中点击图片可以跳转到配置sku详情页面(type为jsonArray的dataDefine项)： <slider> <foreachjsonArrayName="$slide_array"> <template> <imageurl="$slide_array.[?].imageUrl"> <style> <attributename="width" value="-1"/> <attributename="height" value="-1"/> </style> <events> <eventtype="click"> <actions> <openURL> <params> <paramname="跳转sku" value="$slide_array.[?].detail"/> </params> </openURL> </actions> </event> </events> </image> </template> </foreach> <style> <attributename="height" value="94"/> <attributename="width" value="-1"/> <attributename="backgroundColor" value="#FFFFFF"/> </style> <editProperty> <dataDefines> <dataDefine name="slide_array" type="jsonArray" max="3"width="640" height="188" propertyName="轮播图配置"> <config> <datatext="sku" value="1" defaultSelect=" true "/> <datatext="promotion" value="2" defaultSelect="false"/> </config> </dataDefine> </dataDefines> </editProperty> </slider>
如果是list配置的是type是sku的datadefine，则event的value值使用skuId：<floor>
<list>
<foreach start="0" step="1" jsonArrayName="$slide_array">
<template>
<container>
<style>
<attribute name="width" value="-1"/>
<attribute name="height" value="119"/>
<attribute name="layout" value="linear"/>
<attribute name="orientation" value="horizontal"/>
</style>
<image url="$slide_array.[?].imageUrl">
<style>
<attribute name="width" value="119"/>
<attribute name="height" value="119"/>
<attribute name="paddingTop" value="5"/>
<attribute name="paddingLeft" value="5"/>
<attribute name="paddingRight" value="5"/>
<attribute name="paddingBottom" value="5"/>
</style>
<editProperty>
<dataDefines>
<dataDefine name="imageUrl" type="image" width="238" height="238" propertyName="第一张图片配置">
</dataDefine>
</dataDefines>
</editProperty>
</image>
<container>
<style>
<attribute name="width" value="-1"/>
<attribute name="height" value="-1"/>
</style>
<text value="$slide_array.[?].skuName">
<style>
<attribute name="marginRight" value="6"/>
<attribute name="width" value="-1"/>
<attribute name="height" value="40"/>
<attribute name="marginTop" value="12"/>
<attribute name="lines" value="2"/>
</style>
</text>
<text value="$slide_array.[?].price">
<style>
<attribute name="marginTop" value="30"/>
<attribute name="textColor" value="#f02b2b"/>
<attribute name="fontWeight" value="500"/>
</style>
</text>
</container>
<events>
<event type="click">
<actions>
<openURL>
<params>
<param name="页面跳转" value="$slide_array.[?].skuId"/>
</params>
</openURL>
</actions>
</event>
</events>
</container>
</template>
</foreach>
<style>
<attribute name="width" value="-1"/>
<attribute name="height" value="100"/>
<attribute name="backgroundColor" value="#FFFFFF"/>
</style>
<editProperty>
<dataDefines>
<dataDefine name="slide_array" type="sku" max="6" propertyName="商品配置">
</dataDefine>
</dataDefines>
</editProperty>
</list>
</floor>
补充：
1、simpleTab的示例:
需要注意的是tabpannel的顺序，必须要和显示顺序一致。
<?xml version="1.0" encoding="utf-8" ?>
<floor>
<simpleTab>
<style>
<attribute name="width" value="-1" />
<attribute name="height" value="136" />
<attribute name="tabWidth" value="50" />
<attribute name="tabHeight" value="36" />
<attribute name="textColor" value="#666666" />
<attribute name="fontSize" value="10" />
<attribute name="selectedFontSize" value="12" />
<attribute name="backgroundColor" value="#ccffff" />
<attribute name="selectedBackgroundColor" value="#66ccff" />
</style>
<header name="$tabName">
<style>
<attribute name="width" value="-1" />
<attribute name="height" value="36" />
<attribute name="tabWidth" value="50" />
<attribute name="tabHeight" value="36" />
<attribute name="textColor" value="#666666" />
<attribute name="fontSize" value="10" />
<attribute name="selectedFontSize" value="12" />
<attribute name="backgroundColor" value="#ccffff" />
<attribute name="selectedBackgroundColor" value="#66ccff" />
</style>
</header>
<tabpannel>
<slider>
<foreach jsonArrayName="$tab1">
<template>
<image url="$tab1.[?].imageUrl">
<style>
<attribute name="width" value="-1"/>
<attribute name="height" value="-1"/>
</style>
</image>
</template>
</foreach>
<style>
<attribute name="height" value="100"/>
<attribute name="width" value="-1"/>
<attribute name="backgroundColor" value="#FFFFFF"/>
</style>
</slider>
</tabpannel>
<tabpannel>
<list>
<foreach jsonArrayName="$slide_array">
<template>
<container>
<style>
<attribute name="width" value="-1"/>
<attribute name="height" value="119"/>
<attribute name="layout" value="linear"/>
<attribute name="orientation" value="horizontal"/>
</style>
<image url="$slide_array.[?].imageUrl">
<style>
<attribute name="width" value="119"/>
<attribute name="height" value="119"/>
<attribute name="paddingTop" value="5"/>
<attribute name="paddingLeft" value="5"/>
<attribute name="paddingRight" value="5"/>
<attribute name="paddingBottom" value="5"/>
</style>
<editProperty>
<dataDefines>
<dataDefine name="imageUrl" type="image" width="238" height="238" propertyName="第一张图片配置">
</dataDefine>
</dataDefines>
</editProperty>
</image>
<container>
<style>
<attribute name="width" value="-1"/>
<attribute name="height" value="-1"/>
</style>
<text value="$slide_array.[?].skuName">
<style>
<attribute name="marginRight" value="6"/>
<attribute name="width" value="-1"/>
<attribute name="height" value="40"/>
<attribute name="marginTop" value="12"/>
<attribute name="lines" value="2"/>
</style>
</text>
<text value="$slide_array.[?].price">
<style>
<attribute name="marginTop" value="30"/>
<attribute name="textColor" value="#f02b2b"/>
<attribute name="fontWeight" value="500"/>
</style>
</text>
</container>
</container>
</template>
</foreach>
<style>
<attribute name="width" value="-1"/>
<attribute name="backgroundColor" value="#FFFFFF"/>
</style>
<editProperty>
<dataDefines>
<dataDefine name="slide_array" type="sku" max="6" propertyName="商品配置">
</dataDefine>
</dataDefines>
</editProperty>
</list>
</tabpannel>
<editProperty>
<dataDefines>
<dataDefine name="tabName" type="simpleTab" propertyName="tab标签">
</dataDefine>
<dataDefine name="tab1" type="jsonArray" width="640" height="188" parent="$tabName"/>
<dataDefine name="tab2" type="sku" parent="$tabName"/>
</dataDefines>
</editProperty>
</simpleTab>
</floor>
| 
/1 
发表于 2016-12-22 14:47
提升卡
置顶卡
沉默卡
变色卡
千斤顶
显身卡
