Cross-platform popup window display method and system, electronic equipment and storage medium

Abstract

The invention discloses a cross-platform pop-up window display method, which comprises the following steps: calling a corresponding pop-up window adapter in response to a display target page; the pop-up window adapter is used for executing the following method: receiving preset pop-up window configuration data and analyzing the preset pop-up window configuration data; acquiring real-time behavior information of the user or the terminal, and judging whether the real-time behavior information meets a popup window triggering condition in the current popup window configuration information or not; if yes, synchronizing general style configuration information of style information in the current pop-up window configuration information to a native pop-up window of the current native operating system, and displaying the current pop-up window; if the misoperation condition is met, executing an anti-misoperation method; and if the pop-up window closing condition is met, closing the pop-up window and executing auxiliary processing. According to the method, the development and test workload and cost are reduced, the development and maintenance efficiency is improved, and the reliability of the popup window and the user experience degree are improved by integrating anti-misoperation detection. The invention further discloses a system for implementing the method, electronic equipment and a storage medium.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer data processing, and in particular to a cross-platform pop-up window display method and system, an electronic device and a storage medium. BACKGROUND

[0002] With the rapid development of mobile Internet and Web technology, application programs (Apps), mini programs (such as WeChat mini programs, Alipay mini programs, etc.) and websites (Web Pages) have become the mainstream platforms for users to obtain information and services. In order to improve user experience, promote function guidance or marketing conversion, various platforms use pop-up windows (Popup / Dialog) as the display carrier of key information, such as new user guide prompts, activity promotion pop-up windows, function operation confirmation boxes, etc.

[0003] Due to the significant differences in the technology stacks of Apps, mini programs and websites (such as Apps based on native / React Native / Flutter, mini programs based on platform-specific frameworks, and websites based on HTML / CSS / JavaScript), existing pop-up window functions usually need to be developed separately for each platform. The pop-up window logic for the same business scenario (such as a "new user guide pop-up window") needs to be written separately for the App side (such as native Java / Kotlin or Flutter code), the mini program side (such as WeChat mini program WXML+JS) and the website side (such as React / Vue components). The content (text / picture) of the pop-up window, the triggering rules (such as the stay time threshold), the style (size / color) and other parameters need to be configured separately for each platform. If the business requirements change (such as adjusting the triggering time from 30 seconds to 60 seconds), the multi-end code needs to be modified and re-published synchronously, which is low in development and maintenance efficiency. This "multi-end independent development + low reusability" mode not only consumes a large amount of manpower and time cost, but also easily introduces inconsistent functions due to the differences in the implementation of each platform (such as the App side pop-up window triggering accurately but the mini program side having a high false touch rate), which seriously affects the iteration efficiency of the product and the consistency of the user experience. At the same time, existing pop-up windows generally ignore the contingency of user operations (such as false touch, hand slip or rapid consecutive clicks) in the interaction design, resulting in a high false operation rate. SUMMARY

[0004] In order to solve the above problems in the prior art, the present application provides a cross-platform pop-up window display method, system, electronic device and storage medium. The technical problem to be solved by the present application is solved by the following technical scheme: The first aspect of the embodiment of the present application provides a cross-platform pop-up window display method, comprising the following steps: In response to a target page for display, a corresponding pop-up window adapter is called according to the current platform type in which the target page is located; wherein the pop-up window adapter is used to execute the following method: receive preset pop-up window configuration data associated with the target page and perform parsing to obtain current pop-up window configuration information; The preset pop-up window configuration data is in JSON format, and the number of preset pop-up window configuration data is multiple; obtain real-time behavior information of a user or terminal, and determine whether the real-time behavior information meets a pop-up window triggering condition in the current pop-up window configuration information; If it is met, a current pop-up window template is determined according to a correspondence between a platform type of style information in the current pop-up window configuration information and a pop-up window template; universal style configuration information of the style information in the current pop-up window configuration information is synchronized to a native pop-up window of a current native operating system; a current pop-up window is displayed in the form of a native pop-up window according to the current pop-up window template; whether anti-misoperation of the current pop-up window configuration information is started is determined; If it is started, whether the real-time behavior information meets a misoperation condition is determined; If it is met, an anti-misoperation method is executed; whether the real-time behavior information meets a pop-up window closing condition in the current pop-up window configuration information is determined; If it is met, the pop-up window is closed and auxiliary processing is executed.

[0005] In an embodiment of the application, each piece of preset pop-up window configuration data is calculated by a hash algorithm to obtain a corresponding hash value.

[0006] In an embodiment of the application, the misoperation condition includes that a pop-up window closing condition triggering frequency of a user within a preset time is greater than or equal to 3 times, an acceleration of a terminal is greater than or equal to 2g, the pop-up window is not completely loaded, or a focus of the user is in an input box of the pop-up window. The anti-misoperation method includes that the pop-up window is delayed to be closed or confirmation information is output. The auxiliary processing includes that cache or statistical data is cleaned up.

[0007] In an embodiment of the application, the real-time behavior information includes at least two of a user page staying time, an operation frequency of a user, a posture of a terminal, and environmental data.

[0008] A second aspect of an embodiment of the application provides a cross-platform pop-up window display system, which includes a calling module and a pop-up window adapter. The calling module is used to call a corresponding pop-up window adapter according to a current platform type in which a target page is located in response to display of the target page; The pop-up window adapter includes: The parsing module is used to receive and parse the preset pop-up configuration data associated with the target page to obtain the current pop-up configuration information; wherein, the preset pop-up configuration data is in JSON format, and there are multiple preset pop-up configuration data; The monitoring module is used to acquire real-time behavior information of the user or terminal and determine whether the real-time behavior information meets the pop-up triggering conditions in the current pop-up configuration information. The determination module is used to determine the current pop-up template based on the current platform type and the correspondence between the platform type and the pop-up template in the style information of the current pop-up configuration information if the conditions are met. The synchronization module is used to synchronize the general style configuration information of the style information in the current pop-up configuration information to the native pop-up of the current native operating system; The rendering module is used to display the current pop-up window in the form of a native pop-up window based on the current pop-up window template; The first judgment module is used to determine whether the anti-misoperation feature in the current pop-up configuration information is enabled. The second judgment module is used to determine whether the real-time behavior information meets the conditions for erroneous operation if it is enabled. The first execution module is used to execute the anti-misoperation method if the conditions are met. The third judgment module is used to determine whether the real-time behavior information meets the pop-up closing conditions in the current pop-up configuration information; The second execution module is used to close the pop-up window and perform auxiliary processing if the conditions are met.

