Method and system for responding to touch operation by H5 page, terminal and medium

Abstract

The invention belongs to the technical field of operating system processing, and particularly discloses a method, a system, a terminal and a medium for an H5 page to respond to a touch operation, and the method comprises the following steps: packaging a touch type distinguishing logic of a native application into a JS function; a bridging layer is constructed, the JS function is exposed to the H5 page through the bridging layer, a class is registered on the native application side, an attribute and a method are declarated in the class, the attribute is used for storing operation parameters needed for executing the JS function, and the method is used for calling the JS function; when a user executes operation, the native application side obtains operation parameters and stores the operation parameters in attributes of the class, the H5 page calls the JS function through the bridging layer, the current touch type is obtained based on the operation parameters, and corresponding operation or interface feedback is triggered according to the current touch type. The gesture and the stylus can be accurately distinguished, and the accuracy and reliability of input judgment are improved.

Description

Technical Field

[0001] The present invention belongs to the field of operating system processing technology, and specifically relates to a method, system, terminal and medium for an H5 page to respond to touch operations. Background Art

[0002] Differentiating between gesture and stylus input offers numerous advantages in native operating system applications. Users can interact with their devices in the most natural way, whether using gestures for global operations or using a stylus for precise control. This diverse input method adapts to diverse scenarios and improves user satisfaction. By distinguishing between different types of input, applications can respond quickly based on user intent. For example, a stylus might be used for operations requiring high precision, such as selecting text or drawing; whereas gestures can be used for more general interactions, such as zooming, rotating, and swiping, significantly improving efficiency. System resources are allocated appropriately based on the input type. For example, stylus input, which requires higher computational power, such as pressure sensitivity, can be prioritized to ensure accurate and timely operation.

[0003] In operating systems, distinguishing between gestures and styluses not only improves the user experience but also provides developers with more flexible design options. In actual development, an HTML5 page is loaded into a webview component, where a canvas area is set up for touch type detection, hoping to detect whether the touch type is a hand touch or a stylus touch. This method produces a stylus touch result in the default browser, but in the webview component of a native application, the result is a touch, meaning a hand touch. Determining the correct touch type on an HTML5 page in a webview has become a pressing issue. Summary of the Invention

[0004] To solve the above problems, the present invention provides a method, system, terminal and medium for an H5 page to respond to touch operations, thereby improving the accuracy of obtaining the correct touch type on the H5 page.

[0005] In a first aspect, the technical solution of the present invention provides a method for an H5 page to respond to a touch operation, comprising the following steps: Encapsulate the touch type differentiation logic of native applications into JS functions; Build a bridge layer to expose the JS function to the H5 page through the bridge layer. This involves registering a class on the native application side and declaring a property and a method in the class. The property is used to store the operation parameters required to execute the JS function, and the method is used to call the JS function. When the user performs an operation, the native application side obtains the operation parameters and stores them in the class attributes. The H5 page calls the JS function through the bridge layer, obtains the current touch type based on the operation parameters, and triggers the corresponding operation or interface feedback according to the current touch type.

[0006] In an optional implementation, when a user performs an operation, the native application side obtains the operation parameters and stores them in the attributes of the class, specifically including: Pre-set event listeners to monitor stylus-related events and gesture input-related events; In response to the event listener being triggered, extracting operation parameters from the monitored stylus-related events and gesture input-related events; Store the operation parameters in attributes of the class.

[0007] In an optional implementation, the H5 page calls a JS function through the bridge layer to obtain the current touch type based on the operation parameters, specifically including: Extract operation parameters from class attributes; Use the operation parameter as the input of the JS function and execute the JS function to obtain the current touch type.

[0008] In an optional embodiment, the operating parameters include a coordinate sequence, a pressure value, a timestamp, a touch area, and a tilt angle; Use the operation parameters as the input of the JS function and execute the JS function to obtain the current touch type, including: Calculate velocity and acceleration based on coordinate sequence and timestamp, taking operation parameters, velocity, acceleration as input data; The touch track is divided into preset time windows, and the input data of each time window is converted into a feature vector; Retrieving a pre-trained touch type differentiation model, inputting each feature vector into the touch type differentiation model to obtain the probability that the current operation belongs to one of two touch types; touch types include stylus type and gesture input type; Detect whether the larger probability among the probabilities of various touch types is greater than a preset probability threshold; If so, determine the touch type with a higher probability as the current touch type; If not, determine the current touch type based on the pressure value.

