HarmonyOS Next-元服务开发详解

元服务是一种更加高效便捷的应用形式,免安装,有独立的入口,说的简单一点就像是把微信小程序放到系统层面,相比微信小程序更加快捷,因为连微信也不用打开了。

官方链接:developer.huawei.com/consumer/cn...

创建项目

元服务的创建和普通应用有所区别,我们要创建的是Atomic Service,模版选择Empty Ability就可以。

接下来要为元服务注册App ID,元服务和微信小程序类似,必须要有App ID才能进行开发。

一个元服务工程如下:

配置图标

在entry文件夹右键新建Image Asset,选择一个1024*1024的图片就可以设置为元服务的图标了。

开发元服务页面

进入正式的开发环节,依然打开pages文件夹下的Index文件, 在元服务中页面的开发、页面之间的跳转和普通应用一样,初始化文件依旧是个"hello world"

在元服务中,网络请求除了需要配置网络权限外,还要在应用中心配置域名白名单,这一点又和微信小程序类似。

打开应用中心的开发管理就可以配置域名,不过这种方式是有延迟和缓存的,在开发阶段可以在手机的开发者选项中开发元服务豁免开关,取消对域名的访问限制,然后就可以进行网络请求了。

开发卡片页面

卡片是元服务的一种快捷操作和入口,现在我们尝试常见一个卡片,在entey文件夹右键新建Dynamic Widget,创建完成之后可以发现工程目录中除了新建的卡片,还新增了entryformability文件夹,这是卡片的生命周期函数。

真机:两个手指捏合屏幕,在列表里选择程序就可以把卡片添加到桌面。

模拟器: 在桌面按住ctrl 实现双指缩放,在列表里选择程序就可以把卡片添加到桌面

数据传递

元服务和卡片是两套进程,并不能直接进行通信。所以我们这里使用用户首选项,先在元服务中将数据保存,再从卡片中取出数据.

首先在主应用中保存数据:

javascript 复制代码
let preferen = await preferences.getPreferences(context, "CardData")
await preferen.put('city', result.data.city)
await preferen.put('tianqi', weatherItem.weather)
await preferen.put('pm', weatherItem.air_quality)
await preferen.put('wendu', weatherItem.temperature)
preferen.flush()

点击卡片空白事件

javascript 复制代码
.onClick(() => {    
    postCardAction(this, {        
        action: 'message',        
        params: { msgTest: 'messageEvent' }
    })
})

这时候点击图片会调用entryformability文件中的onFormEvent方法

javascript 复制代码
// EntryAbility.ets
onFormEvent(formId: string, message: string) {    
    this.updateUI(formId)
}
async updateUI(formId:string){    
    let preferen = await preferences.getPreferences(this.context,'CardData')   
    let cityStr = await preferen.get('city', '0')    
    let tianqi = await preferen.get('tianqi', '0')    
    let pm = await preferen.get('pm', '0')    
    let wendu = await preferen.get('wendu', '0') 
    // 处理逻辑
    class FormDataClass {        
        city = cityStr        
        tianqi = tianqi         
        pm =  pm         
        wendu = wendu     
    }    
    let formData = new FormDataClass();    
    let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);    formProvider.updateForm(formId, formInfo).then(() => { }).catch((error: BusinessError) => {  })
}

使用router事件跳转到指定UIAbility

通常使用按钮控件来实现页面拉起,示例代码如下:

  • 在卡片页面中布局两个按钮,点击其中一个按钮时调用postCardAction向指定UIAbility发送router事件,并在事件内定义需要传递的内容
  • 在UIAbility中接收router事件并获取参数,根据传递的params不同,选择拉起不同的页面
相关推荐
啊哈一半醒18 小时前
React 核心知识点系统总结:从基础语法到高级 API,一篇文章梳理完整学习路线
javascript·学习·react.js
被考核重击19 小时前
Vue响应式原理(下)
前端·javascript·vue.js
matlab_xiaowang1 天前
Redux 入门:JavaScript 可预测状态管理库
开发语言·javascript·其他·ecmascript
前端摸鱼匠1 天前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript
REDcker1 天前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
Linsk1 天前
Java和JavaScript的关系真是雷峰和雷峰塔的关系吗?
java·javascript·oracle
当时只道寻常1 天前
浏览器文本复制到剪贴板:企业级最佳实践
javascript
Alice-YUE1 天前
【js高频八股】防抖与节流
开发语言·前端·javascript·笔记·学习·ecmascript
是上好佳佳佳呀1 天前
【前端(十一)】JavaScript 语法基础笔记(多语言对比)
前端·javascript·笔记
莎士比亚的文学花园1 天前
Linux驱动开发(3)——设备树
开发语言·javascript·ecmascript