??想了解更多關(guān)于開源的內(nèi)容，請訪問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

2022年HDC后“鴻蒙世界”廣受關(guān)注，作為鴻蒙先行實踐者，為了幫助日益興盛的HarmonyOS應(yīng)用新手發(fā)者們快速體驗與入門HarmonyOS應(yīng)用、元服務(wù)開發(fā)，遂撰寫了這篇手把手的開發(fā)教學(xué)指導(dǎo)。

本文主要包括三方面的內(nèi)容，第一部分是軟件發(fā)展分類與元服務(wù)，第二部分是元服務(wù)應(yīng)用場景，第三部分是快速上手萬能卡片開發(fā)體驗。

大家也可以同步觀看我在華為開發(fā)者聯(lián)盟學(xué)堂上線的萬能卡片相關(guān)視頻課程，點此鏈接即可，對照查閱本篇文檔可另內(nèi)容消化更輕松。

一、軟件發(fā)展分類與元服務(wù)

(一)軟件分類發(fā)展簡要分析

軟件總體分為系統(tǒng)軟件和應(yīng)用軟件兩大類。用戶、設(shè)備、操作系統(tǒng)系統(tǒng)軟件、流量入口、應(yīng)用形態(tài)應(yīng)用軟件關(guān)系及發(fā)展見下表----

從表中分析得知，從互聯(lián)網(wǎng)時期到移動互聯(lián)網(wǎng)主導(dǎo)的發(fā)展，應(yīng)用軟件的主要表現(xiàn)形式也從WEB網(wǎng)站、H5網(wǎng)站向獨立客戶端與基于超級應(yīng)用的輕應(yīng)用形態(tài)小程序形式升級。

每個技術(shù)驅(qū)動創(chuàng)新時代無論是系統(tǒng)軟件還是應(yīng)用軟件，都在變革和迭代升級。那么在物聯(lián)網(wǎng)、智慧化時代，連接的設(shè)備數(shù)量和種類越來越多，應(yīng)用程序的特征和表現(xiàn)形式是什么?

我們認為元服務(wù)及萬能卡片代表著HarmonyOS應(yīng)用發(fā)展的全新方向之一。

(二)萬能卡片概念與優(yōu)勢

元服務(wù)基于HarmonyOS API開發(fā)，秉承著HarmonyOS系統(tǒng)一次開發(fā)多端部署、可分可合自由流轉(zhuǎn)、統(tǒng)一生態(tài)原生智能的三大應(yīng)用與服務(wù)開發(fā)理念，支持運行在1+8+N設(shè)備上，供用戶在合適的場景、合適的設(shè)備上便捷使用，獲得超級終端的一致服務(wù)體驗。

萬能卡片是將元服務(wù)的關(guān)鍵重要信息以卡片的形式展示出來，實現(xiàn)服務(wù)直達與多設(shè)備適應(yīng)，為用戶使用提供直觀的內(nèi)容。萬能卡片包括微、小、中、大卡片，如下圖：

圖片來源：蛟龍騰飛

對用戶而言，元服務(wù)是一種面向新時代的積極嘗試，以輕量化、免安裝、跨設(shè)備的形式如卡片、語音、圖標等，通過豐富、精準、智能化的分發(fā)方式觸達合適場景，這大大改變了用戶獲取服務(wù)的方式，從傳統(tǒng)的“人找應(yīng)用”到“服務(wù)找人”，有效滿足了用戶在不同場景下的服務(wù)需求。

對于開發(fā)者而言，HarmonyOS系統(tǒng)提供了豐富的組件、接口與流量入口;元服務(wù)只需開發(fā)與上架一次，便可以部署在各種HarmonyOS終端上與進行多途徑分發(fā)，大大降低開發(fā)成本，同時基于常駐桌面的卡片入口、更豐富的場景推薦，能為開發(fā)者帶來更多的自然流量，從而降低后期運營成本。

二、元服務(wù)應(yīng)用場景

(一)設(shè)備控制服務(wù)

元服務(wù)可以直接和多種設(shè)備結(jié)合，為用戶提供極速配網(wǎng)、卡片交互、直達服務(wù)、跨設(shè)備流轉(zhuǎn)的全新的設(shè)備交互等體驗。具體實現(xiàn)流程如下圖：

