点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。
在经历了十几年的发展后,前端开发变得越来越复杂,门槛也越来越高,要使用当下流行的 UI 组件库,你必须懂npm、webpack、react/vue,必须熟悉ES6语法,最好还了解状态管理,比如Redux,如果没接触过函数式编程,光入门都很费劲,而入门之后会发现它还有巨大的生态,相关的库有2347个,很多功能相似,挑选成本高。
然而前端技术的发展不会停滞,等学完这些后可能会发现大家都用Hooks了、某个打包工具取代Webpack了。使用amis只需要简单配置就能完成所有页面开发,你不需要了解 React/Vue、Webpack,甚至不需要很了解 JavaScript,即便没学过 amis 也能猜到大部分配置的作用,对于大部分常用页面,应该使用最简单的方法来实现,甚至不需要学习前端框架和工具。
amis 的亮点低代码可视化编辑器
amis的定位是一个低代码的前端框架,所以这里我们只介绍低代码部分,如果你想使用纯JSON配置来完成页面开发,那么请查看一下文档说明,当然你也可以使用90%低代码+10%代码开发的混合模式,既提升了效率,又不失灵活性。
注意:目前 amis-editor 未开源,但可以免费使用(包括商用);要使用编辑器必须熟悉 React
在项目中使用amis-editor安装依赖
npm i amis-editor
使用方法
import {Editor} from 'amis-editor';
render() {
return (
<Editor
{...props}
/>
)
}
属性说明:添加自定义组件
加自定义编辑器的方式有两种:
效果都一样,重点还是怎么写个 Plugin,示例:
import {BasePlugin} from 'amis-editor';
export class MyRendererPlugin extends BasePlugin {
rendererName = 'my-renderer';
// 暂时只支持这个,配置后会开启代码编辑器
$schema = '/schemas/UnkownSchema.json';
// 用来配置名称和描述
name = '自定义渲染器';
description = '这只是个示例';
// tag,决定会在哪个 tab 下面显示的
tags = ['自定义', '表单项'];
// 图标
icon = 'fa fa-user';
// 用来生成预览图的
previewSchema = {
type: 'my-renderer',
target: 'demo'
};
// 拖入组件里面时的初始数据
scaffold = {
type: 'my-renderer',
target: '233'
};
// 右侧面板相关
panelTitle = '自定义组件';
panelControls = [
{
type: 'tabs',
tabsMode: 'line',
className: 'm-t-n-xs',
contentClassName: 'no-border p-l-none p-r-none',
tabs: [
{
title: '常规',
controls: [
{
name: 'target',
label: 'Target',
type: 'text'
}
]
},
{
title: '外观',
controls: []
}
]
}
];
}
定义好 plugin 后,可以有两种方式启用
// 方式 1,注册默认插件,所有编辑器实例都会自动实例化。
import {registerEditorPlugin} from 'amis-editor';
registerEditorPlugin(MyRendererPlugin);
// 方式2,只让某些编辑器启用
() => (
)
示例只做了简单的说明,可用属性还有很多,具体还是先看 npm 包里面的.d.ts文件。
编辑器效果网页版
移动端
拖拽组件
查看代码
从网页到移动端,包括App、小程序等,amis可以满足的页面需求,但在一些特殊场景,比如有些页面追求个性化的视觉效果,amis 就不适用,实际上绝大部分前端 UI 组件库也都不适合,只能定制开发。
传送门
开源协议:Apache 2.0
开源地址:
往期推荐
字节都在用的代码自动生成 高级前端理解的CommonJS模块和ESM模块 盘点那些前端项目上的规范工具
最后
欢迎加我微信,拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...
点个在看支持我吧
暂无评论内容