请选择 进入手机版 | 继续访问电脑版
您好,欢迎来到京东卖家论坛![请登录]

龚秀

京东员工
龚秀 当前离线
未签到
  • 京东员工
  • 成都研究院
  • 17

    帖子
  • 8

    主题
  • 0

    精华
  • 升级进度
  • 52

    积分
  • 0

    威望
  • 0

    京币
  • 118

    钢镚
  • 关注:0粉丝:0
  • 最后登录:2020-2-25
  • 成都研究院
  • 8
    主题
  • 17
    帖子
  • 52
    积分
发表于 2016-12-22 14:39 | 显示全部楼层 |阅读模式
概述

协议约定了指定所有元素的渲染类型,以及渲染过程中依赖的数据、样式和事件声明等。协议在每个端上(Android、IOS和H5)都会有对应的自身渲染实现,不同端渲染需要保证渲染结果的相同。
1、基础协议

  
字段名
  
可以为空
字段说明
id
元素的唯一ID,非必填
type
元素的类型,最核心的字段,决定了元素的类型
style
元素样式绑定,颜色、宽高、定位等
dataBinding
数据绑定,元素相关的数据引用,引用data中的数据
editProperty
当前元素的编辑项,指定的了当前以及当前元素的子元素的样式配置项目以及数据源名称和配置(提供给设计师平台以及商家装修后台使用,客户端不使用)
conditions
元素的条件逻辑列表,条件支持普通的条件判断和有与或关系的条件判断,通过条件绑定样式或者数据
events
元素的事件列表
以上这些属性是描述一个被渲染元素的基本属性,在后续的具体协议介绍里都可以看到,开发者在使用XML来描述协议和编写组件。
关于组件的尺寸,当前设计师设计的模板尺寸是按照宽度为320(iphone5)为基准,单位为像素,需要各个平台客户端自行换算。
2、支持的元素

现有的支持的元素如下:
  
协议分类
  
协议类型
功能描述
基础元素
text
展示普通文本,可通过属性指定为单行或多行文本。
基础元素
image
图片
基础元素
line
线条,可以配置为实线、虚线
容器型元素
container
容器,可以包含任意类型的子view,也可以包含container
容器型元素
slider
轮播
容器型元素
list
单行列表容器
容器型元素
grid
多行列表容器
容器型元素
simpleTab
Tab容器
基础元素是不能包含子元素的。

3、通用的协议属性描述

3.1、style 样式定义
style约束了元素的样式绑定,诸如字体颜色、字体大小、宽高、margin、padding等,但其中部分属性可以不设置,不设置时候对应字段取相应的默认值。现有的通用属性如下表所述:
注意:样式中的宽高、marign、padding等数据的基准值是320的标准宽度,实际到各个设备上时,因为实际屏幕分辨率的关系,会基于320的标准宽度做等比伸缩。
  
属性名
  
默认值
说明
示例
width
-1
-1:充满父元素的剩余宽度,即 父元素width - 父元素的paddingLeft - 父元素的paddingRight - 父元素已被占用的宽度值。
  
-2:根据view内容自适应宽度(子元素必须有一级设置宽度)
  
  
Image元素对-2暂时不支持
height
-1
-1:充满父元素的剩余高度,即 父元素height - 父元素的paddingTop - 父元素的paddingBottom - 父元素中已被占用的高度值。
  
如果是根元素,必须要配置有数值的高度。
marginLeft
Null
靠左侧的外边距
marginTop
Null
靠顶部的外边距
marginRight
Null
靠右侧的外边距
marginBottom
Null
靠底部的外边距
paddingLeft
Null
靠左侧的内边距(支持container、slider、list、grid、simpleTab)
paddingTop
Null
靠顶部的内边距(支持container、slider、list、grid、simpleTab)
paddingRight
Null
靠右侧的内边距(支持container、slider、list、grid、simpleTab)
paddingBottom
Null
靠底部的内边距(支持container、slider、list、grid、simpleTab)
backgroundColor
无(依赖具体的实现端)
背景颜色值,支持两种格式。1,六位的16位颜色值,如 #b2b2b2;2,带透明度的16位色值,前两位为透明度,透明度的值范围为 0 -255,即 00 - FF。如 #8f000000
#b2b2b2, #8f000000
align
外部对齐方式,九宫格方式的值定义,可选值为:1/2/3/4/5/6/7/8/9,分别对应左上、中上、右上、左中、中、右中、左下、中下、右下。只有父容器是绝对布局的情况下才生效。
visible
true
元素是否显示,true显示,false不显示
该属性设计师不配置情况下不输出,做true处理
invisibleSpace
false
元素隐藏后是否占位,,true占位,false隐藏不占位
该属性设计师不配置情况下不输出,做false处理
3.1、属性

