生鮮電商（可視化版本）模板說明文檔

功能描述

該模板為生鮮電商App應用模板，主要功能包括商品列表展示、商品詳情查看、購物車、個人中心、基礎設置等。通過此模板的使用能快速上手AVM多端開發(fā)技術，并能在此模板基礎上使用APICloud Studio3可視化工具快速開發(fā)出一套完整的生鮮電商類應用。里面涉及到的所有頁面用到的數(shù)據(jù)都是靜態(tài)數(shù)據(jù)。目的是為了實現(xiàn)在APICloud Studio3可視化工具設計界面中能夠正常顯示頁面中的內容。

可視化界面顯示效果截圖

源碼目錄結構介紹

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

┌─component/ // 項目公共組件目錄 
├─images/ // 圖片素材圖標資源目錄 
├─pages/ // AVM頁面目錄 
│ ├─about/ 
│ │ └─about.stml // 關于我們頁 
│ ├─account/ 
│ │ └─account.stml // 我的賬戶頁 
│ ├─address/ 
│ │ └─address.stml // 收貨地址頁 
│ ├─balancehelp/ 
│ │ └─balancehelp.stml // 余額幫助頁 
│ ├─billhistory/ 
│ │ └─billhistory.stml // 付款記錄頁 
│ ├─cityselector/ 
│ │ └─cityselector.stml // 城市選擇頁 
│ ├─coupon/ 
│ │ └─coupon.stml // 我的優(yōu)惠券頁 
│ ├─customerservice/ 
│ │ └─customerservice.stml // 客服服務頁 
│ ├─login/ 
│ │ └─login.stml // 登錄頁 
│ ├─main/ 
│ │ └─main.stml // 主頁 
│ ├─message/ 
│ │ └─message.stml // 消息頁 
│ ├─myorder/ 
│ │ └─myorder.stml // 我的訂單頁 
│ ├─order/ 
│ │ └─order.stml // 確認訂單列表頁 
│ ├─personalcenter/ 
│ │ └─personalcenter.stml // 個人中心主頁 
│ ├─register/ 
│ │ └─register.stml // 注冊頁 
│ ├─setaddress/ 
│ │ └─setaddress.stml // 收貨地址設置頁 
│ ├─setting/ 
│ │ └─setting.stml // 設置頁 
│ ├─share_frame/ 
│ │ └─share_frame.stml // 分享頁 
│ ├─shoppingcart/ 
│ │ └─shoppingcart.stml // 購物車 
├─script/ // JavaScript腳本目錄 
└─config.xml // 應用配置文件

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

1，下載最新版本的APICloud Studio 3

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

填寫應用名稱，選擇相應模板，點【完成】按鈕進行創(chuàng)建。

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

技術支持

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

項目源碼地址

http://git.yonyou.com/APICloud-CF/fresh-ec_lc