[发明专利]一种呈现引导蒙版的方法和装置以及电子设备和存储介质

说明书

本申请提供一种呈现引导蒙版的方法和装置，该方法包括：对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取页面元素的尺寸以及在页面中的位置；创建与页面的尺寸一致的纯透明色蒙版组件，将一个或多个蒙版图片布局在该纯透明色蒙版组件中；调用编辑接口，对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，使应用程序呈现指定页面的情况下，弹出蒙版图片。本申请能确保方便准确的进行用户行为引导和提升重点功能感知力度，从而实现快速有效准确满足产品业务需求。

技术领域

本申请涉及计算机技术领域，具体涉及一种呈现引导蒙版的方法和装置以及电子设备和存储介质。

背景技术

随着移动互联网的日益普及，移动端应用程序(App)产品的开发周期越来越短，迭代很快，每个版本的发布，必然会增加一些新功能，或修改老功能，而功能是通过应用程序的各个页面展示的。为了引导用户使用，修改老功能导致的页面改动，或新加功能时，以手机为例，手机应用程序一般会在该应用程序的页面上，弹出一个蒙版图遮罩手机屏幕，来告诉用户改动或功能介绍，从而提高用户体验。

目前市面上基于flutter实现引导蒙版功能可大致分为两种方案：

1.使用纯Flutter技术实现，由于没有考虑动态获取引导功能坐标、静态使用UI图片以及没有全面考虑不同分辨下的兼容等问题，无法应对不同需求时灵活快速实现可配置、可复用、可准确定位元素区域、快速响应等诸多问题，严重影响工作效率的问题，对用户体验以及产品自身也会带来较大被动。

2.依托于原生APP技术支持，通过APP原生端实现该功能，然后对外提供方法后，由flutter调用原生的方法来变相实现。此方案虽然能够完美解决上述方案1中的部分问题，但是对原生端依赖比较强，需要Android和iOS双端开发，从而增加开发成本，不利于快速解决产品述求，同时容易受APP原生端影响，带来不可控或者不可预知的问题。

发明内容

本申请的目的是提供一种呈现引导蒙版的方法以及系统。

本申请第一方面提供一种呈现引导蒙版的方法，包括：

对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取所述页面元素的尺寸以及在所述页面中的位置；

创建与所述页面的尺寸一致的纯透明色蒙版组件，将一个或多个蒙版图片布局在该纯透明色蒙版组件中；

调用编辑接口，对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，使所述应用程序呈现所述指定页面的情况下，弹出所述蒙版图片。

在本申请的一些实施方式中，所述获取所述页面元素的尺寸以及在所述页面中的位置，包括：

将保存的蒙版配置信息转换为多个蒙版类，并且形成多个页面元素与所述一个或多个蒙版类一一映射的映射关系表；所述蒙版类中包含蒙版图片或蒙版图片的网络地址，并且包含蒙版图片在所述页面中的布局位置；

根据所述映射关系表确定所述页面中要展示蒙版图的页面元素所对应的蒙版类，按照该蒙版类获取所述蒙版图片以及确定所述蒙版图片在所述纯透明色蒙版组件中的布局位置。

在本申请的一些实施方式中，所述蒙版类中还包含蒙版图所引导的页面元素的标识；

所述蒙版图片中包含箭头；

将一个或多个蒙版图片布局在该纯透明色蒙版组件中的步骤包括：将蒙版图片设置在所述纯透明色蒙版组件中，并且使所述蒙版图片中的箭头指向具有所述标识的页面元素。

在本申请的一些实施方式中，所述将一个或多个蒙版图片布局在该纯透明色蒙版组件中，包括：

基于widget中GlobalKey实例获取准确坐标，转换成实际像素值，通过传参方式，控制需要绘制透明引导区域范围，控制引导信息提示位置。