[系统运维]如何开发一个鸿蒙服务卡片并拉起一个H5页面

服务卡片是HarmonyOS FA(Feature Ability)的一种新的界面形式，能够通过服务搜索到卡片后让用户直接使用服务（后台安装hap）。

由于原有应用适配到鸿蒙系统存在大量的时间、人力成本，所以先采用服务卡片的形式，将一部分不区分终端的H5功能先做迁移。具体形式就是通过卡片服务拉起H5页面再做业务。

【搭建环境】

1、安装DevEco Stuido，详见：下载与安装软件
2、配置环境，详见：配置开发环境

【卡片开发】

1、新建卡片相关文件，选样式并命名。
工程目录（右键） -> New -> Service Widget

2、创建好后，目录中会新增卡片的模版代码（widget目录），需要个性化实现的在WidgetImpl中，由于项目需要，我们更多的是需要服务卡为一个入口。后面只要能够拉起H5页面就好，所以无需复杂实现。

3、与此同时，IDE会自动在config.json文件的abilitie中配置form相关数据

"forms": [
  {
    "landscapeLayouts": [
      "$layout:form_image_with_information_test_widget_2_2"
    ],
    "isDefault": true,
    "scheduledUpdateTime": "10:30",
    "defaultDimension": "2*2",
    "name": "Test_Widget",
    "description": "This is a service widget",
    "colorMode": "auto",
    "type": "Java",
    "supportDimensions": [
      "2*2"
    ],
    "portraitLayouts": [
      "$layout:form_image_with_information_test_widget_2_2"
    ],
    "updateEnabled": true,
    "updateDuration": 1
  }
]

4、修改卡片样式
在forms配置中可以看到landscapeLayouts关键字，该字段对应的value就是服务卡片的layout。
如本例中卡片layout为form_image_with_information_test_widget_2_2，打开文件进行设置。
layout的开发有过前端开发经验的小伙伴们都可以很轻松搞定。

5、如何使用卡片
1）使用服务中心搜索应用名，可以看到对应的卡片
2）长按icon上滑能够触发显示卡片

【H5加载】

1、增加WebView组件

<ohos.agp.components.webengine.WebView
    ohos:id="$+id:webView"
    ohos:width="match_parent"
    ohos:height="match_parent"/>

2、加载H5页面

WebView webView = (WebView) findComponentById(ResourceTable.Id_webView);
webview.load("https://www.baidu.com");

3、应用给H5提供接口

// 是否支持Javascript，默认值false
webview.getWebConfig().setJavaScriptPermit(true);
// 注册H5接口
webview.addJsCallback("JsCallJava", str -> {
    // 处理接收到的Js发送来的消息
    new ToastDialog(this).setText(str).setAlignment(LayoutAlignment.CENTER).show();
    // 返回给Js
    return "Js Call Java Success";
});

4、应用调用H5接口，前提H5中提供一个名为callJs的方法

webview.executeJs("javascript:callJS('应用调用Js方法')", msg -> {
    // 在这里处理Java调用Js的方法的返回值
});

【有坑注意】

1、如何进入服务中心？长按屏幕左下角向右上角滑动可以触发。
2、config.json中配置 installationFree为false才能显示icon，否则应用关闭后只能通过服务中心的搜索才能找到应用，反复启动调试不方便。
3、有icon的hap应用支持上滑显示卡片功能。