百度Amis+React实践
背景
在项目中有集成低代码平台的想法,经过多方对比最后选择了 amis,主要是需要通过 amis 进行页面配置,导出 json 供移动端和 PC 端进行渲染,所以接下来讲一下近两周研究 amis 的新的以及一些简单经验,供大家参考.
什么是 amis
amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。
如何使用 amis
在 amis 官网提供了两种使用 amis 的方式分别是
- JSSDK 可以在任意页面使用
- React 可以在 React 项目中使用
博主是在 umi 框架下结合 React 使用 amis,所以本文主要着重介绍第二种方法
在使用时需要对 amis 进行安装,项目中也需要使用 amis-editor 进行页面配置所以需要同时安装如下两个包
|
amis
首先介绍 amis,amis 提供了 render 方法来对 amis-editor 生成的 JSON 对象页面配置进行渲染,如下,在使用是 render 主要作用就是进行渲染
|
amis-editor
amis-editor 提供了一个编译器组件 <Editor />
|
在 amis 中提供了两套组件样式供我们选择,分别是 cxd(云舍)和 antd(仿 Antd),我们可以通过设置Editor
组件中 theme 属性来进行主题的选择,同时需要引入对应的组件样式在以上代码中,我们对Editor
组件进行了二次封装,暴露出了defaultPageConfig
(进入编译器默认页面 JSON 配置)属性和codeGenHandler
(代码生成保存方法),cancleGenHandler
(退出页面编辑器方法),pageChangeHandler
(页面改变方法)供外部使用
自定义组件
在 amis-editor 中使用的组件可以是我们的自定义组件.在编写自定义组件时特别需要主义的是它的 plugin 配置接下来以MyButton
为例来进行自定义组件的介绍
首先来介绍以下组件结构
|
在comp.tsx
中主要进行组件的开发
|
在上述代码中MyButtonRender
简单的对Button
组件进行了简单的封装,MyButtonRender2
对 amis 中组件的事件进行了简单的处理并暴露出去
在plugin.tsx
中主要对MyButtonRender
组件进行渲染器注册以及对组件的 plugin 进行配置,注册渲染器是为了将自定义组件拖入中间预览区域是可以正常的显示,这一操作与 amis 的工作原理有关(amis 的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component,然后把其他属性作为 props 传递过去完成渲染。工作原理
)
在plugin.tsx
中进行 panel 配置
|
当点选某个组件的时候,编辑器内部会触发面板构建动作,每个插件都可以通过实现 buildEditorPanel
来插入右侧面板。通常右侧面板都是表单配置,使用 amis 配置就可以完成。所以推荐的做法是,直接在这个插件上面定义 panelBody
或者 panelBodyCreator
即可。
具体配置可以参考上述代码,其中需要注意的是getSchemaTpl
这一方法,该方法通过获取预先通过setSchemaTpl
设置的模板来进行渲染某些元素组件,一下部分源码可进行参考,tpl 部分全部源码可参考这里
|
在index.tsx
中主要进行自定义组件插件的注册以及导出
|
其他
在拖拽组件生成页面时,amis-editor 可选择的组件有很多,如果我们想使用自己组建的同时忽略隐藏原有组件可以通过disabledRendererPlugin
来对原生组件进行隐藏
|
写在最后
一个阶段的结束伴随着另一个阶段的开始,在新的阶段中会继续学习继续进步,如文章有问题通过页脚邮箱进行联系