百度amis低代码平台
一、amis简介
什么是 amis
amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。
amis优势
amis 的解决方案是基于 JSON 来配置，它的独特好处是：
不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；
不受前端技术更新的影响：百度内部最老的 amis 页面是 6 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高；
享受 amis 的不断升级：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；
可以 完全 使用 可视化页面编辑器 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。
amis 的其它亮点
提供完整的界面解决方案：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；
大量内置组件（120+），一站式解决：其它 UI 框架大部分都只有最通用的组件，如果遇到一些稍微不常用的组件就得自己找第三方，而这些第三方组件往往在展现和交互上不一致，整合起来效果不好，而 amis 则内置大量组件，包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后台页面开发只需要了解 amis 就足够了；
支持扩展：除了低代码模式，还可以通过 自定义组件 来扩充组件，实际上 amis 可以当成普通 UI 库来使用，实现 90% 低代码，10% 代码开发的混合模式，既提升了效率，又不失灵活性；
容器支持无限级嵌套：可以通过嵌套来满足各种布局及展现需求；
经历了长时间的实战考验：amis 在百度内部得到了广泛使用，在 6 年多的时间里创建了 5 万页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 JSON 配置。
amis 不适合做什么？
使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：
大量定制 UI：JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。
极为复杂或特殊的交互：
有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。
但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。
amis运行时集成方式：
- JS SDK，可以用在任意页面中
租户端目前就是使用这种方式集成，
sdk自定义组件
1.1 使用 custom 组件临时扩展
基于 custom 组件可以直接在 amis 配置实现自定义功能，它的支持面最广，是唯一支持在可视化编辑器中使用的方法。
使用 custom 组件类似如下写法：
{
label: "使用 custom 组件",
name: "username", // 如果要放在 form 中，需要设置 name，onChange
将会设置这个值
type: "custom",
// onMount 将会在组件创建时执行，默认会创建一个空 div 标签，也可以设置
inline: true 来创建 span 标签
// dom 是 dom 节点，value 是初始数据，比如表单 name
初始拿到的数据，onChange 只有在表单下才会有
onMount: (dom, value, onChange) => {
const button = ***document***.createElement("button");
button.innerText = "点击修改姓名";
button.onclick = (event) => {
// 第二个参数是要修改的表单项名称
onChange("new name", "username");
event.preventDefault();
};
dom.appendChild(button);
},
// onUpdate 将会在数据更新时被调用
// dom 是 dom 节点、data 将包含表单所有数据，prevData
是之前表单的所有数据
onUpdate: (dom, data, prevData) => {
***console***.log("数据有变化", data);
},
// onUnmount 将会在组件被销毁的时候调用，用于清理资源
onUnmount: () => {
console.log("组件被销毁");
},
};
1.2 JS SDK 注册组件
amis 组件都是基于 React 的，所以需要使用一个简单的 React 组件来注册，可以是函数组件也可以是类组件，下面以函数组件为示例：
let amis = amisRequire("amis/embed");
let amisLib = amisRequire("amis");
let React = amisRequire("react");
// 自定义组件，props 中可以拿到配置中的所有参数，比如 props.label 是
'Name'
function CustomComponent(props) {
let dom = React.useRef(null);
React.useEffect(function () {
// 从这里开始写自定义代码，dom.current 就是新创建的 dom 节点
// 可以基于这个 dom 节点对接任意 JavaScript 框架，比如 jQuery/Vue 等
dom.current.innerHTML = "custom";
// 而 props 中能拿到这个
});
return React.createElement("div", {
ref: dom,
});
}
//注册自定义组件，请参考后续对工作原理的介绍
amisLib.Renderer({
test: /(^|/.)my-custom/,
})(CustomComponent);
let amisScoped = amis.embed("#root", {
type: "page",
title: "表单页面",
body: {
type: "form",
mode: "horizontal",
api: "/saveForm",
body: [
{
label: "Name",
type: "my-custom", // 注意这个的 type 对应之前注册的 test
name: "custom",
},
],
},
});
1.3 JS-SDK引入 Vue - Element UI
首先在页面中加入 Element UI 所需的依赖
<linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/><script
src="https://unpkg.com/vue/dist/vue.js"></script><script
src="https://unpkg.com/element-ui/lib/index.js"></script>
然后将前面的 React.useEffect 改成如下即可：
React.useEffect(function () {
dom.current.innerHTML = `
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
`;
new Vue({
el:dom.current,
data: function () {
return { visible: false };
},
});
});
2. React，可以用在 React 项目中
需要在react项目中使用，暂时未研究，
amis-editor编辑器集成
通过编辑器直接拖拽组件自动生成，目前 amis-editor 未开源，但可以免费使用（包括商用）
地址：https://aisuda.github.io/amis-editor-demo/#
github 地址：https://github.com/aisuda/amis-editor-demo
租户端演示地址,从编辑时到运行时打通。
http://192.168.1.105:8082/channel-management/index-2
参考
官方demo： https://github.com/Hdj2048228/amis-editor-demo
amis-vue-template https://github.com/kevin361419446/amis-vue-template [vue-amis-sdk. https://github.com/h7ml/vue-amis-sdk]{.underline}