[0009] In one embodiment of the present invention, each type of the preset pop-up configuration data is used to calculate the corresponding hash value using a hash algorithm.

[0010] In one embodiment of the present invention, the erroneous operation conditions include: if the number of times the pop-up window closing condition is triggered within a preset time is greater than or equal to 3 times, if the terminal acceleration is greater than or equal to 2g, if the pop-up window is not fully loaded, or if the user's focus is on the input box of the pop-up window. The method for preventing accidental operation includes: delaying the closing of the pop-up window or outputting confirmation information; The auxiliary processing includes: clearing cache or statistical data.

[0011] In one embodiment of the present invention, the real-time behavioral information includes at least two of the following: user page dwell time, user operation frequency, terminal posture, and environmental data.

[0012] A third aspect of the present invention provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement a cross-platform pop-up display method provided in the first aspect of the present invention.

[0013] A fourth aspect of the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements a cross-platform pop-up display method provided in the first aspect of the present invention.

[0014] The beneficial effects of this invention are: This invention defines pop-up content (text / image), trigger rules (dwell time threshold, operation interval), and style (background color, font size) through a standardized JSON configuration. This eliminates the need to write repetitive code for different platforms. Each platform retrieves the JSON data to determine the pop-up processing logic, while preserving the rendering adaptability of each platform, thus achieving differentiated adaptation. This significantly reduces development and testing workload and costs, improving development and maintenance efficiency. Furthermore, by integrating anti-misoperation detection, it effectively reduces user frustration caused by accidental operations, improving the reliability of pop-ups and the user experience.

[0015] Other features and advantages of the invention will be set forth in the description which follows, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention may be realized and obtained by means of the structures particularly pointed out in the written description, claims, and drawings.

[0016] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. Attached Figure Description

[0017] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used in conjunction with embodiments of the invention to explain the invention and do not constitute a limitation thereof. In the drawings: Figure 1 A flowchart illustrating a cross-platform pop-up display method provided in an embodiment of the present invention; Figure 2 This is a block diagram of a cross-platform pop-up display system provided in an embodiment of the present invention. Detailed Implementation

[0018] The present invention will be further described in detail below with reference to specific embodiments, but the implementation of the present invention is not limited thereto.

[0019] like Figure 1As shown, the first aspect of this invention provides a cross-platform pop-up display method, including the following steps: Step 100: Configure the preset pop-up configuration data in advance.

[0020] To achieve "one-end configuration, multi-end effect" for pop-up styles and logic across multiple platforms, pre-configuration storage and structuring are implemented: The configuration center uses JSON format to store pop-up metadata, i.e., preset pop-up configuration data. This includes common fields (such as the pop-up's unique identifier `popupId`, pop-up trigger conditions `conditions`, and pop-up close condition `logic`) and multi-end adaptation fields (such as the App's native component ID, the Mini Program's template ID, and the website's CSS class name), as well as common styles (background color, font size, etc.). The same preset pop-up configuration data can be used for identical pop-ups across App, Mini Program, and Web platforms. A JSON example is shown below: { "popupId": "guide_popup_001", "trigger": { "type": "behavior", "conditions": [{ "stayTime": 30, "operator": ">"}, { "lastActionTime": 5, "operator": ">"}] }, "style": { "common": { "bgColor": "#FFFFFF", "fontSize": 14}, "app": { "componentId": "com.example.NativePopup"}, "miniProgram": { "templateId": "wx_popup_tpl_001"}, "web": { "cssClass": "custom-web-popup"} }, "logic": { "closeOnOutsideClick": true, "antiMisoperation": true} } Among them, `style` parsed contains style information, `common` parsed contains general style configuration information, and the fields "app", "miniProgram", and "web" parsed contain the correspondence between platform type and pop-up template. `common` can also include the specific content displayed in the pop-up. In the closing condition, `antiMisoperation: true` indicates that anti-misoperation is enabled.

[0021] If no action is taken on the product details page for 30 seconds, a pop-up window will be triggered to guide you to make a purchase. { "popupId": "guide_popup_detail_guide", / / Unique identifier: guide popup for product details page "trigger": { "type": "behavior", / / Triggered based on user behavior "conditions": [ { "metric": "pageStayTime", "value": 30, "operator": ">"}, / / Page stay time > 30 seconds { "metric": "lastInteractionTime", "value": 5, "operator": ">"} / / Last operation > 5 seconds (no swipe / click) ] }, "style": { "common": { "bgColor": "#FFF8F0", "fontSize": 16, "borderRadius": 8}, / / Warm color scheme guiding style "app": { "componentId": "com.example.DetailGuidePopup"}, / / App native component ID "miniProgram": { "templateId": "wx_detail_guide_tpl", "disableSwipe":true}, / / Mini Program template + disable swiping "web": { "cssClass": "detail-guide-popup", "overlayZIndex": 1000} / / Web styles + overlay layer }, "logic": { "closeOnOutsideClick": true, / / Close on click outside "antiMisoperation": true, / / Prevents rapid repeated triggering "showDuration": 8000 / / Automatic shutdown time (optional) } } Accessing food delivery services between 18:00 and 20:00 while in a residential area will trigger a dinner coupon pop-up. Core logic: Trigger a marketing pop-up by combining the three conditions of "time context", "location context" and "page scenario".

