基于屏幕模板构建屏幕

前提条件

• 需要具备AppStage指标开发者或运营管理员权限，权限申请的操作请参见权限管理。
• 已完成新建项目。

操作步骤

1. 登录AppStage业务控制台。
2. 在快捷入口选择“运营中心”，进入运营中心。
3. 在左侧导航栏选择“看板管理 > 我的屏幕”。
4. 选择屏幕分组，单击“新建屏幕”。
5. 在“选择构建方式”页面，在“基于模板构建”下单击“屏幕构建”。
6. 配置新建屏幕基本信息，参数说明请参考表1。
   图1 新建屏幕
   

   表1 参数说明

   参数	说明
   屏幕名称	屏幕的名称，由1~64个字符组成，包含中文、字母、数字及下划线。屏幕名称满足唯一性。
   屏幕分组	选择相应的分组。可以在“我的屏幕”页签，选择项目后添加分组。
   屏幕描述	屏幕相关描述，由1~400个字符组成，包含中文、字母、数字及下划线。

7. 单击“确定”，进入选择屏幕模板界面。
8. 在合适的屏幕模板上，单击“使用”。

   如果没有满足要求的屏幕模板，请新建公共屏幕模板或编辑现有的公共屏幕模板，具体请参见新建屏幕模板。

9. 在右侧配置“屏幕属性”，具体的参数说明如表2 参数说明所示。

   表2 参数说明

   参数	说明
   基础属性	屏幕名称/屏幕分组/屏幕描述：可修改。 屏幕尺寸：可对屏幕尺寸进行修改，包含默认、2K屏、4K屏和自定义。 编辑状态：可以通过切换编辑状态设置屏幕是否可编辑。 主题背景：可以单击“切换主题背景”切换主题风格。 渐进渲染/屏幕水印/版权信息/悬浮按钮：根据需求开启。
   版面属性	屏幕全屏/平台渲染/微前端加载：根据需求开启或关闭。 缩放方式：分为全屏铺满、固定高宽、等比缩放、等比缩放宽度铺满、等比缩放高度铺满。 可对上下左右边距进行自定义调整。
   其他	屏幕封面包含以下两种： 截取封面：单击“截取封面”，即可自动获取封面。 上传封面：单击“上传封面”后，将本地准备好的封面进行上传。

10. 在右侧配置“卡片属性”，包括“基本信息”、“交互”和“属性”，具体的参数说明如表6 参数说明所示。

    表3 参数说明

    参数		说明
    基本信息	基础信息	卡片的基本信息，不可修改。
    交互	交互方式	无：无交互方式。 联动：一个区域可有多张卡片，可设置切换。 局部事件：当打开局部事件时，仅对选中卡片的选中区域实现交互效果；反之，则是对选中卡片的全局产生效果。 显示目标：选择相应卡片，与主体卡片产生联动交互效果。 隐藏目标：选择相应卡片，隐藏卡片。 弹出：可设置屏幕内卡片的弹出方式。 触发方式：可选值为“点击”。 点击：任意点击卡片即可触发弹出效果。 弹出方式：可选值为“弹窗”“侧边抽屉”。 局部事件：当“触发方式”为“点击”时，才有此参数。当打开局部事件时，仅对选中卡片的选中区域实现交互效果；反之，则是对选中卡片的全局产生效果。 弹出卡片：选择相应卡片，与主体卡片产生弹出交互效果。选择卡片时支持搜索选择。 弹窗宽高：设置弹窗尺寸。 下钻： 局部事件：请选择已设置发送消息event1的卡片，否则不会生效。 发送消息event1在“屏幕模板 > 消息联动 > 自定义事件”进行设置。 当开启局部事件时，可设置多个下钻屏幕。 当值为：当开启局部事件时，才有此参数。卡片局部事件传出来的值。当配置为“*”时，适用于所有局部事件。 下钻屏幕：选择下钻的屏幕。 链接打开：下钻的屏幕显示窗口。 参数：设置参数。 效果：可选项“无”“滑窗”“翻页”“缩放”。
    	卡片特效	可根据需要对卡片配置“无”“飞入”、“浮入”、“滑入”效果。 说明： Windows操作系统，需要在“我的电脑 > 高级系统设置 > 高级 > 性能 > 设置 > 视觉效果 > 自定义”中勾选“窗口内的动画控件和元素”，才能显示卡片特效。电脑重启后，需要再次设置。
    	扩展交互	支持卡片全屏、卡片显隐、卡片固定位置。
    属性		可对卡片的内边距、标题、布局、数值及柱状样式等进行自定义配置。

