入門教程|APICloud可視化開發新手圖文教程

来源:https://www.cnblogs.com/kaifacss/archive/2022/06/14/16374365.html
-Advertisement-
Play Games

前言 短視頻模板,是快捷創作短視頻的一種方式,一般由專業設計師或模板創作人製作,用戶只需替換視頻模板中的部分素材,便可生成一支與模板一樣的創意視頻。這種省時省力、無需“燒腦”構思創意的“套模板”視頻創作方法,深受用戶喜愛。 應用場景 短視頻模板在短視頻APP、視頻剪輯工具、拍攝美化工具、旅游出行、電 ...


本教程主要面向初次使用APICloud Studio3 中可視化工具的新手開發者,旨在通過簡單清晰的圖文描述,讓新手開發者快速掌握可視化工具的使用。

APICloud Studio3 可視化工具秉承低代碼的設計理念,讓開發者可以通過拖拽搭建積木的方式,所見即所得地快速構建生成應用靜態頁面,並支持同步實時生成AVM跨端代碼,工具內置豐富的UI樣式組件,節省開發者大量的頁面構建時間,讓開發者能夠更加專註於應用業務邏輯的開發。

1、工具下載

下載最新版本的 APICloud Studio3

下載地址(在PC端打開):https://www.a‍picloud.com/studio3

PS: 註冊 APICloud 官方賬戶

2、激活進入可視化工具界面

2.1 啟動APICloud Studio3,點擊左側面板的登錄按鈕登錄APICloud賬戶。

PS: 還沒有賬戶的同學,需要先點擊「立即註冊」按鈕,註冊一個賬戶,否則後面無法跟隨教程進行項目的創建等操作。

2.2 創建項目

頂部菜單選擇「項目」-「新建項目」打開新建項目界面,在界面填寫各項內容,完成新項目的創建。

註意: 「使用AVM.js開發」該選項需要激活,否則無法使用可視化工具。

2.3 選擇pages/main/main.stml頁面文件,點擊左上角的綠色圖標(圖中紅色框選),即可進入可視化工具界面。

PS: 可視化工具是深度捆綁的AVM多端引擎,所以只有擴展名為.stml的文件,才具備可視化能力(即顯示切換到可視化的按鈕),其他格式的文件無法激活可視化界面。

2.4 可視化工具界面——功能區展示說明

紅色區域:系統工具欄

淺藍區域:資源管理器面板 頂部菜單欄「查看」-「外觀」-「顯示側欄」,可以展開或關閉側欄面板(Mac快捷鍵⌘B)

白色區域:便捷工具欄(點擊左側第一個綠色圖標,可返回代碼視圖頁面)

深藍區域:組件面板區

綠色區域:頁面編輯區

黃色區域:功能面板區

3、拖拽組件快速構建頁面元素

3.1 組件分類概述

組件面板區內,官方內置了大量各種樣式、各種功能的組件。當前組件基本分為三大類,即UI組件、高階組件和系統組件,點擊頂部的Tab導航欄即可切換組件分類。

UI組件:將項目的UI設計頁面中常見的各功能元素及其樣式,進行了抽象封裝而形成的組件,因其組件進行了一定程度的預設樣式封裝,在修改的自由度上會比系統組件稍差一些。

高級組件:在UI組件的基礎上進行了更高級的封裝,每一個高級組件都具備一個完整的獨立功能,也可以看做是具備功能邏輯的UI組件。

系統組件:將頁面元素進行了最基本的抽象,而形成的搭建頁面的所需的最簡基礎組件,是構建頁面的最小單元,同時也是具備最大自由度的組件,開發者可以基於當前組件進行最大自由度的修改,以滿足自己的樣式需求。

3.2 添加組件

滑鼠左鍵選中組件,按住拖動到可視化工具的中間編輯區,即可完成組件添加。

3.2.1 添加UI組件-button按鈕

3.2.2 添加高級組件-表單類-卡片單元格

3.2.3 添加系統組件-容器組件-view

PS: 關於容器組件的特殊說明:

