A cross-platform online application system and construction method thereof

Through a cross-platform online application system, online services with high interactivity, high security and high compliance in financial applications are realized, solving the problems of low multi-terminal development efficiency, slow iteration and insufficient performance, and improving user experience and security.

CN120144178BActive Publication Date: 2025-08-08BANK OF SHANGHAI
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202510629672.7
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2025-05-16
Publication Date
2025-08-08
Estimated Expiration
2045-05-16

AI Technical Summary

Technical Problem

Currently, financial applications have problems such as multi-terminal repeated development, lagging version iteration, poor performance experience and insufficient security compliance when implementing online video services. It is especially difficult to achieve high interactivity, high security and high compliance on iOS, Android and HarmonyOS platforms.

Method used

A cross-platform online application system is adopted, including H5 business layer, H5 basic layer, native layer and bridge layer. The pixel-level rendering of H5 and native components is realized through the same-layer rendering technology, and abnormal transaction detection and dynamic process decisions are carried out through the intelligent analysis layer, supporting H5 thermal updates to achieve functional iteration.

Benefits of technology

It improves the three-end code reuse rate, shortens the development cycle and function iteration time, improves performance and security, ensures cross-platform user experience consistency and compliance, and reduces development costs.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN120144178B_ABST
    Figure CN120144178B_ABST
Patent Text Reader

Abstract

The present invention relates to a cross-platform online application system and a construction method thereof, and relates to the field of mobile application development technology. The system includes: an H5 business layer, configured to implement business process control, form interaction, and native high-performance View embedding through same-layer rendering and H5 general development technology; an H5 foundation layer, configured to define H5 tags; a native layer, configured to focus on audio and video acquisition and rendering, device permission management, and native capabilities to form highly secure components; and a bridge layer, configured to implement pixel-level same-layer rendering of H5 and native components in the native layer based on dynamic coordinate mapping and event penetration technology, and to complete two-way command interaction through a standardized communication interface. The present invention can implement highly interactive, highly secure, and highly compliant businesses such as online outlets in financial applications.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the technical field of mobile application development, and in particular to a cross-platform online application system and a construction method thereof. Background Art

[0002] In current financial applications, online video services (such as remote account opening and online interviews) require real-person interaction, real-time audio and video transmission, and complex business process control. However, their technical implementation faces the following pain points:

[0003] (1) Repeated development on multiple terminals: iOS, Android, and HarmonyOS need to independently implement audio and video modules and business logic, which results in high development costs and difficulty in unifying quality. Pure native solutions have low cross-terminal reuse rates.

[0004] (2) Version iteration lag: New features need to rely on client releases, resulting in discontinuous user experience;

[0005] (3) Poor performance experience:

[0006] Pure H5 (HTML5) solutions lack interactive fluency:

[0007] Hybrid development frameworks like Flutter and RN offer an improved user experience compared to H5, but they generally suffer from heavy external dependencies and high development costs. Flutter's additional overhead in audio and video rendering due to the Skia engine causes frame rate fluctuations (measured average 25 FPS, compared to 30 FPS for native). React Native also suffers from high bridge communication latency (average 150ms), resulting in poor business continuity.

[0008] (4) Security and compliance: The financial system has high security and compliance requirements for data applications. The implementation of technologies such as H5, Flutter, and RN is biased towards the front end, and therefore has inherent shortcomings in security compared to pure native technologies.

[0009] Therefore, it is necessary to provide a cross-platform online application system and its construction method to realize highly interactive, highly secure, and highly compliant businesses such as online outlets in financial applications. Summary of the Invention

[0010] The purpose of the present invention is to provide a cross-platform online application system and its construction method to realize highly interactive, highly secure, and highly compliant services such as online outlets in financial applications.

[0011] In order to solve the problems existing in the prior art, the present invention provides a cross-platform online application system, comprising:

[0012] The H5 business layer is configured to achieve business process control, form interaction, and native high-performance View embedding through same-layer rendering and H5 general development technology;

[0013] H5 base layer, configured to define H5 tags;

