在線點餐（可視化版本）模板說明文檔

項目介紹

功能描述

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

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

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

可視化界面顯示效果截圖

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

項目源碼在widget目錄下，該目錄下的文件說明如下：

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

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

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

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

技術(shù)支持

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