A cross-platform code scanning component construction method and code scanning method based on uView

Abstract

The present invention relates to the field of code scanning, and specifically discloses a cross-platform code scanning component construction method and a code scanning method based on uView, which use the code scanning interface of uni-app to construct a native code scanning interface call module for a first type of platform; use the plug-in mechanism of uni-app to construct a native plug-in call module for a second type of platform; use the streaming device access interface of uni-app to construct a streaming device call module for a third type of platform, and construct a streaming data processing module for the third type of platform; construct a code scanning result processing module; use the conditional compilation of uni-app to compile each code scanning function module into a code block compatible with each platform; configure the upper-layer call interface and the operating environment detection mechanism for the code block, and encapsulate it into a code scanning component; and configure the code scanning component to the first type of platform, the second type of platform, and the third type of platform respectively. The present invention realizes cross-platform scanning function development without the need for separate coding for each platform, reducing development costs and maintenance difficulties, and improving development efficiency.

Description

Technical Field

[0001] The present invention relates to the field of code scanning, and in particular to a method for constructing a cross-platform code scanning component based on uView and a code scanning method. Background Art

[0002] In today's smart device and internet environment, QR codes and barcodes are widely used in various fields, such as electronic payment, product tracking, logistics management, and marketing promotion. However, because different platforms (such as iOS, Android, mini-programs, and the web) rely on different operating systems and development environments, their technology stacks and functional support vary. As a result, developers often need to develop code scanning and recognition functions separately for each platform, increasing development costs, making maintenance more difficult, and affecting development efficiency. Summary of the Invention

[0003] To solve the above problems, the present invention provides a cross-platform code scanning component construction method and code scanning method based on uView, which realizes the development of cross-platform scanning functions without the need to encode code separately for each platform, reduces development costs and maintenance difficulty, and improves development efficiency.

[0004] In a first aspect, the technical solution of the present invention provides a method for constructing a cross-platform code scanning component based on uView, comprising the following steps:

[0005] Use uni-app's code scanning interface to build a native code scanning interface calling module for the first type of platform;

[0006] Use uni-app's plugin mechanism to build native plugin call modules for the second type of platform;

[0007] Use the uni-app streaming device access interface to build a streaming device call module for the third type of platform, and build a streaming data processing module for the third type of platform;

[0008] Build a QR code scanning result processing module;

[0009] Use uni-app's conditional compilation to compile the native code scanning interface calling module, native plug-in calling module, streaming device calling module, streaming data processing module, and code scanning result processing module into code blocks compatible with each platform;

[0010] Configure the upper-layer call interface and runtime environment detection mechanism for the code block, and encapsulate it into a code scanning component;

[0011] Configure the code scanning components to the first, second, and third types of platforms respectively.

[0012] In an optional implementation, the streaming device access interface of uni-app is used to build a streaming device call module for the third type of platform, specifically including:

[0013] A third streaming device call permission detection unit is constructed to detect whether the user has the streaming device call permission. If the user does not have the call permission, the user is prompted and the code scanning process is terminated.

[0014] Build a streaming device call execution unit to call the streaming device of the third type of platform to obtain video streams in real time.

[0015] In an optional embodiment, a streaming media data processing module is constructed for the third type of platform, specifically including:

[0016] Build a streaming data storage unit to render the acquired video stream into a canvas element;

[0017] Build an image parsing unit to periodically capture canvas images and parse the QR code or barcode image through the decoding library to obtain the scanning result. When the parsing fails, prompt the user and terminate the scanning process.

[0018] In an optional implementation, building a native plug-in calling module for the second type of platform specifically includes:

[0019] Construct a second streaming media device calling permission detection unit to detect whether the streaming media device calling permission is available. If the calling permission is not available, the user is prompted and the code scanning process is terminated;

[0020] Build a native plug-in call execution unit to call the native plug-in of the second type of platform.

[0021] In an optional embodiment, a code scanning result processing module is constructed, specifically including:

[0022] Constructing a third code scanning result format processing unit to convert the code scanning result into a target format;

[0023] A third scanning result feedback unit is constructed to feed back the scanning result in the target format to the user.

[0024] In a second aspect, the technical solution of the present invention provides a code scanning method, which is implemented by a code scanning component constructed based on any of the above methods, and the method includes the following steps:

[0025] Respond to the code scanning request and call the code scanning component through the upper-layer calling interface;

[0026] Run the QR code scanning component and detect the current operating environment type through the operating environment detection mechanism;

[0027] Load the appropriate code scanning function module according to the current operating environment type;

[0028] Run the loaded code scanning function module to scan the code.