[0014] The native layer is configured to focus on audio and video capture and rendering, device permission management, and native capabilities, forming a highly secure component;

[0015] The bridge layer is configured based on dynamic coordinate mapping and event penetration technology to achieve pixel-level same-layer rendering of H5 and native components in the native layer, and complete two-way command interaction through a standardized communication interface.

[0016] Optionally, in the cross-platform online application system, pixel-level same-layer rendering of H5 and native components in the native layer is achieved as follows:

[0017] iOS: Use WKChildScrollView to bind the H5 tag to the native layer visual layout;

[0018] Android: Dynamically synchronize H5 and Native rendering layers through the H5EmbedView component of Chromium WebView;

[0019] HarmonyOS side: Use ArkUI's XComponent and H5 components to achieve view alignment.

[0020] Optionally, the cross-platform online application system further includes:

[0021] Intelligent analysis layer: This layer is configured to build an on-device intelligent analysis engine based on user behavior characteristics, enabling abnormal transaction detection, risk scoring, dynamic process decision-making, and intent prediction.

[0022] The dynamic business adaptation module is configured to enable H5 to support cloud hot updates.

[0023] The present invention also provides a method for constructing a cross-platform online application system, comprising the following steps:

[0024] Establish a hybrid architecture consisting of H5 business layer, H5 foundation layer, native layer, and bridge layer;

[0025] Insert an H5 tag into the H5 page layer. On iOS, use WKChildScrollView to bind the H5 tag to the native layer visual layout. On Android, use Chromium WebView's H5EmbedView component to dynamically synchronize the H5 and Native rendering layers. On HarmonyOS, use ArkUI's XComponent and H5 component to achieve view alignment.

[0026] Perform event penetration and interaction optimization. Events penetrate into the components of the native layer through the bridge layer. The corresponding components in the native layer start the camera and render the image in real time. The verification results are transmitted back to the H5 page through the jsbridge protocol.

[0027] Optionally, in the method for constructing the cross-platform online application system,

[0028] The H5 business layer is used to implement the business logic control, business forms, and business pop-up windows of the online branch system at the front-end presentation layer through H5 technology;

[0029] The H5 base layer is used to define H5 tags;

[0030] The native layer includes: real-time audio and video communication unit, face recognition verification component, voice dual recording software development kit, and real-time transaction status push unit;

[0031] The bridge layer is used to embed the native video component and native verification component in the native layer into the H5 page through the H5 tag.

[0032] Optionally, in the method for constructing the cross-platform online application system, the H5 tag is a custom tag, and the custom tag includes a video tag and a security verification tag.

[0033] Optionally, in the method for constructing the cross-platform online application system,

[0034] When the custom label is face recognition;

[0035] iOS: Use WKChildScrollView to map the custom label coordinates to the native face recognition View;

[0036] Android: Use H5EmbedView to dynamically bind the rendering level of the face recognition component;

[0037] HarmonyOS: Through XComponent's pixel-level rendering interface, the native face recognition component is embedded in the H5 page, ensuring visual consistency between the H5 form and the native verification component.

[0038] Optionally, the method for constructing the cross-platform online application system further includes the following steps:

[0039] If new functions are needed, the cloud will push the H5 update package to overwrite the previous H5 tag.

[0040] Optionally, the method for constructing the cross-platform online application system further includes the following steps: setting up an intelligent analysis engine.

[0041] Optionally, in the method for constructing the cross-platform online application system, the intelligent analysis engine includes setting a dynamic process decision tree algorithm, a multimodal risk scoring model, and an intent prediction long short-term memory network;

[0042] The dynamic process decision tree algorithm generates a decision tree based on the user behavior sequence, and the node weights are dynamically adjusted through testing;

[0043] The multimodal risk scoring model uses the random forest algorithm to integrate transaction data and device environment characteristics. The risk scoring formula is as follows: ;in, Score the risk, is the feature weight, is the normalized eigenvalue, is the deviation term, and The total number of risk characteristics and the risk characteristics;