[0022] { "popupId": "coupon_popup_dinner", / / Unique identifier: Dinner coupon pop-up "trigger": { "type": "context", / / Triggered based on context state (not user-initiated behavior) "conditions": [ { "metric": "currentTime", "value": ["18:00", "20:00"], "operator": "between"}, / / Time between 18:00 and 20:00 { "metric": "userLocationType", "value": "residential", "operator": "equals"}, / / Locate in residential area { "metric": "pagePath", "value": " / pages / takeout / home", "operator": "equals"} / / Currently on the food delivery homepage ] }, "style": { "common": { "bgColor": "#FFF3E0", "fontSize": 14, "padding": 12}, / / Warm color scheme for restaurant style "app": { "componentId": "com.example.TakeoutCouponPopup", "buttonText": "Claim Now"}, / / App component + button text "miniProgram": { "templateId": "wx_dinner_coupon_tpl", "buttonColor":"#FFC107"}, / / Mini Program template + button color "web": { "cssClass": "dinner-coupon-popup", "buttonHoverEffect": "scale(1.05)"} / / Web button hover effect }, "logic": { "closeOnOutsideClick": true, "antiMisoperation": false, / / Marketing pop-ups do not require strict protection against accidental touches. "trackImpression": true / / Track exposure statistics (optional) } } A "Save Draft" prompt pop-up appears when filling out the form: Core logic: Monitor the form's "input behavior" or "duration of time" and remind the user to save their progress.

[0023] { "popupId": "form_popup_save_draft", / / Unique identifier: form save draft pop-up window "trigger": { "type": "behavior", "conditions": [ { "metric": "formInputCount", "value": 1, "operator": ">"}, / / Number of form inputs ≥ 1 { "metric": "formStayTime", "value": 10, "operator": ">"} / / Form stays on for ≥10 seconds ], "triggerType": "debounce", / / Debouncing: Avoids frequent triggering (delays execution by 1 second) "triggerThreshold": 1000 / / Anti-shake threshold (1 second) }, "style": { "common": { "bgColor": "#E3F2FD", "fontSize": 14, "textAlign": "center"}, / / Cool color tone tooltip style "app": { "componentId": "com.example.FormSavePopup", "icon": "save_draft"}, / / App component + save icon "miniProgram": { "templateId": "wx_form_save_tpl", "iconColor": "#2196F3"}, / / Mini Program template + icon color "web": { "cssClass": "form-save-popup", "iconUrl": " / static / save-icon.svg"} / / Custom icon for web }, "logic": { "closeOnOutsideClick": false, / / Disables closing the window by clicking outside (forces user intervention) "antiMisoperation": true, "autoClose": false / / Do not close automatically (user confirmation / cancellation required) } } Furthermore, configuration changes are detected using version hashing (SHA-256), and only the modified parts are synchronized to reduce transmission overhead. The popup's unique identifier (popupId), trigger conditions, and closing rules in the preset popup configuration data are each calculated using a hash algorithm. When a data configuration is updated, the corresponding hash value changes, and only that data is updated.

[0024] Each platform uses the adapter pattern to convert common configurations into platform-specific parameters: App-side adapter: Converts style.common.bgColor to #FFFFFFFF for Android or UIColor(red:1, green:1, blue:1, alpha:1) for iOS; Mini Program adapter: Maps style.miniProgram.templateId to a specific template in the WeChat template library and verifies whether the template conforms to the host specifications (e.g., prohibits the use of wx.navigateTo to jump to sensitive pages). Website adapter: Dynamically injects style.web.cssClass into the page. <style>标签，覆盖默认样式。

[0025] 实时推送与离线缓存：预设弹窗配置数据更新时，App端通过WebSocket实时接收并应用新配置；小程序端通过wx.onShow监听前台事件，在页面显示时拉取最新配置；网站端通过Service Worker缓存配置，网络恢复后自动同步。

[0026] 步骤101，响应于展示目标页面，根据目标页面所在的当前平台类型调用对应的弹窗适配器。

[0027] 本步骤中，当用户进入App、小程序或网站的某一个页面时，页面当前处于被展示状态，根据这个页面所在的平台是App、小程序还是网站，调用对应的App、小程序或网站的弹窗适配器。例如，一个购物应用会开发这三种平台供用户使用，用户当前使用哪种平台，则哪种平台的弹窗适配器被调用进行使用。三种平台的三种适配器在同一个系统后台进行管理。不同的应用的不同平台各自的适配器也可以在同一个系统后台进行管理。

[0028] 本实施例中，弹窗适配器基于Flutter框架开发，弹窗适配器用于执行以下方法：步骤102，接收目标页面关联的预设弹窗配置数据并进行解析，得到当前弹窗配置信息。

[0029] 其中，预设弹窗配置数据为JSON格式，预设弹窗配置数据的数量为多个。

[0030] 本步骤中，用户打开的目标页面可以关联一个或多个弹窗，同一个目标页面不同的触发条件可以触发不同的弹窗显示，不同的目标页面不同的触发条件可以触发不同的弹窗显示，不同的目标页面也可以使用相同的弹窗。不同页面或同一页面不同的弹窗对应的预设弹窗配置数据不同，将页面与需要在当前页面显示的一个或多个弹窗的预设弹窗配置数据进行关联。当用户打开目标页面时，对该页面关联的预设弹窗配置数据进行解析，将传入的 预设弹窗配置数据的JSON 字符串解析成 Dart 的 Map 结构，便于后续读取各个配置字段。

[0031] 步骤103，获取用户或终端的实时行为信息，并判断实时行为信息是否满足当前弹窗配置信息中的弹窗触发条件。