容器組件是一類特殊的組件,它具備容納其他組件元素的特性,相當於一個組合組件的外包裝器。靈活使用對應的容器組件,可以使我們更加方便靈活地設計實現各種UI頁面。所以在基於UI設計圖進行頁面的開發實現前,開發者一定要對當前的UI設計圖進行結構分析,按照不同的結構佈局,首先應拖拽對應結構的容器組件,完成結構佈局,再逐次向容器內添加更加詳細的功能組件。

3.3 組件修改

組件選中後的可視化頁面功能示意圖:

複製按鈕:可以快速複製當前選中組件元素。

刪除按鈕:可以快速刪除當前選中組件元素。

3.3.1 修改組件的樣式

樣式面板:可以修改當前選中組件的外觀樣式。

在可視化編輯區選中組件,在右側的面板切換到樣式面板,將樣式面板內部對應的樣式參數修改為自己設定的樣式參數即可完成組件的樣式修改,樣式里的相關參數與CSS的樣式相同,具備CSS基礎的同學一看就能理解。

具體可見下圖,我們以「系統組件」-「展示組件」中的button按鈕組件為例,拖入組件-選中組件-切換功能面板-「樣式」。

按截圖修改組件的W(寬度)和H(高度),即可看見編輯器的組件的寬高尺寸同步變化。

PS: 樣式修改後,工具會自動在代碼頁面生成對應的style區域內生成組件同名的class樣式,如:

<template name='tpl'>

...

<button class="button_2">按鈕</button>

...

<template name='tpl'>

<style>

...

.button_2 {

width: 120px;

height: 50px

}

...

</style>

3.3.1.1 關於佈局結構樣式參數的說明

尺寸參數中W等同於CSS中的width,H等同於CSS中的height,寬度和高度也支持直接輸入數字,如上面截圖的W輸入120也是可以的。

註意:W參數和H參數比較特殊,輸入完成後,必須按下鍵盤迴車鍵(Enter)才會生效,輸入框失焦並不會讓修改生效。

主軸方向內的4個按鈕等同於CSS中的:

flex-direct: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

主軸對齊內的5個按鈕等同於CSS中的:

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

副軸對齊內的5個按鈕等同於CSS中的:

align-items: flex-start

align-items: center

align-items: flex-end

align-items: baseline

align-items: stretch

換行內的3個按鈕等同於CSS中的:

aflex-wrap: nowrap

flex-wrap: wrap

flex-wrap: wrap-reverse

3.3.1.2 關於margin、padding的特殊說明

圖標:

3.3.1.3 關於樣式效果的特殊說明

樣式面板內的修改,可視化工具會在代碼層同步生成同名的class樣式,以此種方式保持樣式的同步。因為class樣式是綁定在組件最外層的元素上,所以選擇組件後在樣式面板上進行的修改,僅對組件最外層的樣式生效。由於UI組件和高級組件自身就具備了一定的樣式設置,所以部分樣式的修改在這兩種組件上可能會失效,特此說明,請開發者註意。

3.3.2 修改組件的屬性

在可視化編輯區選中組件,在右側的面板切換到樣式面板,將樣式面板內部對應的樣式參數修改為自己設定的樣式參數即可完成組件的樣式修改,具體可見下圖。

3.3.2.1 通用屬性

通用屬性是所有組件都具備的屬性,根據不同組件封裝時暴露的屬性不同,各個組件的組件屬性也不盡相同。

id: string類型,規定元素的唯一id。

例如:

在代碼中對應為id="button-1"

hidden: boolean類型, 設置元素的hidden屬性的值,當前參數映射到代碼層上就是AVM語法的hidden。

PS: hidden主要是統一與AVM引擎版本的邏輯,當前版本,僅系統組件支持該參數來控制顯示和隱藏,UI組件和高級組件尚不支持,所以當有需求去控制組件的顯示或隱藏時,建議優先使用下麵的「條件顯示」參數。

例如:

在代碼中對應為hidden={false}

條件顯示:使用表達式來控制組件是否顯示,當前參數映射到代碼層上就是AVM語法的v-if,支持布爾值、表達式、函數和關聯映射數據源。

例如:

在代碼中對應為v-if="false"

迴圈展示:以類似數組迴圈遍歷的方式來展示覆數的組件,支持關聯映射頁面數據源來遍歷顯示組件,當前參數映射到代碼層上就是AVM語法的v-for。