[0009] In an optional embodiment, the touch type discrimination model is trained using the following loss function:

[0010] in, ; Where, is the real label, stylus type , gesture input type ; and They represent the probability that the current operation output by the touch type differentiation model belongs to the stylus type and the gesture input type respectively; in, is the weight coefficient; ; Where, is the normalized pressure value, The current preset pressure threshold; in, ; Where, is the regularization coefficient, It is the initial preset pressure threshold.

[0011] In an optional implementation, determining the current touch type according to the pressure value specifically includes: Detect whether the pressure value is greater than the preset pressure threshold; If so, determine that the current touch type is a stylus type; If not, it is determined that the current touch type is a gesture input type.

[0012] In an optional embodiment, the method further comprises the following steps: After determining the current touch type, monitor subsequent operations to determine whether there is a misjudgment; The recent misjudgment rate is calculated using the following formula:

[0013] in, Indicates the Is it a misjudgment? If so, ,otherwise ; Indicates the The exponential decay weight of times, is the attenuation factor; The length of the window used to calculate the recent misjudgment rate; Correct the preset pressure threshold using the following formula: Current preset pressure threshold = previous preset pressure threshold - δ˙recent misjudgment rate; Among them, δ is the learning rate.

[0014] In a second aspect, the technical solution of the present invention provides a system for enabling an H5 page to respond to touch operations, comprising: The differentiation logic encapsulation module is used to encapsulate the touch type differentiation logic of the native application into a JS function; The bridge layer construction module is used to build a bridge layer and expose JS functions to H5 pages through the bridge layer. This includes registering a class on the native application side and declaring a property and a method in the class. The property is used to store the operation parameters required to execute the JS function, and the method is used to call the JS function. The H5 page response module is used to obtain the operation parameters on the native application side and store them in the class attributes when the user performs an operation. The H5 page calls the JS function through the bridge layer, obtains the current touch type based on the operation parameters, and triggers the corresponding operation or interface feedback according to the current touch type.

[0015] In a third aspect, the technical solution of the present invention provides a terminal, including: Memory, used to store programs that respond to touch operations on the H5 page; The processor is used to implement the steps of the method for the H5 page to respond to touch operations as described in any of the above items when executing the program for the H5 page to respond to touch operations.

[0016] In a fourth aspect, the technical solution of the present invention provides a computer-readable storage medium, on which is stored a program for an H5 page to respond to touch operations. When the program for an H5 page to respond to touch operations is executed by a processor, the steps of the method for an H5 page to respond to touch operations as described in any one of the above items are implemented.

[0017] It can be seen from the above technical solutions that this application has the following advantages: first, the touch type differentiation logic of the native application is encapsulated into a JS function, and then the JS function is exposed to the H5 page through the bridge layer. When the user performs an operation, the H5 page calls the JS function through the bridge layer to obtain the current touch type, and then triggers the corresponding operation or interface feedback according to the current touch type. The present invention solves the problem that the WebView component cannot correctly identify the stylus input by encapsulating the touch type differentiation logic of the native application into a JavaScript function and dynamically transferring it to the H5 page in combination with the bridge layer. Compared with the H5 page that can only obtain the default "touch" type, this solution can accurately distinguish between gestures and styluses, and improve the accuracy and reliability of input judgment; through the bridge layer design, low-latency data transmission between the native layer and the H5 page is achieved, and then through the collaboration between the native and H5, the system resource allocation can be dynamically optimized; at the same time, the touch type differentiation logic is encapsulated into a standardized JavaScript interface, and developers do not need to re-implement complex touch judgment algorithms in the H5 page, reducing repeated development costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solution of the present application, the following is a brief introduction to the drawings required for the description. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0019] Figure 1 A schematic flow chart of a method for enabling an H5 page to respond to touch operations provided by an embodiment of the present invention.

[0020] Figure 2 A schematic block diagram of the system structure for enabling an H5 page to respond to touch operations provided by an embodiment of the present invention.

[0021] Figure 3 A schematic diagram of the structure of a terminal provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0022] In order to make the application objectives, features, and advantages of this application more obvious and easy to understand, the technical solutions protected by this application will be clearly and completely described below using specific embodiments and drawings. Obviously, the embodiments described below are only part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0023] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art of the present invention. The terms used in this specification of the present invention are only for the purpose of describing specific embodiments and are not intended to limit the present invention.

