微信小程序發展至今，已經成爲實體店發展的一個風口。各行各業都紛紛開始開發屬於自家企業的小程序。就拿外賣行業來說，連美團、餓了麼等外賣平臺也創建了自己的小程序。
首先我們再做微信小程序訂餐系統前，先要註冊申請好小程序，申請流程如下圖示：
那小編本次爲大家分享的是開發小程序可視化拖拽工具中的一些經驗，
開發好後極大的方便用戶自由設計自己的小程序風格，各種界面都可以在系統後臺自由拖拽生成不同的界面。想要什麼界面，拖一拖，拽一拽，百變界面隨手而來。
拖拽可視化的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" 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 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 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 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）共同探討哦