Cross-platform code scanning component construction method based on uView and code scanning method

Abstract

The invention relates to the field of code scanning, and particularly discloses a uView-based cross-platform code scanning component construction method and a code scanning method, and the method comprises the steps: constructing a native code scanning interface calling module for a first type of platform through a code scanning interface of a uniapp; constructing a native plug-in calling module for the second class platform by using a plug-in mechanism of a unit-app; constructing a streaming media equipment calling module for the third-class platform by using a streaming media equipment access interface of a uniapp, and constructing a streaming media data processing module for the third-class platform; constructing a code scanning result processing module; each code scanning function module is compiled into a code block compatible with each platform by using condition compilation of a unit-app; configuring an upper layer calling interface and a running environment detection mechanism for the code block, and packaging the code block into a code scanning component; and the code scanning assembly is configured to the first type of platform, the second type of platform and the third type of platform. According to the method, cross-platform scanning function development is realized, codes do not need to be independently coded for each platform, the development cost and maintenance difficulty are reduced, and the development efficiency is improved.

Description

Technical Field

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

[0002] In today's smart devices and Internet environment, QR codes and barcodes are widely used in many fields, such as electronic payment, product tracking, logistics management, and marketing promotion. However, since different platforms (such as iOS, Android, mini-programs, and the Web) are based on different operating systems and development environments, their technology stacks and functional support are different, so when developers implement code scanning and recognition functions, they often need to develop separately for different platforms, which increases development costs and maintenance difficulties, and affects 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 a code scanning method based on uView, so as to realize cross-platform scanning function development without the need to encode code separately for each platform, thereby reducing development costs and maintenance difficulties and improving 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: 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 streaming device access interface of uni-app to build a streaming device calling module for the third-type platform, and build a streaming data processing module for the third-type 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 that are compatible with each platform; Configure the upper-layer calling interface and operating environment detection mechanism for the code block, and encapsulate it into a code scanning component; Configure the code scanning components to the first, second, and third platforms respectively.

[0005] In an optional implementation, the streaming device access interface of uni-app is used to construct a streaming device calling module for the third type of platform, specifically including: A third streaming media device calling permission detection unit is constructed 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; Build a streaming media device call execution unit to call the streaming media device of the third type of platform to obtain video streams in real time.

[0006] In an optional implementation, a streaming media data processing module is constructed for the third type of platform, specifically 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 scanning result. When the parsing fails, prompt the user and terminate the scanning process.

[0007] In an optional implementation, a native plug-in calling module is constructed for the second type of platform, specifically including: A second streaming media device calling permission detection unit is constructed to detect whether the streaming media device calling permission is available. If the calling 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.

[0008] In an optional implementation, a code scanning result processing module is constructed, specifically 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.

[0009] 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 comprises the following steps: Respond to the code scanning request and call the code scanning component through the upper-layer calling interface; Run the 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.

[0010] In an optional implementation, loading an adapted code scanning function module according to the current operating environment type specifically includes: 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 a third-type platform, the streaming media device calling module, streaming media data processing module and code scanning result processing module are loaded.

[0011] In an optional implementation, running the loaded code scanning function module to scan the code specifically includes: If the current operating environment type is the first type of platform, call and run the native code scanning interface calling module to call the native code scanning interface of the first type of platform to scan the code; Convert the scan results to the target format; The scanning result in the target format is fed back to the user.

[0012] In an optional implementation, running the loaded code scanning function module to scan the code specifically includes: 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 media 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 user has the calling permission, the native plug-in of the second platform is called to scan the code; Convert the scan results to the target format; The scanning result in the target format is fed back to the user.

[0013] In an optional implementation, running the loaded code scanning function module to scan the code specifically includes: If the current operating environment type is a third-type platform, call and run the streaming media device calling module to check whether the streaming media device calling authority 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 authority is available, the streaming media device of the third-category platform is called to obtain the video stream in real time; Render the acquired video stream into the canvas element; Capture canvas images periodically 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. Convert the scan results to the target format; The scanning result in the target format is fed back to the user.