[0024] Figure 1 A schematic diagram of a method for responding to touch operations on an H5 page provided by an embodiment of the present invention. Figure 1 The execution entity may be a system for enabling touch operations on an HTML5 page. The method for enabling touch operations on an HTML5 page provided in embodiments of the present invention is executed by a computer device. Accordingly, the system for enabling touch operations on an HTML5 page runs on the computer device. The order of the steps in this flowchart may be changed, and some steps may be omitted, depending on different needs.

[0025] like Figure 1 As shown, the method includes the following steps.

[0026] S1: Encapsulate the touch type differentiation logic of the native application into a JS function.

[0027] This step encapsulates the touch type differentiation logic implemented in the native application's underlying layers into a JavaScript function (such as pointerType(event)) that can be called on the H5 page. This exposes the touch type determination capability through a standardized interface. This eliminates the need for H5 pages to repeatedly develop touch type determination logic and can directly call the encapsulated JS function, reducing development costs and avoiding the limitations of H5's default event model, improving the accuracy of touch type determination.

[0028] S2 builds a bridge layer and exposes the JS function to the H5 page through the bridge layer. This includes registering a class on the native application side and declaring a property and a method in the class. The property is used to store the operation parameters required to execute the JS function, and the method is used to call the JS function.

[0029] In this step, a bridge class is registered on the native app side, declaring properties and methods. The properties store touch event parameters (such as pressure value and timestamp). The methods invoke encapsulated JavaScript functions through the bridge layer, returning the results of the native logic execution to the HTML5 page. The bridge layer can be implemented using the operating system's WebView plug-in mechanism, supporting two-way communication. The bridge layer uses lightweight data transmission (such as JSON serialization) to achieve low-latency interaction between the native and HTML5 pages.

[0030] S3: When the user performs an operation, the native application side obtains the operation parameters and stores them in the class attributes. The H5 page calls the JS function through the bridge layer, obtains the current touch type based on the operation parameters, and triggers the corresponding operation or interface feedback according to the current touch type.

[0031] This step enables the native application to capture touch events and extract the operation parameters during user operations, storing them in the properties of the bridge class. The HTML5 page calls a JavaScript function through the bridge layer, obtains the current touch type (such as "stylus" or "gesture") based on the parameters, and triggers the corresponding front-end logic or interface feedback. The native layer captures and processes touch data in real time, and the HTML5 page receives the results synchronously through the bridge layer, ensuring instantaneous interaction and preventing the HTML5 page from using the default touch type, thereby improving the accuracy of the HTML5 page's touch response.

[0032] The method for the H5 page to respond to touch operations provided in this embodiment first encapsulates the touch type differentiation logic of the native application into a JS function, and then exposes the JS function to the H5 page through the bridge layer. When the user performs an operation, the H5 page calls the JS function through the bridge layer to obtain the current touch type, and then triggers the corresponding operation or interface feedback based on the current touch type. This method solves the problem that the WebView component cannot correctly identify stylus input by encapsulating the touch type differentiation logic of the native application into a JavaScript function and dynamically transferring it to the H5 page in combination with the bridge layer. Compared with the H5 page that can only obtain the default "touch" type, this solution can accurately distinguish between gestures and styluses, significantly improving the accuracy and reliability of input determination; through the bridge layer design, low-latency data transmission between the native layer and the H5 page is achieved, and then through the collaboration between the native and H5, the system resource allocation can be dynamically optimized; at the same time, the touch type differentiation logic is encapsulated as a standardized JavaScript interface, so that developers do not need to re-implement complex touch determination algorithms in the H5 page, reducing repeated development costs.

[0033] Furthermore, as a refinement and extension of the specific implementation of the above embodiment, in order to fully illustrate the specific implementation process in this embodiment, another method for H5 page to respond to touch operations is provided. This method can be applied to the HarmonyOS operating system and includes the following steps.

[0034] SS1, encapsulates the touch type differentiation logic of the native application into a JS function.

[0035] In some optional implementations, listeners for touch events and stylus events are set up in the native application to monitor stylus-related events and gesture input-related events. For example, for stylus-related events, you can monitor stylusdown, stylusmove, stylusup, etc. For gesture input, you can monitor touchstart, touchmove, touchend, etc.

[0036] Extract the necessary operational parameters from these events, including coordinate sequence, pressure value, timestamp, touch area, and tilt angle. This information can be obtained through the API provided by the operating system. Then, perform logical judgment based on the collected data.

