微信小程序发展至今，已经成为实体店发展的一个风口。各行各业都纷纷开始开发属于自家企业的小程序。就拿外卖行业来说，连美团、饿了么等外卖平台也创建了自己的小程序。
首先我们再做微信小程序订餐系统前，先要注册申请好小程序，申请流程如下图示：
那小编本次为大家分享的是开发小程序可视化拖拽工具中的一些经验，
开发好后极大的方便用户自由设计自己的小程序风格，各种界面都可以在系统后台自由拖拽生成不同的界面。想要什么界面，拖一拖，拽一拽，百变界面随手而来。
拖拽可视化的WEUI小程序代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="title" content="可视化布局系统">
<meta name="description" content="可拖放排序在线编辑可视化布局系统">
<meta name="keywords" content="可视化,布局,系统">
<title>可视化布局系统 - HTML我帮您</title>
<link rel="stylesheet" rel="external nofollow" href="./static/lib/weui/css/weui.css"/>
</head>
<body>
<div id="container" class="container">
<div class="page">
<div class="group inner">
<div class="weui-navbar">
<div class="weui-navbar__item weui-bar__item_on">菜单一</div>
<div class="weui-navbar__item ">菜单二</div>
<div class="weui-navbar__item ">菜单三</div>
</div>
<div class="weui-grids">
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:;" class="weui-grid">
<div class="weui-grid__icon"> <img alt="菜单一" src="./static/image/2017/01/html580b.png"> </div>
<p class="weui-grid__label">菜单一</p>
</a>
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:;" class="weui-grid">
<div class="weui-grid__icon"> <img alt="菜单二" src="./static/image/2017/01/html580.png"> </div>
<p class="weui-grid__label">菜单二</p>
</a>
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" href="javascript:;" class="weui-grid">
<div class="weui-grid__icon"> <img alt="菜单k" src="./static/lib/weui/img/icon_tabbar.png"> </div>
<p class="weui-grid__label">菜单k</p>
</a>
</div>
</body>
</html>
如下是使用新微云可视化拖拽平台生成制作的小程序界面
关于更多小程序可视化拖拽平台开发交流，可以加小编微信（lhb-1025）共同探讨哦