# 3.4小程序组件使用教程详解 ## 组件使用方法： 1.将左侧组件库中的组件拖拽到中间手机框即可（如拖拽没反应，刷新当前页面即可）； 2.商品，文章，预约，门店，电话，拼团，秒杀组件需要在左侧对应导航菜单添加相应功能设置后方可使用，其他组件直接在最右侧配置相关信息，保存后即可生效； 3.新版图片类组件高度均已实现自适应（除三四方图），可尽情使用。 ## 组件使用教程： **1.幻灯片组件**：自带四种幻灯片样式任意选择，最多可加十张幻灯片，拖拽可实现排序，**点击图片**可对图片进行修改，点击选择链接可添加功能库中自己想要的链接，设置好保存后小程序端立即同步生效。  * * * **2.功能区组件**：自带三种功能区样式，可添加数十种导航，拖拽可自由排序，设置好保存后小程序端立即同步生效。  * * * **3.导航组件**：使用次数最多的组件，点击图标可进行图标修改，默认一排四个，可添加多个导航，点击选择链接可添加功能库中自己想要的链接，设置好保存后小程序端立即同步生效。  * * * **4.商品组件**：商城类功能必备组件，贴心设计，自带五种丰富样式自由选择，选择商品时可使用自动选择模式或手动选择，自由设置商品显示数量。（PS:使用商品组件需先在系统后台左侧导航-商城系统处先添加商品分类和商品，不添加显示默认数据），设置好保存后小程序端立即同步生效。  * * * **5.文章组件**：资讯新闻文章类功能必备组件，贴心设计，自带四种丰富样式自由选择，选择文章时可使用自动选择模式或手动选择，自由设置文章显示数量。（PS:使用文章组件需先在系统后台左侧导航处先添加文章分类和文章，不添加显示默认数据），设置好保存后小程序端立即同步生效。  * * * **6.标题栏组件**：自带五种丰富标题样式自由选择，设置好保存后小程序端立即同步生效。（PS:标题链接名称不设置将显示null）  * * * **7.搜索组件**：自带三种搜索样式自由选择，设置好保存后小程序端立即同步生效。 * * * 8.**文本组件**：输入文本保存后小程序端立即同步生效。（PS：文本可换行） * * * 9.**分隔符组件**：自带三种分隔符样式自由选择，选择好保存后小程序端立即同步生效。 * * * 10.**图文组件**：自带四种图文样式自由选择，图片可自由修改，图片链接可选择功能库中链接，设置好保存后小程序端立即同步生效。  11.**单图组件**：使用次数最多的组件，图片随意设置，图片链接任意选择图片高度可实现自适应，只要有好的美工设计，就可以依托本模块设计出精美的小程序，支持功能库所有链接，设置好保存后小程序端立即同步生效。 * * * 12.**双图组件**：增加设计展示的多样性，支持功能库所有链接，功能细节类似单独组件，设置好保存后小程序端立即同步生效。  * * * 13.**四图组件**：增加设计展示的多样性，支持功能库所有链接，功能细节类似单独组件，设置好保存后小程序端立即同步生效。  * * * 14.**三横图组件**：可做三图，六图，九图（九宫格），十二图等多种用途，支持功能库所有链接，功能细节类似单独组件，设置好保存后小程序端立即同步生效。 * * * 15.**四横图组件**：可做四图，八图，十二图，十六图等多种用途，支持功能库所有链接，功能细节类似单独组件，设置好保存后小程序端立即同步生效。  * * * 16.**预约组件**：预约预定类功能必备组件，贴心设计，自带两种预约样式自由选择，选择预约时可使用自动选择模式或手动选择，自由设置预约显示数量。（PS:使用预约组件需先在系统后台左侧导航处先添加预约分类，服务项目，服务人员等信息，不添加显示默认数据），设置好保存后小程序端立即同步生效。  * * * 17.**视频组件**：使用本组件可在小程序中实现视频功能，设置预览图，填入小程序网址即可，设置好保存后小程序端立即同步生效。说明：根据微信官方要求，视频地址必须为绝对地址。（1）可获取腾讯视频的绝对地址填入。（2）可将视频传到七牛等平台获取绝对地址填入。（3）视频名称不可为中文。  * * * 18.**地图组件**：使用本组件可在小程序中实现地图功能，在下图坐标选择处输入详细的地址，点击搜索，之后用鼠标移动蓝色小图标即可获得经纬度信息，点击保存，小程序端即可同步生效。 PS：输入地址搜索后必须移动蓝色小图标，否则经纬度信息将不显示，保存后小程序端地图也将不显示。  * * * 19.**公告组件**：使用本组件可在小程序中实现公告功能，点击选择图片可修改图标，文字部分可输入公告文字内容，设置好保存后小程序端立即同步生效。  * * * 20.**三方图组件**：增加小程序设计展示的多样性，不支持（功能库中的一键拨号，一键导航，小程序跳转，内嵌网页功能），图片大小必须按系统指定尺寸设计，设置好保存后小程序端立即同步生效。 PS：本功能删除功能不易看见，鼠标移动到上方蓝色（2:1）部分可看到。  * * * 21.**四方图组件**：增加小程序设计展示的多样性，不支持（功能库中的一键拨号，一键导航，小程序跳转，内嵌网页功能），图片大小必须按系统指定尺寸设计，设置好保存后小程序端立即同步生效。 * * * 22.**留言组件**：组件拖进去即可使用，无需设置，留言信息在左侧菜单-留言反馈处查看，设置好保存后小程序端立即同步生效。 * * * 23.**门店组件**：将组件拖进手机框，在后台菜单-小程序设置-门店管理处添加商品，此处每个组件可选择一个门店链接，设置好保存后小程序端立即同步生效。  * * * 24.**富文本组件**：我们的系统率先支持富文本组件，这是一个极为重要的组件。可以在此处添加任意图片，文字，表情等，实现对文字的加粗，居住，换行等丰富功能。功能接近传统编辑器，是小程序中的一项神器功能。使用富文本可设计出精美度更高的小程序，设置好保存后小程序端立即同步生效。  * * * 25.**客服组件**：将组件拖进手机框即可悬浮显示，可修改背景颜色和图标颜色，无需其他设置即可正常使用，设置好保存后小程序端立即同步生效。  * * * 26.**电话组件**：将组件拖进手机框即可悬浮显示，可修改背景颜色和图标颜色，设置手机号码保存后即可正常使用，设置好保存后小程序端立即同步生效。  * * * 27.**拼团组件**：将组件拖进手机框，在后台菜单-营销活动-拼团商品处添加商品，此处每个组件可选择一个拼团商品，设置好保存后小程序端立即同步生效。  * * * 28.**秒杀组件**：将组件拖进手机框，在后台菜单-营销活动-秒杀商品处添加商品，此处每个组件可选择一个秒杀商品，设置好保存后小程序端立即同步生效。