# 首页拖拽 * * * * * <a style="font-size:30px" href="https://share.weiyun.com/5PlCD0P">点击查看视频介绍</a> ### 功能介绍: <table width="100%"> <tr style="background-color:#630863;color:white"> <td width="20%" align="center" >功能</td> <td align="center" >介绍</td> </tr> <tr> <td width="20%" align="center">首页拖拽</td> <td>首页可以自定义编辑,通过拖拽相应的组件来组成首页,或编辑其他的店铺TAB。</td> </tr> </table> ### 页面介绍: <table width="100%"> <tr style="background-color:#630863;color:white"> <td width="20%" align="center" >类型</td> <td align="center" >介绍</td> <td align="center" >介绍</td> </tr> <tr> <td width="20%" align="center">超级首页</td> <td>可自定义首页布局样式,最下边的tab页面(首页、分类、发现、购物车、我的)不可以修改,固定的。 </td> <td align="center"> <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> </tr> <tr> <td width="20%" align="center">超级单页</td> <td>可自定义首页,还可以选择性的显示其他的tab页面(最下边的首页、分类、发现、购物车、我的),可以修改某一个tab页面的名称和展示图标,也可以设置不显示。</td> <td align="center"> <img width="80%" src="http://static.wexiaocheng.com/1/2018-03-30/d0b5ef1504f7baeebd53b33e4066e270.jpg"/></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/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 width="100%" align="center" valign="middle"> <img width="95%" 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%B52.jpg"/> </td> </tr> </tbody> </table> ### 拖拽编辑页面如何进入: <ol> <li>登录微小程后台,默认进入控制台,点击【设置主题】。</li> <p align="center" valign="middle" > <img class="img"src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%B6%E4%BD%9C/%E8%B6%85%E7%BA%A7%E6%8B%96%E6%8B%BD%E5%BC%8F/%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/kancloud/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%B6%E4%BD%9C/%E8%B6%85%E7%BA%A7%E6%8B%96%E6%8B%BD%E5%BC%8F/%E7%82%B9%E5%87%BB%E4%BD%BF%E7%94%A8%E8%B6%85%E7%BA%A7%E6%8B%96%E6%8B%BD%E5%BC%8F.png"/> </p> <li> 在页面上方,店铺模板名称为:超级拖拽式,点击右边的“编辑”按钮,进入编辑页面。</li> <p align="center" valign="middle" > <img class="img"src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%B6%E4%BD%9C/%E8%B6%85%E7%BA%A7%E6%8B%96%E6%8B%BD%E5%BC%8F/%E7%82%B9%E5%87%BB%E7%BC%96%E8%BE%91.png"/> </p> <li>当前页面没有页面,需要点击右上角的“新建页面”按钮,创建一个新的页面来作为首页,当创建多个页面的时候,只能选择其中一个页面作为首页。</li> <p align="center" valign="middle" > <img class="img"src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%B6%E4%BD%9C/%E8%B6%85%E7%BA%A7%E6%8B%96%E6%8B%BD%E5%BC%8F/%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/kancloud/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%B6%E4%BD%9C/%E8%B6%85%E7%BA%A7%E6%8B%96%E6%8B%BD%E5%BC%8F/%E5%A1%AB%E5%86%99%E9%A1%B5%E9%9D%A2%E4%BF%A1%E6%81%AF.png"/> </p> <table style="font-weight:bold"> <tr> <td width="20%" align="center" style="background-color:grey;color:white">名称</td> <td align="center" colspan="2" style="background-color:grey;color:white">介绍</td> </tr> <tr> <td width="20%" align="center">页面标题</td> <td >填写页面的标题,显示在页面顶端</td> </tr> <tr> <td align="center">背景颜色</td> <td >页面的背景色,默认是白色</td> </tr> <tr> <td rowspan="2" align="center">页面类型</td> <td><span class="red b">1.超级首页</span><br/>可自定义首页布局样式,最下边的tab页面(首页、分类、发现、购物车、我的)不可以修改,固定的</td> </tr> <tr> <td><span class="red">2.超级单页</span><br/><span>可自定义首页,还可以选择性的显示其他的tab页面(首页、分类、发现、购物车、我的),可以修改某一个tab页面的名称和展示图标,也可以设置不显示。</span></td> </tr> <tr> <td align="center">页面描述</td> <td colspan="2">填写页面的描述,分享首页的文字描述</td> </tr> </table> <li>进入小程序编辑页面,开始自定义编辑了。再下边有组件介绍!! </li> </ol> <p align="center" valign="middle" > <img class="img"src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%B6%E4%BD%9C/%E8%B6%85%E7%BA%A7%E6%8B%96%E6%8B%BD%E5%BC%8F/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BC%96%E8%BE%91%E9%A1%B5%E9%9D%A2.png"/> </p> <p style="font-size:34px;font-weight:bold;color:red;">拖拽组件介绍:</p> #### 基本组件 <table width="100%" style="font-weight:normal"> <tr> <td width="20%" align="center" style="background-color:grey;color:white">名称</td> <td align="center" style="background-color:grey;color:white">介绍</td> <td align="center" style="background-color:grey;color:white">效果图</td> </tr> <tr> <td align="center">轮播广告</td> <td >插入一个轮播图,最多支持5张图片,尺寸750*352比例,拥有4种展示样式</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E8%BD%AE%E6%92%AD%E5%9B%BE.png"></td> </tr> <tr> <td align="center">商品模块</td> <td >插入一个展示商品的区域,拥有5种样式来展示店铺的商品,可以自定义选择商品</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E5%95%86%E5%93%81%E7%BB%84%E4%BB%B6.png"></td> </tr> <tr> <td align="center">店铺头部</td> <td >插入一个区域,展示店铺的名称以及的店铺logo图</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E5%BA%97%E9%93%BA%E5%A4%B4%E9%83%A8.png"></td> </tr> <tr> <td align="center">搜索模块</td> <td >插入一个搜索框,可搜索小程序里的商品</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E6%90%9C%E7%B4%A2.png"></td></tr> <tr> <td align="center">标题栏</td> <td >插入一个标题名称,名称可自定义,例如:热销商品</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E6%A0%87%E9%A2%98.png"></td></tr> <tr> <td align="center">文本模块</td> <td >插入一个文本区域,可自定义输入文本</td> <td align="center" ><img class="img" src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E6%96%87%E5%AD%97%E6%A8%A1%E5%9D%97.png"></td></tr> <tr> <td align="center">空白占位</td> <td >插入一个空白的区域,为了使两个组件隔开一定距离,距离可自定义</td> <td align="center" ><img class="img" src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E7%A9%BA%E7%99%BD%E5%8D%A0%E4%BD%8D.png"></td> </tr> <tr> <td align="center">图文模块</td> <td >插入一个图文的区域,图片和文字自定义</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E5%9B%BE%E6%96%87.png"></td></tr> <tr> <td align="center">图片导航</td> <td >插入一个图片,图片可以链接到商品、文章或功能页面。实现点击图片跳转页面。</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E5%9B%BE%E7%89%87%E5%AF%BC%E8%88%AA.png"></td></tr> <tr> <td align="center">菜单定位</td> <td >插入一个多个标题的列表,可实现,点击标题,下边的页面跟着变化页面内容</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E8%8F%9C%E5%8D%95%E5%AE%9A%E4%BD%8D.png"></td> </tr> <tr> <td align="center">滚动消息</td> <td >插入一段话,类似活动公告,实现文字滚动</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E6%BB%9A%E5%8A%A8%E6%B6%88%E6%81%AF.png"></td> </tr> <tr> <td align="center">分割线</td> <td >插入一条分割线</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E5%88%86%E5%89%B2%E7%BA%BF.png"></td></tr> <tr> <td align="center">店铺导航</td> <td >插入一个导航,可以自定名称和图标,实现点击跳转其他页面</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E5%BA%97%E9%93%BA%E5%88%86%E7%B1%BB.png"></td></tr> <tr> <td align="center">视频</td> <td >插入一个视频,视频链接只支持腾讯、搜狐、芒果TV!</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E8%A7%86%E9%A2%91.png"></td></tr> <tr> <td align="center">通用表单</td> <td >插入一个表单,让客户提交联系方式等信息,商家来获得与客户的直接沟通。需要提前在“小程序”—“通用表单”里添加表单,然后在这里直接选择使用。</td> <td align="center" ><img src=""></td></tr> </table> #### 营销组件 <table width="100%" style="font-weight:normal"> <tr> <td width="20%" align="center" style="background-color:grey;color:white">名称</td> <td align="center" style="background-color:grey;color:white">介绍</td> <td align="center" style="background-color:grey;color:white">效果图</td> </tr> <tr> <td align="center">优惠券</td> <td >插入优惠券,从优惠券列表里选择,最多展示10张</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E4%BC%98%E6%83%A0%E5%88%B8.png"></td> </tr> <tr> <td align="center">拼团模块</td> <td >插入一个拼团的商品区域</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E5%9B%A2%E8%B4%AD.png"></td> </tr> <tr> <td align="center">秒杀模块</td> <td>插入一个秒杀的商品区域</td> <td align="center" ><img src="http://static.wexiaocheng.com/jiaocheng/kancloud/%E5%88%B6%E4%BD%9C%E6%B5%81%E7%A8%8B/%E5%8A%9F%E8%83%BD/%E9%A6%96%E9%A1%B5%E6%8B%96%E6%8B%BD/%E7%A7%92%E6%9D%80.png"></td> </tr> </table> #### 行业组件 <table width="100%" style="font-weight:normal"> <tr> <td align="center">待开发...</td> </tr> </table>