[0032] 实时行为信息包括：用户页面停留时间、用户的操作频率、终端的姿态、环境数据（如当前时间、网络状态）等中的至少两种。示例的，弹窗触发条件包括但不限于用户在当前页面 / 场景停留的时长超过 30 秒且距离用户上一次操作（比如点击、滚动等行为）已经超过 5 秒；当用户在18:00-20:00访问（时间触发），且定位在住宅区域（GPS数据）；当用户在填写表单时（行为触发）。

[0033] 实时监听用户的行为信息是否满足当前弹窗配置信息中的conditions触发条件。即使在同一个页面，不同的触发条件则会触发不同的弹窗显示。示例的，使用单例类_PopupState开始记录用户进入页面的时间（_startTime）、每隔 100ms 更新一次停留时长（_stayDuration）、用户每次操作（如点击）时更新最后操作时间，并通过 Stream 广播。若用户的实时行为信息不满足触发条件，则不会执行步骤14，保持当前页面显示。

[0034] 步骤104，若满足，则根据当前平台类型和当前弹窗配置信息中的样式信息的平台类型与弹窗模板的对应关系，确定当前弹窗模板。

[0035] 本步骤中，若用户的实时行为信息满足触发条件，则根据当前平台类型是App、小程序、网站中的哪一种确定对应的当前弹窗模板。

[0036] 示例的，根据"app": { "componentId": "com.example.NativePopup"}，则App使用com.example.NativePopup这个模板，根据"miniProgram": { "templateId": "wx_popup_tpl_001"}，若是小程序则使用wx_popup_tpl_001这个模板，根据"web": { "cssClass": "custom-web-popup"}，若是网页则弹窗会使用 CSS 类名 custom-web-popup来控制其样式。

[0037] 步骤105，将当前弹窗配置信息中的样式信息的通用样式配置信息同步至当前原生操作系统的原生弹窗。

[0038] 本步骤中，对要显示的弹窗进行渲染。具体地，首先判断当前操作系统的类型，根据不同的操作系统（Android / iOS / Web）调用对应的弹窗展示方法。然后将弹窗的配置style.common同步到原生层。示例的，在iOS平台上，使用 Flutter 提供的CupertinoAlertDialog（iOS 风格的对话框组件）来展示弹窗。弹窗的背景色和文字大小同样是从 JSON 配置中的 style.common动态获取的，使用 iOS设计语言的组件，以符合iOS风格。通用样式配置信息同步至操作系统的原生弹窗后。

[0039] 步骤106，根据当前弹窗模板以原生弹窗的形式显示当前弹窗。

[0040] 这里，原生弹窗的样式信息为通用样式配置信息，当前弹窗的显示以当前弹窗模板的形式显示，显示的风格为操作系统的原生弹窗风格，只不过字体、颜色等样式是通用样式配置信息中的内容。

[0041] 步骤107，判断当前弹窗配置信息中的防误操作是否开启。

[0042] 步骤108，若开启，则判断实时行为信息是否满足误操作条件。

[0043] 误操作条件包括：若用户预设时间内的弹窗关闭条件触发次数大于或等于3次、若终端的加速度大于或等于2g、若弹窗未完全加载、若用户焦点在弹窗的输入框中的一种。

[0044] 步骤109，若满足，则执行防误操作方法。执行防误操作方法包括：弹窗延迟关闭或输出确认信息。

[0045] 在弹窗触发显示后，为了防止用户误操作误关闭或误触发弹窗，监听用户的实时行为信息，检测用户的实时行为信息是否满足防误操作条件。

[0046] 示例的，点击频率检测：统计用户最近1秒内的弹窗按钮点击次数，若≥3次则标记为疑似误操作；设备状态检测：通过加速度传感器（App端）或陀螺仪（小程序 / 网站端，依赖设备支持）检测手机是否发生剧烈晃动（加速度≥2g），若是则标记为疑似误操作；焦点状态检测：若弹窗未完全加载（如Web端的DOMContentLoaded事件未触发）或用户焦点在其他输入框（如表单填写时），则延迟弹窗交互；综合判定：若上述任意2项条件满足，则触发防误操作策略（如弹窗关闭延迟2秒、弹出二次确认提示）。

[0047] 步骤110，判断实时行为信息是否满足当前弹窗配置信息中的弹窗关闭条件。弹窗关闭条件例如点击外部关闭、10秒后自动关闭等。

[0048] 步骤111，若满足，则关闭弹窗并执行辅助处理。辅助处理包括：清理缓存或统计数据等处理。

[0049] 本步骤中，弹窗关闭后可以进行清理缓存或统计数据等处理，统计数据可以为统计弹窗曝光数量等处理。

[0050] 本实施例中，基于多端平台特性（App、小程序、网站）构建差异化适配层，结合用户行为、时间、场景等多维度数据设计智能触发机制，通过统一配置管理模块实现多端弹窗样式与逻辑的同步，并集成防误操作检测算法，最终实现跨平台弹窗的高效调度与优质体验。

[0051] 本实施例中，针对App、小程序、网站三类主流平台的特性差异，设计适配层以屏蔽底层技术差异，确保弹窗功能的一致性与兼容性。具体差异处理如下：App端：基于原生系统能力（如iOS的UIKit、Android的View体系）渲染弹窗，支持深度定制（如自定义动画、硬件加速），但需适配不同品牌设备的屏幕尺寸与系统版本（如iOS14+与Android 10+的差异）。

[0052] 小程序端：运行于微信 / 支付宝等超级App内，受宿主平台限制（如微信禁止诱导分享类弹窗），需通过小程序原生组件（如wx.showModal）或符合规范的第三方组件库渲染，且需遵守宿主的API调用限制（如微信小程序的消息订阅机制）。

[0053] 网站端：基于浏览器渲染（HTML5 / CSS3 / JavaScript），依赖前端框架（如React / Vue），需处理浏览器兼容性（如Chrome与Safari的CSS属性差异）及页面生命周期（如标签页切换时的计时器重置）。

