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

項(xiàng)目介紹

功能描述

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

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

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

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

技術(shù)支持

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

項(xiàng)目源碼

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