[0029] In an optional embodiment, loading an adapted code scanning function module according to the current operating environment type specifically includes:

[0030] If the current operating environment type is the first type of platform, then load the native code scanning interface calling module and the code scanning result processing module;

[0031] If the current operating environment type is the second type of platform, the native plug-in calling module and the code scanning result processing module are loaded;

[0032] If the current operating environment type is the third type platform, the streaming device calling module, streaming data processing module and code scanning result processing module are loaded.

[0033] In an optional embodiment, running the loaded code scanning function module to scan the code specifically includes:

[0034] If the current operating environment type is the first type platform, call and run the native code scanning interface calling module to call the native code scanning interface of the first type platform to scan the code;

[0035] Convert the scan result to the target format;

[0036] The scanning result in the target format is fed back to the user.

[0037] In an optional embodiment, running the loaded code scanning function module to scan the code specifically includes:

[0038] If the current operating environment type is the second type platform, call and run the native plug-in calling module to check whether it has the streaming device calling permission;

[0039] If the user does not have the calling permission, the user will be prompted and the scanning process will be terminated;

[0040] If the calling permission is available, the native plug-in of the second type of platform is called to scan the code;

[0041] Convert the scan result to the target format;

[0042] The scanning result in the target format is fed back to the user.

[0043] In an optional embodiment, running the loaded code scanning function module to scan the code specifically includes:

[0044] If the current operating environment type is the third type platform, call and run the streaming device calling module to check whether the streaming device calling permission is available;

[0045] If the user does not have the calling permission, the user will be prompted and the scanning process will be terminated;

[0046] If the calling permission is available, the streaming media device of the third-category platform is called to obtain the video stream in real time;

[0047] Render the acquired video stream into the canvas element;

[0048] Periodically capture the canvas image and parse the QR code or barcode image through the decoding library to obtain the scanning result. If the parsing fails, the user will be prompted and the scanning process will be terminated.

[0049] Convert the scan result to the target format;

[0050] The scanning result in the target format is fed back to the user.

[0051] The present invention provides a cross-platform code scanning component construction method and code scanning method based on uView, which have the following beneficial effects compared to the prior art: using the cross-platform development framework of uView and uni-app to develop corresponding scanning function modules for each platform, and encapsulating them into a unified code scanning component, running the code scanning component to achieve a unified cross-platform code scanning function, and developers do not need to write separate code for each platform. By using the cross-platform development framework of uView and uni-app, the code scanning component greatly simplifies the cross-platform development work, improves development efficiency and code reusability. Developed with individual functional modules, the code scanning component has good scalability, can be flexibly customized according to different business scenarios, and supports a variety of code scanning scenarios and business needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0052] In order to more clearly illustrate the embodiments of the present invention or the technical solutions of the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0053] Figure 1 This is a flow chart of a method for constructing a cross-platform code scanning component based on uView provided by an embodiment of the present invention.

[0054] Figure 2 This is a flowchart of a code scanning method provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0055] In order to enable those skilled in the art to better understand the present invention, the present invention is further described in detail below with reference to the accompanying drawings and specific embodiments. Obviously, the embodiments described are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0056] 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.

[0057] The key terms appearing in the present invention are explained below.

[0058] uView: A UI framework designed specifically for uni-app.

[0059] uni-app: It is a framework for developing all front-end applications using Vue.js. Developers write a set of codes and can publish them to multiple platforms such as iOS, Android, Web (responsive), various mini-programs, quick apps, etc.

[0060] Figure 1 This is a flow chart of a method for constructing a cross-platform code scanning component based on uView provided by an embodiment of the present invention. The method for constructing a cross-platform code scanning component based on uView provided by an embodiment of the present invention is executed by a computer device. According to different requirements, the order of the steps in the flow chart can be changed, and some can be omitted.

[0061] The code scanning component constructed in this embodiment is developed based on the cross-platform capabilities of the uView framework, and uses the conditional compilation mechanism of uni-app to call the corresponding code scanning interface for different platforms to ensure that the component can work correctly on all platforms (WeChat mini-programs, H5 and mobile applications). Figure 1 As shown, the method includes the following steps.

[0062] S1, use uni-app's code scanning interface to build a native code scanning interface calling module for the first type of platform.

[0063] The first type of platform in this embodiment is the WeChat mini-program, which provides a stable code scanning API, "wx.scanCode()," that can quickly and accurately identify QR codes and barcodes. Based on the WeChat mini-program's code scanning API, this embodiment uses the uni-app fixed API interface uni.scanCode() to build a native code scanning interface call module. When the native code scanning interface call module is called, the code scanning API "wx.scanCode()" is automatically called to scan the code.

