开发一个 Enhancer 前端组件

meislzhua 发布于2019-08-29 17:07 / 2296人阅读

摘要：全局安装组件开发工具初始化组件打开命令行终端运行下面的命令熟悉组件开发界面启动组件开发后会在默认浏览器中打开页面并显示如下如果你的默认浏览器不是建议换成来查看。

1. 介绍

Enhancer组件由组件配置页面(configurator) 和组件本身(widget) 两部分组成。

组件配置页面会将用户的配置保存成一个 JSON。

组件在预览页面会包含在一个指定的窗口容器内，获得配置的 JSON。

推荐先前往 Enhancer 教程, 将必修部分看一遍。

配置页面(configurator)

下图为 enhancer-timeline 组件的配置页面

一般配置页面分为 数据源配置 和 其他配置项, 上图中左边是数据源配置, 右边是其他配置项。

配置页面生成的 JSON 如下:

{
  "dataSourceId": 1,       // 数据源 id, 通过这个id能获取到组件数据
  "direction": "vertical", // 展示方向
  "showCenter": true,      // 居中显示
  "icon":"fas fa-tag",     // 节点图标
  "iconSize": 16,          // 图标大小
  "titleFontSize": 16,     // 标题字体大小
  "contentFontSize": 14,   // 内容字体大小
  "footerFontSize": 12     // 底部字体大小
}

组件预览页面(widget)

下图为 enhancer-timeline 组件的预览页面:

2. 创建组件

这里我们准备开发一个列表组件, 组件名叫 widget-dev-demo. 以列表的形式渲染从数据源获取到的数据, 该组件可以控制列表中的数据是否是单行渲染。下图中左右两部分分别是不同配置的展示

2.1 环境准备

请到 node.js 去下载安装 node。

全局安装组件开发工具 ewtool:

  npm install ewtool -g --registry=https://registry.npm.taobao.org

2.2 初始化组件

打开命令行终端, 运行下面的命令:

mkdir widget-dev-demo
cd widget-dev-demo
ewtool
npm install --registry=https://registry.npm.taobao.org
npm start

3. 熟悉组件开发界面

启动 widget-dev-demo 组件开发后, 会在默认浏览器中打开页面并显示如下:

如果你的默认浏览器不是 Chrome, 建议换成 Chrome 来查看。

3.1 场景列表

自定义场景: 每个组件都会有很多的配置项, 为了展示不同配置的效果, 可以点击下面的另存为按钮, 把组件的配置另存为一个场景。

定向场景: 定向场景专门用于测试组件的不同API和状态是否能正常运行, 组件开发完成时可以用这些场景来测试组件。

3.2 组件配置区

开发者需要将组件的不同配置项渲染在这块区域。

3.3 操作按钮

从左到右分别是:

预览组件, 保存配置, 另存为(将组件配置另存为一个场景), 查看配置。

3.4 注意

如果在还没有点击保存配置按钮之前就点击了预览组件按钮, 会打开新页面显示如下:

会看到组件一直在加载中, 这是因为此时组件的配置还没保存过, 需要先点保存配置按钮。

4. 开发配置器

widget-dev-demo 组件配置器的具体代码请参考 configurator, 下面介绍一下主要步骤:

4.1 在 contruct 函数里初始化 html 元素

const tplHTML = template({
  locale: locale()
});

$("body").html(tplHTML);

// 初始化数据源配置器
this.dataSourceConfig = Enhancer.DatasourceManager.createConfigurator("dataSourceDom", {
  supportedTypes: ["rdb", "http", "static", "jsonp"],
  dataSpecification: "dataSpecification", // 组件数据格式说明 
  onSave: (source) => {
    this.profile.dataSourceId = source.id;
  }
});

4.2 在 setProfile 函数里回填之前保存过的配置项

// 用保存过的数据源Id区加载数据源, 然后回填给数据源配置器
if (this.profile.dataSourceId) {
  Enhancer.DatasourceManager.getDatasource(this.profile.dataSourceId, (source) => {
    this.dataSourceConfig.setConfig(source);
  });
}

// 回填 单行显示 配置项
if (this.profile.oneLine) {
  $("input[name=oneLine]").prop("checked", true);
}

4.3 在 getProfile 函数里检查配置的合法性并返回新的配置数据

由于 widget-dev-demo 组件只有一个数据源配置项和一个单行显示的配置项, 因此 getProfile 函数只会返回这两个字段。

return {
  dataSourceId: this.profile.dataSourceId,
  oneLine: $("input[name=oneLine]").prop("checked")
};

开发完成后的效果

5. 开发组件

widget-dev-demo 组件的具体代码请参考widget, 主要代码如下:

// 获取组件所在的 html 容器
const $container = this.getContainer();

