一、介紹

以往大家如果想查看組件的使用效果，需要打開(kāi)DevEco Studio構(gòu)建工程?，F(xiàn)在為了便于大家高效開(kāi)發(fā)，文檔上線了JS UI組件在線預(yù)覽功能，無(wú)需本地構(gòu)建工程，在線即可修改組件樣式等參數(shù)、一鍵預(yù)覽編譯效果。程序員直呼：簡(jiǎn)直不要太方便啦!讓我們通過(guò)下面這段視頻看一下效果~

看完視頻，你是不是也躍躍欲試?心動(dòng)不如行動(dòng)，復(fù)制下方鏈接，趕緊用起來(lái)吧~

JS API參考文檔(以Button組件為例)：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-button-0000000000621726#section1853220587610

二、組件功能和開(kāi)發(fā)步驟

目前我們已經(jīng)上線了5個(gè)組件的在線預(yù)覽功能，分別為Button、List、Input、Image和Dialog。其中Input、Image和Dialog是近日上線的組件。接下來(lái)我們將以Button組件為例，為大家介紹組件的功能和開(kāi)發(fā)步驟。

注：因篇幅有限，此處不再贅述其他組件，大家可自行前往官網(wǎng)查閱(末尾有組件鏈接哦~)。

1. Button(1)功能介紹：

Button是按鈕組件，用來(lái)響應(yīng)用戶的點(diǎn)擊操作，類型包括膠囊按鈕、圓形按鈕、文本按鈕、弧形按鈕和下載按鈕。開(kāi)發(fā)者們可以在按鈕上綁定事件來(lái)響應(yīng)點(diǎn)擊操作后的自定義行為。

在線預(yù)覽效果(圖1)：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-button-0000000000621726#section1853220587610

(2)開(kāi)發(fā)步驟：① 首先，在hml文件中創(chuàng)建一個(gè)基本的按鈕組件(圖2)，并在css文件中添加樣式。

<buttonclass="buttons">按鈕button>

/* xxx.css */.buttons {  margin-top: 15px;  width: 45%;  height: 45px;  text-align: center;  font-size: 14px;  border-radius: 10px;  background-color: #317aff;}

③ 最后，為按鈕綁定setProgress方法來(lái)實(shí)時(shí)顯示下載進(jìn)度條的進(jìn)度(圖4)，同時(shí)在js文件中對(duì)setProcess方法進(jìn)行自定義，實(shí)現(xiàn)進(jìn)度條的遞增顯示效果。

 class="buttons"id="download-btn"waiting="true"type="download"onclick="setProgress">{{downloadText}}

// xxx.js export default {  data: {     progress: 10,     downloadText: "進(jìn)度條按鈕"     },     setProgress(e) {      var i=0      var set= setInterval(()=>{         i+=10         this.progress=i         this.downloadText = this.progress + "%";         this.$element('download-btn').setProgress({ progress: this.progress });         if(this.progress>=100){             clearInterval(set)             this.downloadText="完成"         }     },1000)  } }}

其他組件請(qǐng)復(fù)制下方鏈接，自行前往官網(wǎng)查看：

Input組件：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673#section1853220587610

List組件：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-list-0000000000611496#section1853220587610

Image組件：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-0000000000611597#section1853220587610

Dialog組件：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-dialog-0000001050068157#section1853220587610

三、結(jié)語(yǔ)

好了，以上就是本期全部?jī)?nèi)容，期待大家通過(guò)JS UI在線預(yù)覽實(shí)現(xiàn)精美的組件，也歡迎大家持續(xù)關(guān)注開(kāi)發(fā)者文檔上新內(nèi)容。

原文標(biāo)題：UI組件在線預(yù)覽，程序員直呼“不要太方便~”

文章出處：【微信公眾號(hào)：HarmonyOS官方合作社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。

審核編輯：湯梓紅