立在鸿蒙高速入口的广告牌,如何高效叠加更丰富的元服务体验
卡片跳转、快应用、Harmony、服务卡片
绚丽的诱惑
HarmonyOS提供了能随你而变的万能卡片特性,大家都在转玩自定义鸿蒙万能卡片(简称“万能卡片”)的同时,万能卡片跳转后的元服务体验才是真正的源动力。万能卡片好似树立在鸿蒙高速入口的广告牌,将鸿蒙元服务(简称“元服务”)重要信息前置到卡片上,指引用户通过这个广告牌直达元服务,减少体验层级。
万能卡片或拉起页面、或发送请求、或刷新内容,实现各种丰富的元服务交互。无需手机打开HarmonyOS应用,就能让用户体验常用的HarmonyOS应用功能。
错综的心结
万能卡片是元服务功能的简要缩影,相对复杂的功能还是要在元服务内承载。大部分开发者已经开发了自己的APP、快应用、H5,鸿蒙生态兴起,但是重新开发元服务会带来开发工作量浪费、维护成本增加等心结。
万能卡片跳转快应用,即可轻松解开你的心结,在鸿蒙高速上一往无前。
奇思破题
1.在DevEco Studio 3.1创建HarmonyOS工程,点击File > New > Create Project,选择Empty Ability模板。
2.配置工程参数。
关键配置如下:
- Project type:选择Atomic service
- SDK版本:建议选择API 6
- Device type:去勾选TV
- Show in service center:开启
点击Finish,等待DevEco Studio完成项目初始化。
待项目初始化完成后,在entry/src/js/widget路径下查看卡片的JS文件组织。
3.在index.hml文件中开发组件布局,实现卡片页面的模板布局结构。
4.在image图片上绑定了一个点击事件routerEvent。
index.hml文件的片段代码示例如下:
<div class="container">
<stack>
<div class="container-img">
<image src="/common/ic_default_image@3x.png" class="bg-img" onclick="routerEvent"></image>
</div>
<div class="container-inner">
<text class="title">{{ $t('strings.title') }}</text>
<text class="detail_text">{{ $t('strings.detail') }}</text>
</div>
</stack>
</div>
5.在json中实现routerEvent事件。
index.json文件的片段代码示例如下:
{
"data": {
"title": "Title",
"detail": "Text",
"iconTitle": "Picture"
},
"actions": {
"routerEvent": {
"action": "router",
"bundleName": "com.huawei.appgallery.myapplication.hmservice",
"abilityName": "com.huawei.appgallery.myapplication.MainAbility",
"params": {
"message": "add detail"
}
}
}
}
actions中定义事件routerEvent,action动作为router跳转,跳转地址为bundleName为com.huawei.appgallery.myapplication.hmservice的com.huawei.appgallery.myapplication.MainAbility(具体可在config.json文件中查看)。
此外还支持message事件,该事件不跳转页面,仅触发MainAbility的onTriggerFormEvent方法。
6.在MainAbility文件中实现卡片->元服务->快应用的跳转。
因为卡片只能跳转到元服务,所以想从卡片跳转到快应用就只能通过卡片->元服务->快应用的思路实现,在MainAbility文件的生命周期方法onStart中通过Intent实现三方跳转。
MainAbility文件的片段代码示例如下:
@Override
public void onStart(Intent intent) {
super.onStart(intent);
this.setUIContent(ResourceTable.Layout_ability_main);//设置透明窗口
WindowManager.getInstance().getTopWindow().get().setTransparent(true);//设置对话框启用透明模式
go();//快应用跳转
terminateAbility();//关闭元服务进程
}
private void go(){
Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder()
//.withBundleName("com.huawei.fastapp.dev") //快应用引擎
.withBundleName("com.huawei.fastapp") //生产环境
.withUri(Uri.parse("hap://app/com.testquick.huawei?kay=value")) //快应用包名和需要携带的参数
.withAction(IntentConstants.ACTION_VIEW_DATA)
.withFlags(Intent.FLAG_NOT_OHOS_COMPONENT)
.build();
intent.setOperation(operation);
intent.setParam("TYPE","MAP");
startAbility(intent);}
7.设置元服务的状态为沉浸式,提升跳转体验。
为了达到最完美的效果,需要配置元服务的状态为沉浸式,在config.json文件中找到module下的abilities中找到MainAbility。
跟forms同级别添加代码。
MainAbility文件的片段代码示例如下:
"name": "com.huawei.appgallery.myapplication.MainAbility",
"metaData": {
"customizeData": [
{
"name": "hwc-theme",
"value": "androidhwext:style/Theme.Emui.Translucent.NoTitleBar.Fullscreen"
}
]
},
"forms": [
{
"jsComponentName": "widget",
..........
在万能卡片上巧妙的高效叠加快应用已有的成熟丰富体验,岂不美哉!鸿蒙生态兴起,不远处元服务和万能卡片的蓝海正在熠熠发光。
欲更多了解元服务,请戳短视频。
欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
更多推荐
所有评论(0)