基於JavaScript實現HarmonyOS備忘錄服務卡片

Posted on by

一、前言

HarmonyOS發佈，服務卡片成為瞭亮點之一。那麼除瞭開發應用，服務卡片也成瞭必學的知識。備忘錄是現在每臺手機都會自帶的一個應用，然後我們想看自己記錄的備忘事件，都需要找到這個應用並打開，而服務卡片則可以幫我們省下這個步驟。接下來，我們一起看看如何用 JS 來實現一個服務卡片。

二、實現效果

想要在有限的空間內，展示出多一點的內容，通過列表的形式，把每條備忘事項給展示出來。

效果如圖：

在圖中的服務卡片上，可以上下滑動，看到每條備忘事項，超出的內容用省略號展示，畢竟空間有限，而從已有的信息中也能大概回憶起是什麼內容。那麼接下來我們一起看如何實現這樣的一個卡片。

三、創建工程

首先我們用IDE（DevEco Studio）創建一個 JS 項目，因為服務卡片是基於一個應用的，所以要先創建一個應用的工程項目，然後再創建應用的服務卡片。打開IDE，選擇Create HamonyOS Project，然後選擇 Empty Ability(JS)，這裡我們選擇的是空的JS項目，適合web前端開發人員上手。簡單完成瞭一個 Hello World 應用工程的創建。

四、生成服務卡片

在生成的工程項目上，生成一個服務卡片，如圖所示：

選中 Service Widget，可以選擇模板，下一步填上服務卡片的基本信息，就可以瞭。

完成之後，可以看到在原來的項目目錄中多瞭一個 widget 的文件夾，就是我們服務卡片的主要代碼目錄瞭。打開 widget/page/index/index.hml 就是我們剛才選中的模板代碼瞭。這些代碼顯然不是我們要實現備忘錄的佈局，那我們刪掉，自己實現。從效果圖可以看到，佈局主要分為兩塊，頭部用來顯示標題，中間用來展示內容並可以滾動。那麼頭部用div組件，內容用list組件來實現，

代碼如下：

<div class="image_with_info_layout">
    <div class="header">
        <text>
            <span class="header-text">備忘錄</span>
        </text>
    </div>

    <list class="list">
        <list-item class="list-item">
            <text class="list-text">
                <span>18號要參加618活動</span>
            </text>
        </list-item>
        <list-item class="list-item">
            <text class="list-text">
                <span>某某某欠我2塊錢</span>
            </text>
        </list-item>
        <list-item class="list-item">
            <text class="list-text">
                <span>論壇賬號密碼是123xxxxxxxx</span>
            </text>
        </list-item>
        <list-item class="list-item">
            <text class="list-text">
                <span>震驚！這件事的真相居然是這樣</span>
            </text>
        </list-item>
        <list-item class="list-item">
            <text class="list-text">
                <span>隱藏的備忘，你看到瞭嗎</span>
            </text>
        </list-item>
    </list>
</div>

在 index.css 中，來實現樣式，達到我們想要的效果：

.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: 5px 1px 5px 2px;
    border-bottom: 1px solid #ddd;
}
.list-text{
    font-size: 14px;
    text-overflow:ellipsis;
}

五、調試預覽

就這樣，一個JS應用的服務卡片完成，在IDE上，我們可以在菜單欄上的 View->Tool Windows->previewer 在開發過程中進行頁面的調試預覽，修改好代碼之後保存即可刷新效果。在完成開發之後，可以在菜單欄上的 Tools->device manager 開啟一個手機模擬器（需要登錄）。

然後運行應用，就會在模擬器中安裝瞭JS應用

在應用圖標上滑，則可以看到我們實現的服務卡片瞭。到此卡片功能完成，目前簡單的代碼隻實現瞭備忘錄的查看功能，比如編輯和刪除，有興趣的可以嘗試看如何實現。

到此這篇關於基於JavaScript實現HarmonyOS備忘錄服務卡片的文章就介紹到這瞭,更多相關JS 實現服務卡片內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：