零代码前端工具库——IRenderer

令狐花生
137 阅读3分钟

提到DreamWeaver，不少朋友已经对这个名字感到陌生。但在笔者上学的时候，那可是web开发入门最常用的工具。那时笔者还是单纯的小白，在它的帮助下就顺利的完成了老师布置的课题。尽管如今是花开花落，人聚人散。DreamWeaver已失去往日的辉煌，但国内仍不乏有微搭、宜搭、爱速搭之类的后起之秀不断涌现。总之，web开发者在可视化开发道路上的探索是从未停止的。

笔者通过6年+的职场捶打，在形形色色的业务场景中、接手过的或优雅或随意的代码里，也提炼出了一套实用可落地的web可视化解决方案——IRenderer。现在，就请各位观众老爷们随着笔者的介绍走近了解一下吧。

首先，下载方式和引用方式如下：

//下载
npm install i-renderer
// 整体引入
import {IRenderer, IEditor, Schema} from 'i-renderer';
// 按需引入
import IRenderer, {Schema} from 'i-renderer/dist/js/renderer';
import IEditor from 'i-renderer/dist/js/editor';
import 'i-renderer/dist/css/index.css';

app.use(IRenderer);app.component(IEditor);
// 使用
const pageSchema = {  
    renderer: 'page',
    initData: {
        name: 'IRenderer',
    },
    body: [
        {
          renderer: 'html',
          html: '<h1>欢迎使用<%=data.name%></h1>',
        }
    ]
};
<schema :init-schema="pageSchema" />

接下来，以可视化配置的形式在手机端快速搭建一个卡片列表。如下：

  • 第一步，在【空白页】点击进入编辑态

          图片

  • 第二步，在【页面】节点下添加【卡片】节点并保存

          图片

  • 第三步，承接第二步保存后点击【卡片】，填写请求路径

          图片

  • 第四步，点击【子节点】并在指定位置添加【孙子节点】并保存

          图片

  • 第五步，承接第四步保存后，点击并编辑【html】，输入显示内容后保存

          图片

  • 第六步，呈现最终的卡片列表

  • 图片

以上便是【卡片】静态列表的配置方式，初步支持翻页查询用户姓名。接下来在此基础上增加一个【编辑按钮】，实现弹窗编辑姓名。步骤如下如：

  1. 点击编辑【卡片】，添加并保存【行为】子节点
  2. 点击编辑【行为】，指定并保存【行为类型】为【对话框】
  3. 点击编辑【对话框】，添加并保存【表单】子节点
  4. 点击编辑【表单】，指定并保存【接口路径】和【子表单项】
  5. 最终实现【卡片项】的弹窗编辑。

图片 以上只是粗略的实现了列表的【查】、【改】，额外的优化逻辑需要【自行组合配置项】才能完成，就不一一列举了。

        总体来讲，页面控件还是elementui库里的组件，只是通过IRenderer的编排能力将其关联。整体对于基础的、轻交互的【增删改查】逻辑是能够完全脱离代码支持；其他的业务场景需求，如：视频、多任务、图表报表等也做了覆盖支持。为了脱离代码的同时脱离文档手册，编辑器的每个属性配置项尽量做的语义化，在个别属性、控件有详细使用说明，相信能降低一些学习坡度。

     最后，更多的功能细节可移步示例官网查看(songshuzhong.github.io/i-website/d…)

avatar
文章
阅读
粉丝