[0044] The intent prediction ‌long short-term memory network inputs the user operation sequence, outputs the probability distribution of the next operation, and supports dynamic process jumps.

[0045] Compared with the prior art, the present invention has the following advantages:

[0046] (1) Efficiency indicators: After the business functions are converted to H5, the code reuse rate of the three terminals is greatly improved, the development cycle is effectively shortened, and the labor cost is significantly reduced. Function iteration is achieved through H5 hot updates, and the online production cycle is shortened.

[0047] (2) Performance indicators: Memory usage: The H5 business layer runs independently across processes, and memory consumption is significantly reduced compared to native solutions; Rendering efficiency: The same-layer rendering technology makes the audio and video basically consistent with the pure native solution, and the native experience effect is obtained in the H5 page; Cross-end consistency: The UI component alignment error rate is low, supporting pixel-level consistency on iOS / Android / HarmonyOS.

[0048] (3) Compliance indicators: Sensitive information components such as security and compliance are developed natively and have the same security as native applications, which is conducive to ensuring compliance. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] Figure 1 An architectural diagram of a cross-platform online application system provided by an embodiment of the present invention;

[0050] Figure 2 A cross-platform online business process diagram provided by an embodiment of the present invention;

[0051] Figure 3 This is a flow chart of the consistency algorithm provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0052] The following is a more detailed description of the specific embodiments of the present invention with reference to schematic diagrams. The advantages and features of the present invention will become more apparent from the following description. It should be noted that the drawings are greatly simplified and not to exact scale, and are only used for the purpose of conveniently and clearly illustrating the embodiments of the present invention.

[0053] Hereinafter, if the method described herein includes a series of steps, the order in which the steps are presented herein is not necessarily the only order in which the steps may be performed, and some of the steps described may be omitted and / or some other steps not described herein may be added to the method.

[0054] Among current financial applications, online video services (such as remote account opening and online face-to-face interviews) require real-person interaction, real-time audio and video transmission, and complex business process control. However, their technical implementation faces pain points such as repeated development on multiple terminals, delayed version iterations, poor performance experience, and security compliance.

[0055] In order to solve the problems existing in the prior art, the present invention provides a cross-platform online application system, such as Figure 1 Shown, including:

[0056] First, the H5 business layer is configured to implement reusable modules such as business process control, form interaction, and native high-performance View embedding through same-layer rendering and H5 general development technology. Specifically, the H5 business layer is used to implement the business logic control, business forms, and business pop-up windows of the online branch system at the front-end presentation layer through H5 technology.

[0057] Second, the HTML5 foundation layer is configured to use Shadow DOM to define HTML5 tags (i.e., custom tags). Shadow DOM is a core component of the Web Components technology stack, used to implement the encapsulation and isolation of Web components.

[0058] Third, the native layer is configured to focus on high-performance modules such as audio and video acquisition and rendering, device permission management, and native capabilities, forming a highly secure component to ensure compliance. Native capabilities refer to the ability of applications to directly access and utilize device hardware and operating system functions. In mobile application development, native capabilities generally refer to the ability of native applications to directly interact with the device, including accessing the device's camera, GPS, notification system, etc. Native is a development model that uses the development language and framework specified by the operating system.

[0059] Specifically, the native layer includes: real-time audio and video communication unit, WebView, event mechanism, face recognition verification component, voice dual recording software development kit (i.e., voice dual recording SDK) and real-time transaction status push unit, etc.; among them, WebView is the core view class in the WebKit framework, used to manage the interaction between WebFrame and WebFrameView classes.

[0060] Fourth, the bridge layer is configured based on dynamic coordinate mapping and event penetration technology to achieve pixel-level same-layer rendering of H5 and native components in the native layer, and complete two-way command interaction through a standardized communication interface (such as jsbridge, which is a bridge protocol for two-way communication between JavaScript and native code). jsbridge requires permission application, NFC or face recognition.