属性在元素中定义的特殊的属性,如Image的url链接配置,text的value文本设置,可以直接录入默认值,或者写入变量表达式。声明的方式一般是直接写到节点属性上边,如:
<imageurl="$imageUrl">
3.2、dataBinding
不同类型的元素有不同的数据绑定值定义,具体的定义在协议描述中详细描述,这里只介绍通用的数据引用方式和定义。我们使用 $ 开头的方式来引用变量,引用的数据为data区(页面渲染过程中存储数据的区域,开发时不需关心)中的静态数据,而对于值有多层的,使用“ . ”进行向下的数据引用。递归进行引用时若指定的key不存在则整体的值就为null。
3.3conditions 逻辑
condition作为条件逻辑,配置在元素中,如果有condition满足,则可以绑定指定的元素的数据或样式等。condition中的部分字段在使用中可能为空,在为空时候自动取其默认值,字段描述如下:
  
字段名
  
字段默认值
字段说明
type
条件类型,目前支持 > >=  < <= == != && ||
executionType
0
条件执行类型,支持 0 和 1 两个值。0 标识该条件满足并执行后跳出条件列表,1 表示当前条件满足并执行后不跳出条件列表,继续向下执行。默认情况是0,即到某个条件满足并执行后即跳出条件列表。
styleBinding
条件执行的样式绑定
dataBinding
条件执行的数据绑定
condition的通用字段只有如上几种,而不同的条件类型有额外的字段,详细如下;
简单条件
如 > >= < <= == != ,这些称为简单条件,在condition的公共字段之外,额外有如下两个字段
** 注意在 == 和 != 时,将条件比较认定为普通的字符串比较,其他情况都视为数字型比较
  
字段名
  
字段说明
left
条件的左值
right
条件的右值
支持与或逻辑的条件
如 && || , 与和或的条件稍复杂点,是条件的再次组合,附加的字段如下:
  
字段名
  
字段说明
leftCondition
左条件,可以为一个普通的条件,也可以本身又是一个与或的条件
rightCondition
右条件,可以为一个普通的条件,也可以本身又是一个与或的条件
3.4 event定义
events配置在元素中,指定了元素能够响应的事件类型以及相应的事件触发后的一系列动作。一个元素可以绑定多种事件类型,因此是数组结构,其内部指定事件的基本结构如下:
  
字段名
  
字段说明
type
事件类型,如click
actions
事件发生后触发的相应动作,为Action的列表list
目前支持的事件类型暂时只有click,如果是滑动等事件,由各个平台自己定义。
与事件绑定在一起的还有对应的功能逻辑即Action,Action的基本结构如下:
  
字段名
  
字段说明
type
动作执行类型,如:openUrl, sendRequest等。
condition
动作执行的前置条件,若不满足则Action不执行
param
事件执行的附加参数
isBreak
action执行后是否中断action列表,默认值为false。
callback
事件执行成功后回调,目前只支持sendRequest才有
现有的Action类型列表:
  
类型
  
描述
说明
sendRequest
发起一个接口调用
changeData
修改data区中存储的数据
refreshView
根据指定Id刷新view:重新绑定数据、样式和action等
refreshStyle
根据指定的Id刷新view:重新绑定样式
phoneCall
拨打电话,拨打之前需要弹窗确认拨打的号码
toast
弹出toast提示信息
openPopWindow
打开弹窗
dismissPopWindow
关闭弹窗
openURL
打开一个新链接
针对m页的实现
userTrack
配置的埋点信息
针对m页的实现
3.5 变量
变量名称必须由“$”符号开头:$变量名称,变量有3种基本的使用方式:

u  读取简单的变量, eg:$imageUrl或$title_text;
u  读取别名,eg:$item.imageUrl
u  数组读取:$数组名称.[?].别名,eg:$slider_array.[?].skuImage或$slider_array.[?].detail.configDataValue
变量的可以配置范围:
1、Image的url属性
2、Text的value、prefix、suffix
3、Container、slider、list、grid、simpleTab的jsonArrayName
4、元素style的标签内容(如padding,margin,column等元素style的属性内容)
        
4 协议的详细描述

4.1、text
展示普通文本,可以通过属性控制文本行数、格式等,协议结构为通用的结构,无特殊的节点。
4.1.1 属性
text中属性值如下:
  
属性名
  
默认值
说明
prefix
文案前缀,实际显示时会拼接在value前面,如价格符号
value
text中展示的文本内容,若value值为空,则当前text不展示
suffix
文案后缀,实际显示时会拼接在value后面,如单位
4.1.2 style
text中除了通用的style之外,可以生效的特殊style如下:
  
属性名
  
默认值
说明
兼容性说明
lines
1
0或属性不设置的时候取默认为1行,只展示1行文本。-1表示不限制显示行数,但最多20行。文本超出部分在末尾用...代替。
gravity
内部文本对齐方式,九宫格方式的定义,可选值为:1、2、3、4、5、6、7、8、9,分别对应左上、中上、右上、左中、中、右中、左下、中下、右下。
fontSize
字体大小
fontWeight
字体粗细,>400 为粗体,<400为普通
textColor
文本颜色
lineType
文本中的划线类型,值为:2、3,分别对应中划线(删除线)/下划线
4.2 image
   用于展示图片,可以动态的配置图片或者配置静态图片。
4.2.1 属性
image属性:
  
属性名
默认值
说明
兼容性说明
url
图片的url
4.2.2 style
image中除通用的属性定义外,附加了如下样式:
  
属性名
默认值
说明
兼容性说明
isCircle
false
是否处理为圆图,为空时取默认值false。只处理方图
非正方形图片设置为圆形将无法保证显示效果
imageQuality
-1: 取原图, 0 :取cdn低质量图片(70), 1:取cdn中质量图片(80) , 2:取cdn高质量图片(90)
70,80,90均是图片服务器的图片质量参数,具体详见京东图片服务器的说明文档。
4.3  line
线条元素,可以设置为显示实线或虚线。
4.3.1 属性
4.3.2 style
可以生效的特殊style如下:
  
属性名
  
默认值
说明
兼容性说明
gap
0
0:实线 1:虚线
color
线条颜色
orientation
horizontal
方向,可选值:horizontal (横向),vertical(竖向)
width
0
当orientation设置为horizontal,为线条的宽度;vertical时,则为线条厚度。
height
0
当orientation设置为horizontal,为线条的厚度;vertical时,则为线条宽度。
4.4 container
container为容器型元素,内部可包含其他任何类型的元素。
4.4.2 属性
4.4.1 协议结构
在通用的协议结构基础上,container特有的属性如下:(slider、list、grid、simpleTab也支持当前4.4.1中的属性)
  
属性名
  
默认值
说明
foreach
逻辑上的容器元素
jsonArrayName
数据源名称
foreach是逻辑上的容器元素,其功能是循环产生结构相同的元素,并追加到container的中去,foreach中的第一个子元素必须为template元素。foreach的结构如下:
  
属性名
  
默认值
说明
start
0
循环的索引起始值,默认值为0
end
array.size()
循环的索引终止值,默认值为数组的长度
step
1
循环的步进值,默认值为1
template
模板元素,对每个循环的数据,都产生一个以该template为模板的元素,template中的子元素必须必须是container或者list等容器元素
循环格式:for (index = start ; index <end; index=index+step)
对于循环中需要知道当前循环的位置时,可以引用"$_component_.foreachIndex"来获取。
4.4.3 style
container作为容器型元素,其包含的特有style元素如下:
  
属性名
  