[0037] In some optional implementations, performing logical judgment based on the collected data specifically includes the following steps.

[0038] Step 1, calculate the velocity and acceleration based on the coordinate sequence and timestamp, and take the operation parameters, velocity, and acceleration as input data.

[0039] For adjacent coordinate points in the coordinate sequence, the velocity and acceleration are determined by combining the corresponding timestamps. The parameters during the operation (coordinate sequence, pressure value, timestamp, touch area, tilt angle), and the calculated velocity and acceleration are organized into input data.

[0040] Step 2: Divide the touch track into preset time windows and convert the input data of each time window into a feature vector.

[0041] Set the time window size according to actual needs, for example, set the time window to , starting from the start time of the touch track, according to the time window For example, if the first time window is from arrive , then all coordinate sequences, pressure values, timestamps, touch areas, tilt angles, speeds, and acceleration data within this time period are captured.

[0042] The input data in each time window are arranged and combined in a certain order to form a feature vector.

[0043] Step 3: retrieve a pre-trained touch type differentiation model, input each feature vector into the touch type differentiation model to obtain the probability that the current operation belongs to two touch types; touch types include stylus type and gesture input type.

[0044] The program introduces a pre-trained touch type differentiation model, which is trained using a machine learning algorithm. Each feature vector obtained in step 2 is sequentially input into the touch type differentiation model. The model calculates the probability of the current operation belonging to the two touch types of stylus input and gesture input based on the input feature vectors.

[0045] In some optional implementations, a lightweight temporal model (such as LSTM or 1D-CNN) is used as a touch type differentiation model, which is suitable for processing the temporal characteristics of the touch trajectory.

[0046] In some optional implementations, during the touch type differentiation model training process, touch type (stylus / gesture) is automatically annotated during data preparation using native layer logic (e.g., the toolType attribute), allowing users to manually correct misclassifications to enhance the dataset as a supervisory signal. First, an initial dataset (10,000+ samples) is collected, then partitioned into a training set (70%), a validation set (20%), and a test set (10%). The model is then trained and parameterized using the Adam optimizer and the cross-entropy loss function. Finally, the data is converted to the TensorFlow Lite format (.tflite) and deployed to the HarmonyOS native application.

[0047] In actual applications, the TFLite model is loaded into the native layer and inference is performed through the Hongmeng AI framework interface (such as HiAI). The real-time touch feature vector is input and the probability value of the stylus / gesture (such as [0.85, 0.15]) is output.

[0048] In some optional implementations, the cross-entropy loss function can effectively measure the difference between the model's predicted probability distribution and the true label. In this scenario, the pressure threshold, as a dynamic parameter, also needs to be optimized. Therefore, the adjustment of the pressure threshold is incorporated into the loss function optimization process.

[0049] The touch type discrimination model is trained using the following loss function,

[0050] Among them, the first item is the basic cross entropy loss, which ensures the accuracy of model classification.

[0051]

[0052] Where, is the real label, stylus type , gesture input type ; and They represent the probabilities that the current operation output by the touch type differentiation model belongs to the stylus type and the gesture input type respectively.

[0053] The second term is the pressure threshold adjustment term, which forces the model prediction to be consistent with the pressure threshold through the hinge loss form.

[0054]

[0055] in, is the weight coefficient, is the normalized pressure value, is the current training stress threshold.

[0056] When the pressure value is above the threshold, the probability of encouraging the stylus is close to 1; when the pressure value is below the threshold, the probability of encouraging the stylus is close to 0, which can more directly constrain the consistency of the model's prediction with the pressure threshold.

[0057] The third term is the regularization term, which constrains the threshold Around the initial value Adjust to avoid extreme deviations.

[0058]

[0059] Where, is the regularization coefficient, is the initial training stress threshold.

[0060] During training, the threshold is initialized , the model weights are randomly initialized. Forward propagation is performed, touch data (coordinates, pressure values, etc.) are input, and the model outputs the probability and . Calculate the total loss based on the true label and pressure value. Perform back propagation and optimization, and use the Adma optimizer to adjust the model parameters and thresholds. Perform gradient descent optimization.

[0061] For example, the user touches the screen ( , ), model output , but the pressure value is lower than the threshold. The adjustment item takes effect, the second item , the loss increases, forcing the model to reduce .