[0061] Specifically, pixel-level same-layer rendering of H5 and native components in the native layer is achieved. Among them, same-layer rendering means that H5 and native components are superimposed and displayed at the same rendering level to avoid the layer occlusion problem of traditional WebView. The same-layer rendering method is as follows:

[0062] iOS: Use WKChildScrollView to bind the HTML5 tag to the native layer visual layout and use JSCore to optimize communication efficiency. WKChildScrollView is a subclass of WKWebView in iOS (Apple operating system) that handles scrolling views.

[0063] Specifically, for iOS, when using WKWebView to create a Web view, WKWebView will render the Web component onto WKCompositingView during the parsing and rendering process. WKCompositingView is a subclass of native UIView. Generally, the WKWebView kernel will render multiple components together onto the same WKCompositingView. However, when the overflow: scroll attribute is set in the style of a certain tag, and the content exceeds the container size, WKWebView will create a WKChildScrollView for it separately. Therefore, the present invention needs to find a View that contains the overflow: scroll attribute, and associate the found View with the corresponding Web component one by one, so that the native component can be rendered into the View to achieve the effect of same-layer rendering.

[0064] Android: Dynamically synchronize the H5 and Native rendering layers through the H5EmbedView component of Chromium WebView. H5EmbedView is a general term for embedding H5 pages in Android applications.

[0065] HarmonyOS: ArkUI's XComponent is used to align views with H5 components, supporting high-precision event penetration. XComponent is a HarmonyOS component designed to meet complex custom rendering requirements; it is primarily used for displaying camera preview streams and drawing game screens. ArkUI's XComponent is a component designed for complex custom rendering requirements, primarily for EGL / OpenGLES rendering and media data writing.

[0066] Specifically, for Android and HarmonyOS, since the system WebView layer already supports mapping H5 tags to native Views, the application layer only needs to register a custom View with WebView to use the system to render native components into the H5 page (the main difference is that HarmonyOS requires an additional attribute starting with "native / ").

[0067] In summary, the basic implementation of same-layer rendering on the three terminals (i.e., iOS, Android, and HarmonyOS) differs from each other. To ensure the consistency of the H5 base layer, the same-layer rendering components need to be encapsulated at the H5 base layer. We use Shadow Dom technology to implement custom tags (such as native-video-view), making them inherit from HtmlElement. Then, in the constructor initialization method of the custom tag, we add div (iOS) or embed (Android, HarmonyOS) tags according to the platform, and pass in different input parameters based on different platforms. Figure 3 .

[0068] Optionally, the cross-platform online application system further includes:

[0069] Intelligent analysis layer: It is configured to build an end-side intelligent analysis engine based on user behavior characteristics. The intelligent analysis engine performs intelligent analysis based on IP address, screen recording status, and jailbreak status to achieve abnormal transaction detection, risk scoring, dynamic process decision-making, and intention prediction; effectively improving the fluency and security of user function use. The intelligent analysis layer of the present invention uses machine learning algorithms to pre-train the intelligent analysis engine model based on historical data on the server side in advance, pre-install it on the client side, and optimize the end-side process and experience by analyzing user behavior in real time, avoiding the risk of server-side risk control measures being easily bypassed, and further enhancing security. Among them, (1) Behavior data processor: real-time cleaning and standardization of user behavior data; (2) Model inference engine: executes risk scoring, intention prediction and other algorithms; (3) Policy executor: dynamically adjusts business processes based on analysis results (such as triggering enhanced verification or skipping steps, etc.).

[0070] The dynamic business adaptation module is configured to enable H5 to support cloud-based hot updates, so that new business functions (such as face-to-face signature process optimization) can take effect without the need for client-side version releases. Among them, hot updates are to dynamically load code packages through the cloud to achieve version-free iteration updates of client functions.

[0071] This invention uses same-layer rendering technology to achieve cross-end reuse of business logic and native optimization of high-performance, high-security modules, solving problems such as low multi-end development efficiency, slow function iteration, and insufficient core experience, while ensuring security and compliance.

[0072] The present invention also provides a method for constructing a cross-platform online application system, comprising the following steps:

[0073] S1: Establish a hybrid architecture, including the H5 business layer, H5 foundation layer, native layer, and bridge layer;

[0074] The H5 business layer is used to implement the business logic control, business forms, and business pop-up windows of the online branch system at the front-end presentation layer through H5 technology;

[0075] The H5 base layer is used to define H5 tags, where H5 tags are custom tags, such as those containing video tags ( <native-video-view type="video" id="communication">)、Security Verification Label( <native-security-view type="face-recognition" id="face-auth">< / native-security-view> )or( <native-video-view>、 <native-security-view>);

[0076] The native layer includes: real-time audio and video communication unit, face recognition verification component, voice dual recording software development kit, and real-time transaction status push unit;

[0077] The bridge layer is used to embed the native video component and native verification component in the native layer into the H5 page through the H5 tag.

[0078] S2: Insert an H5 tag into the H5 page layer. On iOS, WKChildScrollView is used to bind the H5 tag to the native layer visual layout. On Android, the H5EmbedView component of Chromium WebView is used to dynamically synchronize the H5 and Native rendering layers. On HarmonyOS, ArkUI's XComponent and H5 component are used to achieve view alignment.

[0079] Specifically, on iOS, when using WKWebView to create a web view, WKWebView will render the web components onto WKCompositingView during the parsing and rendering process. WKCompositingView is a subclass of native UIView. Generally, the WKWebView kernel will render multiple components together onto the same WKCompositingView. However, when the overflow: scroll attribute is set in the style of a certain tag and the content exceeds the container size, WKWebView will create a separate WKChildScrollView for it. Therefore, the present invention needs to find the View that contains the overflow: scroll attribute and associate the found View with the corresponding web component one by one. This way, the native component can be rendered into the View, achieving the effect of same-layer rendering. On Android and HarmonyOS, because the system WebView layer already supports mapping H5 tags to native Views, the application layer only needs to register a custom View with WebView, and then the system can use it to complete the rendering of native components into the H5 page (the main difference is that HarmonyOS requires an additional attribute starting with "native / ").

[0080] In summary, the basic implementation of same-layer rendering on the three terminals (i.e., iOS, Android, and HarmonyOS) differs from each other. To ensure the consistency of the H5 base layer, the same-layer rendering components need to be encapsulated at the H5 base layer. We use Shadow Dom technology to implement custom tags (such as native-video-view), making them inherit from HtmlElement. Then, in the constructor initialization method of the custom tag, we add div (iOS) or embed (Android, HarmonyOS) tags according to the platform, and pass in different input parameters based on different platforms. Figure 3 .

[0081] S3: Performs event penetration and interaction optimization. Events penetrate the native layer components through the bridge layer. The corresponding components in the native layer start the camera and render the image in real time. The verification results are transmitted back to the H5 page through the jsbridge protocol.

[0082] S4: If new functions are needed, the cloud pushes an H5 update package to overwrite the previous H5 tag; the user is unaware of the function upgrade and does not need to re-download the application.

[0083] The following steps are also included: S5: Setting up an intelligent analysis engine, wherein the intelligent analysis engine includes setting up a dynamic process decision tree algorithm, a multimodal risk scoring model, and an intent prediction long short-term memory network. The intelligent analysis engine performs intelligent analysis based on IP address, screen recording status, and jailbreak status to achieve abnormal transaction detection, risk scoring, dynamic process decision-making, and intent prediction;

[0084] (1) The dynamic process decision tree algorithm generates a decision tree based on the user behavior sequence, and the node weights are dynamically adjusted through testing; for example, when it is detected that the user frequently modifies the ID card information, the AI-assisted recognition function is automatically enabled.

[0085] (2) The multimodal risk scoring model uses the random forest algorithm to integrate transaction data and device environment characteristics. The risk scoring formula is as follows: ;in, Score the risk, is the feature weight, is the normalized eigenvalue, is the deviation term, and The total number of risk characteristics and the risk characteristics;

[0086] (3) Intent prediction ‌Long Short-Term Memory Network (LSTM) is: input user operation sequence, output the probability distribution of the next operation, and support dynamic process jump.