[0014] The cross-platform code scanning component construction method and code scanning method based on uView provided by the present invention have the following beneficial effects compared with 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 realize the unified cross-platform code scanning function, the developer does 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. Developing with each individual 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. BRIEF DESCRIPTION OF THE DRAWINGS In order to more clearly illustrate the embodiments of the present invention or the technical solutions of the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. 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 creative work.

[0015] Figure 1 It is a flowchart of a method for constructing a cross-platform code scanning component based on uView provided in an embodiment of the present invention.

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

[0017] In order to enable those skilled in the art to better understand the scheme of the present invention, the present invention is further described in detail below in conjunction with the accompanying drawings and specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0018] 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 the specification of the present invention herein are only for the purpose of describing specific embodiments and are not intended to limit the present invention.

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

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

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

[0022] Figure 1 It is a flow chart of a method for building a cross-platform code scanning component based on uView provided in an embodiment of the present invention. The method for building a cross-platform code scanning component based on uView 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 flow chart can be changed, and some can be omitted.

[0023] The code scanning component constructed in this embodiment is developed based on the cross-platform capability 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 each platform (WeChat applet, H5 and mobile application). Figure 1 As shown, the method includes the following steps.

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

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

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

[0027] S2, uses uni-app’s plug-in mechanism to build a native plug-in calling module for the second type of platform.

[0028] The second type of platform in this embodiment is a mobile application (APP). This embodiment uses the uni-app plug-in mechanism to build a native plug-in calling module, and runs the native plug-in calling module to call the mobile application plug-in to call the camera of the mobile device to realize the code scanning function. When calling the camera, follow the user authorization mechanism to ensure that the user's privacy is fully protected. Specifically, this step of building the native plug-in calling module specifically includes the following steps.

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

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

[0031] This embodiment constructs a second streaming media device call permission detection unit and a native plug-in call execution unit. When running the native plug-in call module, the second streaming media device call permission detection unit is first executed to detect whether there is permission to call the camera. If not, the user is prompted and the scanning process is terminated. If yes, 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 will not actively upload image data, and all QR code parsing is completed locally. Native plug-in third-party libraries (such as ZXing or ZBar) realize efficient scanning and recognition functions. ZXing and other libraries support parsing of multiple barcode formats, providing fast and accurate scanning results.

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

[0033] The third type of platform in this embodiment is the H5 platform. Since the H5 platform cannot directly call the native functions of the device, it needs to be implemented through the capabilities of the browser. This embodiment uses WebRTC technology to call the camera of the device, obtain the video stream in real time, and perform image processing on the video stream to scan the code. When calling the camera, follow the user authorization mechanism to ensure that user privacy is fully protected.

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

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

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

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

[0038] This embodiment constructs a third streaming device call permission detection unit and a streaming device call execution unit. When running the streaming device call module, the third streaming device call permission detection unit is first executed to detect whether there is permission to call the camera. If not, the user is prompted and the scanning process is terminated. If yes, 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 will not actively upload image data, and all QR code parsing is completed locally.

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

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

[0041] S3.4, construct 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, the user is prompted and the scanning process is terminated.

[0042] This embodiment calls the native WEb API interface navigator.mediaDevices.getUserMedia to obtain the video stream of the camera and combines it with canvas to obtain the image, and then uses the jsQR plug-in to identify the content in the image. Exemplarily, the video stream parses the QR code or barcode image through JavaScript and processes it through a special decoding library (such as "jsQR"). The streaming media device calling module and streaming media data processing module of this embodiment provide an error handling mechanism to ensure that the user can be correctly prompted and the scanning process can be terminated in the event that the camera is not authorized, the image is blurred, or the parsing fails.

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

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

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

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

[0047] S5, use uni-app's conditional compilation to write 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 that are compatible with each platform.

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

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

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

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

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

[0053] 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. The code scanning component is run to realize the unified cross-platform scanning function, and the developer does not need to write code separately 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. 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. 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 the method, and the code scanning method is implemented based on the code scanning component constructed according to the above embodiment.

[0054] Figure 2 It 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.

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

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

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

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

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

[0060] SS3.1: 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.

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

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

[0063] 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 after loading.

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

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

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