[0062] Step 4: Detect whether the larger probability among the probabilities of various touch types is greater than a preset probability threshold.

[0063] From the two touch type probabilities obtained in step 3, the probability of belonging to the stylus type and the probability of belonging to the gesture input type are obtained, the two probabilities are compared, and the larger probability value is determined and compared with the preset probability threshold.

[0064] Step 5: If yes, determine the touch type with a higher probability as the current touch type.

[0065] Step 6: If not, determine the current touch type based on the pressure value.

[0066] Step 6.1: Check whether the pressure value is greater than a preset pressure threshold.

[0067] Step 6.2: If yes, determine that the current touch type is a stylus type.

[0068] Step 6.3: If not, determine that the current touch type is a gesture input type.

[0069] The above steps, through multi-dimensional data analysis (such as speed, acceleration, and pressure) and machine learning models, can more accurately distinguish between stylus and gesture input, reducing misjudgments. Furthermore, when the machine learning model outputs ambiguous probabilities for stylus and gesture, the pressure threshold is used as a supplementary basis to further improve the accuracy of the distinction.

[0070] In some optional embodiments, when the probability values output by the machine learning model for stylus and gesture are ambiguous (for example, the probability is close to 0.5), the pressure threshold serves as a supplementary basis for judgment. For example, if the pressure value of a touch event is significantly higher than the threshold (such as 0.7), even if the model probability shows "gesture" (such as a probability of 0.55), it can still be corrected to "stylus." Conversely, if the pressure value is extremely low (such as 0.1), even if the model probability leans towards "stylus" (such as 0.6), it can still be determined as a "gesture." A stylus typically has pressure sensing capabilities, while the pressure value of a finger touch is lower. The pressure threshold directly reflects this physical difference and can verify the rationality of the model's prediction.

[0071] In some optional implementations, it is taken into account that different users may use different forces when using the stylus. For example, some users may lightly touch the screen to draw, while other users may press harder, and the touch screen pressure sensor sensitivity of different devices is different. For example, the maximum pressure value of one tablet is 1.0, while that of another may be 0.8. Furthermore, when the model's prediction confidence for a certain input is low (such as a probability of 0.5-0.6), combining it with a preset pressure threshold can improve the robustness of the classification. Therefore, a dynamic threshold can unify the user experience of different touch screen pressure sensor sensitivities of different devices. For example, the maximum pressure value of one tablet is 1.0, while that of another may be 0.8. In addition, when the model's prediction confidence for a certain input is low (such as a probability of 0.5-0.6), combining it with a pressure threshold can improve the robustness of the classification. Therefore, dynamically adjusting the pressure threshold to improve the accuracy of the judgment specifically includes the following steps.

[0072] Step 1: After determining the current touch type, monitor subsequent operations to determine whether they are misjudgments.

[0073] Step 2: Calculate the recent misjudgment rate using the following formula:

[0074] in, Indicates the Is it a misjudgment? If so, ,otherwise ; Indicates the The exponential decay weight of times, is the attenuation factor; The length of the window for calculating the recent misjudgment rate.

[0075] By calculating the recent misjudgment rate as described above and emphasizing the latest misjudgment events, we can quickly respond to changes in user behavior and avoid statistical lags caused by fixed window lengths.

[0076] Step 3: Modify the preset pressure threshold using the following formula: Current preset pressure threshold = previous preset pressure threshold - δ˙recent misjudgment rate; Among them, δ is the learning rate.

[0077] In some optional implementations, when the system determines a touch event to be of low confidence (probability between 0.3 and 0.7), a dialog box pops up asking the user: "Is this a misjudgment?" The user clicks "Yes" or "No" to submit feedback. If the user explicitly responds with "Yes," the current touch event is recorded as a misjudgment. In some optional implementations, subsequent user actions are monitored. If the user immediately undoes the touch event (e.g., erases the handwriting) after determining it was a stylus, the event is marked as a potential misjudgment. If the user taps the same area multiple times and then switches modes, the event is marked as a misjudgment.

[0078] For example, a user lightly touches the screen to draw a thin line (pressure value 0.3), and the model outputs a stylus probability of 0.6 (due to the obvious pen stroke trajectory). Because the pressure value is below the threshold (0.5), the system identifies it as a gesture (a misjudgment). The user manually switches to stylus mode, lowering the trigger threshold to 0.3, and subsequent similar operations are correctly recognized. For example, a user writes with force (pressure value 0.7), and the model outputs a gesture probability of 0.55 (due to the fast sliding trajectory resembling a gesture). The pressure value exceeds the threshold (0.5), and it is corrected to stylus input.