[0087] The intelligent analysis engine has the following advantages: (1) High-risk user identification: The user's IP address span, whether the phone is recording, whether the phone is a new device, whether the user's face is continuously stable on the screen, and other features are transmitted to the local intelligent analysis engine. In real time, the engine decides whether to allow the user's transfer operation or issues prompts for the user's operation (such as prompting the user to keep the face stable on the screen during video communication to prevent the user from being manipulated by a third party). (2) Transfer limit restriction: If the intelligent analysis engine returns a high-risk flag, the transfer limit is adjusted in real time to prevent the user from being defrauded. (3) The accuracy rate of high-risk transaction interception on the terminal reaches 60%, and the false alarm rate is <2%.

[0088] In one embodiment, when the custom tag is face recognition;

[0089] Insert custom tags into H5 pages:

[0090] Real-time communication is:

[0091] <native-video-view type="video" id="communication">< / native-video-view> ;

[0092] Face verification is:

[0093] <native-security-view type="face-recognition" id="face-auth">< / native-security-view> ;

[0094] iOS: Use WKChildScrollView to map the custom label coordinates to the native face recognition View;

[0095] Android: Use H5EmbedView to dynamically bind the rendering level of the face recognition component, with an error rate of <0.3px;

[0096] HarmonyOS: Through XComponent's pixel-level rendering interface, the native face recognition component is embedded in the H5 page, ensuring visual consistency between the H5 form and the native verification component.

[0097] like Figure 2 As shown, in another embodiment, during a bank application's transfer transaction process, users must complete the following core operations: real-time video conferencing: the user enters the online branch page and communicates with the service staff via video call (i.e., clicking the call button); form filling: inputting basic data such as the payee's information and amount; security verification: identity verification is completed through real-time interaction such as facial recognition and voice recording; transaction confirmation: real-time display of transaction status and feedback results. This embodiment uses same-layer rendering technology to achieve seamless integration of H5 forms with native video conferencing modules and native security verification modules, resolving issues inherent in traditional solutions such as multi-terminal parallel development, cross-terminal UI misalignment, choppy audio and video, verification process lags, and low security levels.

[0098] The performance comparison and effects are as follows:

[0099] (1) Rendering efficiency:

[0100] The native face recognition component renders at a stable frame rate of 30+ FPS in the H5 page, with a difference of less than 3% compared to the pure native solution.

[0101] The cross-end loading time of the form page is unified to 400ms (±20ms).

[0102] (2) Memory usage:

[0103] The memory usage of the H5 form module can be reduced by 40%+ compared to the native solution; the native verification component and the H5 component run in independent processes to avoid the risk of WebView memory overflow.

[0104] (3) User experience:

[0105] The UI alignment error rate is <0.5px, and the operating experience on all three terminals is consistent. The verification process success rate is on par with native, which is significantly improved compared to H5 and other technology stacks. Exceptions caused by rendering layer conflicts are reduced by 90%.

[0106] The technical advantages are as follows:

[0107] (1) Development efficiency: The H5 form code reuse rate is 95%, and the three-terminal verification module development cycle is shortened by 60%;

[0108] (2) Dynamic expansion: The "fingerprint verification" process was added through hot updates, shortening the function launch cycle from 3 weeks to 1 day;

[0109] (3) Compliance: The native layer independently processes sensitive biometric data, complying with financial security regulatory requirements;

[0110] (4) Security: Intelligent analysis engine detects abnormal transactions in real time to ensure transaction security.

[0111] The above description is merely a preferred embodiment of the present invention and does not limit the present invention in any way. Any person skilled in the art who, without departing from the scope of the present invention, makes any equivalent substitution, modification, or other changes to the technical solution and technical content disclosed in the present invention shall be deemed to be within the scope of the present invention and still fall within the scope of protection of the present invention.

Claims

