鸿蒙Next元服务开发详解
之前写过关于元服务的文章,大家对元服务应该也有一定的了解,它是一种更加高效便捷的应用形式,免安装,有独立的入口,说的简单一点就像是把微信小程序放到系统层面,相比微信小程序更加快捷,因为连微信也不用打开了。
今天就分享一下怎么开发一个鸿蒙元服务。
创建项目
元服务的创建和普通应用有所区别,我们要创建的是Atomic Service,模版选择Empty Ability就可以。
接下来要为元服务注册App ID,元服务和微信小程序类似,必须要有App ID才能进行开发。
好在这一步比较方便,点注册填一下名称等信息就可以了,再回到工程页面,一个元服务工程就创建好了。看一下工程目录好像和普通应用并没有什么不同。
配置图标
在entry文件夹右键新建Image Asset,选择一个1024*1024的图片就可以设置为元服务的图标了。
开发元服务页面
现在进入正式的开发环节,依然打开pages文件夹下的Index文件,这里同样是元服务的内容页面,看一下好像比普通应用多了一些代码,不必理会。
在元服务中页面的开发、页面之间的跳转和普通应用一样,可以添加一个按钮感受一下:
Column(){
Text(this.message)
.id('HelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
Button('按钮')
.fontColor(Color.White)
.fontSize(15)
.width(100)
.margin({top:40})
.onClick(()=>{
})
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.height('100%')
.width('100%')
都差不多,不再赘述,我们重点说一下和普通应用开发不一样的地方,比如网络请求。
在元服务中,网络请求除了需要配置网络权限外,还要在应用中心配置域名白名单,这一点又和微信小程序类似。
打开应用中心的开发管理就可以配置域名,不过这种方式是有延迟和缓存的,在开发阶段可以在手机的开发者选项中开发元服务豁免开关,取消对域名的访问限制,然后就可以进行网络请求了。我找了一个天气的接口:
let url = 'https://.com/api/weather?city=%E6%9E%A3%E5%BA%84%E6%BB%95%E5%B7%9E'
let result: ResultData = await HttpManager.getInstance().request({
method: RequestMethod.GET,
url: url
})
let resultData: WeatherItem[] = result.data.data
开发卡片页面
卡片是元服务的一种快捷操作和入口,现在我们尝试常见一个卡片,在entey文件夹右键新建Dynamic Widget,创建完成之后可以发现工程目录中除了新建的卡片,还新增了entryformability文件夹,这是卡片的生命周期函数。
现在我们尝试在卡片中开发一些简单的页面,比如一个天气页面:
Row() { Column() { Column(){ Text(this.city) .fontSize(14) .fontColor(Color.White) Text(this.wendu ) .fontWeight(FontWeight.Bold) .fontSize(20) .fontColor(Color.White) .margin({top:5}) } Text(this.tianqi + ' 空气' + this.pm) .fontColor(Color.White) .fontSize(13) } .justifyContent(FlexAlign.SpaceBetween) .width(this.FULL_WIDTH_PERCENT) .alignItems(HorizontalAlign.Start) .height(this.FULL_HEIGHT_PERCENT) Image($r('app.media.clear')) .width(25) .height(25) .objectFit(ImageFit.Contain) .onClick(() => { postCardAction(this, { action: 'message', params: { msgTest: 'messageEvent' } }); })}.alignItems(VerticalAlign.Top).padding({left:15,right:40,top:15,bottom:15}).linearGradient({ direction: GradientDirection.Bottom, // 渐变方向 repeating: false, // 渐变颜色是否重复 colors: [[0x9FCCE0, 0.0], [0xC9E4DD, 1.0]]}).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 } });})
两个手指捏合屏幕,在列表里选择程序就可以把卡片添加到桌面。
数据传递
大家是否还记得刚才我在元服务中进行了一个网络请求,刚好也是一个天气数据接口,现在我们要做的是如何将元服务中的数据传递到卡片中进行展示。
需要告诉大家的是,元服务和卡片是两套进程,并不能直接进行通信。所以我们这里使用用户首选项,先在元服务中将数据保存,再从卡片中取出数据.
首先在主应用中保存数据:
let pf = await preferences.getPreferences(context, "CardData")
await pf.put('city', result.data.city)
await pf.put('tianqi', weatherItem.weather)
await pf.put('pm', weatherItem.air_quality)
await pf.put('wendu', weatherItem.temperature)pf.flush()
下面尝试在卡片里取出数据,这里涉及到卡片的刷新,卡片的刷讯分为主动刷新和定时刷新,今天今天先主要分享一个主动刷新。也就是通过用户的主动操作进行刷新,比如点击一个按钮,我给天气图片添加一个点击事件:
.onClick(() => {
postCardAction(this, {
action: 'message',
params: { msgTest: 'messageEvent' }
});
})
这时候点击图片会调用entryformability文件中的onFormEvent方法,我们在这里取出数据并更新页面:
onFormEvent(formId: string, message: string) {
// Called when a specified message event defined by the form provider is triggered.
this.updateUI(formId)
}
async updateUI(formId:string){
let pf = await preferences.getPreferences(this.context,'CardData')
let cityStr = await pf.get('city', '0')
let tianqi = await pf.get('tianqi', '0')
let pm = await pf.get('pm', '0')
let wendu = await pf.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) => { })
}
以上就是开发一个元服务的简单介绍。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库