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

功能描述

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

可視化界面顯示效果截圖

源碼目錄結(jié)構(gòu)介紹

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

┌─component/ // 項(xiàng)目公共組件目錄 
├─images/ // 圖片素材圖標(biāo)資源目錄 
├─pages/ // AVM頁面目錄 
│ ├─about/ 
│ │ └─about.stml // 關(guān)于我們頁 
│ ├─account/ 
│ │ └─account.stml // 我的賬戶頁 
│ ├─address/ 
│ │ └─address.stml // 收貨地址頁 
│ ├─balancehelp/ 
│ │ └─balancehelp.stml // 余額幫助頁 
│ ├─billhistory/ 
│ │ └─billhistory.stml // 付款記錄頁 
│ ├─cityselector/ 
│ │ └─cityselector.stml // 城市選擇頁 
│ ├─coupon/ 
│ │ └─coupon.stml // 我的優(yōu)惠券頁 
│ ├─customerservice/ 
│ │ └─customerservice.stml // 客服服務(wù)頁 
│ ├─login/ 
│ │ └─login.stml // 登錄頁 
│ ├─main/ 
│ │ └─main.stml // 主頁 
│ ├─message/ 
│ │ └─message.stml // 消息頁 
│ ├─myorder/ 
│ │ └─myorder.stml // 我的訂單頁 
│ ├─order/ 
│ │ └─order.stml // 確認(rèn)訂單列表頁 
│ ├─personalcenter/ 
│ │ └─personalcenter.stml // 個(gè)人中心主頁 
│ ├─register/ 
│ │ └─register.stml // 注冊(cè)頁 
│ ├─setaddress/ 
│ │ └─setaddress.stml // 收貨地址設(shè)置頁 
│ ├─setting/ 
│ │ └─setting.stml // 設(shè)置頁 
│ ├─share_frame/ 
│ │ └─share_frame.stml // 分享頁 
│ ├─shoppingcart/ 
│ │ └─shoppingcart.stml // 購物車 
├─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)建。

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

3，創(chuàng)建完項(xiàng)目后打開某一個(gè)頁面，點(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)目源碼地址

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