線上服飾商城（可視化版本）模板說明文檔

項(xiàng)目介紹

本模板為在線服飾商城類型，主要功能包括商品展示、商品搜索、購物車、訂單管理等。模板中所有頁面基于可視化編輯器APICloud Studio3搭建完成，不涉及業(yè)務(wù)邏輯相關(guān)的操作。

可視化界面顯示以及預(yù)覽截圖

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

項(xiàng)目源碼在本倉庫的 widget 目錄下。其中該目錄下的文件結(jié)構(gòu)如下：

┌─component/                // 項(xiàng)目公共組件目錄
│ ├─hoc-banner-list-od.stml // [高級(jí)組件]輪播圖組件
│ ├─hoc-search-bar-od.stml  // [高級(jí)組件]頂部搜索框組件
│ ├─hoc-sort-list-od.stml   // [高級(jí)組件]商品分類列表
│ ├─hoc-good-list-lt-od.stml // [高級(jí)組件]商品列表縱向
├─images/                   // 圖片素材圖標(biāo)資源目錄
├─pages/                    // AVM頁面目錄
│ ├─cart/
│ │ └─cart.stml             // 購物車頁
│ ├─detail/
│ │ └─detail.stml           // 商品詳情
│ ├─main/
│ │ └─main.stml             // 商城首頁
│ ├─order_list/
│ │ └─order_list.stml       // 訂單列表
│ ├─place_order/
│ │ └─place_order.stml      // 立即購買
│ ├─shopping_cart/
│ │ └─shopping_cart.stml    // 購 物車頁
│ ├─sort/
│ │ └─sort.stml             // 分類列表
│ ├─user/
│ │ └─user.stml             // 我的
│ ├─config.json             // 頂部導(dǎo)航底部導(dǎo)航配置文件
└─config.xml                // 應(yīng)用配置文件

使用步驟

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

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

技術(shù)支持

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

項(xiàng)目地址

https://github.com/apicloudcom/online-dress_lc