[0079] In some optional implementations, the gesture and stylus differentiation logic described above is encapsulated into a series of easily callable JS functions. A pointerType(event) function can be defined that receives an event object as a parameter and returns "gesture" or "stylus" depending on the event content.

[0080] SS2 builds a bridge layer to expose the JS function to the H5 page through the bridge layer, including registering a class on the native application side and declaring a property and a method in the class. The property is used to store the operation parameters required to execute the JS function, and the method is used to call the JS function.

[0081] In some alternative implementations, a class (such as TouchBridge) is defined in the native application to store touch parameters and invoke logic. This class is then registered with the WebView. This includes initializing the WebView within the native application's UI component and injecting the bridge class instance into the HTML5 page. This bridge layer can be implemented using the operating system's plugin mechanism, allowing the HTML5 page to call native functionality.

[0082] SS3: When the user performs an operation, the native application obtains the operation parameters and stores them in the class attributes. The H5 page calls the JS function through the bridge layer, obtains the current touch type based on the operation parameters, and triggers the corresponding operation or interface feedback based on the current touch type.

[0083] In some optional implementations, an event listener is pre-set to monitor stylus-related events and gesture input-related events; in response to the event listener being triggered, operation parameters are extracted from the monitored stylus-related events and gesture input-related events; and the operation parameters are stored in class attributes.

[0084] In some optional implementations, the H5 page extracts operation parameters from the attributes of the class; uses the operation parameters as input to the JS function, and executes the JS function to obtain the current touch type.

[0085] The H5 page calls the encapsulated JS function through the bridge layer and obtains the operation parameters: the operation parameters are extracted from the class properties and used as input to the JS function. The JS function is executed and, based on the operation parameters, calculates and obtains the current touch type, which includes stylus type and gesture input type. The specific logic process is described in step SS1 and will not be repeated here. Based on the current touch type, the corresponding action is triggered or the interface feedback is displayed. For example, if stylus input is detected, more refined drawing tools may be provided; if gesture input is detected, zooming, sliding, and other operations may be performed.

[0086] This step accurately distinguishes between stylus and gesture input types, providing users with a more precise interactive experience. For example, in drawing applications, stylus input allows for more detailed drawing, while gesture input enables operations like zooming and panning, preventing misoperations. Furthermore, H5 pages offer excellent cross-platform capabilities. By integrating with native applications through a bridging layer, they enable a consistent interactive experience across different devices and operating systems. Furthermore, encapsulating the touch type determination logic into a JS function facilitates H5 page calls, reducing duplication of work during development and improving efficiency.

[0087] The above describes in detail an embodiment of a method for an H5 page to respond to touch operations. Based on the method for an H5 page to respond to touch operations described in the above embodiment, an embodiment of the present invention also provides a system for an H5 page to respond to touch operations corresponding to the method.

[0088] Figure 2 This is a schematic block diagram of a system structure for responding to touch operations on an H5 page provided by an embodiment of the present invention. In this embodiment, the system 200 for responding to touch operations on an H5 page can be divided into multiple functional modules according to the functions performed by the system, such as Figure 2 The functional modules may include: a differentiation logic encapsulation module 210, a bridge layer construction module 220, and an H5 page response module 230. The module referred to in the present invention refers to a series of computer program segments that can be executed by at least one processor and can perform fixed functions, which are stored in a memory.

[0089] The differentiation logic encapsulation module 210 is used to encapsulate the touch type differentiation logic of the native application into a JS function.

[0090] The bridge layer construction module 220 is used to build a bridge layer and expose the JS function to the H5 page through the bridge layer, including registering a class on the native application side and declaring a property and a method in the class, where the property is used to store the operation parameters required to execute the JS function, and the method is used to call the JS function.

[0091] The H5 page response module 230 is used to obtain the operation parameters on the native application side and store them in the class attributes when the user performs an operation. The H5 page calls the JS function through the bridge layer, obtains the current touch type based on the operation parameters, and triggers corresponding operations or interface feedback according to the current touch type.

[0092] The system for the H5 page responding to touch operations of this embodiment is used to implement the aforementioned method for the H5 page responding to touch operations. Therefore, the specific implementation methods of the system can be seen in the embodiment part of the method for the H5 page responding to touch operations in the previous text. Therefore, its specific implementation methods can refer to the descriptions of the corresponding embodiments of each part and will not be elaborated here.