[0067] SS4.3, if the calling authority is not available, the user is prompted and the scanning process is terminated; if the calling authority is available, the native plug-in of the second type of platform is called to scan the code and step SS4.8 is executed.

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

[0069] SS4.5: If the calling authority is not available, the user will be prompted and the scanning process will be terminated; if the calling authority is available, the streaming media device of the third-category platform will be called to obtain the video stream in real time.

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

[0071] SS4.7, periodically capture the canvas image and parse the QR code or barcode image through the decoding library, obtain the scanning result and execute step SS4.8. When the analysis fails, prompt the user and terminate the scanning process.

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

[0073] SS4.9, to feed back the scan results in the target format to the user.

[0074] In this embodiment, when a scan code request is received, the scan code component is called, the operating environment type is automatically detected, and the corresponding scan code function module is loaded according to the operating environment type. If it is a first-class platform (WeChat applet), call "wx.scanCode()" to scan the code. If it is a second-class platform (mobile application), first detect the camera usage permission, call the original plug-in after obtaining the camera permission, run the original plug-in to start the camera to scan and parse, if it is a third-class platform (H5 platform), on the basis of having the camera usage permission, obtain the video stream image through navigator.mediaDevices.getUserMedia and call the jsQR parsing algorithm to obtain the scan code result. Convert the scan code result into a unified format on any platform and feed it back to the user.

[0075] 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 a person skilled in the art, as well as several improvements and modifications made without departing from the principle of the present invention, should fall within the protection scope 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 streaming device access interface of uni-app to build a streaming device calling module for the third-type platform, and build a streaming data processing module for the third-type 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 that are compatible with each platform; Configure the upper-layer calling interface and operating environment detection mechanism for the code block, and encapsulate it into a code scanning component; Configure the code scanning components to the first, second, and third platforms respectively.

2. The method for constructing a cross-platform code scanning component based on uView according to claim 1, characterized in that: Use the uni-app streaming device access interface to build a streaming device call module for the third type of platform, including: A third streaming media device calling permission detection unit is constructed 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; Build a streaming media device call execution unit to call the streaming media device of the third type of platform to obtain video streams in real time.

3. The method for constructing a cross-platform code scanning component based on uView according to claim 2 is characterized in that: Build a streaming media 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 scanning result. When the parsing fails, prompt the user and terminate the scanning process.

4. The method for constructing a cross-platform code scanning component based on uView according to claim 1, characterized in that: Build native plug-in calling modules for the second type of platforms, including: A second streaming media device calling permission detection unit is constructed to detect whether the streaming media device calling permission is available. If the calling 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.

5. The method for constructing a cross-platform code scanning component based on uView according to claim 1, characterized in that: Construct 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.

6. A code scanning method, characterized in that: The code scanning component constructed based on the method according to any one of claims 1 to 5 is implemented, and the method comprises the following steps: Respond to the code scanning request and call the code scanning component through the upper-layer calling interface; Run the 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.

7. The code scanning method according to claim 6, characterized in that: 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 a third-type platform, the streaming media device calling module, streaming media data processing module and code scanning result processing module are loaded.

8. The code scanning method according to claim 7, characterized in that: Run the loaded code scanning function module to scan the code, including: If the current operating environment type is the first type of platform, call and run the native code scanning interface calling module to call the native code scanning interface of the first type of platform to scan the code; Convert the scan results to the target format; The scanning result in the target format is fed back to the user.

9. The code scanning method according to claim 7, characterized in that: 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 media 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 user has the calling permission, the native plug-in of the second platform is called to scan the code; Convert the scan results to the target format; The scanning result in the target format is fed back to the user.

10. The code scanning method according to claim 7, characterized in that: Run the loaded code scanning function module to scan the code, including: If the current operating environment type is a third-type platform, call and run the streaming media device calling module to check whether the streaming media device calling authority 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 authority is available, the streaming media device of the third-category platform is called to obtain the video stream in real time; Render the acquired video stream into the canvas element; Capture canvas images periodically 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. Convert the scan results to the target format; The scanning result in the target format is fed back to the user.

Images