1. 首頁 > 生活百科 > >

二 APICloud可視化編程

生活百科

上一期我們為大家講解低代碼在國內市場的當前現狀以及APICloud可視化開發工具的組件類型和特點 。相信大家對可視化編程有了一個整體的了解，那么今天帶大家更進一步的使用組件 。
【二 APICloud可視化編程】下載開發工具
登錄APICloud官網找到開發工具下載www.apicloud.com/studio3，對應三種操作系統Windows、MacOS、Linux ， 根據自己系統選擇相應版本進行下載 。

二 APICloud可視化編程

文章插圖
創建項目
打開編輯器后，首先點擊左下角的“賬戶”按鈕，登錄自己的APICloud賬號 ， 這里沒有賬號的小伙伴們可以先注冊一個 。
二 APICloud可視化編程

文章插圖
注冊登錄之后就開始到創建項目了 ， 我們在這里左上角的位置點擊項目，點擊新建項目，這里輸入項目名稱，應用類型這里分為三種:
①MXApp是使用AVM框架，可以實現一套代碼同時生成iOS、安卓小程序等多端應用；
②Native App是原生應用，開發者可以使用標準的HTML5或者是AVM框架去進行開發，一套代碼也可以同時生成安卓和iOS原生APP ， 如果僅有APP的開發需求的話，就可以選擇Native App;
③AppClip是iOS輕應用；
二 APICloud可視化編程

文章插圖
文件目錄及代碼
這里選擇推薦的MXApp應用類型，下面選擇HelloAPICloud的空白應用模板，點擊完成選擇當前項目保存的一個目錄文件 。創建好項目之后 ， 我們可以在左側查看當前項目的目錄結構 。
┌─.bin/             stml文件在本地編譯的臨時文件目錄，勿提交云端├─css/              公共 css 樣式目錄├─components/       [3.x 版本] 公共組件目錄 。該目錄下stml文件僅被pages目錄下頁面引用，不單獨編譯├─html/             [2.x 版本] html 頁面目錄├─icon/             APP桌面圖標(本地調試用)├─image/            圖片資源目錄├─launch/           APP啟動圖片(本地調試用)├─pages/          [3.x 版本] AVM.js 頁面目錄，即stml代碼文件目錄 。對應文件將被編譯為js或者小程序標準的代碼片段│  ├─main│  │  └─main.stml   main.stml 頁面代碼├─res/              APP相關的原生資源和配置等放置目錄├─script/           公共 JavaScript 腳本目錄├─wgt/              APP子應用目錄└─config.xml        應用配置文件復制代碼開發工具在真機同步或者實時預覽等調試動作之前 ， 編譯器會分析并編譯pages目錄下的stml文件，編譯為對應的js代碼至.bin目錄 ， 之后再進行同步動作 。pages文件夾中是使用AVM3.0框架書寫靜態頁面的文件夾，點擊pages進入到當前頁面文件 ， 可以看到它是一個 stml的后綴文件，與我們傳統的html ， 它不同的是當前是使用了我們AVM框架去進行編碼，最終可以生成多端應用 。
可以簡單的將代碼分為三部分，template是頁面的模板，通過標簽文本的搭建 ， 可以生成頁面的骨架，script是數據的綁定還有一些方法的調用以及前端的頁面交互 ， style就是頁面的樣式屬性 。
二 APICloud可視化編程

文章插圖
可視化界面
切換到可視化界面后，可以分為三個區域:
①組件大綱區，組建大綱群分為系統組件、UI組件和高級組件 。
  • 系統組件是將頁面元素進行了最基本的抽象 ， 而形成搭建頁面的所需要最簡單的基礎組件，是構建頁面元素的最小單元，同時也是具備了最大自由度的組件，開發者可以基于當前組件進行最大的自由度的修改，以滿足自己的需求；
  • UI組件是將項目的UI頁面中常見的各種功能元素及其樣式進行了抽象的封裝而形成的組件，因為其組件進行了一定程度的默認樣式的封裝，所以在修改上自由度會比系統組件稍微差一些；
  • 高級組件是針對于具體的應用場景，抽象封裝形成的，其目的性功能更強，可快速搭建列表頁詳情頁，可以根據自己不同的場景需求，選擇對應的組件 。
②中間區域是畫布編輯區域，我們將左側的組件拖拽到中間的畫布編輯區域中去進行組合和排列，最終頁面展示的效果是與畫布區域展示的效果是完全一致的 。

推薦閱讀