[0054] 时间触发：App端通过本地高精度定时器（误差≤100ms）实现精确触发；小程序端通过wx.setStorageSync同步服务端时间基准，避免因后台挂起导致的时钟偏差；网站端通过performance.now()获取高精度时间戳，并监听visibilitychange事件（标签页隐藏时暂停计时，显示时恢复）。

[0055] 用户行为触发：App端监听触摸事件（touchstart / touchend）、键盘输入事件；小程序端监听touchstart、scroll-view滚动事件；网站端监听click、mousemove、scroll事件，统一定义"未操作”为连续5秒无上述事件触发。

[0056] 外部事件触发：App端支持接收服务器推送（如APNs / FCM）触发营销弹窗；小程序端通过订阅消息（wx.requestSubscribeMessage）触发（需用户授权）；网站端通过WebSocket或轮询接口接收触发指令。

[0057] App端弹窗使用原生组件（如iOS的UIAlertController、Android的Dialog），支持动态替换布局文件（如通过LayoutInflater加载不同主题的XML布局）。

[0058] 小程序端弹窗通过自定义组件（如custom-modal）实现，样式通过wxss变量控制（如--popup-bg-color: #FFFFFF），确保符合微信设计规范（如按钮最小点击区域48px×48px）。

[0059] 网站端弹窗基于CSS Flex / Grid布局，通过媒体查询（@media）适配不同屏幕尺寸，使用event.stopPropagation()避免弹窗点击事件冒泡至父级页面。

[0060] 同时，三个平台均实现了基于时间等的行为触发检测，通过定时器轮询或事件监听更新状态。关闭条件：App端通过barrierDismissible属性实现点击外部关闭，小程序端通过关闭按钮，Web端通过监听外部点击事件实现。防误操作：通过记录短时间内的操作次数（如3秒内3次点击），阻止高频触发。资源管理：三个平台在弹窗关闭或页面卸载时清理定时器、事件监听，避免内存泄漏。配置同步：触发条件检测依赖配置中的trigger规则，关闭时上报日志以完善行为追踪。

