使用AMis Renderer快速构建页面

作者

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2020/05/06/amis-renderer-build-page/



AMis Renderer是一个前端低代码框架，通过 JSON 配置就能生成各种后台页面。

简单来看就是通过简单的配置（JSON化），搭积木一样的使用已有组件来构建页面。这个对于一些to B的简单页面或者一些简单的小项目是很实用的。

AMis Render提供两种使用方式，一种是嵌入已有的React Component中，这要求项目本质上还是一个前端工程化的项目。另外一种就是完全不关心React，也没有任何组件定制需求，极简使用。

官方Demo如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>AMIS Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" 
        href="https://houtai.baidu.com/v2/csssdk">
    <style>
        html, body, .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="root" class="app-wrapper"></div>
    <script src="https://houtai.baidu.com/v2/jssdk"></script>
    <script type="text/javascript">
    (function() {
        var amis = amisRequire('amis/embed');
        amis.embed('#root', {
            type: 'page',
            title: 'AMIS Demo',
            body: 'hello world'
        });
    })();
    </script>
</body>
</html>

其实可以看出除了JSON中的东西，其他都是固定模版，也就是说不同页面提供那段JSON即可。

页面设计

这里基本上只能使用已有组件，比较常用的有page、panel、form，其他的样式基本随bootstrap，不想折腾就可以直接使用。

API的调用要求API格式统一，返回JSON格式如下

{
  "status": 0,
  "msg": "",
  "data": {
    "online": 0
  }
}

data中的信息可以在页面上被使用，使用方式如下：

Online user: ${online}. More info refer to below links

这里就是普通的JSON表达式，如果结构层次比较深，继续写就行了。一般的for-each也是支持的。

另外支持bootstrap的布局格式，实际使用上我是没有成功用上。其他页面使用可以参考下：https://github.com/htynkn/switch-lan-play-server/blob/master/view/index.json 这个小项目所有页面都是基于AMis Render构建的。



本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2020/05/06/amis-renderer-build-page/

发表评论