宜搭的核心概念

全局變量

在左側(cè)數(shù)據(jù)源中添加變量，添加變量的寫法和js的寫法一致。

基本的變量使用

給文本綁定數(shù)據(jù)源，點擊左側(cè)剛才定義的全局變量，使用state.helloWorld.name的方式調(diào)用變量（對象取值）

預覽中查看結(jié)果

查看輸出內(nèi)容以及調(diào)試方式

在頁面發(fā)布中復制訪問地址到瀏覽器就可查看

事件綁定

點擊按鈕，添加新建動作

這里的動作名稱也就是我們綁定的事件，關于綁定事件的執(zhí)行以及邏輯，可以在動作面板中編輯。

動作面板中編輯事件邏輯

我們可以在事件中攜帶參數(shù)，在js代碼中通過this.params.xxx獲取對應的數(shù)據(jù)信息

頁面生命周期

didMount： 頁面生命周期，第一次渲染完成后調(diào)用

willUnmount: 頁面卸載前調(diào)用的生命周期

需要注意：函數(shù)的前面必須添加export，否則無法調(diào)用

合法的：

export function fn(){
   console.log("這是一個函數(shù)")
}

不合法的：

const fn = ()=>{}

function fn(){}

條件渲染

在組件的高級配置里有一個是否渲染開關，默認為開啟狀態(tài)，也就是渲染模式

該按鈕關閉后，對應的組件不會在頁面渲染，我們可以在組件樹上查看該組件是否開啟了渲染模式，如果組件樹上有一個紅色的icon圖標，則表示開啟了條件渲染

條件渲染的使用場景：表單涉及到的添加和修改功能，在某些場景下能操作的字段是不同的，所以需要根據(jù)對應的狀態(tài)來判斷該字段是否可操作，此處就需要使用條件渲染。

點擊中括號，在彈框內(nèi)設置條件渲染的判斷條件

如果全局變量的helloWorld.name存在，那么該字段顯示，不存在則不顯示

循環(huán)渲染

當我們創(chuàng)建一些表格數(shù)據(jù)的時候，每一行其實是同樣的字段，多行顯示則可以使用循環(huán)渲染。

1、需要使用數(shù)據(jù)源，這里提供兩種數(shù)據(jù)源，第一種靜態(tài)數(shù)據(jù)，第二種動態(tài)數(shù)據(jù)（通過API獲取），這里以靜態(tài)數(shù)據(jù)做演示：

選擇容器組件，在高級選項中設置循環(huán)數(shù)據(jù)的數(shù)據(jù)源

2、設置遍歷的字段信息，這里默認為變量默認為item，索引默認為index，你也可以自己設置

3、設置遍歷的dom以及數(shù)據(jù)

我們實際要遍歷的是容器，將文本拖入容器中，設置文本的數(shù)據(jù)源

設置文本的數(shù)據(jù)源信息，這里的數(shù)據(jù)引用的就是剛才設置的循環(huán)變量item，此處的item.name就是我們要的數(shù)據(jù)

4、頁面預覽

自定義樣式

選擇對應的組件，選擇右側(cè)的樣式，點擊源碼編輯

這里支持css樣式，元素默認命名為：

:root

支持偽類、偽元素、動畫

表單校驗

表單是無法關聯(lián)普通按鈕的，需要新建表單，在預覽的時候自帶提交按鈕

宜搭提供兩種表單校驗設置方案

1、內(nèi)置校驗規(guī)則，在官方提供的表單校驗上配置即可。

2、自定義校驗規(guī)則

表單分多種場景，官方提供的表單校驗不可能完全覆蓋場景，所以需要手動自定義校驗規(guī)則

勾選自定義函數(shù)，編輯自定義函數(shù)

function validateRule(value) {
  /** value為輸入的值 */
  /** 正則校驗-校驗金額 */
  if (/^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/.test(value)) {
    return true;
  }
  return false;
 }

最后附上低代碼平臺宜搭的官方文檔：https://developers.aliwork.com/docs/guide/concept/state

如果覺得這篇文章對你有幫助，歡迎點贊、收藏、轉(zhuǎn)發(fā)哦~文章來源地址http://www.zghlxwxcb.cn/news/detail-496413.html

到了這里，關于低代碼平臺-宜搭的核心概念的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！