企業(yè)展示模板說明

此模板為企業(yè)展示類型，主要功能包括企業(yè)信息展示、案例展示、加盟申請等。通過此模板的使用能快速上手avm多端開發(fā)技術(shù)，可以幫助企業(yè)快速擁有自己的網(wǎng)絡(luò)名片，不但對企業(yè)的形象是一個良好的宣傳，同時可以輔助企業(yè)銷售，企業(yè)可以用來展示產(chǎn)品、案例、宣傳企業(yè)文化、資訊動態(tài)等。

模板包含前后端，其中前端代碼使用avm.js多端技術(shù)（未處理）開發(fā)，可同時編譯為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個代碼片段
|       |---index      // stml頁面代碼文件子目錄。如果您希望您的App能夠兼容微信小程序，需按照微信小程序目錄結(jié)構(gòu)，新增一層子目錄，并將stml文件置于該目錄下
|    |---html          // 標(biāo)準(zhǔn)html頁面代碼文件目錄
|    |---res           // res目錄
|    |---script        // 外置引用的js文件存放目錄
|    |---config.xml    // app配置文件
|

使用步驟

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

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

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

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

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

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

數(shù)據(jù)云模型導(dǎo)入和快速上手

體驗一下

以左側(cè)的 product 模型為例，點擊模型打開“開發(fā)云函數(shù)”。在遠(yuǎn)程函數(shù)中找到 add 接口，點選后右側(cè)就會展現(xiàn)相關(guān)代碼實現(xiàn)。 接下來可以點擊接口聯(lián)調(diào)，打開API接口生成列表。在 product 分組下找到 add 接口，并可以點擊 “Try it out”進(jìn)行接口測試。

云模型 快速上手

云模型也就是云數(shù)據(jù)庫?？梢源嫒I(yè)務(wù)數(shù)據(jù)，還提供了數(shù)據(jù)訪問的接口和相關(guān)API。

在一個項目中可以建立業(yè)務(wù)所需要的數(shù)據(jù)表模型。還是以 product 為例：打開模型后，是一個表格的形式展現(xiàn)了模型內(nèi)存在的數(shù)據(jù)。 表頭的內(nèi)容是該模型的字段，表中的數(shù)據(jù)是模型下保存的記錄。可以在頭部的按鈕中進(jìn)行添加數(shù)據(jù)、刪除數(shù)據(jù)、添加字段、設(shè)置關(guān)聯(lián)等管理操作。

云函數(shù)示例代碼 快速上手

獲取產(chǎn)品信息

GET /product/detail

product.detail = async(id)=> {
  try {
    if (!id) {
      return {
        status: 1,
        msg: "id不能為空"
      }
    }
    let info = await product.findOne({
      where: {
        "id": id
      }
    });
    if (!info) {
      return {
        status: 1,
        msg: "數(shù)據(jù)不存在"
      }
    }
    let product_category = await Models.product_category.findById(info.cate_id, {fields: ["title"]});
    info.cate_name = product_category.title;
    return {
      status: 0,
      data: info,
      msg: "獲取成功"
    }
  } catch (err) {
    throw new gError("獲取失?。?, "ADD_FAILED");
  }
};

通過閱讀上面的云函數(shù)源代碼，可以看到一個云函數(shù)組成是十分簡單的。在編輯狀態(tài)下，可以看到表單中顯示出了一個云函數(shù)的一些必要元素： 選擇 Model ，確定函數(shù)類型為“遠(yuǎn)程函數(shù)”，選擇請求類型為“get”。完善函數(shù)名稱和描述，最后設(shè)置一個函數(shù)（方法）名， 作為函數(shù)名稱，也是遠(yuǎn)程接口的訪問地址。

在函數(shù)中，通過模型的數(shù)據(jù)操作api來對接口做具體的功能實現(xiàn)：在上面的代碼中， 就是從 product 模型中找到一個 id 為符合條件的數(shù)據(jù)?？梢钥吹?，查找條件是以 JSON 的形式放在 where 條件中的。 正常情況下，成功找到數(shù)據(jù)并使用 return 關(guān)鍵字為函數(shù)返回值。而這個值也會作為云函數(shù)生成的接口的 response 的數(shù)據(jù)域， 來返回給前端。

使用 try-catch 代碼塊來捕獲相關(guān)錯誤，如果查找失敗的情況下，并且也會返回給前端。 關(guān)于更多的模型方法可以參考數(shù)據(jù)云3的完整文檔。

管理后臺 快速上手

除了模型和云函數(shù)之外，數(shù)據(jù)云3還提供一個快速后臺生成管理系統(tǒng)。為方便用戶使用，我們內(nèi)置了管理后臺模塊，用戶開啟服務(wù)后可通過 https://appid-dev.apicloud-saas.com/admin/ 在測試環(huán)境進(jìn)行訪問。 此功能需要全局配置開啟session服務(wù)以及開通文件存儲，請在全局配置進(jìn)行相關(guān)操作。 還是上面的例子：假設(shè)當(dāng)前的 APPID 是 a6176110219206 ，那么對應(yīng)的管理地址就是：https://a6176110219206-dev.apicloud-saas.com/admin/

默認(rèn)的賬號和密碼是： 賬號：admin 密碼：123456

在后臺可以進(jìn)行相關(guān)數(shù)據(jù)設(shè)置和頁面快速開發(fā)。后臺頁面開發(fā)的規(guī)則是引入了低代碼框架 AMIS 。詳細(xì)可以參閱：https://baidu.github.io/amis/zh-CN/docs/

深入使用和進(jìn)階

回到數(shù)據(jù)云面板，可以查看示例模型和云函數(shù)。還可以通過數(shù)據(jù)云完整文檔學(xué)習(xí)完整的數(shù)據(jù)云使用方法。 數(shù)據(jù)云文檔鏈接：https://docs.apicloud.com/Cloud-API/sentosa

技術(shù)支持

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

項目地址

項目源碼地址（https://www.apicloud.com/safe?company-display）