# 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.**秒殺組件**：將組件拖進手機框，在后臺菜單-營銷活動-秒殺商品處添加商品，此處每個組件可選擇一個秒殺商品，設置好保存后小程序端立即同步生效。