[0093] In addition, since the system for responding to touch operations on an H5 page in this embodiment is used to implement the aforementioned method for responding to touch operations on an H5 page, its function corresponds to that of the aforementioned method and will not be described in detail here.

[0094] Figure 3 The present invention provides a schematic diagram of a terminal 300, including a processor 310, a memory 320, and a communication unit 330. The processor 310 is configured to implement the following steps when executing a program for an H5 page stored in the memory 320 to respond to a touch operation: The differentiation logic encapsulation module is used to encapsulate the touch type differentiation logic of the native application into a JS function; The bridge layer construction module is used to build a bridge layer and expose JS functions to H5 pages through the bridge layer. This includes registering a class on the native application side and declaring a property and a method in the class. The property is used to store the operation parameters required to execute the JS function, and the method is used to call the JS function. The H5 page response module is used to obtain the operation parameters on the native application side and store them in the class attributes when the user performs an operation. The H5 page calls the JS function through the bridge layer, obtains the current touch type based on the operation parameters, and triggers the corresponding operation or interface feedback according to the current touch type.

[0095] The terminal 300 includes a processor 310, a memory 320, and a communication unit 330. These components communicate via one or more buses. Those skilled in the art will appreciate that the server structure shown in the figure does not limit the present invention; it may be a bus structure or a star structure, and may include more or fewer components than shown, or combine certain components, or arrange the components differently.

[0096] Memory 320 can be used to store execution instructions of processor 310. Memory 320 can be implemented by any type of volatile or non-volatile storage device, or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk, or optical disk. When the execution instructions in memory 320 are executed by processor 310, terminal 300 can perform some or all of the steps in the above-described method embodiments.

[0097] The processor 310 is the control center of the storage terminal. It uses various interfaces and lines to connect various parts of the entire electronic terminal. It executes various functions of the electronic terminal and / or processes data by running or executing software programs and / or modules stored in the memory 320, and calling data stored in the memory. The processor can be composed of an integrated circuit (IC), for example, it can be composed of a single packaged IC, or it can be composed of multiple packaged ICs with the same or different functions. For example, the processor 310 can only include a central processing unit (CPU). In the embodiment of the present invention, the CPU can be a single computing core or multiple computing cores.

[0098] The communication unit 330 is configured to establish a communication channel so that the storage terminal can communicate with other terminals, receive user data sent by other terminals, or send user data to other terminals.

[0099] The present invention also provides a computer storage medium, wherein the storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM).

[0100] The present invention also provides a computer storage medium, wherein the storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM).

[0101] The computer storage medium stores a program for responding to touch operations on an H5 page. When the program for responding to touch operations on an H5 page is executed by a processor, the following steps are implemented: The differentiation logic encapsulation module is used to encapsulate the touch type differentiation logic of the native application into a JS function; The bridge layer construction module is used to build a bridge layer and expose JS functions to H5 pages through the bridge layer. This includes registering a class on the native application side and declaring a property and a method in the class. The property is used to store the operation parameters required to execute the JS function, and the method is used to call the JS function. The H5 page response module is used to obtain the operation parameters on the native application side and store them in the class attributes when the user performs an operation. The H5 page calls the JS function through the bridge layer, obtains the current touch type based on the operation parameters, and triggers the corresponding operation or interface feedback according to the current touch type.

[0102] Those skilled in the art will clearly understand that the techniques in the embodiments of the present invention can be implemented using software plus a necessary general-purpose hardware platform. Based on this understanding, the technical solutions in the embodiments of the present invention, or the portion that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium such as a USB flash drive, a mobile hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, among other media capable of storing program code, and includes instructions for causing a computer terminal (which can be a personal computer, a server, or a second terminal, a network terminal, etc.) to execute all or part of the steps of the methods described in various embodiments of the present invention.

[0103] In the several embodiments provided by the present invention, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0104] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0105] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0106] The above description of the disclosed embodiments is intended to enable one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be readily apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention is not limited to the embodiments shown herein but is intended to conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for responding to touch operations on an H5 page, characterized in that: The following steps are involved: Encapsulate the touch type differentiation logic of native applications into JS functions; Build a bridge layer to expose the JS function to the H5 page through the bridge layer. This involves registering a class on the native application side and declaring a property and a method in the class. The property is used to store the operation parameters required to execute the JS function, and the method is used to call the JS function. When the user performs an operation, the native application side obtains the operation parameters and stores them in the class attributes. The H5 page calls the JS function through the bridge layer, obtains the current touch type based on the operation parameters, and triggers the corresponding operation or interface feedback according to the current touch type.

