教育培訓（可視化版本）模板說明文檔

項目介紹

功能描述

本項目是一個教育培訓服務APP。里面涉及到的所有頁面都是由APICloud可視化工具中的高級組件進行拼接而成的靜態(tài)頁面，不涉及業(yè)務邏輯相關的操作。目的是為了實現(xiàn)在APICloud可視化工具設計界面中能夠正常顯示頁面中的內(nèi)容。

可視化界面顯示效果截圖

源碼文件目錄結構說明

項目源碼在widget目錄下，該目錄下的文件說明如下：

┌─component/ // 項目公共組件目錄
│ ├─hoc-aboutus-et.stml // [高級組件]關于我們
│ ├─hoc-apply-succ-tip-et.stml // [高級組件]報名成功提示
│ ├─hoc-check-list-et.stml // [高級組件]可選擇列表 
│ ├─hoc-course-baseinfo-et.stml // [高級組件]課程基本信息卡片 
│ ├─hoc-course-detail-et.stml // [高級組件]課程詳情說明 
│ ├─hoc-course-list-et.stml // [高級組件]課程列表
│ ├─hoc-course-menu-et.stml // [高級組件]課程類別菜單
│ ├─hoc-form-list-et.stml // [高級組件]展示列表信息
│ ├─hoc-handle-btn-et.stml // [高級組件]操作按鈕
│ ├─hoc-header-bar-et.stml // [高級組件]頭部導航
│ ├─hoc-loading-et.stml // [高級組件]加載中
│ ├─hoc-module-title-et.stml // [高級組件]模塊標題
│ ├─hoc-my-order-card-et.stml // [高級組件]我的訂單卡片
│ ├─hoc-no-data-et.stml // [高級組件]暫無數(shù)據(jù)
│ ├─hoc-order-form-et.stml // [高級組件]預約報名表單
│ ├─hoc-order-list-et.stml // [高級組件]訂單列表
│ ├─hoc-pay-course-info-et.stml // [高級組件]報名頭部課程信息
│ ├─hoc-pay-desc-et.stml // [高級組件]支付信息顯示
│ ├─hoc-swiper-et.stml // [高級組件]輪播圖
│ ├─hoc-tab-bar-et.stml // [高級組件]底部導航菜單
│ ├─hoc-tab-switch-etstml // [高級組件]tab切換
│ ├─hoc-teacher-team-et.stml // [高級組件]名師團隊
│ ├─hoc-user-panel-et.stml // [高級組件]個人信息展示面板
├─images/ // 圖片素材圖標資源目錄 
├─pages/ // AVM頁面目錄 
│ ├─course-detail/ 
│ │ └─course-detail.stml // 課程詳情頁 
│ ├─course-list/ 
│ │ └─course-list.stml // 課程列表頁 
│ ├─course-pay/ 
│ │ └─course-pay.stml // 購買課程頁 
│ ├─course-preorder/ 
│ │ └─course-preorder.stml // 預約課程頁 
│ ├─order-detail/ 
│ │ └─order-detail.stml // 用戶訂單詳情頁 
│ ├─order-list/ 
│ │ └─order-list.stml // 用戶訂單列表頁 
│ ├─pay-result/ 
│ │ └─pay-result.stml // 下單(支付)結果頁 
│ ├─play-video/ 
│ │ └─play-video.stml // 視頻播放頁 
│ ├─preorder-detail/ 
│ │ └─preorder-detail.stml // 用戶預約詳情頁 
│ ├─preorder-list/ 
│ │ └─preorder-list.stml // 用戶預約列表頁 
│ ├─tab-home/ 
│ │ └─tab-home.stml // 入口主頁 
│ ├─tab-course/ 
│ │ └─tab-course.stml // 課程分類列表 
│ ├─tab-user/ 
│ │ └─tab-user.stml // 用戶主頁 
├─script/ // JavaScript腳本目錄 
│ │ └─couselist.js // 課程列表信息 
│ │ └─req.js // 項目請求交互文件 
└─config.xml // 應用配置文件

怎么使用可視化工具進行開發(fā)

• 下載最新版的APICloud Studio 3
• 下載成功后，安裝后打開，頂部菜單選擇【項目】-【新建項目】，填寫應用名稱，選擇相應模板，點【完成】按鈕進行創(chuàng)建。

• 創(chuàng)建完項目后打開某一個頁面，點擊左上角圖標可切換為可視化界面，可進行頁面的設計，左側欄可根據(jù)項目需求拖拽任意組件到畫布中，右側屬性設置欄可對拖拽的組件進行設置。具體操作可查看 可視化工具的使用視頻。

技術支持

使用中若有任何疑問可到APICloud論壇 AVM多端 專區(qū)發(fā)帖提問。官方技術支持和眾多活躍開發(fā)者會第一時間為您提供技術支持。

項目源碼

https://github.com/apicloudcom/education-training_lc