教育培訓(xùn)（可視化版本）模板說(shuō)明文檔

項(xiàng)目介紹

功能描述

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

可視化界面顯示效果截圖

源碼文件目錄結(jié)構(gòu)說(shuō)明

項(xiàng)目源碼在widget目錄下，該目錄下的文件說(shuō)明如下：

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

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

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

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

技術(shù)支持

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

項(xiàng)目源碼

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