電商模板說明

此模板為生鮮電商類型，主要功能包括商品列表展示、商品詳情查看、購物車、登錄注冊、個人中心、基礎(chǔ)設(shè)置等。通過此模板的使用能快速上手avm多端開發(fā)技術(shù)，并能在此模板基礎(chǔ)上快速開發(fā)出一套完整的生鮮電商類應(yīng)用。 模板包含前后端，其中前端代碼使用avm.js多端技術(shù)(未處理)開發(fā)，可同時編譯為Android & iOS App以及微信小程序；后端使用APICloud數(shù)據(jù)云3.0（未處理）云函數(shù)自定義接口。

還有其他模板在此簡要介紹：

《點餐模板》（未處理），深度解析教程 此模板為一個餐飲商戶單商家堂食下單應(yīng)用。主要功能包括瀏覽商家主頁信息、查看推薦菜品、下單商品、取餐等號等功能。使用avm.js多端技術(shù)開發(fā)和APICloud數(shù)據(jù)云3.0，可同時編譯為Android & iOS App以及微信小程序；

《企業(yè)模板》（未處理） 此模板是企業(yè)展示類型，主要功能包括企業(yè)信息展示、案例展示、加盟申請等。使用avm.js多端技術(shù)開發(fā)和APICloud數(shù)據(jù)云3.0，可同時編譯為Android & iOS App以及微信小程序；

《服飾商城》（未處理） 此模板是服飾商城，主要功能包括商品展示、商品搜索、購物車、訂單管理等。包含前后端，其中前端代碼使用 avm.js 多端技術(shù)開發(fā)，可同時編譯為 Android & iOS App 以及微信小程序；后端使用 APICloud 數(shù)據(jù)云 3.0 云函數(shù)自定義接口。

《教育培訓(xùn)》（未處理） 此模板是一個教育培訓(xùn)服務(wù)APP。提供在線瀏覽機構(gòu)信息、名師風采和課程預(yù)約訂購等功能。 項目前端使用了avm.js 多端開發(fā)技術(shù) ，可同時編譯為 Android & iOS App 以及微信小程序； 后端使用 APICloud 數(shù)據(jù)云3.0 云函數(shù)自定義接口。

效果圖

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

目錄結(jié)構(gòu)延續(xù)widget代碼包的目錄結(jié)構(gòu)，pages目錄下用于創(chuàng)建符合avm.js語法規(guī)范的stml文件，stml文件可用于編譯為App和小程序代碼。

|---widget             // widget代碼根目錄
|    |---components    // stml組件目錄。該目錄下stml文件僅被pages目錄下頁面引用，不單獨編譯
|    |---css           // 外置引用的css文件存放目錄
|    |---image         // 圖片資源文件目錄
|    |---pages         // stml頁面代碼文件目錄。該目錄中每個文件對應(yīng)一個頁面，將被編譯為js或者小程序的3個代碼片段
|       |---about      // stml頁面代碼文件子目錄。如果您希望您的App能夠兼容微信小程序，需按照微信小程序目錄結(jié)構(gòu)，新增一層子目錄，并將stml文件置于該目錄下
|    |---html          // 標準html頁面代碼文件目錄
|    |---res           // res目錄
|    |---script        // 外置引用的js文件存放目錄
|    |---config.xml    // app配置文件
|

使用步驟

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

2，下載APICloud Studio 3，安裝后打開，頂部菜單選擇【項目】-【新建項目】，打開如下界面：

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

3，為當前項目編譯自定義Loader(未處理)進行真機同步調(diào)試預(yù)覽?；蛘呤謾C安裝AppLoader（未處理），使用AppLoader進行真機同步調(diào)試預(yù)覽。WIFI同步使用教程 參考WiFi真機同步（未處理）。

4，小程序可通過studio3編譯項目后在微信開發(fā)者工具中進行預(yù)覽（未處理）。開發(fā)完成后可以將編譯的小程序包上傳到微信開放平臺，審核通過后，在微信中可以搜索查看。

5，云編譯 生成Android & iOS 應(yīng)用安裝包以及微信小程序源碼包。編譯iOS之前需先上傳iOS證書，Android則可直接進行編譯。

技術(shù)支持

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

項目地址

項目源碼git地址(https://www.apicloud.com/safe?fresh-ec)

注：如果需要快速使用這套模板的后端服務(wù)，請參考下邊的后端數(shù)據(jù)云服務(wù)使用教程。

電商模板后端數(shù)據(jù)云服務(wù)

針對該電商模板，我們?yōu)橛脩籼峁┝艘绘I導(dǎo)入的功能，用戶只需開通數(shù)據(jù)云，通過以下步驟即可擁有自己的服務(wù)器端代碼及數(shù)據(jù)。

1. 在該模板應(yīng)用下開啟新版數(shù)據(jù)云3.0服務(wù)。

1. 在數(shù)據(jù)模型中可以看到預(yù)置模型，點擊生鮮配送，可以把該預(yù)置模型導(dǎo)入到自己的模型庫中

1. 在前端修改 script/kn.js中的x-apicloud-mcm-key以及baseUrl的地址為本appid數(shù)據(jù)云相關(guān)的地址。

a. x-apicloud-mcm-key：在云設(shè)置中的Secretkey中查看，如果數(shù)據(jù)云未開啟接口驗證設(shè)置，也可以不設(shè)置該字段。

b. baseUrl：在API調(diào)試頁面可以看到該應(yīng)用的服務(wù)器地址，替換重新打包即可。

1. 數(shù)據(jù)云3.0會為您生成專屬的管理后臺，詳情請參考APICloud數(shù)據(jù)云3.0（未處理）

當電商的新版數(shù)據(jù)云3.0的模板庫引入到本項目后，開發(fā)者將擁有查看和修改相關(guān)代碼的權(quán)限，可以基于此進行二次開發(fā)以滿足您的業(yè)務(wù)需求。