DIYGW可视化支持导出静态html页面。DIY可视化在原有支持导出uniapp、微信小程序、支付宝小程序、百度小程序、QQ小程序、Finclip小程序等基础上，增加导出静态html页面，导出静态html页面免打包，能快速集成到传统的静态html访问的页面系统。
导出静态页面使用了有赞vant移动端类库，大家在传统的项目中，仍然会用引进vue.js vant.js加到我们的html页面里，然后html页面加上自己的实现.
特性
多个高质量组件，覆盖移动端主流场景
使用vue3+vant+js编写
集成了丰富的点击事件、比较页面跳转、地图导航、提示信息、弹窗提示、自定义方法
集成了API快速集成开发，生成API接口代码，快速API在线可视化绑定变量、支持在线绑定生成For循环、IF判断等
所见即所得的生成html页面代码、快速可视化页面导出源码
快速集成到现有采用传统html页面开发的系统，比如第三方微擎开发微信公众号移动端页面等等
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>首页</title> <link rel="stylesheet" href="common/vant.min.css" /> <script src="common/vue.js"></script> <script src="common/vant.min.js"></script> <script src="common/axios.min.js"></script> <script src="common/Session.js"></script> <script src="common/Tools.js"></script> <script src="common/Validate.js"></script> <script src="common/Page.js"></script> <script src="common/HttpService.js"></script> <meta name="author" content="DIY官网 http://www.diygw.com" /> <link rel="stylesheet" href="common/diygw-ui/index.css" /> </head> <body> <div id="app"> <div class="container"> <div class="diygw-col-24">内容</div> <img src="./static/pic1.jpg" class="response diygw-col-24" mode="widthFix" /> <div class="flex diygw-col-24"> <div class="diygw-avatar radius bg-none"> <img mode="aspectFit" class="diygw-avatar-img radius" src="./static/grid1.png" /> </div> </div> <div class="clearfix"></div> </div> </div> </body> <script type="module"> const app = Vue.createApp({ data() { return {}; }, created() { this.init(); }, methods: { async init() {} } }); app.use(vant); app.use(vant); app.config.globalProperties.$tools = new Tools(); app.config.globalProperties.$http = httpService; app.config.globalProperties.$session = Session; app.mixin({ methods: { Validate, setData, navigateTo, showModal, showToast, uploadImage } }); app.mount('#app'); </script> <style> .container { padding-bottom: 80px; } </style> </html>