[0061] 下面对每个平台的弹窗适配器部分dart代码举例： / / app端Flutter端适配器 (app_flutter_adapter.dart)import 'package:flutter / material.dart';import 'package:flutter / services.dart';import 'dart:convert';class CrossPlatformPopup {static Future<void>show(BuildContext context, String configJson)async {final config = jsonDecode(configJson);await _syncConfig(config);_checkTriggerConditions(context, config); / / 触发条件检测} / / 触发条件检测（基于行为触发规则）static void _checkTriggerConditions(BuildContext context, Map<String,dynamic>config) {final triggerConfig = config['trigger'];final stayTimeThreshold = triggerConfig['conditions'][0]['stayTime'];final lastActionThreshold = triggerConfig['conditions'][1]['lastActionTime']; / / 记录停留时间和最后操作时间的状态管理（简化示例，实际可用Provider / Redux）final state = _PopupState.instance;state.startTracking(); / / 开始计时停留时间 / / 监听用户操作（如点击、滑动）更新最后操作时间WidgetsBinding.instance.addObserver(state);state.lastActionTimeStream.listen((time) {if (state.stayDuration>= stayTimeThreshold&&(DateTime.now().millisecondsSinceEpoch - time)>= lastActionThreshold){_showPopup(context, config); / / 满足条件时显示弹窗}});} / / 状态管理类（记录停留时间和最后操作时间）static class _PopupState extends ChangeNotifier withWidgetsBindingObserver {final StreamController<int>lastActionTimeStream = StreamController();DateTime? _startTime;int _stayDuration = 0;Timer? _stayTimer;DateTime? _lastActionTime;static final _PopupState instance = _PopupState._internal();_PopupState._internal();factory _PopupState() =>instance;static _PopupState get instance =>instance;void startTracking() {_startTime = DateTime.now();_lastActionTime = DateTime.now();_stayTimer?.cancel();_stayTimer = Timer.periodic(Duration(milliseconds: 100), (_) {_stayDuration = DateTime.now().difference(_startTime!).inMilliseconds;notifyListeners();});}@overridevoid didChangeAppLifecycleState(AppLifecycleState state) {if (state == AppLifecycleState.resumed) {startTracking(); / / 页面回到前台时重置计时} else if (state == AppLifecycleState.paused) {_stayTimer?.cancel();}}Stream<int>get lastActionTimeStream =>_lastActionTimeStream.stream;int get stayDuration =>_stayDuration; / / 用户操作（点击 / 滑动）时更新最后操作时间void recordUserAction() {_lastActionTime = DateTime.now();lastActionTimeStream.add(_lastActionTime!.millisecondsSinceEpoch);}@overridevoid dispose() {_stayTimer?.cancel();WidgetsBinding.instance.removeObserver(this);lastActionTimeStream.close();super.dispose();}} / / 实际显示弹窗（含关闭条件）static void _showPopup(BuildContext context, Map<String, dynamic>config) {final logicConfig = config['logic'];showDialog(context: context,barrierDismissible: logicConfig['closeOnOutsideClick'], / / 点击外部关闭builder: (context) {return AlertDialog(backgroundColor: _parseColor(config['style']['common']['bgColor']),content: Text('原生Android弹窗',style: TextStyle(fontSize: config['style']['common']['fontSize']),),actions: [TextButton(onPressed: () {Navigator.pop(context);_handleClose(context, config); / / 触发关闭逻辑},child: Text('关闭'),),],);},).then((_) =>_handleClose(context, config)); / / 弹窗关闭后回调} / / 关闭条件处理（防误操作、清理资源）static void _handleClose(BuildContext context, Map<String, dynamic>config) {final logicConfig = config['logic'];if (logicConfig['antiMisoperation']) { / / 防误操作：记录关闭时间，短时间内再次触发需校验_PopupState.instance.recordUserAction();}_PopupState.instance.dispose(); / / 清理状态管理} / / 平台适配渲染if (kIsWeb) {_showWeb(context, config);} else if (defaultTargetPlatform == TargetPlatform.android) {_showAndroid(context, config);} else if (defaultTargetPlatform == TargetPlatform.iOS) {_showIos(context, config);}}static Future<void>_syncConfig(String configJson) async { / / WebSocket同步示例final channel = MethodChannel('config_sync');await channel.invokeMethod('syncConfig', configJson);}static void _showAndroid(BuildContext context, Map<String, dynamic>config) { / / 组件ID映射final componentId = config['style']['app']['componentId'];switch(componentId) {case 'com.example.NativePopup':showDialog(context: context,builder: (BuildContext context) {return AlertDialog(backgroundColor: _parseColor(config['style']['common']['bgColor']),content: Text('原生Android弹窗',style: TextStyle(fontSize: config['style']['common']['fontSize']),),);});break; / / 其他组件映射...}}static void _showIos(BuildContext context, Map<String, dynamic>config) { / / iOS原生实现showCupertinoDialog(context: context,builder: (BuildContext context) {return CupertinoAlertDialog(backgroundColor: _parseColor(config['style']['common']['bgColor']),title: Text('原生iOS弹窗',style: TextStyle(fontSize: config['style']['common']['fontSize']),),);});}static void _showWeb(BuildContext context, Map<String, dynamic>config) { / / 动态注入CSSfinal cssClass = config['style']['web']['cssClass'];final styleTag = StyleElement()..className = cssClass..innerHtml = '''.${cssClass} {background-color: ${config['style']['common']['bgColor']} !important;font-size: ${config['style']['common']['fontSize']}px !important;}''';document.head?.append(styleTag); / / 渲染Web弹窗showModalBottomSheet(context: context,builder: (_) =>Container(className: cssClass,child: Column(children: [Text('Web弹窗'),ElevatedButton(onPressed: () {}, child: Text('关闭')),],),));}static Color _parseColor(String hex) {return Color(int.parse(hex.substring(1) + 'FF'));}}}小程序端dart代码示例（不包括渲染）： / / 小程序端适配器 (popup_adapter.js)Component({properties: {config: Object},data: {show: false,startTime: 0, / / 进入页面时间戳lastActionTime: 0, / / 最后操作时间戳stayCheckTimer: null, / / 停留时间检测定时器clickTimestamps: [] / / 点击时间数组（防误操作）},lifetimes: {attached() {this._initConfigSync();this._startStayCheck(); / / 开始停留时间检测this._bindUserActions(); / / 绑定用户操作监听},detached() {clearTimeout(this.data.stayCheckTimer); / / 清理定时器}},methods: { / / 开始停留时间检测（基于trigger条件）_startStayCheck() {const { trigger} = this.data.config;const stayThreshold = trigger.conditions[0].stayTime * 1000; / / 30s转msconst lastActionThreshold = trigger.conditions[1].lastActionTime *1000; / / 5s转msthis.setData({ startTime: Date.now()}); / / 每100ms检测一次条件this.data.stayCheckTimer = setInterval(() =>{const now = Date.now();const stayDuration = now - this.data.startTime;const isStayValid = stayDuration>= stayThreshold;const isLastActionValid = (now - this.data.lastActionTime)>=lastActionThreshold;if (isStayValid&&isLastActionValid) {this.setData({ show: true}); / / 显示弹窗clearInterval(this.data.stayCheckTimer); / / 停止检测}}, 100);}, / / 绑定用户操作（更新最后操作时间）_bindUserActions() {const pages = getCurrentPages();const currentPage = pages[pages.length - 1]; / / 监听页面触摸事件（用户操作）currentPage.onTouchStart = () =>{this.setData({ lastActionTime: Date.now()});this._recordClickTime(); / / 记录点击时间（防误操作）}; / / 监听页面滑动事件（用户操作）currentPage.onPageScroll = () =>{this.setData({ lastActionTime: Date.now()});};}, / / 记录点击时间（防误操作）_recordClickTime() {const { antiMisoperation} = this.data.config.logic;if (!antiMisoperation) return;const now = Date.now();const timestamps = this.data.clickTimestamps.filter(t =>now - t<3000); / / 保留3秒内的点击timestamps.push(now);this.setData({ clickTimestamps: timestamps}); / / 短时间内多次点击（如3次内）if (timestamps.length>= 3) {wx.showToast({ title: '操作过快，请稍后再试', icon: 'none'});}}, / / 关闭条件处理（点击外部 / 按钮）async handleClose() {const { logic} = this.data.config; / / 校验模板（原逻辑）if (!this._validateTemplate()) return; / / 防误操作：重置点击记录this.setData({ clickTimestamps: []});this.setData({ show: false}); / / 可选：触发配置同步（如关闭后上报）wx.request({ url: ' / api / popup / close', data: { timestamp: Date.now()}});}}})Web端dart代码示例（不包括渲染）： / / Web端适配器 (popup.ts)class CrossPlatformPopup {private static instance: CrossPlatformPopup;private config: any;private stayCheckTimer: ReturnType<typeof setTimeout>| null = null;private clickTimestamps: number[] = []; / / 点击时间数组（防误操作）private isPopupShown = false;private constructor() {this.initSync();this._bindUserActions(); / / 绑定用户操作监听}public static getInstance() {if (!this.instance) {this.instance = new CrossPlatformPopup();}return this.instance;} / / 绑定用户操作（更新最后操作时间）private _bindUserActions() { / / 监听鼠标移动 / 点击（用户活跃）document.addEventListener('mousemove', () =>this._recordUserAction());document.addEventListener('click', () =>this._recordUserAction());document.addEventListener('keydown', () =>this._recordUserAction());} / / 记录用户操作时间private _recordUserAction() {const now = Date.now();this.clickTimestamps = this.clickTimestamps.filter(t =>now - t<5000); / / 保留5秒内的操作this.clickTimestamps.push(now); / / 重置停留时间检测（防误操作：短时间内操作重置计时）if (this.stayCheckTimer) clearTimeout(this.stayCheckTimer);this._startStayCheck();} / / 开始停留时间检测（基于trigger条件）private _startStayCheck() {const { trigger} = this.config;const stayThreshold = trigger.conditions[0].stayTime * 1000; / / 30s转msconst lastActionThreshold = trigger.conditions[1].lastActionTime *1000; / / 5s转msthis.stayCheckTimer = setTimeout(() =>{const now = Date.now();const stayDuration = now - this.config.logic.trigger.startTime; / / 假设配置中记录了开始时间const isStayValid = stayDuration>= stayThreshold;const isLastActionValid = (now - this.clickTimestamps[this.clickTimestamps.length - 1])>= lastActionThreshold;if (isStayValid&&isLastActionValid) {this.applyConfig(this.config); / / 显示弹窗this.isPopupShown = true;}}, 100);} / / 应用配置时记录触发开始时间（需服务端 / 前端配合传递）public applyConfig(config: any) {this.config = { ...config, logic: { ...config.logic, trigger: {startTime: Date.now()}}}; / / 原CSS注入逻辑...} / / 关闭条件处理（点击外部 / 按钮）public closePopup() {if (!this.isPopupShown) return;const { logic} = this.config;this.isPopupShown = false; / / 防误操作：重置点击记录this.clickTimestamps = []; / / 关闭弹窗逻辑（如移除DOM元素）const popupElement = document.querySelector('.custom-web-popup');if (popupElement) popupElement.remove(); / / 点击外部关闭（原逻辑扩展）if (logic.closeOnOutsideClick) {document.removeEventListener('click', this._handleOutsideClick);}} / / 点击外部关闭处理函数private _handleOutsideClick = (e: MouseEvent) =>{const popup = document.querySelector('.custom-web-popup');if (popup&&!popup.contains(e.target as Node)) {this.closePopup();}};private initSync() { / / Service Worker缓存if ('serviceWorker' in navigator) {navigator.serviceWorker.register(' / sw.js').then(reg =>reg.sync.register('config-sync'));} / / WebSocket实时同步const socket = new WebSocket('wss: / / config-server.com / sync');socket.onmessage = (event) =>{this.applyConfig(JSON.parse(event.data));};}public applyConfig(config: any) { / / CSS类动态注入const style = document.createElement('style');style.innerHTML = `.${config.style.web.cssClass} {background-color: ${config.style.common.bgColor} !important;font-size: ${config.style.common.fontSize}px !important;}`;document.head.appendChild(style); / / 防误操作处理document.querySelectorAll('.popup-button').forEach(btn =>{btn.addEventListener('click', (e) =>{const now = Date.now();const timestamps = e.currentTarget.dataset.timestamps || []; / / 点击频率检测timestamps.push(now);timestamps.splice(0, timestamps.length - 3);e.currentTarget.dataset.timestamps = timestamps.join(',');if (timestamps.length>= 3) {e.preventDefault();alert('请勿频繁点击！');}});});}} / / 初始化new CrossPlatformPopup();} / / 初始化时绑定关闭按钮事件（假设HTML中有关闭按钮）document.getElementById('popup-close-btn')?.addEventListener('click',() =>{CrossPlatformPopup.getInstance().closePopup();});本发明关键实现要点：多端同步机制：Flutter：通过MethodChannel与原生通信，结合SharedPreferences持久化。

