拼團(tuán)商城（可視化版本）模板說明文檔

項(xiàng)目介紹

功能描述

本模板為拼團(tuán)商城APP，主要功能包括商品分類、商品詳情、訂單管理等頁面。里面涉及到的所有頁面都是由APICloud可視化工具中的高級組件進(jìn)行拼接而成的靜態(tài)頁面，不涉及業(yè)務(wù)邏輯相關(guān)的操作。目的是為了實(shí)現(xiàn)在APICloud可視化工具設(shè)計(jì)界面中能夠正常顯示頁面中的內(nèi)容。

可視化界面顯示效果截圖

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

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

┌─component/ // 項(xiàng)目公共組件目錄 
│ ├─hoc-aboutus-sgm.stml // [高級組件]關(guān)于我們
│ ├─hoc-activity-area-sgm.stml // [高級組件]活動專區(qū)
│ ├─hoc-address-list-sgm.stml // [高級組件]地址列表
│ ├─hoc-classify-list-sgm.stml // [高級組件]分類列表
│ ├─hoc-classify-tab-sgm.stml // [高級組件]分類切換菜單 
│ ├─hoc-commodity-card-sgm.stml // [高級組件]商品信息卡片
│ ├─hoc-commodity-swiper-sgm.stml // [高級組件]商品輪播圖
│ ├─hoc-count-down-sgm.stml // [高級組件]倒計(jì)時
│ ├─hoc-detail-share-sgm.stml // [高級組件]分享選擇列表
│ ├─hoc-edit-address-sgm.stml // [高級組件]地址編輯
│ ├─hoc-form-list-sgm.stml // [高級組件]信息展示列表
│ ├─hoc-goods-baseinfo-sgm.stml // [高級組件]商品詳細(xì)信息
│ ├─hoc-goods-detail-btns-sgm.stml // [高級組件]商品詳情付款按鈕組
│ ├─hoc-goods-detail-sgm.stml // [高級組件]商品詳情
│ ├─hoc-goods-spec-sgm.stml // [高級組件]商品規(guī)格信息
│ ├─hoc-login-sgm.stml // [高級組件]登錄
│ ├─hoc-menu-list-sgm.stml // [高級組件]可操作列表
│ ├─hoc-nav-bar-sgm.stml // [高級組件]頭部導(dǎo)航
│ ├─hoc-no-data-sgmstml // [高級組件]暫無數(shù)據(jù)
│ ├─hoc-order-address-sgm.stml // [高級組件]訂單地址
│ ├─hoc-order-detail-status-sgm.stml // [高級組件]商品訂單狀態(tài)
│ ├─hoc-order-goods-list-sgm.stml // [高級組件]訂單商品列表
│ ├─hoc-order-list-sgm.stml // [高級組件]訂單列表
│ ├─hoc-orderbtn-group-sgm.stml // [高級組件]我的訂單操作按鈕組
│ ├─hoc-pay-address-sgm.stml // [高級組件]付款地址
│ ├─hoc-pay-footer-btn-sgm.stml // [高級組件]付款底部操作按鈕
│ ├─hoc-pay-remark-sgm.stml // [高級組件]付款備注
│ ├─hoc-personal-data-sgm.stml // [高級組件]個人信息面板
│ ├─hoc-pin-rules-sgm.stml // [高級組件]拼團(tuán)規(guī)則
│ ├─hoc-platform-deal-sgm.stml // [高級組件]平臺協(xié)議，可傳入富文本內(nèi)容
│ ├─hoc-search-bar-sgm.stml // [高級組件]搜索框
│ ├─hoc-slide-bar-sgm.stml // [高級組件]側(cè)邊欄
│ ├─hoc-spell-succtip-sgm.stml // [高級組件]拼團(tuán)成功提示
│ ├─hoc-swiper-sgm.stml // [高級組件]輪播圖
│ ├─hoc-tab-bar-sgm.stml // [高級組件]底部導(dǎo)航欄
│ ├─hoc-tab-switch-sgm.stml // [高級組件]tab切換
│ ├─hoc-user-menu-od.stml // [高級組件]個人信息菜單列表
│ ├─hoc-user-panel-sgm.stml // [高級組件]個人信息操作面板
├─images/ // 圖片素材圖標(biāo)資源目錄 
├─pages/ // AVM頁面目錄 
│ ├─about/ 
│ │ └─about.stml // 關(guān)于我們頁 
│ ├─address_list/ 
│ │ └─address_list.stml // 地址列表頁 
│ ├─commodity_detail/ 
│ │ └─commodity_detail.stml // 商品詳情頁 
│ ├─edit_address/ 
│ │ └─edit_address.stml // 編輯地址頁 
│ ├─login/ 
│ │ └─login.stml // 登錄頁 
│ ├─main/ 
│ │ └─main.stml // 主頁 
│ ├─order/ 
│ │ └─order.stml // 訂單列表頁 
│ ├─order_detail/ 
│ │ └─order_detail.stml // 訂單詳情頁 
│ ├─pay/ 
│ │ └─pay.stml // 付款頁 
│ ├─personal_data/ 
│ │ └─personal_data.stml // 個人信息主頁 
│ ├─sort/ 
│ │ └─sort.stml // 分類主頁 
│ ├─sort_list/ 
│ │ └─sort_list.stml // 分類商品列表頁 
├─script/ // JavaScript腳本目錄 
│ │ └─coustant.js // 放常量的文件 
└─config.xml // 應(yīng)用配置文件
└─config.json// 底部導(dǎo)航欄配置文件

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

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

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

技術(shù)支持

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

項(xiàng)目源碼

https://github.com/apicloudcom/group-ec_lc