1. A cross-platform online application system, characterized in that: include: The H5 business layer is configured to achieve business process control, form interaction, and native high-performance View embedding through same-layer rendering and H5 general development technology; H5 base layer, configured to define H5 tags; The native layer is configured to focus on audio and video capture and rendering, device permission management, and native capabilities, forming a highly secure component; The bridge layer is configured based on dynamic coordinate mapping and event penetration technology to achieve pixel-level same-layer rendering of H5 and native components in the native layer, and complete two-way command interaction through a standardized communication interface; to achieve pixel-level same-layer rendering of H5 and native components in the native layer, the method is as follows: iOS: Use WKChildScrollView to bind the H5 tag to the native layer visual layout; Android: Dynamically synchronize the H5 and Native rendering levels through the H5EmbedView component of Chromium WebView; HarmonyOS: Use ArkUI's XComponent and H5 components to achieve view alignment.

2. The cross-platform online application system according to claim 1, characterized in that: Also includes: Intelligent analysis layer: This layer is configured to build an on-device intelligent analysis engine based on user behavior characteristics, enabling abnormal transaction detection, risk scoring, dynamic process decision-making, and intent prediction. The dynamic business adaptation module is configured to enable H5 to support cloud hot updates.

3. A method for constructing a cross-platform online application system, characterized in that: The following steps are involved: Establish a hybrid architecture consisting of H5 business layer, H5 foundation layer, native layer, and bridge layer; Insert an H5 tag into the H5 page layer. On iOS, use WKChildScrollView to bind the H5 tag to the native layer visual layout. On Android, use Chromium WebView's H5EmbedView component to dynamically synchronize the H5 and Native rendering layers. On HarmonyOS, use ArkUI's XComponent and H5 component to achieve view alignment. Perform event penetration and interaction optimization. Events penetrate the bridging layer to the components of the native layer. The corresponding components in the native layer start the camera and render the image in real time. The verification result is sent back to the H5 page via the jsbridge protocol.

4. The method for constructing a cross-platform online application system according to claim 3, wherein: The H5 business layer is used to implement the business logic control, business forms, and business pop-up windows of the online branch system at the front-end presentation layer through H5 technology; The H5 base layer is used to define H5 tags; The native layer includes: real-time audio and video communication unit, face recognition verification component, voice dual recording software development kit, and real-time transaction status push unit; The bridge layer is used to embed the native video component and native verification component in the native layer into the H5 page through the H5 tag.

5. The method for constructing a cross-platform online application system according to claim 4, wherein: The H5 tag is a custom tag that includes a video tag and a security verification tag.

6. The method for constructing a cross-platform online application system according to claim 5, wherein: When the custom label is face recognition; iOS: Use WKChildScrollView to map the custom label coordinates to the native face recognition View; Android: Use H5EmbedView to dynamically bind the rendering level of the face recognition component; HarmonyOS: Through XComponent's pixel-level rendering interface, the native face recognition component is embedded in the H5 page, ensuring visual consistency between the H5 form and the native verification component.

7. The method for constructing a cross-platform online application system according to claim 3, wherein: The following steps are also included: If new functions are needed, the cloud will push the H5 update package to overwrite the previous H5 tag.

8. The method for constructing a cross-platform online application system according to claim 3, wherein: The following steps are also included: Set up the intelligent analysis engine.

9. The method for constructing a cross-platform online application system according to claim 8, wherein: The intelligent analysis engine includes a dynamic process decision tree algorithm, a multimodal risk scoring model, and an intent prediction long short-term memory network; The dynamic process decision tree algorithm generates a decision tree based on the user behavior sequence, and the node weights are dynamically adjusted through testing; The multimodal risk scoring model uses the random forest algorithm to integrate transaction data and device environment characteristics. The risk scoring formula is as follows: ;in, Score the risk, is the feature weight, is the normalized eigenvalue, is the deviation term, and The total number of risk characteristics and the risk characteristics; The intent prediction ‌long short-term memory network inputs the user operation sequence, outputs the probability distribution of the next operation, and supports dynamic process jumps.

Citation Information

Patent Citations

  • React-native long list processing method and system

    CN115629836A