成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

手把手教你開發(fā)一個元服務萬能卡片

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

??想了解更多關于開源的內(nèi)容,請訪問:??

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

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

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

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

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


#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

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

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

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


#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

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

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

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

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

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

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

圖片來源:蛟龍騰飛

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

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

二、元服務應用場景

(一)設備控制服務

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

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

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

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

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

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

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

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

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

(一)練習前提

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

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

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

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

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

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

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

2、配置工程項目

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

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

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

(四)修改代碼

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

打開該文件下的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文件,修改代碼(找到對應修改部分)。

.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: "元服務",
title2: "新應用時代和新世界!"
},
onInit() {}
}

(五)運行效果

1.打開模擬器,如下圖所示:

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

2.進行登錄,如下圖。

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

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

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

圖11

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

圖12

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

圖13

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

圖14

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

圖15

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

圖16

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

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

圖17

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

圖18

#創(chuàng)作者激勵#李洋:手把手教你開發(fā)一個元服務萬能卡片-開源基礎軟件社區(qū)

圖19

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

??想了解更多關于開源的內(nèi)容,請訪問:??

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

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

責任編輯:jianghua 來源: 51CTO 開源基礎軟件社區(qū)
相關推薦

2019-08-26 09:25:23

RedisJavaLinux

2025-04-07 09:40:00

智能體AI代碼

2021-06-22 10:43:03

Webpack loader plugin

2021-02-26 11:54:38

MyBatis 插件接口

2022-06-28 15:29:56

Python編程語言計時器

2024-03-05 18:27:43

2024-04-02 08:58:13

2023-11-28 07:36:41

Shell腳本部署

2011-01-10 14:41:26

2025-05-07 00:31:30

2011-05-03 15:59:00

黑盒打印機

2021-07-14 09:00:00

JavaFX開發(fā)應用

2022-08-26 08:01:38

DashWebJavaScrip

2022-09-22 12:38:46

antd form組件代碼

2016-11-01 09:46:04

2011-02-22 17:42:26

2022-05-18 08:51:44

調用模板后端并行

2021-08-31 10:02:10

KubernetesLinux集群

2020-05-09 09:59:52

Python數(shù)據(jù)土星
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 亚洲成人精选 | 欧美日韩国产一区二区三区 | 欧美在线一区二区三区 | 欧美一级黄色片免费观看 | 超碰8| 欧美精品福利 | 亚洲视频手机在线 | www.成人在线视频 | 伊人伊人 | 91精品国产自产精品男人的天堂 | 九九九视频精品 | 黄色片av | 国产精品1区2区3区 欧美 中文字幕 | 国产精品视频一区二区三 | 亚洲 中文 欧美 日韩 在线观看 | 久久精品国产亚洲夜色av网站 | 成人精品国产 | 成人h视频 | 国产精品一区二区在线播放 | 永久精品 | 国产精品久久久久久吹潮 | 狠狠操狠狠操 | 欧美成人一级 | 伊人一二三 | 国产永久免费 | 超碰97免费在线 | 日本三级日产三级国产三级 | 色婷婷av一区二区三区软件 | www精品 | 国产视频1区2区 | 亚洲第一网站 | 国产激情91久久精品导航 | 日韩欧美国产精品一区二区 | 久久午夜精品 | 丝袜一区二区三区 | 日本精品久久久一区二区三区 | 久久久久久久网 | 日韩av一区二区在线观看 | 国产一区二区视频在线观看 | 欧美淫片 | 人人cao |