默认值
说明
兼容性说明
layout
linear
容器的布局类型。可选值:absolute/linear,  分别为绝对布局/线性布局
orientation
vertical
线性布局时的容器伸展方向。可选值:horizontal,vertical
scroll
0
滚动方向。可选值为:0:不滚动,1:纵向滚动,2:横向滚动
不支持嵌套
scrollBar
0
滚动条的显示。可选值为:0:无,1:纵向,2:横向
H5上不支持滚动条显示
scrollBounce
0
滚动回弹效果的支持。可选值为:0:无,1:纵向,2:横
H5上不支持
borderColor
边框颜色。
borderWidth
边框宽度。
absolute绝对布局:
在绝对布局中,存在2中布局方式,一是通过marginTop等4个边距属性来实现基于数值的定位,第二种是align的九宫格定位。
设置边距定位: 通过设定marginTop\marginLeft\marginRight\marginBottom的值来边距定位的容器,内部元素相互之间是不会互相施加影响。
如,在一个容器设置为绝对布局,然后内部子元素设置marginTop=31,marginLeft=60,width=80,height=80:

                              
就实现一个简单的绝对布局。
关于堆叠,在绝对布局中,第一个元素设置marginTop=31,marginLeft=60,width=80,height=80,第二个元素设置marginTop=41,marginLeft=80,width=80,height=80,然后2者就可以实现堆叠,效果如下:

如果设置子元素marginRight=29,marginBottom=60,效果如下:

关于优先级:marginTop>marginBottom,marginLeft>marginRight,例如子元素设置了marginTop=31,marginLeft=60,marginRight=29,marginBottom=60,则效果入下

right和bottom被视为无效
绝对布局与aligin的关系:
align优先级大于margin边距,如果容器设置有align则边距忽略。当没有align的时候margin边距才会有效。
linear流布局:
宽度规则:
如果有2个元素,第一个设置正整数宽度,第二元素是-1,则第二个元素会填满除开一个元素宽度的所有位置;如果第一个元素设置-1,则后边的无论多少元素或者如何设置宽度,都不会显示;
高度规则:如果是高度,一个设置固定高度,另外一个设置-1则不管先后顺序,-1都会填满剩余的高度;如果第一个设置-1,则剩余的全部都不会显示;
流布局的横向布局:如下图,黑色为外层容器,蓝色为第一个自容器,红色为第二个子容器,则绿色在父级的可视区域之外(不显示)

流布局的横向布局:三个子对象的情况,如果第灰色为固定宽度,红色为-1宽度,则第二则会填满所有剩余的区域,后来的绿色节点则不显示。

流布局的纵向布局:如下图红色高度为-1,绿色则不显示

流布局的纵向布局:如下图,灰色高度为100,红色高度为-1,则红色填满所有剩余高度,绿色不显示

4.5 slider
slider为容器型元素,基本属性以及样式与container非常类似,slider中可以轮播多个子容器。
4.5.1 属性
4.5.2 style
slider作为容器型元素,其包含的特有style元素如下:
  
属性名
  
属性类型
默认值
说明
兼容性说明
isPointDisplay
Boolean
true
是否隐藏轮播的圆点提示符,默认都显示
borderColor
String
边框颜色
borderWidth
Integer
边框的宽度
4.6 list
单列列表,用于渲染循环结构的容器,与foreach类似,同样使用templ--ate来描述子单元,并且list支持下拉刷新,可以实现接口的多次调用完成翻页等逻辑。
4.6.1 协议结构
list在通用的结构之外,附加的特有协议属性如下:
  
属性名
  
默认值
说明
template
list渲染时的子单元
needDownRefresh
false
是否需要下拉刷新,默认值为false。若为true,则在下拉的时候,重新获取最新数据,获取后清空当前list的所有template内容,然后重新渲染。(暂不实现)
needNextPage
false
是否下拉分页,默认值为false。为true时会用户向下滚动页面操作触发加载下一页的数据。
unScroll
false
是否不支持滑动list,若默认值为为false,即为可滑动。(暂不实现)
emptyMsg
在list使用接口获取数据失败时,提示给用户的错误信息。(不实现,如果没有数据,则当前楼层不显示)
4.6.2 dataBinding
list中的特有dataBinding可以声明单独的数据源:
  
属性名
  
