为了让应用开发者能直观地看到您开发的组件效果, 当组件发布完成后, 可以去我的项目新建一个公开项目, 然后给组件配置几个demo, 然后把工作台地址配置到我的组件。

下面以评论组件为例演示配置demo的步骤:

  • 在浏览器里打开我的项目。
  • 新建一个公开项目。如何配置demo - 图1
  • 点击 进入开发工作台 按钮, 然后点击 添加页面 来新建一个叫做 基本用法 的页面。
  • 双击右边流程图中的窗口, 找到 comment-demo 组件, 然后点击右边的 添加组件, 最后点击最下面的 添加 按钮就会跳转到组件的配置页面。
  • 和之前一样 数据源类型那选择 静态数据, 然后把下面的数据填充到数据源输入框里。
  1. {
  2. "rows": [
  3.  {
  4.    "avatar": "https://f11.baidu.com/it/u=459861544,4150440756&fm=76",
  5.    "nickname": "张三",
  6.    "uid": 1,
  7.    "id": 1,
  8.    "created": "2017-06-01 10:10:10",
  9.    "content": "我只想说自己小学是学习过这篇文章写过读后感！"
  10.  },
  11.   {
  12.    "avatar": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1612291590,1464076117&fm=58&bpow=640&bpoh=480",
  13.    "nickname": "李四",
  14.    "uid": 2,
  15.    "id": 2,
  16.    "created": "2017-06-01 10:10:10",
  17.    "content": "好啊，法律越来越完善，接下来就看执行的情况了，希望执法必严，违法必究。"
  18.  },
  19.  {
  20.    "avatar": "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=735405847,1467063488&fm=173&app=25&f=JPEG",
  21.    "nickname": "admin",
  22.    "uid":3,
  23.    "id": 3,
  24.    "created": "2017-06-01 10:10:10",
  25.    "content": "说的好！！！"
  26.  }
  27. ],
  28. "records": 3
  29. }

然后点击 保存数据源 按钮。

  • 配置页右边的配置项按下面这样配置:

    • 评论列表标题 里输入 评论列表。
    • 勾选 启用评论功能。
    • 评论功能生效条件 里输入 1=1。
    • 勾选 显示添加评论按钮。

  • 点击最下面的 保存 按钮, 然后点 预览页面 按钮查看组件展示效果。

  • 返回 配置页面, 复制配置页面的 url 地址, 然后打开 我的组件, 找到 comment-demo 组件然后点击 修改 按钮, 最后在演示地址输入框里粘贴刚才复制的工作台地址, 然后提交。如何配置demo - 图2

配置页面效果

如何配置demo - 图3

预览页面效果

如何配置demo - 图4