本文介紹了在魔筆低代碼開發(fā)平臺支持的 JavaScript 代碼中可使用的 API,包括全局對象、全局方法、頁面組件 API、變量 API、前端函數(shù) API、計算屬性 API 和集成操作 API。
全局對象
平臺內置的應用級全局對象,包括當前應用、用戶和 URL 等信息,可通過根對象mobi
訪問。
appInfo
當前應用信息。
屬性 | 類型 | 說明 |
appId | string | 應用 Id |
appName | string | 應用名稱 |
mode | string | 應用模式:
|
environment | string | 應用連接環(huán)境:
|
currentUser
當前用戶信息。
屬性 | 類型 | 說明 |
id | string | 用戶 Id |
name | string | 用戶名 |
string | 用戶郵箱地址 | |
profilePhotoUrl | string | 頭像圖片地址 |
URL
當前 URL 信息。
屬性 | 類型 | 說明 |
href | string | 應用完整 URL |
origin | string | URL 源,包括協(xié)議、主機名和端口號 |
protocol | string | URL 協(xié)議, |
host | string | URL 主機名,包括端口號 |
hostname | string | URL 主機名,不包括端口號 |
pathname | string | URL 路徑,以 |
port | string | URL 端口號 |
hash | string | URL 片段標識符,以 |
search | string | URL 查詢參數(shù)字符串,以 |
queryParams | object | URL 查詢參數(shù)對象 |
全局方法
平臺內置的應用級全局方法,可通過根對象mobi
訪問。
navigateTo()
應用內頁面跳轉或跳轉至指定 URL。
返回值類型:void。
參數(shù)列表:
參數(shù)名 | 類型 | 說明 | 是否必填 |
options | object | 配置對象 | 是 |
options 對象:
屬性名 | 類型 | 說明 | 是否必填 |
pageName | string | 應用內頁面名稱,優(yōu)先級低 | 否 |
route | string | 應用內頁面路徑,優(yōu)先級中 | 否 |
url | string | 外部 URL 地址,優(yōu)先級高 | 否 |
queryParams | object | 查詢參數(shù)對象,轉換為字符串后拼接到目標頁面 URL search 中,僅對應用內頁面生效 | 否 |
hashParam | string | Hash 參數(shù),拼接到目標頁面 URL hash | 否 |
target | string | 頁面打開位置:
內部跳轉默認值為 | 否 |
使用示例:
假設有三個頁面,頁面名稱分別為“首頁”、“page1”和“page2”,頁面路徑依次為“/index”、“/page1”和“/page2”。
在首頁中新增一個按鈕組件,為該組件添加一個點擊事件,事件動作選擇“執(zhí)行腳本”,寫入mobi.navigateTo({pageName:"page1"})
則表示跳轉至頁面名稱為“page1”的應用內頁面。
將腳本修改為mobi.navigateTo({route:"/page2"})
則表示跳轉至頁面路徑為“/page2”的應用內頁面。
將腳本修改為mobi.navigateTo({url:""})
則表示跳轉至 url 為“http://m.bestwisewords.com/zh/mobi/”的外部頁面。
如果同時傳入 pageName、route 和 url 中的多個參數(shù),則最終生效的是優(yōu)先級最高的參數(shù),優(yōu)先級 pageName < route < url,例如將腳本修改為 mobi.navigateTo({pageName:"page1",route:"/page2",url:""})
后,最終跳轉的是 mobi 官方文檔的外部頁面。
需要注意的是,queryParams 和 hashParam 對外部 URL 地址不生效,用戶可根據(jù)需要將 query 和 hash 拼接到 url 參數(shù)中。
showMessage()
展示全局提示。
返回值類型:void。
參數(shù)列表:
參數(shù)名 | 類型 | 說明 | 是否必填 |
message | string | 消息文本內容 | 是 |
options | object | 配置對象 | 否 |
options 對象:
屬性名 | 類型 | 說明 | 是否必填 |
type | string | 提示類型:
默認值: | 否 |
duration | number | 顯示持續(xù)時間,0 表示一直存在,單位:秒,默認值:3 | 否 |
使用示例:
在頁面中新增一個按鈕組件,為該組件添加一個點擊事件,事件動作選擇“執(zhí)行腳本”,寫入mobi.showMessage("成功",{type:"success",duration:1})
表示展示一個類型為 success 的消息,持續(xù)時間為 1 秒。
showModal()
展示對話框。
返回值類型:Promise<boolean>。
參數(shù)列表:
參數(shù)名 | 類型 | 說明 | 是否必填 |
title | string | 對話框標題 | 是 |
content | string | 對話框內容 | 是 |
options | object | 配置對象 | 否 |
options 對象:
屬性名 | 類型 | 說明 | 是否必填 |
type | string | 對話框類型:
默認值: | 否 |
okText | string | 確認按鈕文本 | 否 |
cancelText | string | 取消按鈕文本,僅在 type 屬性為 | 否 |
當對話框的確認按鈕被點擊時,返回的 Promise resolve 的值為true
,其他情況下關閉對話框,返回的 Promise resolve 的值為false
。
showPopconfirm()
展示氣泡確認框。
返回值類型:Promise<boolean>。
參數(shù)列表:
參數(shù)名 | 類型 | 說明 | 是否必填 |
title | string | 氣泡確認框標題 | 是 |
description | string | 氣泡確認框內容 | 是 |
當氣泡確認框的確認按鈕被點擊時,返回的 Promise resolve 的值為true
,當取消按鈕被點擊時,返回的 Promise resolve 的值為false
。
createTour()
定義并執(zhí)行一段漫游式引導。
返回值類型:Promise<boolean>。
參數(shù)列表:
參數(shù)名 | 類型 | 說明 | 是否必填 |
steps | array | 步驟定義 | 是 |
steps 數(shù)組中的元素:
屬性名 | 類型 | 說明 | 是否必填 |
title | string | 當前步驟標題 | 是 |
description | string | 當前步驟內容 | 是 |
target | object | 當前步驟目標頁面組件對象,通過組件 Id 進行引用,例如 | 否 |
當漫游式引導的結束按鈕被點擊時,返回的 Promise resolve 的值為true
,其他情況下關閉漫游式引導,返回的 Promise resolve 的值為false
。
userLogout()
當前用戶登出,在設計器中不生效。
返回值類型:void。
頁面組件 API
頁面組件在 JavaScript 代碼中被視為頁面組件對象,通過組件 Id 進行引用,可通過.
操作符訪問頁面組件對象上的屬性和方法。
屬性/方法 | 類型/簽名 | 說明 | 示例 |
組件屬性 | string | 組件屬性值 |
|
set 組件屬性 () | setXXX(param: any): void | 設置組件屬性值 |
|
clear 組件屬性 () | clearXXX(): void | 清除組件屬性值,部分屬性支持 |
|
組件方法 () | XXX(payload?: any): any | 調用組件的其他方法 |
|
注意:僅能在頁面級作用域中訪問頁面組件對象。
變量 API
平臺中定義的變量在 JavaScript 代碼中被視為變量對象,通過變量 Id 進行引用,可通過.
操作符訪問變量對象上的屬性和方法。
屬性/方法 | 類型/簽名 | 說明 | 示例 |
value | any | 變量值 |
|
setValue() | setValue(value: any): void | 設置變量值 |
|
注意:變量對象本身和 value 屬性都不可以通過賦值語句直接修改,詳見 關于平臺封裝對象的說明。
前端函數(shù) API
平臺中定義的前端函數(shù)在 JavaScript 代碼中被視為前端函數(shù)對象,通過前端函數(shù) Id 進行引用,可通過.
操作符訪問前端函數(shù)對象上的屬性和方法。
屬性/方法 | 類型/簽名 | 說明 | 示例 |
data | any | 前端函數(shù)最近一次執(zhí)行的返回值 |
|
params | object | 前端函數(shù)最近一次執(zhí)行的參數(shù)值對象 | - |
isExecuting | boolean | 前端函數(shù)當前是否正在執(zhí)行 | - |
error | object | 前端函數(shù)最近一次執(zhí)行的錯誤信息,包括 code 和 message | - |
trigger() | trigger(params?: object): Promise<Result> | 調用前端函數(shù),Result 對象包含:
|
|
計算屬性 API
平臺中定義的計算屬性在 JavaScript 代碼中被視為計算屬性對象,通過計算屬性 Id 進行引用,可通過.
操作符訪問計算屬性對象上的屬性。
屬性 | 類型 | 說明 | 示例 |
value | any | 計算屬性的值 |
|
注意:計算屬性的值完全由計算邏輯及其依賴項決定,不可直接修改計算屬性的值。
集成操作 API
平臺中定義的集成操作在 JavaScript 代碼中被視為集成操作對象,通過集成操作 Id 進行引用,可通過.
操作符訪問集成操作對象上的屬性和方法。
屬性/方法 | 類型/簽名 | 說明 | 示例 |
data | any | 集成操作最近一次執(zhí)行的數(shù)據(jù) |
|
rawData | any | 集成操作最近一次執(zhí)行未經數(shù)據(jù)轉換的數(shù)據(jù) | - |
params | object | 集成操作最近一次執(zhí)行的參數(shù)值對象 | - |
isExecuting | boolean | 集成操作當前是否正在執(zhí)行 | - |
error | object | 集成操作最近一次執(zhí)行的錯誤信息,包括 code 和 message | - |
trigger() | trigger(params?: object): Promise<Result> | 調用集成操作,Result 對象包含:
|
|
迭代器 API
在列表、表格和下拉框等迭代器組件的迭代項內,可通過currentItem
和currentIndex
訪問當前迭代項的數(shù)據(jù)和下標。
列表組件
拖入一個列表組件,數(shù)據(jù)源配置為一個對象數(shù)組,數(shù)組中的全部對象應具有一致的屬性。
點擊第一個列表項中的元素,對列表項中的元素進行配置,例如點擊其中的文本組件,文本內容配置為 {{currentItem.name}}
的含義是取數(shù)據(jù)源數(shù)組中的當前迭代數(shù)據(jù)對象的 name 屬性作為文本,第一項為“通義千問”,第二項為“通義靈碼”,以此類推。這里的文本組件由于在迭代項中,因此相比于普通的文本組件,所有可以寫 JavaScript 代碼的地方都多了currentItem
和currentIndex
這兩個局部 JavaScript 變量。
表格組件
拖入一個表格組件,數(shù)據(jù)源配置為一個對象數(shù)組,數(shù)組中的全部對象應具有一致的屬性。
為操作列的完成節(jié)點添加一個點擊事件,動作選擇顯示消息,內容設置為{{currentIndex}}
的含義是點擊完成操作時,展示對應的行號(從 0 開始)。
此外,為表格組件添加的行點擊事件中也具有currentItem
和currentIndex
。
下拉框組件
下拉單選框和下拉多選框組件都支持配置動態(tài)數(shù)據(jù)源和映射規(guī)則。
以下拉單選框為例,拖入一個下拉單選框,數(shù)據(jù)源配置為列表組件的默認數(shù)據(jù)源,標題和值分別配置為{{currentItem.name}}
和{{currentItem.key}}
的含義為取當前迭代數(shù)據(jù)對象的 name 屬性和 key 屬性分別作為下拉選項的標題和值。
關于平臺封裝對象的說明
平臺封裝的根對象mobi
、頁面組件對象、變量對象、前端函數(shù)對象、計算屬性對象和集成操作對象自身及其屬性都不可通過賦值語句進行修改。如需修改被封裝對象的屬性,應調用對應的方法,例如variable1.value = "a"
和variable1 = "a"
的寫法都是錯誤的,正確寫法為variable1.setValue("a")
。