// 通过配置器里保存的数据源Id加载数据
this.getSourceData(profile.dataSourceId, (data) => {
  // 将 数据源数据(data.rows) 和 配置数据(profile.oneLine) 塞给 tpl 模版进行渲染 
  $container.html(tpl({
    locale: locale(),
    data: data.rows,
    oneLine: profile.oneLine
  }));

  // 通知平台 组件已经初始化完成
  this.trig("complete");
});

6. 配置&预览组 6.1 配置数据源

回到配置页面。

由于是本地开发, 数据源类型请选择静态数据。

将下面的数据粘贴到数据源编辑器里。

{
  "rows": [{
    "content": "In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim."
  }, {
    "content": "Lorem Ipsum has been the industry"s standard dummy text eve. Lorem Ipsum has been the industry"s standard dummy text eve. Lorem Ipsum has been the industry"s standard dummy text eve. Lorem Ipsum has been the industry"s standard dummy text eve"
  }, {
    "content": "Lorem Ipsum has been the industry"s standard dummy text eve"
  }]
}

点击保存数据源按钮。

点击保存按钮。

6.2 预览组件

到配置页面, 点击预览按钮后可以看到的效果如下:

以列表的形式渲染数据, 当宽度不够时文字自动换行显示。

到配置页面, 将单行显示复选框勾上, 然后点保存按钮, 然后再点预览按钮可以看到的效果如下:

以列表的形式渲染数据, 当宽度不够时超出部分会显示成省略号。

7. 发布组件

组件发布可以通过下面两种方式来发布, 任选其一即可

方式一: 命令发布

打开命令行终端, 切换到 widget-dev-demo 目录下。

运行下面的命令:

ewtool login // 用在 enhancer 平台上注册的用户名、密码进行登录, 如已登录过请忽略
ewtool release

方式二: 网页发布

打开命令行终端, 切换到 widget-dev-demo 目录下。

运行下面的命令:

ewtool pack // 会将组件代码打包到 widget-dev-demo/release 下

用浏览器打开 https://developer.enhancer.io/myWidgets, 点击添加第一个组件, 在组件添加页面填写组件相关内容然后提交组件。

组件发布完成后可以在浏览器里打开我的组件, 然后继续完善组件相关的信息

混合云云服务器前端组件开发前端组件前端组件维护通用前端组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114118.html

开发一个 Enhancer 前端组件

摘要：全局安装组件开发工具初始化组件打开命令行终端运行下面的命令熟悉组件开发界面启动组件开发后会在默认浏览器中打开页面并显示如下如果你的默认浏览器不是建议换成来查看。 1. 介绍 Enhancer组件由组件配置页面(configurator) 和组件本身(widget) 两部分组成。组件配置页面会将用户的配置保存成一个 JSON。组件在预览页面会包含在一个指定的窗口容器内，获得配...

haoguo 2019-08-02 11:51 评论0 收藏0
开发一个 Enhancer 前端组件

摘要：全局安装组件开发工具初始化组件打开命令行终端运行下面的命令熟悉组件开发界面启动组件开发后会在默认浏览器中打开页面并显示如下如果你的默认浏览器不是建议换成来查看。 1. 介绍 Enhancer组件由组件配置页面(configurator) 和组件本身(widget) 两部分组成。组件配置页面会将用户的配置保存成一个 JSON。组件在预览页面会包含在一个指定的窗口容器内，获得配...

wwq0327 2019-08-23 12:38 评论0 收藏0
Redux专题：中间件

摘要：好处就是不再需要能够处理异步的中间件了。不过，它是一个研究中间件很好的范本。执行它，返回的是由第二层函数组成的中间件数组。也就是说呀同学们，除了最后一个中间件的是原始的之外，倒数往前的中间件传入的都是上一个中间件的逻辑函数。本文是『horseshoe·Redux专题』系列文章之一，后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的个人博客获得无与伦比的阅...

ybak 2019-08-23 12:09 评论0 收藏0
初识react高阶组件

摘要：也明确了大数据时代，前端所应该具备的职业素养高阶组件高阶组件，高阶组件就是一个组件包裹着另外一个组件中两种的实现方法中两种的实现方法返回的类继承了。之所以被称为是因为被继承了，而不是继承了。在这种方式中，它们的关系看上去被反转了。前言最近一直再做数据可视化，业务的理解，数据的理解确实如数据可视化要求的一样，有了更多的理解。但是技术上还停留在echart，Hchart, 画图上。正好...

IamDLY 2019-08-22 16:15 评论0 收藏0
如何用 Enhancer 快速开发移动应用

摘要：旧页面如何运行到移动端首先确保选用组件都支持移动端。如何部署并访问移动应用部署方式与应用部署方式完全一致。如何跟其他社交应用集成平台最终发布得到的是一个，也即一个页面使用了移动端的浏览器预览。点击观看视频演示如果您还未具备 Enhancer 开发经验，建议您先学习完《快速上手》，在了解平台基本操作之后，再来尝试移动应用开发，这样会事半功倍。如果您已具备 Enhancer 开发经验...

liuhh 2019-08-16 16:01 评论0 收藏0