[0064] Developers only need to call component methods without directly accessing the underlying API.

[0065] S2, uses the uni-app plug-in mechanism to build a native plug-in call module for the second type of platform.

[0066] The second type of platform in this embodiment is a mobile application (APP). This embodiment uses the uni-app plugin mechanism to build a native plugin call module. Running this native plugin call module invokes the mobile application plugin to access the mobile device's camera for code scanning. When accessing the camera, user authorization mechanisms are followed to ensure full protection of user privacy. Specifically, building the native plugin call module includes the following steps.

[0067] S2.1, construct a second streaming media device calling permission detection unit to detect whether the streaming media device calling permission is available. If the calling permission is not available, the user is prompted and the code scanning process is terminated.

[0068] S2.2, build a native plug-in calling execution unit to call the native plug-in of the second type of platform.

[0069] This embodiment constructs a second streaming device call permission detection unit and a native plug-in call execution unit. When running the native plug-in call module, the second streaming device call permission detection unit is first executed to detect whether the user has permission to call the camera. If not, the user is prompted and the scanning process is terminated. If so, the native plug-in call execution unit is executed to run the native plug-in to call the camera. It should be noted that during the scanning process, the component does not actively upload image data, and all QR code parsing is completed locally. Native plug-in third-party libraries (such as ZXing or ZBar) implement efficient scanning and recognition functions. Libraries such as ZXing support parsing of multiple barcode formats, providing fast and accurate scanning results.

[0070] S3, uses the streaming device access interface of uni-app to build a streaming device calling module for the third type of platform, and builds a streaming data processing module for the third type of platform.

[0071] The third platform in this embodiment is the H5 platform. Since the H5 platform cannot directly access native device functions, it must be implemented through the browser. This embodiment uses WebRTC technology to access the device's camera, obtain a real-time video stream, and perform image processing on the video stream to enable code scanning. When accessing the camera, the user authorization mechanism is followed to ensure that user privacy is fully protected.

[0072] This embodiment uses the streaming device access interface of uni-app to build a streaming device calling module for the third type of platform, which specifically includes the following steps.

[0073] S3.1, construct a third streaming media device calling permission detection unit to detect whether the streaming media device calling permission is available. If the calling permission is not available, prompt the user and terminate the code scanning process.

[0074] S3.2, construct a streaming device call execution unit to call the streaming device of the third type of platform to obtain video streams in real time.

[0075] For example, the native WEb API interface navigator.mediaDevices.getUserMedia is called to obtain the video stream of the camera.

[0076] This embodiment implements a third streaming device call permission detection unit and a streaming device call execution unit. When the streaming device call module is executed, the third streaming device call permission detection unit first checks whether the user has permission to call the camera. If not, a prompt is displayed to the user and the scanning process is terminated. If so, the streaming device call execution unit is executed to call the camera to obtain the video stream. It should be noted that during the scanning process, the component does not actively upload image data; all QR code parsing is performed locally.

[0077] This embodiment constructs a streaming media data processing module for the third type of platform, which specifically includes the following steps.

[0078] S3.3, construct a streaming data storage unit to render the acquired video stream into a canvas element.

[0079] S3.4, build an image parsing unit to periodically capture the canvas image and parse the QR code or barcode image through the decoding library to obtain the scanning result. When the parsing fails, prompt the user and terminate the scanning process.

[0080] This embodiment calls the native web API interface navigator.mediaDevices.getUserMedia to obtain the camera's video stream. After acquiring an image using canvas, the jsQR plug-in is used to identify the image's content. For example, the video stream is parsed using JavaScript to parse the QR code or barcode image, which is then processed using a specialized decoding library (such as "jsQR"). The streaming device call module and streaming data processing module of this embodiment provide an error handling mechanism to ensure that the user is properly notified and the scanning process terminates in cases such as unauthorized camera access, blurred images, or parsing failures.

[0081] S4, build the code scanning result processing module.

[0082] S4.1, construct a third code scanning result format processing unit to convert the code scanning result into a target format.

[0083] S4.2, construct a third scanning result feedback unit to feed back the scanning result in the target format to the user.

[0084] After the code is scanned successfully, this embodiment returns the scan results to the developer in the same format to facilitate subsequent processing.

[0085] S5, use uni-app's conditional compilation to write the native code scanning interface call module, native plug-in call module, streaming device call module, streaming data processing module, and code scanning result processing module into code blocks compatible with various platforms.

[0086] For example, uniapp's #ifdef and #endif conditional compilation is used to output code blocks that are compatible in different platforms.

[0087] S6, configure the upper-layer calling interface and runtime environment detection mechanism for the code block, and encapsulate it into a code scanning component.