[0062] 小程序：利用onShow生命周期+本地缓存（wx.setStorageSync）。

[0063] Web：Service Worker + IndexedDB实现持久化缓存。

[0064] 差异处理策略：组件映射：建立组件ID与平台组件的双向映射表。

[0065] 样式转换：使用预处理器（如Sass / Less）生成平台特定样式。

[0066] API适配：封装平台差异API（如wx.request vs fetch）。

[0067] 防误操作增强：按钮禁用状态：操作后添加200ms冷却时间。

[0068] 手势检测：结合Hammer.js识别快速连续点击。

[0069] 环境验证：通过DeviceOrientationEvent检查设备状态。

[0070] 本发明还可以进行进一步性能优化方案：配置压缩：使用Protocol Buffers替代JSON。

[0071] 智能更新：只更新变动的CSS选择器。

[0072] 内存管理：使用WeakReference缓存组件实例。

[0073] 如图2所示，本发明实施例第二方面提供一种跨平台弹窗展示系统，包括：调用模块21和弹窗适配器22；调用模块21，用于响应于展示目标页面，根据目标页面所在的当前平台类型调用对应的弹窗适配器；其中，弹窗适配器22包括：解析模块220，用于接收目标页面关联的预设弹窗配置数据并进行解析，得到当前弹窗配置信息；其中，预设弹窗配置数据为JSON格式，预设弹窗配置数据的数量为多个；监听模块221，用于获取用户或终端的实时行为信息，并判断实时行为信息是否满足当前弹窗配置信息中的弹窗触发条件；确定模块222，用于若满足，则根据当前平台类型和当前弹窗配置信息中的样式信息的平台类型与弹窗模板的对应关系，确定当前弹窗模板；同步模块223，用于将当前弹窗配置信息中的样式信息的通用样式配置信息同步至当前原生操作系统的原生弹窗；渲染模块224，用于根据当前弹窗模板以原生弹窗的形式显示当前弹窗；第一判断模块225，用于判断当前弹窗配置信息中的防误操作是否开启；第二判断模块226，用于若开启，则判断实时行为信息是否满足误操作条件；第一执行模块227，用于若满足，则执行防误操作方法；第三判断模块228，用于判断实时行为信息是否满足当前弹窗配置信息中的弹窗关闭条件；第二执行模块229，用于若满足，则关闭弹窗并执行辅助处理。

