网站建设工程师待遇,网站开发设计的步骤,佛山市工程招标网,网站群怎么做#x1f680;前言
最近HarmonyOS NEXT大火#xff0c;这个纯血鸿蒙吸引力了大家的关注。虽然现在还没面向个人开发者开放#xff0c;但我们可以基于最新的API9及开发工具来尝试开发鸿蒙新的应用形态——元服务。来体验下未来在HarmonyOS NEXT上实现的应用开发。
HarmonyOS…前言
最近HarmonyOS NEXT大火这个纯血鸿蒙吸引力了大家的关注。虽然现在还没面向个人开发者开放但我们可以基于最新的API9及开发工具来尝试开发鸿蒙新的应用形态——元服务。来体验下未来在HarmonyOS NEXT上实现的应用开发。
HarmonyOS是华为公司开发的操作系统它的设计理念是面向未来的全场景智慧体验可在各种设备上运行包括手机、平板电脑、智能手表、智能音箱等。HarmonyOS采用分布式技术可以将不同设备之间的计算资源连接起来实现设备间的协同工作提高系统的性能和稳定性。此外HarmonyOS还拥有高度自适应的界面、多屏协同等特性使用户能够在不同设备上实现无缝的体验。
本文主要是基于手语学习元服务的开发案例主要的功能有
元服务内部功能 1、提供专业手语翻译老师示范视频包括基本手势、字母表、常用短语等。用户可以点击观看示范并模仿。2、提供类似答题模块帮助用户巩固所学的手语知识用户可以完成答题模块测试自己的进步。元服务卡片 1、卡片界面展示每日一题并可以在卡片上进行答题学习
项目实现效果如下
元服务内部功能视频 元服务卡片功能视频 一、HarmonyOS元服务简介
1.什么是元服务
元服务原名为原子化服务是HarmonyOS提供的一种面向未来的服务提供方式。它是一种新型应用程序形态具有独立入口、免安装的特点可以为用户提供一个或多个便捷服务。
以线上购物为例传统购物应用需要先安装应用打开应用查找商品加入购物车然后完成支付。而通过元服务的方式可以将购物过程拆分为多个服务例如“商品浏览”、“购物车”、“支付”等无需安装应用通过丰富的入口直达服务页面。例如将心仪的商品页添加到桌面可以实时掌握商品价格的变动。在秒杀时间点可以直接进入购物车进行结算。
元服务基于HarmonyOS API开发为用户在合适的场景、合适的设备上提供便捷的使用体验。相比传统的需要安装的应用形态元服务更加轻量同时提供更丰富的入口和更精准的分发。它为用户提供了更灵活、更高效的服务方式提升了用户体验和便利性。
2.元服务的独特价值
元服务的呈现形态之一是鸿蒙万能卡片它是元服务最主要的展示方式之一其他形态包括语音、图标等。每一个万能卡片都是一个在桌面上“永远打开的”元服务/应用以卡片的形式展示元服务/应用的重要信息并通过轻量级的交互行为实现服务的直达。
元服务带来了体验上的变革具体表现在以下几个方面
免安装元服务以更轻量化的方式将服务提供给用户无需进行繁琐的应用安装过程节省了用户的时间和存储空间。一键服务直达元服务将用户感兴趣的内容前置、外显通过一键操作即可直接进入所需的服务页面提供了更快捷、便利的服务体验。跨端转移元服务支持多终端设备间的无缝流转用户可以在不同的设备上无缝切换使用元服务提供了更连贯、一致的服务体验。情景智能卡片推荐元服务可以根据用户的需求和偏好进行情景智能卡片推荐用户可以随心定制自己的服务卡片并根据个人喜好进行个性化设置从而更好地满足用户的需求。
通过以上的变革元服务为用户带来了更轻便、更直观、更智能的服务体验提升了用户的便利性和满意度。
3.元服务的应用场景
3.1 负一屏
负一屏旨在提供更快速便捷的信息和服务采用了宫格设计将常用服务进行分类涵盖了本地生活、智慧出行、购物娱乐、金融理财等多个场景。用户通过右滑进入发现页即可轻松地获取所需的服务无需下载繁琐的App。此外负一屏还具备实时状态的新体验用户使用服务后可以随时查看进度掌握关键节点信息。 3.2 应用市场
打开华为应用市场点击“应用”页签进入“元服务”专区发现并使用元服务。 3.3 桌面
用户可以将元服务的卡片添加到桌面便可在桌面随时随地查看元服务的重要信息点击卡片即可直达所需服务。 3.4 碰一碰/扫一扫
用户首次“碰一碰”或者“扫一扫”识别设备上的NFC标签系统引导用户连接设备连接成功后再次“碰一碰”或者“扫一扫”即可直接使用相应的元服务。 二、开发环境搭建
1.DevEco Studio
DevEco Studio是一款专门为鸿蒙HarmonyOS系统开发而设计的综合性开发工具IDE开发者可以利用该工具进行鸿蒙应用的设计、开发、调试和发布。DevEco Studio集成了代码编辑器、模拟器、调试工具、图形用户界面设计器和应用管理工具等多个功能方便开发者进行鸿蒙应用的开发与管理。
DevEco Studio支持多语言开发包括Java、ArkTS、JavaScript等同时还支持多种开发模式和框架。此外它还支持多平台开发包括手机、平板、智能手表、电视等不同终端设备。
DevEco Studio下载地址HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 安装完成之后界面 2.配置环境变量
本文以window系统为例具体操作步骤如下
1、通过“设置 系统 系统信息 高级系统设置”进入“系统属性”页面的“高级”页签点击“环境变量” 2、在“系统变量”中添加 HDC_SERVER_PORT和OHOS_HDC_SERVER_PORT 两个变量变量值设置为未被占用的端口例如7036和7037 3、在用户或者系统的path变量中添加HDC工具的路径。 HDC工具路径为HarmonyOS SDK安装目录/hmscore/{版本号}/toolchains。例如C:\Users\XXXXX\AppData\Local\Huawei\Sdk\hmscore\3.1.0\toolchains 环境变量配置完成重启DevEco Studio。
3.诊断开发环境
1、打开项目从欢迎页进入底部菜单选择“Help Diagnose Development Environment” 2、待自动检查完成。如果有检查未通过的项目请根据检查项的描述和修复建议进行处理
4.下载SDK
1、打开项目从欢迎页进入底部菜单选择“Configure Settings” 三、创建元服务项目
1.创建元服务项目的步骤
1、登录AppGallery Connect 点击“我的应用”。
首次进入需要签协议 2、在“HarmonyOS”页签“类型”选择“元服务”可以查看创建的元服务。 2.选择模板和配置项目属性
1、打开DevEco Studio菜单选择“File New Create Project”创建一个新工程。 2、选择“Atomic Service”选择“Empty Ability”模板点击“Next”。
3、配置工程基本信息。
Project name设置“myProject”。Bundle name本样例以“com.huawei.myproject”为例。Save location选择工程存放路径。Compile SDK支持API 4~9本样例选择“API 9”。Model应用支持的模式API Version 4~8只支持FA模式。Enable Super Visual是否使用低代码开发模式本样例不打开此开关。Language开发语言。Device type该工程模板支持的设备类型。本样例以手机设备为例。 点击“Finish”等待工程创建完成即可进行代码编写。
3.编写代码和调试运行
1、点击右侧的Previewer工具预览页面效果。 2、新建details.ets页面
details.ets页面
Entry
Component
struct Details {build() {//Flex容器组件Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {//Text组件Text(我是跳转页面).fontSize(60).fontWeight(500)}//容器整体宽高.width(100%).height(100%)}
}
main_pages.json页面
{src: [pages/Index,pages/details]
} 3、添加跳转按钮实现页面跳转
index.ets页面
import router from ohos.router
Entry
Component
struct Index {State message: string 愚公搬代码build() {//Flex容器组件Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {//Text组件Text(愚公搬代码).fontSize(60).fontWeight(500)//Button组件Button(跳转下一页).fontSize(40).fontWeight(500).width(280).height(60)//点击Button实现页面跳转.onClick(() {console.info(跳转开始)router.pushUrl({url: pages/details // 目标url}, (err) {if (err) {console.error(Invoke pushUrl failed, code is ${err.code}, message is ${err.message});return;}console.info(Invoke pushUrl succeeded.);});})}//容器整体宽高.width(100%).height(100%)}
} 四、元服务代码分析
1.元服务代码结构介绍 AppScope中存放应用全局所需要的资源文件。entry是应用的主模块存放HarmonyOS应用的代码、资源等。oh_modules是工程的依赖包存放工程依赖的源文件。build-profile.json5是工程级配置信息包括签名、产品配置等。hvigorfile.ts是工程级编译构建任务脚本hvigor是基于任务管理机制实现的一款全新的自动化构建工具主要提供任务注册编排工程模型管理、配置管理等核心能力。oh-package.json5是工程级依赖配置文件用于记录引入包的配置信息。
1.1 AppScope element文件夹主要存放公共的字符串、布局文件等资源。media存放全局公共的多媒体资源文件。
1.2 entry entryability用于当前ability应用逻辑和生命周期管理。entryformability用于当前卡片生命周期管理。pages存放UI界面相关代码文件初始会生成一个Index页面。ohosTest是单元测试目录。build-profile.json5是模块级配置信息包括编译构建配置项。hvigorfile.ts文件是模块级构建脚本。oh-package.json5是模块级依赖配置信息文件。resources目录下存放模块公共的多媒体、字符串及布局文件等资源分别存放在element、media文件夹中。
2.开发选型
HarmonyOS 3.1及以上版本支持ArkTS、JS语言和Stage模型和FA模型两种模型其中Stage模型为从HarmonyOS 3.1开始新增的模型将是长期演进的模型。
HarmonyOS中的Stage模型是指应用程序的窗口管理器和图形引擎。Stage模型包含一个场景Scene和多个舞台Stage每个舞台表示一个窗口。在舞台上可以添加多个UI元素如Button、Label、Image等通过对UI元素进行布局、组合和交互实现应用程序的功能。
在HarmonyOS中通过Stage模型可以实现窗口管理、多任务处理、图形渲染和事件处理等功能。同时Stage与HarmonyOS系统的分层架构紧密结合可以自动适配不同屏幕、不同分辨率的设备保证应用程序在各种设备上的兼容性和可用性。
一个应用包含一个或者多个Module以下是Module与UIAbility组件关系示意图 编译后的示意图
3.元服务中常用的API和类
OHOS::AAFwk::Ability: 这是Ability的基类提供了启动、停止和生命周期管理等能力。OHOS::AAFwk::Want: 跨应用程序组件之间传递的信息可以指定Intent和Bundle等参数。OHOS::AppExecFwk::EventHandler: 用于在Ability生命周期内处理异步任务支持延迟执行和定时执行。OHOS::EventFwk::EventRunner: 用于实现异步事件的执行和处理。OHOS::AGP::Window: 应用程序窗口用于显示UI界面。OHOS::AGP::View: UI界面中的基本控件如Button、TextView等。OHOS::DataAbility::DataAbilityHelper: 数据能力的基础类用于管理数据的增删改查操作。OHOS::DistributedSchedule::DistributedSchedulPolicy: 分布式调度策略用于实现分布式系统的任务调度。OHOS::Media::MediaPlayer: 用于播放音频和视频文件。OHOS::Security::Permission: 权限管理类用于管理应用程序对系统资源的访问权限。
五、案例展示手语猜一猜
1.案例背景
手语学习元服务的案例背景主要是为了帮助人们学习手语提高对聋人的理解和尊重。聋人由于听力障碍无法通过声音语言进行交流而手语是聋人交流的主要方式。手语学习元服务通过数字化的方式提供了学习手语的机会让更多的人能够了解手语学习手语以便更好地与聋人交流和理解聋人的需求。
随着社会的不断发展聋人的教育和融入社会的问题日益重要。手语学习应用可以提供数字化的手语课程让更多的人能够学习手语提高对聋人的理解和尊重促进聋人的教育和融入社会。
手语是一种非常有意义的语言它不仅可以让聋人与人进行有效的交流还可以帮助听力正常的人了解和尊重聋人的文化和生活习惯。手语学习应用也可以成为一个重要的手语文化传播平台让更多的人了解和学习手语促进手语文化的传播和发展。
2.功能简介
元服务 1、提供专业手语翻译老师示范视频包括基本手势、字母表、常用短语等。用户可以点击观看示范并模仿。 2、提供类似答题模块帮助用户巩固所学的手语知识用户可以完成答题模块测试自己的进步。
元服务卡片 1、卡片界面展示每日一题并可以在卡片上进行答题学习
3.案例实现流程
3.1 内部应用功能
☀️3.1.1 首页功能
首页功能主要包含了4块功能每日挑战、课程、测试、学习记录 3.1.1.1 每日挑战
每日挑战主要的交互有2块功能换一换和答题
换一换主要实现题目和资源的切换替换题目、替换视频链接
答题主要是根据选项遍历出Button按钮在根据按钮点击事件判断点击的按钮type等于1则答题正确
源码片段如下
Flex({ justifyContent: FlexAlign.SpaceBetween }){Text(每日挑战).fontSize(20).fontColor(#fff).width(50%)Column() {Flex({ justifyContent: FlexAlign.End }) {Image(this.ic_new).width(20).height(20).margin({right:5})Text(换一批).fontSize(20).fontColor(#fff).onClick((){this.anyArray[{name:吃,type:1},{name:厲害,type:0}]this.videoSrc$rawfile(quick.mp4)this.previewUri$r(app.media.quick)})}.width(50%)}
}.padding(10).backgroundColor(#938cf4)Column(){Column(){Flex({justifyContent:FlexAlign.SpaceBetween}){Text(根据视频所示选择正确的答案).fontSize(12).fontColor(#fff)Text(40%的人答错).fontSize(12).fontColor(#fff)}.padding({top:10,left:10,right:10,bottom:10}).margin({top:0})Video({src: this.videoSrc,previewUri: this.previewUri,currentProgressRate: this.curRate,controller: this.controller}).width(100%).height(180).padding(5).borderRadius(1).margin({top:0,left:10,right:10,bottom:10,})Flex({justifyContent:FlexAlign.SpaceBetween}){ForEach(this.anyArray,(item){Button(item.name,{ type: ButtonType.Normal,}).borderRadius(0).width(45%).backgroundColor(#ff986ec8).onClick((){if(item.type1){if (this.dialogController ! undefined) {this.dialogController.open()this.textValue答对了}}else{if (this.dialogController ! undefined) {this.dialogController.open()this.textValue答错了}}})})}.margin({top:0,left:10,right:10,bottom:10,})}.backgroundColor(#ffa49fea).margin({top:0,left:10,right:10,bottom:10,}).borderRadius(10)}.backgroundColor(#938cf4)3.1.1.2 课程
这边主要是点击按钮跳转到课程页面一个功能
源码片段如下 Column() {Flex({ alignItems: this.alignItems }) {Text(课程).width(50%).fontSize(20).fontWeight(FontWeight.Bold)}.size({width: 90%,}).padding({top:20,left:10,bottom:0})Flex({ justifyContent: FlexAlign.SpaceBetween }) {Text(初级课程易上手).width(70%).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#c4c2cf)Button(学习).width(30%).backgroundColor(#fecc5b).margin({top:-25,}).onClick((){router.push({ url: pages/list })})}.size({width: 100%, }).padding({ left: 30 ,top:10,right:30,bottom:20},).border({radius:{bottomLeft: 15, bottomRight: 15}})
}.width(90%)
.backgroundColor(#fff)
.borderRadius(15)
.margin(20)3.1.1.3 测试
这边主要是点击按钮跳转到测试页面一个功能
源码片段如下 Column() {Flex({ alignItems: this.alignItems }) {Text(课程).width(50%).fontSize(20).fontWeight(FontWeight.Bold)}.size({width: 90%,}).padding({top:20,left:10,bottom:0})Flex({ justifyContent: FlexAlign.SpaceBetween }) {Text(初级课程易上手).width(70%).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#c4c2cf)Button(学习).width(30%).backgroundColor(#fecc5b).margin({top:-25,}).onClick((){router.push({ url: pages/list })})}.size({width: 100%, }).padding({ left: 30 ,top:10,right:30,bottom:20},).border({radius:{bottomLeft: 15, bottomRight: 15}})
}.width(90%)
.backgroundColor(#fff)
.borderRadius(15)
.margin(20)3.1.1.4 学习记录
这边主要是基于组件的形式在界面展示功能点主要有时间数据、学习课程数
时间数据已当前时间自动更新学习课程数来源于已学课程的本地存储数据存储来源在课程学习界面
源码片段如下
PersistentStorage.PersistProp(course, 0);let date new Date()
let time date.getFullYear() 年 (date.getMonth() 1) 月 date.getDate() 日
console.log(time);
Component
export default struct studyCollect {alignItems : number 0// State timeDate:string dateStorageLink(course) course: number 0State dayTime:stringtime;build() {Column() {Flex({ alignItems: this.alignItems }) {Text(学习记录).width(50%).fontSize(20).fontWeight(FontWeight.Bold)Text( ${this.dayTime}).width(50%).height(30).textAlign(TextAlign.End)}.size({width: 90%, height: 50}).margin({top:10}).padding(10)Flex({ alignItems: this.alignItems }) {Text(已学${this.course}课程).width(50%).height(20).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#fff)Text(${this.course}分钟).width(50%).height(20).textAlign(TextAlign.End).fontColor(#fff)}.size({width: 100%, height: 50}).padding({ left: 40 ,top:15,right:40,},).border({radius:{bottomLeft: 15, bottomRight: 15}}).backgroundColor(#938cf4)}.width(90%).backgroundColor(#fff).borderRadius(15).margin({top:5})}
}☀️3.1.2 课程功能
课程主页面主要是课程信息展示和跳转到具体详情页面
源码片段如下
import router from ohos.router;import { arrImage } from ../common/json
Entry
Component
struct list {scroller: Scroller new Scroller();State arrImage: Object[]arrImagebuild() {Scroll(this.scroller) {Column() {Column({ space: 5 }) {Text(初级课程).fontSize(20).fontColor(#fff).width(90%).padding(10).backgroundColor()Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {ForEach(this.arrImage, (item) {Column() {Image(item.image).width(100%).height(120)Text(item.name).lineHeight(30)}.width(45%).height(150).backgroundColor(0xF5DEB3).margin(5).onClick((){router.pushUrl({url:pages/details,params:{text:item.name,image:item.image,video:item.video}})})})}.width(100%).padding(10).backgroundColor(0xAFEEEE)}.width(100%).margin({ top: 5 })}.width(100%).backgroundColor(#938cf4)}.backgroundColor(0xDCDCDC).scrollable(ScrollDirection.Vertical) // 滚动方向纵向.scrollBar(BarState.On) // 滚动条常驻显示.scrollBarColor(Color.Gray) // 滚动条颜色.scrollBarWidth(5) // 滚动条宽度.edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹}
}3.1.2.1 课程详情页
功能点主要有路由数据、客户对课程的状态信息
路由数据手语答案、手语视频地址客户对课程的状态信息点赞、收藏、转发相关状态变更
源码片段如下
import router from ohos.router
import promptAction from ohos.promptActionimport { CommonTitleBar } from ../common/CommonTitleBar;Entry
Component
struct Index {StorageLink(course) course: number 0// State good:Resource$r(app.media.icon_good);State goodStatus:booleantrueState goodNumber:number0State startStatus:booleantrueState startNumber:number0State shareStatus:booleantrueState shareNumber:number0State text: string router.getParams()[text]State previewUri: Resource router.getParams()[image]State videoSrc: Resource router.getParams()[video]State curRate: PlaybackSpeed PlaybackSpeed.Speed_Forward_1_00_Xcontroller: VideoController new VideoController()alignItems : number 0build() {Column(){// CommonTitleBar({attribute: {// bg_color: #ff2ad4b2,// close_text: 返回,// closeCallback: () {//// },// title_text: 标题,// menuCallback: () {//// }// }})Column(){Column(){Video({src: this.videoSrc,previewUri: this.previewUri,currentProgressRate: this.curRate,controller: this.controller}).width(100%).height(180).padding(10).borderRadius(10).onFinish(() {this.course 1;console.info(onFinish)})}Flex(){Text(当前示例).fontSize(24)Text(${this.text}).fontSize(24)}.padding(10)Flex({}){Flex(){Image(this.goodStatus ? $r(app.media.icon_good):$r(app.media.active_icon_good)).width(24).height(24)Text(${this.goodNumber}).height(25)}.width(20%).onClick((){this.goodStatus!this.goodStatus;this.goodStatus ? this.goodNumber--:this.goodNumber;promptAction.showToast({message: this.goodStatus ? 取消点赞 :点赞成功,duration: 2000,});})Flex(){Image(this.startStatus ? $r(app.media.icon_star):$r(app.media.active_icon_star)).width(24).height(24)Text(${this.startNumber}).height(25)}.width(20%).onClick((){this.startStatus!this.startStatus;this.startStatus ? this.startNumber--:this.startNumber;promptAction.showToast({message: this.startStatus ? 取消收藏 :收藏成功,duration: 2000,});})Flex(){Image(this.shareStatus ? $r(app.media.icon_share):$r(app.media.active_icon_share)).width(24).height(24)Text(${this.shareNumber}).height(25)}.width(20%).onClick((){this.shareStatus!this.shareStatus;this.shareStatus ? this.shareNumber--:this.shareNumber;promptAction.showToast({message: this.shareStatus ? 取消转发 :转发成功,duration: 2000,});})}.padding(10)}}//容器整体宽高.width(100%).height(100%).backgroundColor(#ff0f2ff)}
}☀️3.1.3 测试功能
测试功能页面主要功能是从json的题库取出10题如果答题正确会自动切换到下一题。
源码片段如下 import router from ohos.routerimport promptAction from ohos.promptAction
import { arrImage } from ../common/json
Entry
Component
struct Index {State onActive : number 1State arrImage: Object[]arrImageState videoSrc: Resource $rawfile(hello.mp4)State previewUri: Resource $r(app.media.hello)State curRate: PlaybackSpeed PlaybackSpeed.Speed_Forward_1_00_Xcontroller: VideoController new VideoController()alignItems : number 0State message: string 手语猜猜看State studyName: string 手语阅览State collectName: string 手语挑战State testName: string 测试State arr: string[] [你好,出生,爱,晚饭,中午,明天]build() {Column(){Column(){Flex({alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){// Text(${this.arrImage[this.onActive][name]})Text(${this.onActive}).fontSize(28)Text(/).fontSize(28)Text(${this.arrImage.length}).fontSize(28)}.margin(10)Column(){Video({src: this.arrImage[this.onActive-1][video],previewUri: this.arrImage[this.onActive-1][image],currentProgressRate: this.curRate,controller: this.controller}).width(100%).height(180).margin({top:0,bottom:0,})}Column({}){Text(在下列选项中选择正确答案).width(100%).padding(10).fontSize(20)}.backgroundColor(#fff)Flex({wrap: FlexWrap.Wrap }){ForEach(this.arrImage[this.onActive-1][answer],(item:string){Button(item,{ type: ButtonType.Normal,}).margin(5).borderRadius(5).onClick(() {console.log(item)if(this.onActivethis.arrImage.length){promptAction.showToast({message: 闯关已结束,duration: 2000,});router.back({url:pages/index});return false;}if(itemthis.arrImage[this.onActive-1][name]){promptAction.showToast({message: 答对了请继续下一题,duration: 2000,});this.onActivethis.onActive1;}else{promptAction.showToast({message: 答错了,duration: 2000,});}})})}.padding(10)}}//容器整体宽高.width(100%).height(100%).backgroundColor(#ff0f2ff)}
}3.2 卡片功能
这边和每日挑战功能类似主要多了些动画效果卡片主要的交互有2块功能换一换和答题
换一换主要实现题目和资源的切换替换题目、替换视频链接答题主要是根据选项遍历出Button按钮在根据按钮点击事件判断点击的按钮type等于1则答题正确
源码片段如下 Entry
Component
struct WidgetCard {State onActive:number0State arrImage: Object[] [{name:你好,image:$r(app.media.hello),content:一手食指指向对方。一手握拳向上伸出拇指。,video:$rawfile(hello.mp4),anyArray:[{name:你好,type:1},{name:谢谢,type:0}]},{name:谢谢,image:$r(app.media.thank),content:一手伸出拇指弯曲两下表示向人感谢。,video:$rawfile(thank.mp4),anyArray:[{name:不好,type:0},{name:谢谢,type:1}]},{name:爱,image:$r(app.media.love),content:一手轻轻抚摩另一手拇指指背表示一种“怜爱”的感情,video:$rawfile(love.mp4),anyArray:[{name:没有,type:0},{name:爱,type:1}]},{name:喜欢,image:$r(app.media.live),video:$rawfile(like.mp4),content:一手拇、食指微曲指尖抵于颌下头微微点动一下。 ,anyArray:[{name:没有,type:0},{name:喜欢,type:1}]},{name:不喜欢,image:$r(app.media.dislike),video:$rawfile(dislike.mp4),content:一手伸直左右摆动几下。 一手拇、食指微曲指尖抵于颌下头微微点动一下。 ,anyArray:[{name:好晕,type:0},{name:不喜欢,type:1}]},{name:饭,image:$r(app.media.eat),video:$rawfile(eat.mp4),content:一一手拇、食指相对中间留有米粒大小距离。二一手伸食、中指象征筷子作吃饭动作。,anyArray:[{name:可爱,type:0},{name:饭,type:1}]},{name:快,image:$r(app.media.quick),video:$rawfile(quick.mp4),content:一手拇、食指相捏很快地从一侧向另一侧作快速挥动象征物体运动速度很快。,anyArray:[{name:慢,type:0},{name:快,type:1}]},{name:慢,image:$r(app.media.slow),video:$rawfile(show.mp4),content:一手掌心向下慢慢地上下微动几下象征物体运动速度缓慢。,anyArray:[{name:去,type:0},{name:慢,type:1}]},{name:没关系,image:$r(app.media.matter),video:$rawfile(matter.mp4),content:一手拇、食、中指捻动连续几次。 两手拇、食指搭成圆圈互相套环。 ,anyArray:[{name:人类,type:0},{name:没关系,type:1}]},{name:厉害,image:$r(app.media.powerful),video:$rawfile(powerful.mp4),content:一手打手指字母“L”的指式并绕脸部转一圈。同时面部作出严厉的表情。 ,anyArray:[{name:好帅,type:0},{name:厉害,type:1}]},];/** The max lines.*/readonly MAX_LINES: number 1;/** The action type.*/readonly ACTION_TYPE: string router;/** The message.*/readonly MESSAGE: string add detail;/** The ability name.*/readonly ABILITY_NAME: string EntryAbility;/** The with percentage setting.*/readonly FULL_WIDTH_PERCENT: string 100%;/** The height percentage setting.*/readonly FULL_HEIGHT_PERCENT: string 100%;State opacityAngle: number 0.8State mainFlag: boolean false;State flag: boolean true;build() {Stack() {if(this.flag){Image(this.arrImage[this.onActive][image]).width(this.FULL_WIDTH_PERCENT).height(this.FULL_HEIGHT_PERCENT).objectFit(ImageFit.Cover).opacity(this.opacityAngle).transition({ type: TransitionType.Insert, translate: { x: 0, y: 0 } }).transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })}else{Image(this.arrImage[this.onActive][image]).width(this.FULL_WIDTH_PERCENT).height(this.FULL_HEIGHT_PERCENT).objectFit(ImageFit.Cover).opacity(this.opacityAngle).transition({ type: TransitionType.Insert, translate: { x: 0, y: 0 } }).transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })}Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }){Image($r(app.media.ic_new)).width(11).height(11).margin({left:10,top:3,right:5})Text(换一批).fontSize(8fp).width(40).fontColor(#fff).margin({top:3})}.backgroundColor(#fecc5b).width(50).height(15).borderRadius(10).onClick((){animateTo({ duration: 1000 }, () {this.flag !this.flag;this.onActive(this.onActive1)%this.arrImage.length;})}).position({ x: 10, y: 10 })Column(){Flex({justifyContent:FlexAlign.SpaceBetween}){ForEach(this.arrImage[this.onActive][anyArray],(item){Button(item.name,{ type: ButtonType.Normal,}).fontSize(8fp).borderRadius(10).height(20).width(45%).backgroundColor(#fecc5b).onClick((){console.log(44)if(item.type1){animateTo({ duration: 1000 }, () {this.flag !this.flag;this.onActive(this.onActive1)%this.arrImage.length;})}else{}})})}}.margin({top:110,left:10,right:10})Text(this.arrImage[this.onActive][content]).fontSize(7fp).opacity($r(app.float.detail_immersive_opacity)).margin({ top: 70vp,left:10vp,right:10vp }).textOverflow({ overflow: TextOverflow.Ellipsis }).fontColor(#000).fontWeight(900).maxLines(this.MAX_LINES)}.width(this.FULL_WIDTH_PERCENT).height(this.FULL_HEIGHT_PERCENT).onClick(() {postCardAction(this, {action: this.ACTION_TYPE,abilityName: this.ABILITY_NAME,params: {message: this.MESSAGE}});})}
}元服务项目源码https://download.csdn.net/download/aa2528877987/88484307 总结
手语猜一猜元服务的实现借助了HarmonyOS的跨应用数据共享和功能交互特性让用户可以通过手势输入手语并进行识别和猜词游戏。这种应用方式不仅提供了娱乐和互动的体验还促进了手语的学习和交流。通过使用该应用我深刻体会到了HarmonyOS元服务的便利和灵活性。
开发使用HarmonyOS元服务可以带来许多好处包括跨设备互联、数据共享和交互、灵活性和扩展性以及性能优化。我鼓励大家积极尝试使用HarmonyOS元服务开发出更好属于自己的应用。
附录
元服务介绍元服务-元服务万能卡片-元服务开发解决方案-华为开发者联盟ArkTS语言介绍 ArkTS 语言 - HarmonyOS应用开发官网端云一体化开发介绍文档中心低代码开发介绍文档中心
