组件开发规范

开发

功能设计

开发的组件必须含有有价值的信息、资讯、或提供相应服务，否则不予审核通过。

开发规范

HTML

代码包装

组件内容必须包裹在如下标签结构内,并保证符合W3C HTML相关编码规范，禁止内容超出该标签或者修改打破该标签BFC

<div id="[APPID]" class="widget"></div>

默认尺寸 data-defaultsize

必填，设置组件初始大小

<div id="[APPID]" class="widget" data-defaultsize="2x2"></div>

组件尺寸 [data-allowsize]

可选，根据组件实际需求定义组件可选尺寸由 1x1 - 8x8，将可用尺寸附加在包装结构内。如不填，则不能调整组件尺寸，将固定为默认尺寸
实际考虑缩放响应的情况下，一般推荐适配 2-3 种组件尺寸即可。

请开发者自行测试组件在不同尺寸中的效果，如可选尺寸中有1-2个尺寸不能完整展示组件，将不能通过审核。

<div id="[APPID]" class="widget" data-allowsize="1x1,1x2,1x3,2x2,3x3,4x4,5x5,6x6,7x7,8x8"></div>

css

书写要求

每个组件会分配一个独立的APPID，将定义在组件的ID上，所有组件内部样式必须依赖该ID，禁止给该ID定义任何样式。

// 错误
#[APPID]{
    color:#fff;
}
// 正确
#[APPID] a{
    color:#fff;
}

代码包装

代码包装的默认样式如下，禁止修改或覆盖

.widget{
    position: relative;
    font-size: 16px;
    overflow: hidden;
    z-index: 1;
}

过渡动画及动效

允许使用 transition 或 transform 进行交互优化，鼠标指向的过渡动画固定时长 .4s ，禁止在非指向状态使用无意义的循环动画，动画交互禁止出现在代码包装上。

Javascript

基于requireJS 2.x 的模块管理器，书写规范请按照requireJS文档要求书写 文档地址

平台内置的类库/框架如下：

jQuery 1.x.x
moment.js
...

组件提交说明

提交文件格式为 [APPID].zip ，文件命名格式如下

[APPID].js
[APPID].css
[APPID].html