[0074] 在本发明的一个实施例中，预设弹窗配置数据的每种数据分别采用哈希算法计算对应的哈希值。

[0075] 在本发明的一个实施例中，误操作条件包括：若用户预设时间内的弹窗关闭条件触发次数大于或等于3次、若终端的加速度大于或等于2g、若弹窗未完全加载、若用户焦点在弹窗的输入框中的一种；执行防误操作方法包括：弹窗延迟关闭或输出确认信息；辅助处理包括：清理缓存或统计数据。

[0076] 在本发明的一个实施例中，实时行为信息包括：用户页面停留时间、用户的操作频率、终端的姿态、环境数据中的至少两种。

[0077] 本发明实施例的第三方面提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现上述的本发明实施例提供的一种跨平台弹窗展示方法。

[0078] 本发明实施例第四方面还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述的本发明实施例提供的一种跨平台弹窗展示方法的步骤。

[0079] 其中，存储器可以包括随机存取存储器(Random Access Memory，RAM)，也可以包括非易失性存储器(Non-Volatile Memory，NVM)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储系统。

[0080] 上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件系统。

[0081] 本发明实施例提供的方法可以应用于电子设备。具体的，该电子设备可以为：台式计算机、便携式计算机、智能移动终端、服务器等。在此不作限定，任何可以实现本发明的电子设备，均属于本发明的保护范围。

[0082] 对于系统 / 电子设备实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

[0083] 本发明是参照根据本发明实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的系统。

[0084] 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。

[0085] 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。

[0086] 显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。< / style>

Claims

1. A cross-platform pop-up display method, characterized in that, Includes the following steps: In response to displaying the target page, the corresponding pop-up adapter is invoked based on the current platform type of the target page; wherein, the pop-up adapter is used to execute the following methods: The system receives and parses the preset pop-up configuration data associated with the target page to obtain the current pop-up configuration information; wherein the preset pop-up configuration data is in JSON format and there are multiple preset pop-up configuration data sets; Obtain real-time behavior information of the user or terminal, and determine whether the real-time behavior information meets the pop-up triggering conditions in the current pop-up configuration information; If satisfied, the current pop-up template is determined based on the correspondence between the platform type and the style information in the current pop-up configuration information and the pop-up template. Synchronize the general style configuration information of the style information in the current pop-up configuration information to the native pop-up of the current native operating system; The current pop-up window is displayed as a native pop-up window based on the current pop-up template. Determine whether the anti-misoperation feature in the current pop-up configuration information is enabled; If enabled, determine whether the real-time behavior information meets the conditions for erroneous operation; If the conditions are met, then the method to prevent misoperation will be executed; Determine whether the real-time behavior information meets the pop-up closing conditions in the current pop-up configuration information; If the conditions are met, close the pop-up window and perform auxiliary processing.

2. The method as described in claim 1, characterized in that, Each type of data in the preset pop-up configuration data is used to calculate its corresponding hash value using a hash algorithm.

3. The method as described in claim 1, characterized in that, The conditions for erroneous operation include: if the pop-up closing condition is triggered more than or equal to 3 times within a preset time period, if the terminal's acceleration is greater than or equal to 2g, if the pop-up is not fully loaded, or if the user's focus is on the input box of the pop-up. The method for preventing accidental operation includes: delaying the closing of the pop-up window or outputting confirmation information; The auxiliary processing includes: clearing cache or statistical data.

4. The method as described in claim 1, characterized in that, The real-time behavioral information includes at least two of the following: user page dwell time, user operation frequency, terminal posture, and environmental data.

5. A cross-platform pop-up display system, characterized in that, include: Calling modules and pop-up adapters; The calling module is used to respond to the display of the target page by calling the corresponding pop-up adapter according to the current platform type of the target page; wherein, the pop-up adapter includes: The parsing module is used to receive and parse the preset pop-up configuration data associated with the target page to obtain the current pop-up configuration information; wherein, the preset pop-up configuration data is in JSON format, and there are multiple preset pop-up configuration data; The monitoring module is used to acquire real-time behavior information of the user or terminal and determine whether the real-time behavior information meets the pop-up triggering conditions in the current pop-up configuration information. The determination module is used to determine the current pop-up template based on the current platform type and the correspondence between the platform type and the pop-up template in the style information of the current pop-up configuration information if the conditions are met. The synchronization module is used to synchronize the general style configuration information of the style information in the current pop-up configuration information to the native pop-up of the current native operating system; The rendering module is used to display the current pop-up window in the form of a native pop-up window based on the current pop-up window template; The first judgment module is used to determine whether the anti-misoperation feature in the current pop-up configuration information is enabled. The second judgment module is used to determine whether the real-time behavior information meets the conditions for erroneous operation if it is enabled. The first execution module is used to execute the anti-misoperation method if the conditions are met. The third judgment module is used to determine whether the real-time behavior information meets the pop-up closing conditions in the current pop-up configuration information; The second execution module is used to close the pop-up window and perform auxiliary processing if the conditions are met.

6. The system as described in claim 5, characterized in that, Each type of data in the preset pop-up configuration data is used to calculate its corresponding hash value using a hash algorithm.

7. The system as described in claim 5, characterized in that, The conditions for erroneous operation include: if the pop-up closing condition is triggered more than or equal to 3 times within a preset time period, if the terminal's acceleration is greater than or equal to 2g, if the pop-up is not fully loaded, or if the user's focus is on the input box of the pop-up. The method for preventing accidental operation includes: delaying the closing of the pop-up window or outputting confirmation information; The auxiliary processing includes: clearing cache or statistical data.

8. The system as described in claim 5, characterized in that, The real-time behavioral information includes at least two of the following: user page dwell time, user operation frequency, terminal posture, and environmental data.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the cross-platform pop-up display method as described in any one of claims 1 to 4.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the cross-platform pop-up display method as described in any one of claims 1 to 4.

Images