第基于JavaScript實(shí)現(xiàn)HarmonyOS備忘錄服務(wù)卡片目錄一、前言二、實(shí)現(xiàn)效果三、創(chuàng)建工程四、生成服務(wù)卡片五、調(diào)試預(yù)覽

一、前言

HarmonyOS發(fā)布，服務(wù)卡片成為了亮點(diǎn)之一。那么除了開(kāi)發(fā)應(yīng)用，服務(wù)卡片也成了必學(xué)的知識(shí)。備忘錄是現(xiàn)在每臺(tái)手機(jī)都會(huì)自帶的一個(gè)應(yīng)用，然后我們想看自己記錄的備忘事件，都需要找到這個(gè)應(yīng)用并打開(kāi)，而服務(wù)卡片則可以幫我們省下這個(gè)步驟。接下來(lái)，我們一起看看如何用JS來(lái)實(shí)現(xiàn)一個(gè)服務(wù)卡片。

二、實(shí)現(xiàn)效果

想要在有限的空間內(nèi)，展示出多一點(diǎn)的內(nèi)容，通過(guò)列表的形式，把每條備忘事項(xiàng)給展示出來(lái)。

效果如圖：

在圖中的服務(wù)卡片上，可以上下滑動(dòng)，看到每條備忘事項(xiàng)，超出的內(nèi)容用省略號(hào)展示，畢竟空間有限，而從已有的信息中也能大概回憶起是什么內(nèi)容。那么接下來(lái)我們一起看如何實(shí)現(xiàn)這樣的一個(gè)卡片。

三、創(chuàng)建工程

首先我們用IDE（DevEcoStudio）創(chuàng)建一個(gè)JS項(xiàng)目，因?yàn)榉?wù)卡片是基于一個(gè)應(yīng)用的，所以要先創(chuàng)建一個(gè)應(yīng)用的工程項(xiàng)目，然后再創(chuàng)建應(yīng)用的服務(wù)卡片。打開(kāi)IDE，選擇CreateHamonyOSProject，然后選擇EmptyAbility(JS)，這里我們選擇的是空的JS項(xiàng)目，適合web前端開(kāi)發(fā)人員上手。簡(jiǎn)單完成了一個(gè)HelloWorld應(yīng)用工程的創(chuàng)建。

四、生成服務(wù)卡片

在生成的工程項(xiàng)目上，生成一個(gè)服務(wù)卡片，如圖所示：

選中ServiceWidget，可以選擇模板，下一步填上服務(wù)卡片的基本信息，就可以了。

完成之后，可以看到在原來(lái)的項(xiàng)目目錄中多了一個(gè)widget的文件夾，就是我們服務(wù)卡片的主要代碼目錄了。打開(kāi)widget/page/index/index.hml就是我們剛才選中的模板代碼了。這些代碼顯然不是我們要實(shí)現(xiàn)備忘錄的布局，那我們刪掉，自己實(shí)現(xiàn)。從效果圖可以看到，布局主要分為兩塊，頭部用來(lái)顯示標(biāo)題，中間用來(lái)展示內(nèi)容并可以滾動(dòng)。那么頭部用div組件，內(nèi)容用list組件來(lái)實(shí)現(xiàn)，

代碼如下：

div

div

text

span備忘錄/span

/text

/div

list

list-item

text

span18號(hào)要參加618活動(dòng)/span

/text

/list-item

list-item

text

span某某某欠我2塊錢(qián)/span

/text

/list-item

list-item

text

span論壇賬號(hào)密碼是123xxxxxxxx/span

/text

/list-item

list-item

text

span震驚！這件事的真相居然是這樣/span

/text

/list-item

list-item

text

span隱藏的備忘，你看到了嗎/span

/text

/list-item

/list

/div

在index.css中，來(lái)實(shí)現(xiàn)樣式，達(dá)到我們想要的效果：

.header{

width:100%;

height:35px;

background-color:#ff9900;

padding-left:10px;

.header-text{

font-size:16px;

color:#fff;

.list{

width:100%;

height:140px;

padding-left:10px;

.list-item{

padding:5px1px5px2px;

border-bottom:1pxsolid#ddd;

.list-text{

font-size:14px;

text-overflow:ellipsis;

}

五、調(diào)試預(yù)覽

就這樣，一個(gè)JS應(yīng)用的服務(wù)卡片完成，在IDE上，我們可以在菜單欄上的View-ToolWindows-previewer在開(kāi)發(fā)過(guò)程中進(jìn)行頁(yè)面的調(diào)試預(yù)覽，修改好代碼之后保存即可刷新效果。在完成開(kāi)發(fā)之后，可以在菜單欄上的Tools-devicemanager開(kāi)啟一個(gè)手機(jī)模擬器（需要登錄）。

然后運(yùn)行應(yīng)