一、介紹

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

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

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

二、組件功能和開發步驟

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

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

1. Button(1)功能介紹：

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

在線預覽效果(圖1)：

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

(2)開發步驟：① 首先，在hml文件中創建一個基本的按鈕組件(圖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方法進行自定義，實現進度條的遞增顯示效果。

 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)  } }}

其他組件請復制下方鏈接，自行前往官網查看：

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

三、結語

好了，以上就是本期全部內容，期待大家通過JS UI在線預覽實現精美的組件，也歡迎大家持續關注開發者文檔上新內容。

原文標題：UI組件在線預覽，程序員直呼“不要太方便~”

文章出處：【微信公眾號：HarmonyOS官方合作社區】歡迎添加關注!文章轉載請注明出處。

審核編輯：湯梓紅