# 拖拽操作教程
* * * * *
### ※功能介绍：
<table width="100%">
<tr style="background-color:#630863;color:white;font-weight:bold">
<td width="20%" align="center" >功能</td>
<td align="center" >介绍</td>
</tr>
<tr>
<td width="20%" align="center">拖拽</td>
<td>小程序的展示页面可以自定义编辑，通过拖拽相应的组件来组成页面的布局和功能。</td>
</tr>
</table>
### ※拖拽案例：
<table width="100%">
<tbody>
<tr style="border: 0xp solid white;">
<td width="100%" align="center" valign="middle" style="border: 0xp solid white;">
<img width="95%" src="http://static.wexiaocheng.com/jiaocheng/%E7%9C%8B%E4%BA%91/%E6%A1%88%E4%BE%8B%E5%9B%BE%E7%89%87/%E6%A1%88%E4%BE%8B%E9%A6%96%E9%A1%B5%E5%9B%BE%E7%89%87/A1%E5%BE%AE%E5%B0%8F%E7%A8%8B%E8%8A%B1%E5%BA%97%E6%A1%88%E4%BE%8B.jpg"/>
</td>
<td width="100%" align="center" valign="middle">
<img width="95%" src="http://static.wexiaocheng.com/QrImage/2018-11-16/292dff8516a3b0c2349d7a59074403b4.jpg"/>
</td>
</tr>
</tbody>
</table>
### ※拖拽编辑页面如何进入：
<ol>
<li>登录微小程后台，默认进入控制台，点击【设置主题】。</li>
<p align="center" valign="middle" >
<img class="img"src="http://static.wexiaocheng.com/jiaocheng/%E7%9C%8B%E4%BA%91/%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D/%E6%8B%96%E6%8B%BD%E7%BB%84%E4%BB%B6/%E8%AE%BE%E7%BD%AE%E4%B8%BB%E9%A2%98.png"/>
</p>
<li>进入【主题设置】，在【可用主题】里找到“超级拖拽式”模板，点击“使用”按钮，当页面提示“设置成功”即可。</li>
<p align="center" valign="middle" >
<img class="img"src="http://static.wexiaocheng.com/jiaocheng/%E7%9C%8B%E4%BA%91/%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D/%E6%8B%96%E6%8B%BD%E7%BB%84%E4%BB%B6/%E9%80%89%E6%8B%A9%E6%A8%A1%E6%9D%BF.png"/>
</p>
<li> 在页面上方，店铺模板名称为：超级拖拽式，点击右边的“编辑”按钮，进入编辑页面。</li>
<p align="center" valign="middle" >
<img class="img"src="http://static.wexiaocheng.com/jiaocheng/%E7%9C%8B%E4%BA%91/%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D/%E6%8B%96%E6%8B%BD%E7%BB%84%E4%BB%B6/%E7%BC%96%E8%BE%91%E6%A8%A1%E6%9D%BF.png"/>
</p>
<li>初次进入没有可用页面，需要点击右上角的“新建页面”按钮，创建一个新的页面来作为首页，当创建多个页面的时候，只能选择其中一个页面作为首页。</li>
<p align="center" valign="middle" >
<img class="img"src="http://static.wexiaocheng.com/jiaocheng/%E7%9C%8B%E4%BA%91/%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D/%E6%8B%96%E6%8B%BD%E7%BB%84%E4%BB%B6/%E6%96%B0%E5%BB%BA%E9%A1%B5%E9%9D%A2.png"/>
</p>
<li>填写页面的信息。</li>
<p align="center" valign="middle" >
<img class="img"src="http://static.wexiaocheng.com/jiaocheng/%E7%9C%8B%E4%BA%91/%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D/%E6%8B%96%E6%8B%BD%E7%BB%84%E4%BB%B6/%E7%BC%96%E8%BE%91%E9%A1%B5%E9%9D%A2.png"/>
</p>
<p style="font-size:18px;font-weight:bold">①页面标题：填写页面的标题，显示在页面顶端</p>
<p style="font-size:18px;font-weight:bold">②背景颜色：页面的背景色，默认是白色，可以调其他颜色</p>
<p style="font-size:18px;font-weight:bold">③页面类型：
<table width="100%">
<tr style="background-color:black;color:white;font-weight:bold">
<td align="center" >超级首页</td>
<td align="center" >超级单页</td>
</tr>
<tr style="text-indent:2em;font-weight:bold">
<td>只有首页可以自定义拖拽，最下边的tab页面：<span class="red">首页、分类、发现、购物车、我的页面不可以修改，固定的。 </span></td>
<td style="text-indent:2em">多个页面都可以编辑，最下边的tab页面：<span class="red">首页、分类、发现、购物车、我的页面都可以修改，也可以跳转其他自定义页面。</span>
</td>
</tr>
<tr align="center" >
<td> <img width="80%" src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E6%A1%88%E4%BE%8B/%E5%BE%AE%E5%B0%8F%E7%A8%8B%E8%8A%B1%E5%BA%97%E6%A1%88%E4%BE%8B/%E9%A6%96%E9%A1%B5.jpg"/> </td>
<td align="center">
<img width="80%" src="http://static.wexiaocheng.com/1/2018-03-30/d0b5ef1504f7baeebd53b33e4066e270.jpg"/></td>
</tr>
</table>
<p style="font-size:18px;font-weight:bold">④页面描述：填写页面的描述，分享首页的文字描述</p>
</p>
<li>进入小程序编辑页面，开始自定义编辑。 </li>
<p align="center" valign="middle" >
<img class="img"src="http://static.wexiaocheng.com/jiaocheng/%E7%9C%8B%E4%BA%91/%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D/%E6%8B%96%E6%8B%BD%E7%BB%84%E4%BB%B6/%E8%A3%85%E4%BF%AE%E9%A1%B5%E9%9D%A2.png"/>
</p>
<li>查看拖拽组件介绍及操作说明！<a href="https://www.kancloud.cn/weixiaocheng/zhizuo/710736" class="red">点击查看详情！</a></li>
</ol>
