aardio 范例: WebView2 - 调用 amis

//amis 低代码框架
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebView2 - 调用 amis";right=966;bottom=622)
winform.add()
/*}}*/

import web.view;
var wb = web.view(winform);

//导出 JS 函数
wb.export({ 
    //注意 aardio 函数在 JS 中返回 Promise 
    getAmisJson  = function(){
        return {
            "type":"page",
            "title":"表单页面", 
             "body": { {
                "type":"form",
                "mode":"horizontal",
                "api":"/saveForm.aardio",
                "body":{
                    {"type":"input-text","name":"name","label":"Name","required":true},
                    {"type":"input-email","name":"email","label":"Email","required":true},
                    {"type":"static-tpl","tpl":"生成的id为：${id}"}
                }, 

            },
            {
                "type": "button",
                "label": "调用 aardio 函数",
                "onEvent": {
                    "click": {
                        "actions": {
                            {
                                "actionType": "custom",
                                "script": "window.aardioMsgbox('网页调用 aardio 函数')"
                            }
                        }
                    },
                },

            } } 
        };
    }; 

    amisCopy = function(content,format){

        import win.clip.html;
        if(format=="text/html"){
            win.clip.html().write(content);
        }
        else {
            win.clip.write(content)
        } 
    };

    aardioMsgbox = function(str){ 
        winform.msgbox(str,"JS 调用 aardio");
    };
})


import wsock.tcp.asynHttpServer;
var httpServer = wsock.tcp.asynHttpServer(); 
httpServer.run( {
    ["/index.html"] = /**
<!DOCTYPE html>
<html lang="zh">
    <head>
    <meta charset="UTF-8" /> 
    <link rel="stylesheet" href="https://lib.baomitu.com/amis/6.2.2/antd.min.css" />
    <link rel="stylesheet" href="https://lib.baomitu.com/amis/6.2.2/helper.min.css" />
    <script src="https://lib.baomitu.com/amis/6.2.2/sdk.min.js"></script>
    <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 type="text/javascript">
        (async function () {
        let amis = amisRequire('amis/embed');
        let amisJson = await getAmisJson(); 
        let amisScoped = amis.embed('#root', amisJson,{},{
            theme: 'antd',//https://github.com/baidu/amis/issues/2465
            copy: (content,{format}) => { amisCopy(content,format) },
        });
        })();
    </script>
    </body>
</html>
**/;
    ["/saveForm.aardio"] = function(response,request){

        //读取表单请求发送的数据，返回值已解析为 aardio 对象
        var data = request.postJson();

        response.write({
            "status": 0,
                "msg": "保存成功",
                "data": { "id":  ..math.random(1,200) } 
        }) 
    };
}); 

//需要通过HTTP服务器访问才能支持 localStorage( 也可以指定资源文件内响应 HTTP 请求的 aardio 代码路径 ）。
wb.go( httpServer.getUrl("index.html") ) 

winform.show();
win.loopMessage();
Markdown 格式