绚丽的诱惑

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中定义事件routerEventaction动作为router跳转,跳转地址为bundleNamecom.huawei.appgallery.myapplication.hmservicecom.huawei.appgallery.myapplication.MainAbility(具体可在config.json文件中查看)。

此外还支持message事件,该事件不跳转页面,仅触发MainAbilityonTriggerFormEvent方法。

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