例如:

在代碼中對應為v-for="(item, index) in buttons"

PS: 關於數據源的概念和使用,後面會講到,本教程為新手教程,為了降低學習複雜度,這裡先不展開。

3.3.2.2 組件屬性

只有當前組件才具備的屬性,根據不同組件封裝時暴露的屬性不同,各個組件的組件屬性也不盡相同。

3.3.2.3 數據集屬性

當前參數映射到代碼層上就是AVM語法的data-*,即頁面dom元素的dataset屬性。

下圖是AVM開發文檔中的描述信息:

例如:

在代碼中對應為data-status="selected"

3.3.3 給組件添加事件

在可視化編輯區選中組件,在右側的面板切換到事件面板,具體可見下圖:

點擊「添加事件」-> 「勾選事件」-> 「確定」:

添加事件後,添加事件對應的執行函數,可以選擇已存在的函數方法進行綁定,也可以自行創建新的函數。

「自建函數」面板

函數名稱:就是定義一個function函數的函數名。

添加動作:這裡是官方內置的2個快捷跳轉頁面的函數方法,選擇後,對應的函數方法會自動添加到代碼片段區內。

代碼片段:這裡填寫的是函數內部的邏輯代碼。

創建完成後,記得進行關聯綁定:

剛纔組件綁定的事件,在代碼頁面的組件元素上,實際上的映射代碼為onclick={this.showTip}

這裡新創建和已有的函數,都是在當前頁面的methods下的函數方法,我們切換代碼界面,可以查看剛纔添加的函數方法。

PS: 明白了事件的原理,我們就應該知道其實不用在可視化工具里創建新函數,在代碼頁面里的methods直接編寫函數程代碼,然後在可視化界面進行綁定也是可以的。

4、數據源類型的說明