圖片來源：HarmonyOS官方網(wǎng)站

在2022HDC大會上，華為展示了景點游覽、酒店入住和零售購物場景等的元服務(wù)應(yīng)用案例;實現(xiàn)了用戶服務(wù)的便捷、舒心與閉環(huán)，全面提升商家的信息化、數(shù)字化、智能化服務(wù)水平。元服務(wù)在智能家居、智慧出行、運動健康、智慧辦公、影音娛樂、教育關(guān)懷等場景中還有更多的創(chuàng)新與更好的用戶體驗等著廠商與開發(fā)者們?nèi)ヌ剿鲗嵺`。

(二)連接到傳統(tǒng)應(yīng)用方式與原生輕應(yīng)用創(chuàng)新開發(fā)

元服務(wù)連接到傳統(tǒng)應(yīng)用方式是一種積極的嘗試，起到了基本數(shù)量和基礎(chǔ)體驗的作用，能有效促進前期生態(tài)的發(fā)展與滿足用戶的基本需求。

基于元服務(wù)的萬能卡片純原生輕應(yīng)用形態(tài)開發(fā)創(chuàng)新與運營是我們認為大有發(fā)展前景和能享受各種紅利的方式。主流的網(wǎng)站、H5、APP等在萬能卡片中都會有其新的表現(xiàn)形態(tài)。另外，會有很多不是基于傳統(tǒng)應(yīng)用的，全新的各種創(chuàng)新型元服務(wù)的誕生和發(fā)展。

我們從HarmonyOS手機服務(wù)中心與負一屏展示的萬能卡片中可以觀察到，國內(nèi)傳統(tǒng)應(yīng)用升級和全新的元服務(wù)創(chuàng)新，都在積極嘗試，大家都在積極探索與搶占基于HarmonyOS萬物互聯(lián)智慧新世界中的元服務(wù)及萬能卡片新應(yīng)用形態(tài)的“船票”。

三、快速上手一個萬能卡片開發(fā)體驗

看完上面的內(nèi)容，是不是想盡快體驗萬能卡片開發(fā)呢?我們?yōu)殚_發(fā)者準備了快速上手的純應(yīng)用型的萬能卡片案例練習(xí)，具體如下——

(一)練習(xí)前提

開發(fā)者具備JS與前端開發(fā)語言入門級及以上基礎(chǔ);

已經(jīng)注冊與實名認證華為開發(fā)者聯(lián)盟賬戶;

開發(fā)設(shè)備中已經(jīng)安裝好HUAWEI DevEco Studio。

本案例使用HUAWEI DevEco Studio 3.0.0.800，API4-API7都可以體驗，由于IDE版本與API不斷升級與兼容性等問題，大家練習(xí)時可能會遇到一些細節(jié)上的差異，整體流程是一致的。

(二)創(chuàng)建項目

1、創(chuàng)建工程項目

打開DevEco Studio選擇你的Ability 模板，這里我們選擇Empty Ability模板，然后點擊Next進行下一步。如下圖所示。

2、配置工程項目

配置的項目工程，如下圖所示，然后單擊Finish創(chuàng)建。

(三)創(chuàng)建卡片

1.找到entry中src->main下的js文件，右擊選擇new中的Service Widget選項，如下圖所示。

2.選擇immersive Data卡片模板，如下圖所示，點擊Next進行下一步。

3.配置卡片模板信息，如下圖，然后點擊Finish創(chuàng)建。

(四)修改代碼

1.查看js下剛剛創(chuàng)建的卡片，如下圖。

打開該文件下的index.hml文件，修改代碼。

<!--    用堆疊stack組件包裹節(jié)點div組件-->
<stack style="background-color: #f5d354;width: 100%;height: 100%;" onclick="routerEvent">
<!--    右邊圖片（添加此段代碼）-->
    <div class="right-img">
        <image class="images" src="/common/ic_default_image.png" alt="img" ></image>
    </div>
<!--    標題信息-->
    <div class="container">
        <div class="title_wrapper">
            <text class="title_big">
                {{ $t('strings.title_big') }}
            </text>
            <text class="title_small">
                {{ $t('strings.title_small') }}
            </text>
        </div>
<!--    文本信息 （修改text信息，后面加上數(shù)字標記1、2、3）-->
        <div class="list_wrapper">
            <div class="item_first">
                <image class="item_image" src='/common/ic_default.png'></image>
                <text class="item_text" onclick="routerEvent">{{ $t('strings.text') }}</text>
            </div>
            <div class="item">
                <image class="item_image" src='/common/ic_default.png'></image>
                <text class="item_text" onclick="routerEvent">{{ $t('strings.text1') }}</text>
            </div>
            <div class="item">
                <image class="item_image" src='/common/ic_default.png'></image>
                <text class="item_text" onclick="routerEvent">{{ $t('strings.text2') }}</text>
            </div>
            <div class="item">
                <image class="item_image" src='/common/ic_default.png'></image>
                <text class="item_text" onclick="routerEvent">{{ $t('strings.text3') }}</text>
            </div>
            <div class="item_last">
                <image class="item_image" src='/common/ic_default.png'></image>
                <text class="item_text" onclick="routerEvent">{{ $t('strings.text4') }}</text>
            </div>
        </div>
    </div>
</stack>

打開該文件下的index.css文件，修改代碼(找到對應(yīng)修改部分)。

.container {
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
/*注釋代碼*/
/* background-color: dodgerblue;*/
/* background-image: url('/common/ic_default_image@3x.png');*/
/* background-repeat: no-repeat;*/
/* background-size: cover;*/
}
/*添加.right-img樣式*/
.right-img{
width: 40px;
height: 40px;
position: absolute;
right: 10px;
top: 10px;
border-radius: 12px;
}
/*將.title_big中的font-size: 19px;改為16px*/
.title_big {
font-size: 16px;
font-weight: bold;
color: white;
}
/*適配wearable*/
@media (device-type: wearable) {
.right-img{
display: none;
}
}

打開該文件下的i18n文件，打開.json文件，修改代碼。

zh_CN.json:

{
  "strings": {
    "title_big": "標題",
    "title_small": "這里是副標題",
    "text": "文本",
    "text1": "文本1",
    "text2": "文本2",
    "text3": "文本3",
    "text4": "文本4"
  }
}

en_US.json:

{
  "strings": {
    "title_big": "Title",
    "title_small": "Text",
    "text": "Text",
    "text1": "Text1",
    "text2": "Text2",
    "text3": "Text3",
    "text4": "Text4"
  }
}

2.打開js下的default文件，打開pages文件。

修改代碼：

index.hml：

<div class="container">
    <text class="title">你好，歡迎來到</text>
    <text class="title">{{title1}}</text>
    <text class="title">{{title2}}</text>
</div>

index.css：

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 30px;
    color: #000000;
    opacity: 0.9;
    margin: 4px 0px;
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

index.js：

export default {
    data: {
        title1: "元服務(wù)",
        title2: "新應(yīng)用時代和新世界！"
    },
    onInit() {}
}

(五)運行效果

1.打開模擬器，如下圖所示：

2.進行登錄，如下圖。

會自動跳出華為開發(fā)者聯(lián)盟賬戶，輸入賬號密碼進行登錄，登陸成功，然后返回DevEco Studio。

3.選擇模擬器中P40設(shè)備進行開啟。點擊小三角運行項目，如圖11;運行成功后會出現(xiàn)初始化頁面，如圖12;點擊模擬器中的home鍵，回到桌面，然后從手機屏幕的左下角或者右下角斜向上滑動，進入服務(wù)中心，如圖13。

圖11

圖12

圖13

4.進入服務(wù)中心后可以看見創(chuàng)建的卡片(這是項目創(chuàng)建初始化自身就有的卡片widget)，如圖14;輕按卡片，添加至桌面，如圖15;卡片成功添加至桌面，如圖16。

圖14

圖15

圖16

5.長按桌面卡片，出現(xiàn)彈窗，單擊更多萬能卡片，選擇我們之前新創(chuàng)建的卡片，并且添加至桌面，如圖17、圖18、圖19。

圖17

圖18

圖19

點擊新添加至桌面的卡片，回到“你好，歡迎來到元服務(wù)應(yīng)用新時代和新世界!”頁面。這里想顯示其他模擬器效果，重復(fù)以上打開模擬器的步驟即可,本案例支持Phone、Tablet、Wearable卡片效果顯示。

??想了解更多關(guān)于開源的內(nèi)容，請訪問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??