2. The method for responding to touch operations on an H5 page according to claim 1, wherein: When a user performs an operation, the native application obtains the operation parameters and stores them in the class attributes, including: Pre-set event listeners to monitor stylus-related events and gesture input-related events; In response to the event listener being triggered, extracting operation parameters from the monitored stylus-related events and gesture input-related events; Store the operation parameters in attributes of the class.

3. The method for responding to touch operation on an H5 page according to claim 2, characterized in that: The H5 page calls the JS function through the bridge layer and obtains the current touch type based on the operation parameters, including: Extract operation parameters from class attributes; Use the operation parameter as the input of the JS function and execute the JS function to obtain the current touch type.

4. The method for responding to touch operation on an H5 page according to claim 3, characterized in that: Operation parameters include coordinate sequence, pressure value, timestamp, touch area, and tilt angle; Use the operation parameters as the input of the JS function and execute the JS function to obtain the current touch type, including: Calculate velocity and acceleration based on coordinate sequence and timestamp, taking operation parameters, velocity, acceleration as input data; The touch track is divided into preset time windows, and the input data of each time window is converted into a feature vector; Retrieving a pre-trained touch type differentiation model, inputting each feature vector into the touch type differentiation model to obtain the probability that the current operation belongs to one of two touch types; touch types include stylus type and gesture input type; Detect whether the larger probability among the probabilities of various touch types is greater than a preset probability threshold; If so, determine the touch type with a higher probability as the current touch type; If not, determine the current touch type based on the pressure value.

5. The method for responding to touch operation on an H5 page according to claim 4, characterized in that: The touch type discrimination model is trained using the following loss function, in, ; Where, is the real label, stylus type , gesture input type ; and They represent the probability that the current operation output by the touch type differentiation model belongs to the stylus type and the gesture input type respectively; in, is the weight coefficient; ； Where, is the normalized pressure value, is the current training stress threshold; in, ; Where, is the regularization coefficient, is the initial training stress threshold.

6. The method for responding to touch operation on an H5 page according to claim 4, characterized in that: Determine the current touch type based on the pressure value, including: Detect whether the pressure value is greater than the preset pressure threshold; If so, determine that the current touch type is a stylus type; If not, it is determined that the current touch type is a gesture input type.

7. The method for responding to touch operation on an H5 page according to claim 6, characterized in that: The method further comprises the following steps: After determining the current touch type, monitor subsequent operations to determine whether there is a misjudgment; The recent misjudgment rate is calculated using the following formula: in, Indicates the Is it a misjudgment? If so, ,otherwise ; Indicates the The exponential decay weight of times, is the attenuation factor; The length of the window used to calculate the recent misjudgment rate; Correct the preset pressure threshold using the following formula: Current preset pressure threshold = previous preset pressure threshold - δ˙recent misjudgment rate; Among them, δ is the learning rate.

8. A system for responding to touch operations on H5 pages, characterized in that: include: The differentiation logic encapsulation module is used to encapsulate the touch type differentiation logic of the native application into a JS function; The bridge layer construction module is used to build a bridge layer and expose JS functions to H5 pages through the bridge layer. This includes registering a class on the native application side and declaring a property and a method in the class. The property is used to store the operation parameters required to execute the JS function, and the method is used to call the JS function. The H5 page response module is used to obtain the operation parameters on the native application side and store them in the class attributes when the user performs an operation. The H5 page calls the JS function through the bridge layer, obtains the current touch type based on the operation parameters, and triggers the corresponding operation or interface feedback according to the current touch type.

9. A terminal, characterized in that: include: Memory, used to store programs that respond to touch operations on the H5 page; A processor is used to implement the steps of the method for responding to touch operations on an H5 page as described in any one of claims 1 to 7 when executing the program for responding to touch operations on the H5 page.

10. A computer-readable storage medium, characterized in that The readable storage medium stores a program for the H5 page to respond to touch operations. When the program for the H5 page to respond to touch operations is executed by the processor, the steps of the method for the H5 page to respond to touch operations as described in any one of claims 1 to 7 are implemented.

Images