我們在很多面板屬性中進行內容值寫入時,會經常發現輸入框右側有一個

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • public class ZhmSlider : Control { private Rectangle foreRect; private Rectangle backRect; private Rectangle setRect; private Color backgroundColor = ...
  • Pressure Stall Information 壓力失速信息 Date: April, 2018 Author: Johannes Weiner [email protected] 當CPU、MEM或者IO設備被爭奪時,工作負載就會經受延遲增加,吞吐量損失和運行時被OOM殺死的風險。 如果沒 ...
  • 鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 安裝前準備 一、可以考慮替換國內yum鏡像 根據我老中醫多年的經驗,需要從某些倉庫啊之類的下載某些包的時候,最好先看看怎麼替換國內的鏡像(否則下載會非常慢,更拉的時候還會缺這少那導致最後項目報莫名其妙地報錯);so,yum的鏡像源替換可以參考:y ...
  • 下載軟體以及選擇適合的Linux系統 VMware Workstation 下載地址: 下載 VMware Workstation Pro | CN 阿裡巴巴鏡像源地址:OPSX鏡像站 配置Linux系統 點擊創建新的虛擬機 選擇自定義 ———>下一步 ———> 下一步 選擇稍後安裝操作系統 ——— ...
  • 一、package的作用 • Oracle中包的概念與Java中包的概念非常類似,只是Java中的包是為了分類管理類,但是關鍵字都是package。 • 在一個大型項目中,可能有很多模塊,而每個模塊又有自己的過程、函數等。而這些過程、函數預設是放在一起的(如在PL/SQL中,過程預設都是放在一起的, ...
  • 導語 在使用xtrabackup8版本對mysql8版本進行備份恢復搭建從庫的時候,繼續使用xtrabackup2版本的方式,從xtrabackup_binlog_info 文件中找到gtid信息,執行purge,嘗試多次發現搭建失敗,於是對xtrabackup2和xtrbackup8版本備份流程( ...
  • 導讀: 首先簡單介紹一下網易杭州研究院情況簡介,如下圖所示: 我們公司主要從事平臺技術開發和建設方面,工作的重點方向主要在解決用戶在數據治理中的各種問題,讓用戶能更高效地管理自己的數據,進而產生更大的價值,比如如何整合現有功能流程,節省用戶使用成本;增加新平臺不斷調研,豐富平臺功能;新平臺功能、性能 ...
  • 本文介紹 SQL CASE 表達式,它是 SQL 中數一數二的重要功能,CASE 表達式的語法分為簡單 CASE 表達式和搜索 CASE 表達式兩種。 本文重點 CASE 表達式分為簡單 CASE 表達式和搜索 CASE 表達式兩種。搜索 CASE 表達式包含簡單 CASE 表達式的全部功能。 雖然 ...
一周排行
    -Advertisement-
    Play Games
  • 什麼是工廠模式 工廠模式是最常用的設計模式之一,屬於創建型模式。 有點: 解耦,可以把對象的創建和過程分開 減少代碼量,易於維護 什麼時候用? 當一個抽象類有多個實現的時候,需要多次實例化的時候,就要考慮使用工廠模式。 比如:登錄的抽象類ILoginBusiness,它有2個實現,一個用用戶名密碼登 ...
  • 這次iNeuOS升級主要升級圖形渲染引擎和增加豐富的圖元信息,可以很快的方案應用。總共增加41個通用和行業領域的圖元應用,增加2154個圖元信息,現在iNeuOS視圖建模功能模塊總共包括5894個行業圖元信息。現在完全支持製作高保真的工藝流程和大屏展示效果。 ...
  • 效果圖先附上: 首先 這是我是參考 教程:使用 SignalR 2 和 MVC 5 實時聊天 | Microsoft Docs 先附上教程: 在“添加新項 - SignalRChat”中,選擇 InstalledVisual> C#>WebSignalR>,然後選擇 SignalR Hub 類 (v ...
  • 一、前言 項目中之前涉及到胎兒心率圖曲線的繪製,最近項目中還需要添加心電曲線和血樣曲線的繪製功能。今天就來分享一下心電曲線的繪製方式; 二、正文 1、胎兒心率曲線的繪製是通過DrawingVisual來實現的,這裡的心電曲線我也是採用差不多相同的方式來實現的,只是兩者曲線的數據有所區別。心電圖的數據 ...
  • 安裝 Redis # 首先安裝依賴gcc, 後面需要使用make編譯redis yum install gcc -y # 進入 /usr/local/src 目錄, 把源碼下載到這裡 cd /usr/local/src # 下載 redis 7.0.2 的源碼,github被牆,可以使用國內的地址 ...
  • Redis 的定義? 百度百科: Redis(Remote Dictionary Server ),即遠程字典服務,是一個開源的使用ANSI C語言編寫、支持網路、可基於記憶體亦可持久化的日誌型、Key-Value資料庫,並提供多種語言的API。 中文官網: Redis是一個開源(BSD許可),記憶體存 ...
  • 事情的起因是收到了一位網友的請求,他的java課設需要設計實現迷宮相關的程式——如標題概括。 我這邊不方便透露相關信息,就只把任務要求寫出來。 演示視頻指路👉: 基於JavaFX圖形界面的迷宮程式演示_嗶哩嗶哩_bilibili 完整代碼鏈接🔎: 網盤:https://pan.baidu.com ...
  • Python中的字典 Python中的字典是另一種可變容器模型,且可存儲任意類型對象。鍵值使用冒號分割,你可以看成是一串json。 常用方法 獲取字典中的值 dict[key] 如果key不存在會報錯,建議使用dict.get(key),不存在返回None 修改和新建字典值 dict[key]=va ...
  • 迎面走來了你的面試官,身穿格子衫,挺著啤酒肚,髮際線嚴重後移的中年男子。 手拿泡著枸杞的保溫杯,胳膊夾著MacBook,MacBook上還貼著公司標語:“加班使我快樂”。 面試官: 看你簡歷上用過MySQL,問你幾個簡單的問題吧。什麼是聚簇索引和非聚簇索引? 這個問題難不住我啊。來之前我看一下一燈M ...
  • tunm二進位協議在python上的實現 tunm是一種對標JSON的二進位協議, 支持JSON的所有類型的動態組合 支持的數據類型 基本支持的類型 "u8", "i8", "u16", "i16", "u32", "i32", "u64", "i64", "varint", "float", "s ...