默认值
说明
兼容性说明
dataSource
引用的数据源
对于循环中需要获取当前循环的位置,可以使用"$_component_.listIndex"
list中调用接口的需要翻页时在接口调用的参数里回传参数,内容中会包含额外参数:direction(翻页方向:-1:向上翻页,1:向下翻页)、id(边界数据的id值)、timestamp(边界数据的timestamp值)、curPage(当前page+1,默认的当前page=0),pageSize(页面尺寸,默认值为10,如声明接口时有指定,则用指定值)。
u direction = 1 ,向下翻页,获取翻页的数据 用于上拉自动加载下一页数据,此时对应的边界数据为当前已有数据的最后一条,id、timestamp都取该数据中的对应值。curPage为当前page+1.
u direction = -1 ,下拉刷新, 用于下拉加载最新的数据。此时对应的边界数据为当前已有数据的第一条,id、timestamp都取该数据中的对应值,curPage应取1。
4.8.2 style
list的style除了继承container之外,自有特殊的 style属性如下:
  
属性名
  
默认值
说明
兼容性说明
borderColor
边框颜色
borderWidth
边框的宽度
4.7 grid
多了格子容器,可以一行渲染多列内容,内容都为template中定义的元素。
4.7.1 dataBinding
    与list相同。
4.7.2 style
grid的style除了继承container之外,自有特殊的 style属性如下:
  
属性名
  
默认值
说明
兼容性说明
column
列数,既grid每行渲染的template个数。
template宽度是由每行column数量自动计算,无需指定,高度可以通过指定template中的子容器的高度来确定。
borderColor
边框颜色
grid的边框为内边框,既通过该属性制定的边框在grid上下左右均不显示。
borderWidth
边框的宽度
4.8 simpleTab
4.8.1 结构
simpleTab在通用的协议结构基础上,特有的属性如下:
  
属性名
  
默认值
说明
header
头部,描述每个tab的内容,格式为SimpleTabHeader,详述见下方
template
每个tab对应的容器,与header中描述的tab头通过索引相关联
foreach
逻辑容器元素
SimpleTabHeader是一个特殊的容器结构,用以描述头部tab内容。其结构包含三个元素:type(固定为simpleTabHeader),style(通用的tab样式描述),dataBinding(通过array属性指定tab头的数据,数据中可能会标注其特殊的tab样式)。
SimpleTabHeader 的style里支持的属性如下:
  
属性名
  
默认值
说明
height
tab头容器的的总高度
tabWidth
单个tab头的宽度
tabHeight
单个tab头的高度
textColor
单个tab文本的颜色
selectedTextColor
选中状态下的tab中显示的文字颜色(切换操作)
fontSize
字体大小
selectedFontSize
选中状态下文本字体大小
backgroundColor
背景色
selectedBackgroundColor
选中状态下背景色
backgroundImage
背景图片
selectedBackgroundImage
选中状态下的背景图
4.8.2 dataBinding
4.10.2 style
特有style元素属性如下:
  
属性名
  
默认值
说明
borderColor
边框颜色。
borderWidth
边框宽度。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

龚秀

京东员工
龚秀 当前离线
未签到
  • 京东员工
  • 成都研究院
  • 17

    帖子
  • 8

    主题
  • 0

    精华
  • 升级进度
  • 52

    积分
  • 0

    威望
  • 0

    京币
  • 118

    钢镚
  • 关注:0粉丝:0
  • 最后登录:2020-2-25
  • 成都研究院
  • 8
    主题
  • 17
    帖子
  • 52
    积分
发表于 2016-12-22 14:41 | 显示全部楼层
各位设计师可下载word版

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

威嘉科技

禁止发言.
威嘉科技 当前离线

LV.6

常住居民II
  • 禁止发言.
  • 威嘉信息科技有限公司
  • 8.5K

    帖子
  • 159

    主题
  • 2

    精华
  • 升级进度
  • 5.3K

    积分
  • 23

    威望
  • 447

    京币
  • 9.8

    钢镚
  • 关注:3粉丝:12
  • 最后登录:2021-3-26
  • 威嘉信息科技有限公司
Ta的点亮徽章:
  • 连续签到30天
发表于 2016-12-25 14:08 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

返回顶部 快速求助
关闭

重要消息上一条 /1 下一条

快速回复 返回顶部 返回列表
返回顶部 快速求助