在線點(diǎn)餐（可視化版本）模板說明文檔

項(xiàng)目介紹

功能描述

該模板為在線點(diǎn)餐的App應(yīng)用模板，主要功能包括商品列表展示、商品詳情查看、購(gòu)物車、個(gè)人中心、基礎(chǔ)設(shè)置等。

通過此模板的使用能快速上手AVM多端開發(fā)技術(shù)，并能在此模板基礎(chǔ)上使用可視化工具快速開發(fā)出一套完整的在線點(diǎn)餐類應(yīng)用。 里面涉及到的所有頁(yè)面用到的數(shù)據(jù)都是靜態(tài)數(shù)據(jù)。目的是為了實(shí)現(xiàn)在APICloud Studio3可視化工具設(shè)計(jì)界面中能夠正常顯示頁(yè)面中的內(nèi)容。

整體設(shè)計(jì)稿預(yù)覽

可視化界面顯示效果截圖

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

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

┌─component/                項(xiàng)目公共組件目錄
│  ├─empty-block.shtml      空數(shù)據(jù)占位圖組件
│  ├─goods-action.shtml     商品下單動(dòng)作組件
│  ├─goods-counter.shtml    商品加購(gòu)計(jì)數(shù)器組件
│  ├─goods-list-item.shtml  主頁(yè)商品列表單品組件
│  ├─order-item.shtml       訂單列表單品組件
│  ├─radio-box.shtml        自定義選擇器組件
├─css/                      css樣式目錄
├─image/                    圖片素材圖標(biāo)資源目錄
├─pages/                    新版的AVM頁(yè)面目錄
│  ├─goods_add
│  │  └─goods_add.stml      加購(gòu)浮層
│  ├─goods_detail
│  │  └─goods_detail.stml   商品詳情頁(yè)
│  ├─main_cart
│  │  └─main_cart.stml      主tab-2 購(gòu)物車頁(yè)面
│  ├─main_home
│  │  └─main_home.stml      主tab-0 商家主頁(yè)
│  ├─main_menu
│  │  └─main_menu.stml      主tab-1 點(diǎn)餐菜單頁(yè)面
│  ├─main_user
│  │  └─main_user.stml      主tab-3 用戶主頁(yè)
│  ├─pay_result
│  │  └─pay_result.stml     支付結(jié)果頁(yè)
│  ├─pending_order
│  │  └─pending_order.stml  待付款結(jié)算頁(yè)
├─script/                   JavaScript腳本目錄
└─config.xml                應(yīng)用配置文件

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

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

1. 創(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ù)支持

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