拖拽组件 · 小程序制作流程

拖拽组件介绍及操作： ※基本组件 <table> <tr> <td> <ol> <li>轮播广告：</li> <img width="40%" 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%BD%AE%E6%92%AD%E5%B9%BF%E5%91%8A.png"> 组件介绍：插入一个轮播图，最多支持5张图片，尺寸750*352比例，拥有7种展示样式。 操作教程：<a class="red" href="https://share.weiyun.com/5qxUjkJ">点击查看详情</a> <hr> <li>商品模块</li> <img width="40%" 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/%E5%95%86%E5%93%81%E7%BB%84%E4%BB%B6.png"> 组件介绍：插入一个展示商品的区域，拥有5种样式来展示店铺的商品，可以自定义选择商品 操作教程：A→B A：先进行商品发布操作，<a href="https://www.kancloud.cn/weixiaocheng/zhizuo/701920">点击查看教程</a> B：再拖拽商品模块组件，选择需要展示的商品。<a href="https://share.weiyun.com/5xkO7w8">点击查看教程</a> <hr> <li>店铺头部</li> <img width="40%" 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/%E5%BA%97%E9%93%BA%E5%A4%B4%E9%83%A8.png"> 组件介绍：插入一个区域，展示店铺的名称以及的店铺logo图 操作教程：<a href="https://share.weiyun.com/5ZphgBA">点击查看教程</a> <hr> <li>搜索模块</li> <img width="40%" 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%90%9C%E7%B4%A2%E6%A8%A1%E5%9D%97.png"> 组件介绍：插入一个搜索框，可搜索小程序里的商品 操作教程：<a href="https://share.weiyun.com/5VM1rGk">点击查看教程</a> <hr> <li>标题栏</li> <img width="40%" 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%A0%87%E9%A2%98%E6%A0%8F.png"> 组件介绍：插入一个标题名称，名称可自定义，例如：热销商品 操作教程：<a href="https://share.weiyun.com/5RQ2Y8D">点击查看教程</a> <hr> <li>文本模块</li> <img width="40%" 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%87%E6%9C%AC%E6%A8%A1%E5%9D%97.png"> 组件介绍：插入一个文本区域，可自定义输入文本 操作教程：<a href="https://share.weiyun.com/5sQC3q3">点击查看教程</a> <hr> <li>空白占位</li> <img width="40%" 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%A9%BA%E7%99%BD%E5%8D%A0%E4%BD%8D.png"> 组件介绍：插入一个空白的区域，为了使两个组件隔开一定距离，距离可自定义 操作教程：<a href="https://share.weiyun.com/5J2QhL6">点击查看</a> <hr> <li>图文模块</li> <img width="40%" 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/%E5%9B%BE%E6%96%87%E6%A8%A1%E5%9D%97.png"> 组件介绍：插入一个图文的区域，图片和文字自定义 操作教程：<a href="https://share.weiyun.com/5pNI5V4">点击查看教程</a> <hr> <li>图片导航</li> <img width="40%" 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/%E5%9B%BE%E7%89%87%E5%AF%BC%E8%88%AA.png"> 组件介绍：插入一个图片，图片可以链接到商品、文章或功能页面。实现点击图片跳转页面。 操作教程：<a href="https://share.weiyun.com/5Ghlok5">点击查看教程</a> <hr> <li>菜单定位</li> <img width="40%" 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%8F%9C%E5%8D%95%E5%AE%9A%E4%BD%8D.png"> 组件介绍：插入一个图片，图片可以链接到商品、文章或功能页面。实现点击图片跳转页面。 操作教程：<a href="https://share.weiyun.com/5y9xBnJ">点击查看教程</a> <hr> <li>滚动消息</li> <img width="40%" 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%BB%9A%E5%8A%A8%E6%B6%88%E6%81%AF.png"> 组件介绍：插入一段话，类似活动公告，实现文字滚动 操作教程：<a href="https://share.weiyun.com/5Xl3nJV">点击查看教程</a> <hr> <li>分割线</li> <img width="40%" 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/%E5%88%86%E5%89%B2%E7%BA%BF.png"> 组件介绍：插入一条分割线 操作教程：<a href="https://share.weiyun.com/5go6wFS">点击查看教程</a> <hr> <li>店铺导航</li> <img width="40%" 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/%E5%BA%97%E9%93%BA%E5%AF%BC%E8%88%AA.png"> 组件介绍：插入一个导航区域，可以自定名称和图标，实现点击跳转其他页面 操作教程：<a href="https://share.weiyun.com/5YOw9js">点击查看教程</a> <hr> <li>通用表单</li> <img width="40%" 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%9A%E7%94%A8%E8%A1%A8%E5%8D%95.png"> 组件介绍：插入一个表单，让客户提交联系方式等信息，商家来获得与客户的直接沟通。需要提前在“小程序”—“通用表单”里添加表单，然后在这里直接选择使用。 操作教程：<a href="https://share.weiyun.com/5abjeHu">点击查看教程</a> <hr> <li>视频</li> <img width="40%" 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%A7%86%E9%A2%91.png"> 组件介绍：插入一个视频，视频链接只支持腾讯、搜狐、芒果TV! 操作教程：<a href="https://share.weiyun.com/5ZM2Zxl">点击查看教程</a> <hr> <li>文章模块</li> <img width="40%" 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%87%E7%AB%A0%E6%A8%A1%E5%9D%97.png"> 组件介绍：插入一个区域，用来展示文章，数量可以自定义 <hr> <li>服务模块</li> <img width="40%" 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%9C%8D%E5%8A%A1%E6%A8%A1%E5%9D%97.png"> 组件介绍：插入一个展示服务的区域，拥有2种样式，可以自定义选择展示服务 <hr> <li>预约模块</li> <img width="40%" 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%A2%84%E7%BA%A6%E6%A8%A1%E5%9D%97.png"> 组件介绍：插入一个展示预约的区域，可以自定义“预约”按钮颜色和文字颜色 <hr> <li>联系我们</li> <img width="40%" 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%81%94%E7%B3%BB%E6%88%91%E4%BB%AC.png"> 组件介绍：插入一个区域，展示公司或店铺的位置地图、电话等信息。 <hr> <li>店铺tab</li> <img width="40%" 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/%E5%BA%97%E9%93%BAtab.png"> 组件介绍： 这个只有超级单页才有这个功能，插入分页的tab，可以自定义分页的名称、点击图标、跳转链接。 <hr> </ol> </td> </tr> </table> ※营销组件 <table> <tr> <td> <ol> <li>优惠券：</li> <img width="40%" 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/%E4%BC%98%E6%83%A0%E5%88%B8.png"> 组件介绍：插入优惠券，从优惠券列表里选择，最多展示10张 操作教程：A→B A：先添加优惠券，<a href="https://www.kancloud.cn/weixiaocheng/zhizuo/701921">点击查看教程</a> B：再拖拽优惠券组件，选择需要展示的优惠券。<a href="https://share.weiyun.com/5cXlX8M">点击查看教程</a> <hr> <li>拼团模块：</li> <img width="40%" 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%8B%BC%E5%9B%A2.png"> 组件介绍：插入一个拼团的商品区域 操作教程：A→B A：先发布拼团活动，<a href="https://www.kancloud.cn/weixiaocheng/zhizuo/701923">点击查看教程</a> B：再拖拽拼团组件，选择需要展示的拼团活动。<a href="https://share.weiyun.com/5F0hryd">点击查看教程</a> <hr> <li>秒杀模块：</li> <img width="40%" 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%A7%92%E6%9D%80.png"> 组件介绍：插入一个拼团的商品区域 操作教程：A→B A：先发布秒杀活动，<a href="https://www.kancloud.cn/weixiaocheng/zhizuo/701922">点击查看教程</a> B：再拖拽秒杀组件，选择需要展示的秒杀活动。<a href="https://share.weiyun.com/5U6ZVHf">点击查看教程</a> <hr> <li>砍价活动：</li> <img width="40%" 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%A0%8D%E4%BB%B7.png"> 组件介绍：插入一个砍价的活动区域，显示砍价活动，可以自定义选择需要展示在这里的活动。 操作教程：A→B A：先发布砍价活动，<a href="https://www.kancloud.cn/weixiaocheng/zhizuo/712343">点击查看教程</a> B：再拖拽砍价组件，选择需要展示的砍价活动。 <hr> <li>服务卡：</li> <img width="40%" 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/%E5%8D%A1%E7%89%87%E6%A8%A1%E5%9D%97.png"> 组件介绍：插入一个服务卡的活动区域。 操作教程：A→B A：先添加卡片，<a href="https://www.kancloud.cn/weixiaocheng/zhizuo/745331">点击查看教程</a> B：再拖拽服务卡组件，添加需要展示的服务卡。 <hr> </ol> </td> </tr> </table>