[0088] This embodiment provides a unified scanning component calling interface, automatically detects the operating environment and loads the adapted scanning function module (including the native scanning interface calling module, the native plug-in calling module, the streaming device calling module, the streaming data processing module, and the scanning result processing module) to perform the scanning operation. Developers can call the scanning function in the same way on different platforms without having to understand the platform differences.

[0089] S7, configure the code scanning component to the first type platform, the second type platform, and the third type platform respectively.

[0090] Finally, the code scanning component is configured to the first type of platform, the second type of platform, and the third type of platform. When the user scans the code, the code scanning component is automatically called to scan the code.

[0091] The code scanning component constructed in this embodiment uses the cross-platform development framework of uView and uni-app to develop corresponding scanning function modules for each platform, and encapsulates them into a unified code scanning component. Running the code scanning component realizes the unified cross-platform scanning function, and developers do not need to write separate code for each platform. By using the cross-platform development framework of uView and uni-app, the code scanning component greatly simplifies cross-platform development work, improves development efficiency and code reusability. Developing with each separate functional module makes the code scanning component have good scalability, can be flexibly customized according to different business scenarios, and supports a variety of code scanning scenarios and business needs.

[0092] The above describes in detail an embodiment of a method for constructing a cross-platform code scanning component based on uView. Based on the method for constructing a cross-platform code scanning component based on uView described in the above embodiment, an embodiment of the present invention also provides a code scanning method corresponding to this method, which is implemented based on the code scanning component constructed based on the above embodiment.

[0093] Figure 2 This is a flowchart of a code scanning method provided in an embodiment of the present invention. The code scanning method provided in an embodiment of the present invention is executed by a computer device. According to different requirements, the order of the steps in the flowchart can be changed, and some can be omitted.

[0094] SS1 responds to the code scanning request and calls the code scanning component through the upper-layer calling interface.

[0095] In this embodiment, when the user clicks the scan code button, the platform obtains the scan code request and then calls the scan code component through the upper-layer calling interface.

[0096] SS2 runs the code scanning component and detects the current operating environment type through the operating environment detection mechanism.

[0097] The code scanning component of this embodiment calls the corresponding code scanning API under the current platform through conditional compilation #ifdef and #endif and the platform detection mechanism uni.getSystemInfoSync().platform. Specifically, it first detects the current operating environment type and then loads the adapted code scanning function module.

[0098] SS3, loads the appropriate code scanning function module according to the current operating environment type.

[0099] SS3.1: If the current operating environment type is the first type of platform, the native code scanning interface call module and the code scanning result processing module are loaded.

[0100] SS3.2: If the current operating environment type is the second type of platform, the native plug-in calling module and the code scanning result processing module are loaded.

[0101] SS3.3: If the current operating environment type is the third type platform, the streaming device call module, streaming data processing module and code scanning result processing module are loaded.

[0102] The operating environment types of this embodiment include the first type of platform (WeChat applet), the second type of platform (mobile application), and the third type of platform (H5 platform). The three types of platforms correspond to different code scanning function modules and then run.

[0103] SS4, run the loaded code scanning function module to scan the code.

[0104] SS4.1: If the current operating environment type is the first type platform, call and run the native code scanning interface calling module to call the native code scanning interface of the first type platform to scan the code, and execute step SS4.8.

[0105] SS4.2, if the current operating environment type is the second type platform, call and run the native plug-in calling module to check whether it has the streaming device calling permission.

[0106] SS4.3: If the user does not have the calling permission, the user is prompted and the scanning process is terminated. If the user has the calling permission, the native plug-in of the second type of platform is called to scan the code and step SS4.8 is executed.

[0107] SS4.4, if the current operating environment type is the third type platform, call and run the streaming media device calling module to check whether the streaming media device calling permission is available.

[0108] SS4.5: If the user does not have the calling permission, the user will be prompted and the scanning process will be terminated. If the user has the calling permission, the streaming media device of the third-type platform will be called to obtain the video stream in real time.

[0109] SS4.6, render the acquired video stream into a canvas element.

[0110] SS4.7, periodically captures the canvas image and parses the QR code or barcode image through the decoding library, obtains the scanning result and executes step SS4.8. If the parsing fails, the user is prompted and the scanning process is terminated.

[0111] SS4.8, convert the scan result into the target format.

[0112] SS4.9, to feed back the scanning results in the target format to the user.

