新版html5首页已经发布了，相信有很多小伙伴对其中卡片二开的开发流程和卡片的具体实现会有一些疑惑，本篇将会从卡片的创建实现到添加到布局的整个流程进行讲解，希望能解答大家的疑惑，也欢迎各位小伙伴在评论下方留言吐槽或者留下你们的宝贵意见。

1.创建卡片元数据。首先要在bos设计器里面创建一个卡片元数据。登陆bos设计器，选择业务领域bos=》主控台（可以根据需要选择领域）。然后新建，选择继承，选择bos，主控台下面的单据，选择html5智能卡片基类这个单据。输入名称和编号，完成保存。

2.创建一个卡片类型。用administrator登陆系统，在全功能菜单下【门户管理】=》【卡片类型】打开单据，创建一个卡片类型，输入名称和编码，自定义卡片对象字段选择上面步骤创建的卡片。保存卡片类型后提交、审核该卡片。

3.创建一个主页卡片。在【门户管理】=》【主页卡片】下面新增，输入编码和名称，卡片类型字段选择上面步骤创建的卡片类型，其他字段可根据需要修改。允许重复字段控制主页上是否能添加多次此卡片，自动拓展高度控制此卡片高度（由于卡片的宽度是固定的，卡片高度会根据这个属性是自适应还是固定高度）。保存后将卡片提交并审核，审核完成之后可以将卡片分配给用户和角色。

4.完成卡片创建，进行卡片权限分配。卡片的创建步骤已经完成，我们可以在【门户管理】=》【主页方案】下面创建或者修改主页方案，添加上方创建好的卡片进入，在主页上进行编辑进行添加。

总结：主页卡片创建的流程，确定卡片的类型，根据这个类型创建一个对应的卡片元数据，一个卡片类型可以衍生多张卡片。卡片审核后可以应用于卡片主页中。

下面介绍的是卡片的二开内容，针对卡片的插件代码的实现。这部分和星空标准的二开类似，有需要的小伙伴可以先了解下星空插件开发流程。下面以创建一个轮播的图片卡片为样例，类似的效果参考silverlight端的轮播图片功能。功能效添加以及效果如下图。

新建卡片的元数据，参考新版热门活动卡片的元数据（boside搜索BOS_H5SmartKDCloudCommunityAct）。或者可以直接复制这个卡片的结构。本文的样例是复制该卡片的结构，所以新建卡片结构和控件和热门活动卡片是一样的。

下面直接贴出我实现的插件和构建插件代码，可以参照注释了解其中的逻辑。为了方便整理，此处将插件和构建插件的代码放在了一起。

using Kingdee.BOS.Business.PlugIn.MainConsole.H5Card.H5SmartCard;
using Kingdee.BOS.Core.DynamicForm.PlugIn;
using Kingdee.BOS.Core.DynamicForm.PlugIn.Args;
using Kingdee.BOS.Core.Metadata;
using Kingdee.BOS.JSON;
using Kingdee.BOS.Orm.DataEntity;
using Kingdee.BOS.ServiceHelper;
using Kingdee.BOS.Util;
using System;
using System.ComponentModel;
/// h5新版主页轮播图片控件
/// 1.插件要继承自H5SmartBaseCardPlugIn（控制卡片的样式）
/// 2.构建插件修改FPanelRotation的xtype（修改为轮播图片控件）
///
[Description(“新版H5卡片二开支持图片轮播插件”)]
public class PicSliderPlugin : H5SmartBaseCardPlugIn
{
public override void AfterBindData(EventArgs e)
{
SetImageViewData();
base.AfterBindData(e);
}

将插件编译后，在新建的卡片元数据中注册好插件和构建插件。

最后，将卡片添加到主页上，可以看到卡片在主页的效果如下图。

总结，上面只是一个例子，大家可以根据具体需求去二开实现所需要的卡片，在控件支持的范围内支持卡片的展示。