自学内容网 自学内容网
自学内容网 > 正文

amis编译器与调试技巧

🕗 发布于 2025-01-18 04:00 编辑器  

文档、可视化编辑器、示例 内容有一部分只会在对应模块找到，示例 中有的东西 文档中并不一定有

amis示例

官方示例库
右上角可查看、复制配置
找到对应示例，只需要关注json的配置，配置api、路由即可
在这里插入图片描述
在这里插入图片描述

在线编译器

官方在线编译器

需要后端请求数据尽量使用离线版本
在amis-editor-demo/amis.config.js中调整对应配置即可

proxyTable: {
      /**
       * 将含有'/apiTest'路径的api代理到'http://api-test.com.cn'上，
       * 详细使用见 https://www.webpackjs.com/configuration/dev-server/#devserver-proxy
       */
      '/apiTest': {
        target: 'http://api-test.com.cn', // 不支持跨域的接口根地址
        ws: true,
        changeOrigin: true,
      },
    }

proxyTable: {
'/v2/XXXXXXXXx/api':
target:'http://localhost:8087',//不支持跨域的接口根地址 
ws: true,
changeOrigin: true,
pathRewrite: {'^/v2/XXXXXXXX/api':'/}
}

amis调试（基于 SDK 版本封装成 component 供 vue 使用）

官方文档

  1. 地址栏添加 /?amisDebug=1（编译器中显示不是很全，尽量在生成页面的浏览器中调试）
localhost:8080/index.html/?amisDebug=1#/edit/0

编辑器中效果类似于
在这里插入图片描述
在这里插入图片描述
生成页面类似于

localhost:8000/v2/XXXXXX/amis/XXXXXXXX/?amisDebug=1%3Fviews%3D1000081&views=100000000061

在这里插入图片描述
当然控制台也可以看到一部份信息
在这里插入图片描述

  1. 组件属性上直接设置debug （发布前需要去掉，不建议用）
"debug": true,
    "debugConfig": {
      "enableClipboard": true,
      "displayDataTypes": true
    }

{
  "type": "page",
  "body": {
    "type": "form",
    "title": "用户信息",
    "debug": true,
    "debugConfig": {
      "enableClipboard": true,
      "displayDataTypes": true
    },
    "body": [
      {
        "type": "input-text",
        "name": "name",
        "label": "姓名"
      },
      {
        "type": "input-email",
        "name": "email",
        "label": "邮箱"
      }
    ]
  }
}

效果类似于：
在这里插入图片描述

  1. 编辑器自定义js打断点
    在这里插入图片描述

在这里插入图片描述
ps：控制台打开才会生效，在控制台进行调试
在这里插入图片描述
同样也可以用自定义js做复杂的事件按处理


原文地址：https://blog.csdn.net/weixin_38472038/article/details/145142243

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2025