一、介紹

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

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

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

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

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

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

1. Button(1)功能介紹：

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

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

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

(2)開發(fā)步驟：① 首先，在hml文件中創(chuàng)建一個基本的按鈕組件(圖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方法來實時顯示下載進度條的進度(圖4)，同時在js文件中對setProcess方法進行自定義，實現(xiàn)進度條的遞增顯示效果。

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

// xxx.js export default {  data: {     progress: 10,     downloadText: "進度條按鈕"     },     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)  } }}

其他組件請復(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é)語

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

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

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

審核編輯：湯梓紅