11. 在右侧配置“屏幕卡片”，可以对卡片进行升级、删除、隐藏、展示等操作。

    选择的屏幕模板中的卡片如果已升级，您想要使用升级后的卡片，必须在“屏幕卡片”页签下单击“卡片一键升级”或在对应的卡片右侧单击。

12. 配置完成后，单击“完成”。

    配置完成后的屏幕，会展示在“我的屏幕”。

13. 在“我的屏幕”界面，选择创建的屏幕，单击“编辑”，可以再次返回屏幕构建页面对相关配置进行修改。
14. （可选）单击预览，预览屏幕配置效果。
15. 单击发布，在“发布”界面，根据需求开启分享状态，单击“确定”。
    • 关闭分享状态：屏幕不分享，仅该租户下的用户可查看此屏幕。
    • 开启分享状态：屏幕分享，该租户及其他租户下的用户均可查看此屏幕。
      • 无限制：发布时，复制分享链接。发布后，输入分享链接查看此屏幕。
      • 分享码：发布时需要设置分享码及分享码的有效期，复制分享链接及分享码。发布后，输入分享链接及分享码查看此屏幕。
      • token：发布时，自动生成Token，复制分享链接及Token。发布后，通过Token校验获取新的访问链接，使用新的访问链接查看此屏幕。Token校验方法请参考“Token校验”。
    

    当屏幕中存在非在线构建的卡片，屏幕不能分享。

Token校验

客户端在使用Token校验的流程如下。

已获取大屏分享链接和Token。

例如，分享链接https://console.ulanqab.huawei.com/sve/preview.html?region=cn-north-7#/screen/share/18cd21df7bc-WPgj_GqRc。其中“region”的值为“cn-north-7”，“pageId”的值为“18cd21df7bc-WPgj_GqRc”。

1. 使用代码开发工具将大屏分享链接中的pageId和region拼接成如下格式的字符串。

   pageId|region；

2. 使用HmacSHA256算法对拼接的字符串进行签名，并将签名后的字符串使用Base64进行转换。签名时需要使用对应的Token。
   HmacSHA256签名和Base64转换的示例如下：

    import java.security.*;
    import javax.crypto.*;
    import javax.crypto.spec.SecretKeySpec;
    import org.apache.commons.codec.binary.Base64;
    import java.net.URLEncoder;
   
    public class ShareWithTokenTest {
   
        public static void main(String[] args) throws Exception {
            System.out.println(getShareUrlWithToken("********722467a9477b5b*******", "cn-7", "*******r1tyy1C7Jenni3p*********"));
        }
   
        public static String getShareUrlWithToken(String pageId, String region, String token){
            String data = pageId + "|" + region;
            String signature = HMACSHA256(data.getBytes(), token.getBytes());
            String url = "https://console.huaweicloud.com/sve/share/page.html?id=" + pageId + "&region=" + region + "&sve_signature=" + signature;
            return url;
        }
   
        //采用HmacSHA256进行签名并进行Base64转换
        public static String HMACSHA256(byte[] data, byte[] key)
        {
            try  {
                SecretKeySpec signingKey = new SecretKeySpec(key, "HmacSHA256");
                Mac mac = Mac.getInstance("HmacSHA256");
                mac.init(signingKey);
                return URLEncoder.encode(Base64.encodeBase64String(mac.doFinal(data)));
            } catch (NoSuchAlgorithmException e) {
                e.printStackTrace();
            } catch (InvalidKeyException e) {
                e.printStackTrace();
            }
            return null;
        }
    }

3. 将转换后的字符串赋值给sveSignature，sveSignature参数拼接到大屏分享链接中获取新的访问链接。

   例如，新的访问链接https://console.ulanqab.huawei.com/sve/preview.html?sveSignature=1OP99N6yxCDmEiH4aNMU1GAwtKspSg4fJ/zh0679k=&region=cn-north-7#/screen/share/18cd21df7bc-WPgj_GqRc

更多操作

屏幕创建完成后，您还可以在“我的屏幕”界面执行如表4的操作。