[0113] In this embodiment, upon receiving a scan request, the scanning component is invoked, automatically detecting the operating environment type and loading the corresponding scanning function module based on the operating environment type. For the first type of platform (WeChat mini-program), "wx.scanCode()" is called to scan the code. For the second type of platform (mobile application), camera access permissions are first detected. After obtaining camera access permissions, the original plug-in is called and executed to enable the camera to scan and parse the code. For the third type of platform (H5 platform), based on camera access permissions, the video stream image is obtained through navigator.mediaDevices.getUserMedia and the jsQR parsing algorithm is called to obtain the scan result. The scan result is converted to a unified format on either platform and fed back to the user.

[0114] The above disclosure is only a preferred embodiment of the present invention, but the present invention is not limited thereto. Any non-creative changes that can be thought of by those skilled in the art, as well as several improvements and modifications made without departing from the principles of the present invention, should fall within the scope of protection of the present invention.

Claims

1. A method for constructing a cross-platform code scanning component based on uView, characterized in that: The following steps are involved: Use uni-app's code scanning interface to build a native code scanning interface calling module for the first type of platform; Use uni-app's plugin mechanism to build native plugin call modules for the second type of platform; Use the uni-app streaming device access interface to build a streaming device call module for the third type of platform, and build a streaming data processing module for the third type of platform; Build a QR code scanning result processing module; Use uni-app's conditional compilation to compile the native code scanning interface calling module, native plug-in calling module, streaming device calling module, streaming data processing module, and code scanning result processing module into code blocks compatible with each platform; Configure the upper-layer calling interface and runtime environment detection mechanism for the code block and encapsulate it into a code scanning component. Configure the code scanning component to the first, second, and third platforms respectively. Use the uni-app streaming device access interface to build a streaming device calling module for the third platform. Specifically, A third streaming device call permission detection unit is constructed to detect whether the user has the streaming device call permission. If the user does not have the call permission, the user is prompted and the code scanning process is terminated. Construct a streaming device call execution unit to call the streaming device of the third type platform to obtain video streams in real time; Build native plug-in call modules for the second type of platform, including: A second streaming device call permission detection unit is constructed to detect whether the streaming device call permission is available. If the call permission is not available, a prompt is given to the user and the code scanning process is terminated. A native plug-in call execution unit is constructed to call the native plug-in of the second type of platform. Build a streaming data processing module for the third type of platform, including: Build a streaming data storage unit to render the acquired video stream into a canvas element; build an image parsing unit to periodically capture canvas images and parse the QR code or barcode image through the decoding library to obtain the scan result. If the parsing fails, the user will be prompted and the scanning process will be terminated. Build a code scanning result processing module, including: Constructing a third code scanning result format processing unit to convert the code scanning result into a target format; A third scanning result feedback unit is constructed to feed back the scanning result in the target format to the user.

2. A code scanning method, characterized in that: The code scanning component constructed based on the method of claim 1 is implemented, and the method includes the following steps: Respond to the code scanning request and call the code scanning component through the upper-layer calling interface; Run the QR code scanning component and detect the current operating environment type through the operating environment detection mechanism; Load the appropriate code scanning function module according to the current operating environment type; Run the loaded code scanning function module to scan the code; Run the loaded code scanning function module to scan the code, including: If the current operating environment type is the second type platform, call and run the native plug-in calling module to check whether it has the streaming device calling permission; If the user does not have the calling permission, the user will be prompted and the scanning process will be terminated; If the calling permission is available, the native plug-in of the second type of platform is called to scan the code; Convert the scan result to the target format; Feedback the scanning result of the target format to the user; Load the appropriate code scanning function module according to the current operating environment type, including: If the current operating environment type is the first type of platform, the native code scanning interface calling module and the code scanning result processing module are loaded; If the current operating environment type is the second type of platform, the native plug-in calling module and the code scanning result processing module are loaded; If the current operating environment type is the third type platform, then load the streaming device calling module, streaming data processing module and code scanning result processing module; Run the loaded code scanning function module to scan the code, including: If the current operating environment type is the first type platform, call and run the native code scanning interface calling module to call the native code scanning interface of the first type platform to scan the code; Convert the scan result to the target format; Feedback the scanning result of the target format to the user; Run the loaded code scanning function module to scan the code, including: If the current operating environment type is the third type platform, call and run the streaming device calling module to check whether the streaming device calling permission is available; If the user does not have the calling permission, the user will be prompted and the scanning process will be terminated; If the calling permission is available, the streaming media device of the third-category platform is called to obtain the video stream in real time; the obtained video stream is rendered into the canvas element; Periodically capture the canvas image and parse the QR code or barcode image through the decoding library to obtain the scanning result. If the parsing fails, the user will be prompted and the scanning process will be terminated. Convert the scan result to the target format; The scanning result in the target format is fed back to the user.

Images