A data processing method and device, electronic equipment and storage medium

Abstract

The application provides a data processing method and device, electronic equipment and storage medium. A first graphics library in a native application is used to obtain graphics data in a target format used for rendering on a page of the native application; the graphics data in the target format can be rendered by a second graphics library. The graphics data in the target format is transmitted to the second graphics library in the native application. The second graphics library in the native application is used to render the graphics data in the target format on the page of the native application. The effect of "one development, multiple uses" is achieved, the development workload of the developer is reduced, and the labor cost is reduced. In addition, the use experience of the general public for the chart including the 2D / 3D graphics in the page displayed on the carrier native application can be improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a data processing method, apparatus, electronic device and storage medium. Background Technology

[0002] Currently, many service providers offer services to the outside world (e.g., to a wide range of users) through web pages. In order to provide services in a more user-friendly way, service providers often render charts including 2D / 3D graphics on the pages to provide services to the outside world through these charts. Summary of the Invention

[0003] This application discloses a data processing method, apparatus, electronic device, and storage medium.

[0004] In a first aspect, this application discloses a data processing method applied in an electronic device. The electronic device runs a native application, which includes a first graphics library and a second graphics library. The native application supports rendering graphics data using the second graphics library, but does not support rendering graphics data using the first graphics library. The method includes:

[0005] Use the first graphics library in the native application to obtain graphics data in the target format for rendering on the native application's page; the target format graphics data can be rendered by the second graphics library;

[0006] Pass the target format graphics data to the second graphics library in the native application;

[0007] Use a second graphics library in the native application to render target format graphics data on the native application's page.

[0008] In one alternative implementation, the first graphics library includes the Echarts graphics library, the target format includes SVG format, and the second graphics library includes the Skia graphics library, etc.

[0009] In an optional implementation, obtaining graphics data in a target format for rendering on the native application's page using a first graphics library in the native application includes:

[0010] Listen for the actions taken by the operator on the chart currently displayed on the native application's page.

[0011] The control information is converted into control information in a format supported by the first graphics library;

[0012] The first graphics library is used to calculate the target format graphics data for rendering on the native application's page by using the currently displayed chart and the manipulation information of the formats supported by the first graphics library.

[0013] In one alternative implementation, the native application includes a first custom rendering component, which is obtained by rewriting the native rendering component in the first graphics library. The first custom rendering component includes a custom rendering class that is a rewritten version of the native rendering class in the native rendering component of the first graphics library.

[0014] The step of using a first graphics library in the native application to obtain graphics data in the target format for rendering on the page of the native application includes:

[0015] The custom rendering class in the first custom rendering component uses the first graphics library in the native application to obtain graphics data in the target format for rendering on the page of the native application.

[0016] In one alternative implementation, the first graphics library has an API, which includes the API of a pass function in a second custom rendering component in the native application. The second custom rendering component is obtained by rewriting the second graphics library. The second custom rendering component includes the pass function and the second graphics library, and there is an association between the pass function and the second graphics library.

[0017] The step of transferring the target format graphics data to the second graphics library in the native application includes:

[0018] The API in the first graphics library is used to call the transfer function in the second custom rendering component, and the target format graphics data is transferred to the second graphics library in the second custom rendering component through the association relationship based on the transfer function.

[0019] Secondly, this application discloses a data processing method applied to an electronic device, in which a development environment is deployed, and an engineering project of a native application is created in the development environment. The engineering project includes a first graphics library, a second graphics library, and a first computer program code of a page of the native application. The first computer program code includes at least an acquisition instruction for using the first graphics library to acquire graphics data of a target format for rendering on the page of the native application, and a first rendering instruction for using the first graphics library to render the graphics data of the target format on the page of the native application.

[0020] The method includes:

[0021] Obtain a packaging request for the first computer program code of the native application page in the project, the packaging request carrying the identifier of the native application, the packaging request being used to instruct the generation of the native application page based on the identifier of the native application and the first computer program code;

[0022] Based on the identifier of the native application, obtain the transfer instruction for passing the target format graphics data to the second graphics library in the native application and the second rendering instruction for rendering the target format graphics data on the page of the native application using the second graphics library in the native application; the second graphics library can be called by the native application to render the target format graphics data.

[0023] The first rendering instruction in the first computer program code is replaced with the pass instruction and the second rendering instruction to obtain the second computer program code of the native application's page.

[0024] The second computer program code of the native application's page is packaged to obtain the native application's page.

[0025] In an optional implementation, the method further includes:

[0026] A second computer program code that stores pages from the native application.

[0027] Thirdly, this application discloses a data processing apparatus applied in an electronic device, wherein the electronic device runs a native application having a first graphics library and a second graphics library, the native application supporting the rendering of graphics data using the second graphics library, and the native application not supporting the rendering of graphics data using the first graphics library, the apparatus comprising:

[0028] The first acquisition module is used to acquire target format graphics data for rendering on the page of the native application using a first graphics library in the native application; the target format graphics data can be rendered by a second graphics library.

[0029] The transfer module is used to transfer graphics data in the target format to the second graphics library in the native application;

[0030] The rendering module is used to render target-format graphics data on the pages of the native application using a second graphics library within the native application.

[0031] In one alternative implementation, the first graphics library includes the Echarts graphics library, the target format includes SVG format, and the second graphics library includes the Skia graphics library, etc.

[0032] In an optional implementation, the first acquisition module includes:

[0033] The listening unit is used to listen for the manipulation information of the operator on the chart currently displayed on the page of the native application;

[0034] A conversion unit is used to convert the control information into control information in a format supported by a first graphics library;

[0035] The calculation unit is used to calculate the currently displayed chart and the manipulation information of the format supported by the first graphics library using the first graphics library, so as to obtain the target format graphic data for rendering on the page of the native application.

[0036] In one alternative implementation, the native application includes a first custom rendering component, which is obtained by rewriting the native rendering component in the first graphics library. The first custom rendering component includes a custom rendering class that is a rewritten version of the native rendering class in the native rendering component of the first graphics library.

[0037] The first acquisition module includes:

[0038] The acquisition unit is used to acquire graphics data in the target format for rendering on the page of the native application based on the custom rendering class in the first custom rendering component and the first graphics library in the native application.

[0039] In one alternative implementation, the first graphics library has an API, which includes the API of a pass function in a second custom rendering component in the native application. The second custom rendering component is obtained by rewriting the second graphics library. The second custom rendering component includes the pass function and the second graphics library, and there is an association between the pass function and the second graphics library.

[0040] The transmission module includes:

[0041] The calling unit is used to call the passing function in the second custom rendering component based on the API in the first graphics library. The passing unit is used to pass the target format graphics data to the second graphics library in the second custom rendering component through the association relationship based on the passing function.

[0042] Fourthly, this application discloses a data processing apparatus applied to an electronic device, in which a development environment is deployed, and an engineering project of a native application is created in the development environment. The engineering project includes a first graphics library, a second graphics library, and first computer program code of a page of the native application. The first computer program code includes at least an acquisition instruction for using the first graphics library to acquire graphic data of a target format for rendering on the page of the native application, and a first rendering instruction for using the first graphics library to render the graphic data of the target format on the page of the native application.

[0043] The device includes:

[0044] The second acquisition module is used to acquire a packaging request for the first computer program code of the native application page in the project, the packaging request carrying the identifier of the native application, and the packaging request being used to instruct the generation of the native application page based on the identifier of the native application and the first computer program code.

[0045] The third acquisition module is used to acquire, based on the identifier of the native application, a transfer instruction for transferring the target format graphics data to the second graphics library in the native application, and a second rendering instruction for rendering the target format graphics data on the page of the native application using the second graphics library in the native application; the second graphics library can be called by the native application to render the target format graphics data.

[0046] A replacement module is used to replace the first rendering instruction in the first computer program code with a pass instruction and a second rendering instruction to obtain the second computer program code of the native application's page;

[0047] The packaging module is used to package the pages of a native application into a second computer program code, resulting in the pages of the native application.

[0048] In an alternative implementation, the apparatus further includes:

[0049] A storage module is a second computer program code used to store pages from a native application.

[0050] Fifthly, this application discloses an electronic device comprising: a processor; and a memory for storing processor-executable instructions; wherein the processor is configured to perform the method as described in any of the preceding aspects.

[0051] Sixthly, this application discloses a non-transitory computer-readable storage medium that, when the instructions in the storage medium are executed by a processor of an electronic device, enables the electronic device to perform the methods described in any of the preceding aspects.

[0052] In a seventh aspect, this application discloses a computer program product in which, when the instructions in the computer program product are executed by a processor of an electronic device, the electronic device is enabled to perform the method described in any of the preceding aspects.

[0053] The technical solution provided in this application may include the following beneficial effects:

[0054] In this application, a packaging request for the first computer program code of a page of a native application in an engineering project is obtained. The packaging request carries the identifier of the native application and is used to instruct the generation of the page of the native application based on the identifier of the native application and the first computer program code. Based on the identifier of the native application, a transfer instruction for transferring target format graphics data to a second graphics library in the native application and a second rendering instruction for rendering the target format graphics data on the page of the native application using the second graphics library in the native application are obtained; the second graphics library can be called by the native application to render the target format graphics data. The first rendering instruction in the first computer program code is replaced with the transfer instruction and the second rendering instruction to obtain the second computer program code of the page of the native application. The second computer program code of the page of the native application is packaged to obtain the page of the native application.

[0055] Thus, in cases where charts including 2D / 3D graphics need to be rendered on a native application's page, the target format graphics data for rendering on the native application's page can be obtained using a first graphics library in the native application; the target format graphics data can then be rendered by a second graphics library. The target format graphics data is passed to the second graphics library in the native application. The target format graphics data is then rendered on the native application's page using the second graphics library in the native application. The target format graphics data can include charts of 2D / 3D graphics.

[0056] On the one hand, it enables the reuse of a single set of code. For example, a single set of code can be reused in both the carrier web and the carrier native application, achieving the effect of "develop once, use on multiple platforms." This allows developers to develop only one set of computer program code for each page, i.e., the first set of computer program code, thereby reducing the workload of developers and lowering labor costs.

[0057] On the other hand, the computer program code of the converted page, i.e., the second computer program code, can support the technology stack of the carrier's native application and can use the relevant functions of the first graphics library, such as the Echarts graphics library. For example, the first graphics library can be used to obtain graphic data in a target format, such as SVG format, for rendering on the page, and the target format graphic data can be passed to the second graphics library, such as the Skia graphics library. The second graphics library can then be used to render the target format graphic data on the page. In this way, not only can the goal of rendering the target format graphic data to draw charts including 2D / 3D graphics on the page be achieved, but also, since the rendered target format graphic data is obtained using the first graphics library, the appearance of the charts including 2D / 3D graphics on the carrier's native application page is the same as the appearance of the charts including 2D / 3D graphics on the web page hosted on the carrier web. This avoids the situation where the appearance of the charts including 2D / 3D graphics seen by the user on the web page hosted on the carrier web and the native application page are different, thereby avoiding a reduction in user experience.

[0058] Secondly, charts including 2D / 3D graphics in pages displayed on the native application are not constrained by a lower-level technology stack than the native application (such as the technology stack of the native web). This ensures that many expected functions (such as more interactive features) of charts including 2D / 3D graphics in pages displayed on the native application can be used normally, and many expected effects (such as the native application's technology stack supporting faster rendering speed than the technology stack of the native web, thus improving rendering speed) can be achieved, thereby improving the user experience of charts including 2D / 3D graphics in pages displayed on the native application. Attached Figure Description

[0059] Figure 1 This is a flowchart of the steps of a data processing method according to this application.

[0060] Figure 2 This is a flowchart of the steps of a data processing method according to this application.

[0061] Figure 3 This is a structural block diagram of a data processing device according to this application.

[0062] Figure 4 This is a structural block diagram of a data processing device according to this application.

[0063] Figure 5 This is a block diagram of an electronic device according to this application.

[0064] Figure 6 This is a block diagram of an electronic device according to this application. Detailed Implementation

[0065] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without creative effort are within the scope of protection of this application.

[0066] Currently, there are various carriers available on the market that can host web pages, such as native applications, mini-programs, and the web (web pages).

[0067] In addition, in order to increase the number of service channels for providing services to the outside world, service providers often use multiple carriers to carry pages, so that the pages carried on multiple carriers can provide services to the outside world separately.

[0068] In order to provide services to the outside world through pages hosted on various carriers, the developers of service providers can develop pages hosted on various carriers in advance. For example, they can develop pages hosted on native applications, pages hosted on mini-programs, and pages hosted on the web. Each page hosted on a different carrier contains charts including 2D / 3D graphics.

[0069] However, the inventors discovered that the development workload and labor costs of service providers' developers in developing pages for different carriers were large.

[0070] This led to the need to reduce the workload of developers.

[0071] To reduce the workload of developers, the inventors analyzed the reasons why "the development workload of service providers' developers in developing pages for various media platforms is large," and found that:

[0072] The technology stack of different carriers that host the page is often different. The technology stack at least involves the drawing tools supported by the drawing tools for drawing charts including 2D / 3D graphics. Therefore, the drawing tools supported by the drawing tools for drawing charts including 2D / 3D graphics are often different on pages hosted on different carriers.

[0073] The drawing tools can include graphics libraries, etc. One way to understand this is that the graphics library can be seen as a pen. Calling the graphics library can draw 2D / 3D graphics, and thus form charts that include 2D / 3D graphics.

[0074] During the page development phase, developers often develop pages by writing computer program code. In the process of writing the page's computer program code, developers need to write the page's computer program code specifically for the technology stack supported by the platform hosting the page.

[0075] For example, in the process of developing computer program code for pages carried on different carriers, different instructions need to be written for obtaining graphic data to be rendered on the page, and different instructions need to be written for rendering graphic data on the page.

[0076] For example, graphics libraries expose APIs (Application Programming Interfaces). Rendering graphics data requires the use of graphics libraries. Thus, the rendering instructions used to render graphics data on a page include code that calls the graphics library, such as calling the graphics library through its API. However, different media platforms support different graphics libraries, and different graphics libraries expose different APIs.

[0077] In one example, the carrier web supports the functionality of the Echarts graphics library. Thus, during the development of the computer program code for the pages hosted on the carrier web, it is possible to write instructions for obtaining SVG format graphics data for rendering on the page using the Echarts graphics library, as well as rendering instructions for rendering SVG format graphics data on the page using the Echarts graphics library.

[0078] In another example, the carrier's native application does not support Echarts but supports the Skia graphics library. Thus, during the development of the computer program code for the page hosted by the carrier's native application, it is possible to write instructions for obtaining SVG format graphic data for rendering on the page using the Skia graphics library, as well as rendering instructions for rendering SVG format graphic data on the page using the Skia graphics library.

[0079] Therefore, the computer program code for pages carried on different carriers needs to be developed separately. For example, if a service provider needs to use certain carriers to carry pages to provide services to the outside world, then the computer program code for each page carried on each of these carriers needs to be written separately. In other words, a different set of computer program code for each page needs to be written for each carrier, which results in a large workload and high labor costs in writing the computer program code for the pages.

[0080] For this reason, the inventors realized that if only one set of computer program code for each page could be written for each carrier, and this set of computer program code could be reused on each carrier, then the effect of "develop once, use on multiple platforms" could be achieved, thereby reducing the development workload of developers and reducing labor costs.

[0081] In order to enable a set of computer program code for a webpage to be reused on various media, the inventors devised a method:

[0082] For example, regarding the carrier Web, its technology stack supports the Echarts graphics library. Pages hosted on the carrier Web can use Echarts to retrieve SVG format graphics data for rendering on the page, and can also use Echarts to render SVG format graphics data on the page. Thus, when developing a page hosted on the carrier Web, developers can write instructions in the page's computer program code to retrieve SVG format graphics data using Echarts and to render SVG format graphics data using Echarts. After the computer program code for the page hosted on the carrier Web is developed, it can be packaged to obtain the Web page. The Web page can then be hosted on the carrier Web; for example, users can view charts including 2D / 3D graphics on the Web page.

[0083] Additionally, when developing pages hosted by a carrier native application, web controls can be loaded into the computer program code of the pages hosted by the carrier native application, and the URL (Uniform Resource Locator) of the web page developed for the carrier web can be recorded in the web control to complete the development of the pages hosted by the carrier native application.

[0084] In this way, when the native application needs to display a page, it can directly obtain the web page based on the URL of the web page in the web control and display the web page based on the web control. The web page has charts including 2D / 3D graphics. In this way, it is possible to provide services to the outside world based on the charts including 2D / 3D graphics in the web page on the native application.

[0085] As can be seen, in the above reuse method, by reusing web pages developed for the carrier web in the carrier native application, developers do not need to manually write all the computer program code for the pages carried by the carrier native application, thereby reducing the development workload and labor costs.

[0086] However, after adopting the above reuse method, the inventors discovered that many expected functions of charts including 2D / 3D graphics in web pages displayed on the carrier native application based on web controls could not be used normally and many expected effects could not be achieved. This would affect the user experience of users of charts including 2D / 3D graphics in pages displayed on the carrier native application.

[0087] The inventors further analyzed the reasons why "charts including 2D / 3D graphics in web pages displayed based on web controls on native carrier applications cannot function properly for many expected functions of the native carrier applications, and many expected effects cannot be achieved for the native carrier applications," and found that:

[0088] When computer program code is developed separately for different media to create pages containing 2D / 3D graphics that can be displayed on different media, the expected functions of the 2D / 3D graphics on each media can generally be used normally and the expected effects can usually be achieved.

[0089] For example, the charts containing 2D / 3D graphics on pages hosted by a carrier web application developed separately for the carrier web can be used normally and the expected effects can be achieved in a basically normal manner for the carrier web. Similarly, the charts containing 2D / 3D graphics on pages hosted by a carrier native application developed separately for the carrier native application can also be used normally and the expected effects can be achieved in a basically normal manner for the carrier native application.

[0090] Therefore, the inventors initially believe that: "the inability to use many expected functions and achieve many expected effects of charts including 2D / 3D graphics in web pages displayed on native applications based on web controls may not be caused by the native applications themselves, but rather by the fact that web pages developed for the native web are not suitable for hosting on native applications. For example, although charts including 2D / 3D graphics can be displayed on web pages based on web controls in native applications, since the web pages are developed for the web carrier and are displayed on native applications based on web controls, the display of web pages based on web controls in native applications is often limited by the functions and expected effects supported by the technology stack of the native web carrier."

[0091] However, the technology stacks of different platforms differ, resulting in varying expected functionalities for charts including 2D / 3D graphics on different platforms. For instance, the technology stack of a web platform supports fewer features than that of a native application. Consequently, the expected functionality of charts including 2D / 3D graphics on web-based pages is often less than or lower than that of charts including 2D / 3D graphics on native application-based pages. Furthermore, the expected performance of charts including 2D / 3D graphics on web-based pages is often lower than that of charts including 2D / 3D graphics on native application-based pages.

[0092] It is evident that the technology stack of the carrier web does not support as many functions and effects as the technology stack of the carrier native application. However, the inventors found through statistics that the number of users viewing pages using the carrier native application is often much larger than the number of users viewing pages using the carrier web. Therefore, in order to increase user stickiness to the service provider and minimize user churn, developers often have higher expectations for the functionality and display effects of charts including 2D / 3D graphics in pages hosted by the carrier native application, and these expectations are higher than those for the functionality and display effects of charts including 2D / 3D graphics in pages hosted by the carrier web.

[0093] In summary, the problem often arises because the functionality and display effects of charts containing 2D / 3D graphics in web pages developed for the carrier web cannot meet the expectations (including comprehensiveness or diversity) of charts containing 2D / 3D graphics in pages developed for the carrier native application. As a result, many expected functions of charts containing 2D / 3D graphics in web pages displayed based on web controls on the carrier native application cannot be used normally, and many expected effects of the carrier native application cannot be achieved.

[0094] In view of this, the requirement was put forward to "reduce the development workload of developers and ensure that as much as possible the expected functions of charts, including 2D / 3D graphics, in the pages displayed on the carrier's native application can be used normally and that many expected effects can be achieved".

[0095] To achieve the goal of "reducing the development workload of developers and ensuring that many expected functions of charts, including 2D / 3D graphics, in the pages displayed on the native application can be used normally and that many expected effects can be achieved," the inventors came up with another approach:

[0096] For example, a set of computer program code for a web page can be written. For example, the set of computer program code for a web page may include at least instructions for obtaining graphic data in SVG format for rendering on the page using the graphics library Echarts, and rendering instructions for rendering graphic data in SVG format on the page using the graphics library Echarts. By packaging this set of computer program code for a web page, a page that the web page can support can be obtained (the page contains charts including 2D / 3D graphics).

[0097] In addition, for carrier native applications, if they need to obtain the pages hosted by the carrier native application, the computer program code for these pages written for the carrier web can be automatically converted into the computer program code for pages that support the technology stack of the carrier native application.

[0098] For example, the carrier's native application supports rendering SVG format graphic data using the Skia graphics library, and can obtain SVG format graphic data using the Echarts graphics library. Thus, the converted code can include instructions for obtaining SVG format graphic data for rendering on the page using the Echarts graphics library, instructions for passing SVG format graphic data to the Skia graphics library using the Echarts graphics library, and instructions for rendering SVG graphic data on the page using the Skia graphics library, etc. Then, the converted code is packaged to obtain the page hosted by the carrier's native application.

[0099] Through this other approach, on the one hand, a set of code can be reused. For example, a set of code can be reused in the carrier web and the carrier native application, achieving the effect of "develop once, use on multiple platforms". This allows developers to develop only one set of computer program code for the page, thereby reducing the workload of developers and reducing labor costs.

[0100] On the other hand, the computer program code of the converted page can support the technology stack of the carrier's native application and can use the relevant functions of the Echarts graphics library. For example, the Echarts graphics library can be used to obtain SVG format graphic data for rendering on the page, pass the SVG format graphic data to the Skia graphics library, and use the Skia graphics library to render the SVG format graphic data on the page. In this way, not only can the rendering of SVG format graphic data be achieved to draw charts including 2D / 3D graphics on the page, but also, since the rendered SVG format graphic data is obtained using the Echarts graphics library, the appearance of the charts including 2D / 3D graphics on the page hosted by the carrier's native application is the same as the appearance of the charts including 2D / 3D graphics on the web page hosted by the carrier's web application. This avoids the situation where the appearance of the charts including 2D / 3D graphics seen by the user on the web page hosted by the carrier's web application and the page hosted by the native application are different, thereby avoiding a degraded user experience.

[0101] Secondly, charts including 2D / 3D graphics in pages displayed on the native application are not constrained by a lower-level technology stack than the native application (such as the technology stack of the native web). This ensures that many expected functions (such as more interactive features) of charts including 2D / 3D graphics in pages displayed on the native application can be used normally, and many expected effects (such as the native application's technology stack supporting faster rendering speed than the technology stack of the native web, thus improving rendering speed) can be achieved, thereby improving the user experience of charts including 2D / 3D graphics in pages displayed on the native application.

[0102] Before introducing the scheme of this application, some terms involved in this application will be explained.

[0103] Graphics: Independent basic elements such as lines, endpoints, rectangles, circles, and text.

[0104] Charts: Composed of multiple graphics, such as bar charts and line charts, they can use visual images to represent data changes or comparisons.

[0105] SVG: Scalable Vector Graphics, an XML-based vector graphics format used to display various graphics in the Web and other environments; it allows us to write scalable two-dimensional graphics and manipulate them via CSS or JavaScript.

[0106] Skia: An open-source 2D graphics library for drawing text, geometry, and images. It provides a universal API that works across various hardware and software platforms and supports rendering images using SVG format data.

[0107] ECharts: A JavaScript-based data visualization chart library that provides intuitive, vivid, interactive, and customizable data visualization charts, and supports SVG rendering mode.

[0108] Touch Event: A type of event that describes changes in the state of a finger on a touch surface (touchscreen, touchpad, etc.). These events are used to describe one or more touch points, allowing developers to detect touch point movement, addition and removal of touch points, and so on.

[0109] Taro: An open cross-platform and cross-framework solution that supports the development of web, mini-programs, and native applications using front-end scripting syntax, enabling a single codebase to run on multiple platforms.

[0110] WebView is a control used to render web pages in native applications.

[0111] Specifically, refer to Figure 1 The diagram illustrates a data processing method according to this application, which is applied to an electronic device. The electronic device has a development environment (including Taro, etc.) deployed within it. This development environment contains a project for a native application. The project includes a first graphics library, a second graphics library, and first computer program code for a page of the native application. The first computer program code includes at least an instruction to acquire graphics data in a target format for rendering on the page of the native application, and a first rendering instruction to render the graphics data in the target format on the page of the native application using the first graphics library.

[0112] Native applications support rendering graphics data using a second graphics library. Native applications do not support rendering graphics data using a first graphics library. Using a second graphics library enables rendering of graphics data in a target format. Using a first graphics library enables the generation of graphics data in a target format. Therefore, the point of intersection between native applications and the first graphics library lies in the target format of the graphics data.

[0113] For example, the native application, the second graphics library, and the target format graphics data are associated, while the first graphics library and the target format graphics data are associated. Thus, the native application, the second graphics library, the target format graphics data, and the first graphics library are interconnected.

[0114] In this way, native applications can utilize the features of the First Graphics Library, etc.

[0115] In one example, the first graphics library may include the Echarts graphics library or other graphics libraries, and the target format may include SVG format or other graphics data formats. The second graphics library may include the Skia graphics library or other graphics libraries.

[0116] Native applications support rendering graphics data using the Skia graphics library. Native applications do not support rendering graphics data using the Echarts graphics library. Skia graphics library can render SVG format graphics data. Echarts can generate SVG format graphics data. Therefore, the point of intersection between native applications and the Echarts graphics library lies in SVG format graphics data.

[0117] For example, the native application, the Skia graphics library, and SVG format graphics data are interconnected, as is the Echarts graphics library and SVG format graphics data. Thus, the native application, the Skia graphics library, the SVG format graphics data, and the Echarts graphics library are all interconnected.

[0118] In this way, native applications can utilize the features of the Echarts graphics library.

[0119] The method includes:

[0120] In step S101, a packaging request for the first computer program code of the page in the project is obtained. The packaging request carries the identifier of the native application and is used to instruct the generation of the native application page based on the identifier of the native application and the first computer program code.

[0121] Native applications, as a carrier, have the ability to host pages.

[0122] In this application, when a developer needs to develop a page in an engineering project and the page needs to have charts including 2D / 3D graphics, during the stage of writing the computer program code for the page, the developer can write an acquisition instruction to obtain the target format graphic data for rendering on the page of the native application using a first graphics library, and a first rendering instruction to render the target format graphic data on the page of the native application using the first graphics library. The computer program code for the page written by the developer can be regarded as the first computer program code for the page.

[0123] In practice, developers often need a page to be hosted on at least one platform, that is, so that users can view the page based on at least one platform.

[0124] Different platforms support different graphics libraries when rendering graphics data. For example, the web platform supports Echarts when rendering graphics data, while the native application platform does not support Echarts.

[0125] Thus, in one embodiment, the first computer program code of the page includes the computer program code of the page developed for the carrier Web. If it is necessary to obtain the page hosted on the Web, the first computer program code of the page can be directly packaged to obtain the page hosted on the carrier Web.

[0126] If the page of the carrier's native application is required, it will not be possible to obtain the page of the carrier's native application by directly packaging the first computer program code of the page, since the carrier's native application does not support the use of the first graphics library to render graphics data.

[0127] Thus, in order to obtain the pages of the native application, after developing the first computer program code for the pages, developers can enter a packaging request for the first computer program code of the pages in the project. The packaging request carries the identifier of the native application and instructs that the pages of the native application be generated based on the identifier and the first computer program code.

[0128] For example, a developer can control the electronic device to display the identifier of the carrier native application in the development environment. The developer can select the identifier of the carrier native application to display, and the electronic device can obtain the identifier of the carrier native application selected by the developer. Then, the developer can enter a packaging request for the first computer program code of the page in the project (carrying the identifier of the selected carrier native application) in the development environment of the electronic device, and the electronic device can obtain the packaging request for the first computer program code of the page in the project and then execute step S102.

[0129] In step S102, based on the identifier of the native application, a transfer instruction for transferring the target format graphics data to the second graphics library in the native application and a second rendering instruction for rendering the target format graphics data on the page of the native application using the second graphics library in the native application are obtained; the second graphics library can be called by the native application to render the target format graphics data.

[0130] Passing instructions are computer program codes that can call APIs for passing functions. Passing functions will be described later and will not be detailed here.

[0131] In this application, middleware can be set up in the development environment beforehand. Middleware may include SDK (Software Development Kit), etc. At least one function of the middleware is to act as a bridge between the "native application" and the "Echarts graphics library".

[0132] In this application, in the scenario of developing a page, for the native application that the service provider needs to carry the page, the second graphics library supported by the native application when rendering graphics data can be determined in advance, and a second rendering instruction for rendering target format graphics data on the page of the native application using the second graphics library in the native application can be written. In addition, it is determined that the second graphics library supports rendering target format graphics data and that the first graphics library can generate target format graphics data. Thus, a transfer instruction for transferring target format graphics data to the second graphics library in the native application can be written.

[0133] Then, the pass instructions and the second rendering instructions are set in the middleware.

[0134] Thus, when obtaining the transfer instruction for passing target format graphics data to the second graphics library in the native application and the second rendering instruction for rendering target format graphics data on the native application's page using the second graphics library in the native application, it is possible to obtain the transfer instruction for passing target format graphics data to the second graphics library in the native application and the second rendering instruction for rendering target format graphics data on the native application's page using the second graphics library in the native application, which are set in advance in the middleware.

[0135] In step S103, the first rendering instruction in the first computer program code is replaced with a transfer instruction and a second rendering instruction to obtain the second computer program code of the native application's page.

[0136] In step S104, the second computer program code of the native application's page is packaged to obtain the native application's page.

[0137] For example, compiling a second computer program into the pages of a native application yields the pages of the native application.

[0138] In addition, electronic devices can store second computer program code of native application pages, so that if developers need to optimize the native application pages according to actual needs, they can directly call the stored second computer program code of the native application pages and optimize based on the second computer program code of the native application pages.

[0139] The instructions in the second computer program code of the native application's page include: transfer instructions for passing target format graphics data to a second graphics library in the native application, and second rendering instructions for rendering the target format graphics data on the native application's page using the second graphics library in the native application. This is different from the first rendering instructions for rendering target format graphics data on the native application's page using a first graphics library, which are applicable to the carrier Web. Since the page needs to be optimized for the native application, the content in the second computer program code of the page is more intuitive for developers, easier for them to understand, and helps to improve the efficiency and accuracy of optimizing the native application's page.

[0140] In this application, the middleware can be integrated into the development environment. This enables the development environment not only to package a set of page computer program code into a carrier web page, but also to package a carrier native application page from the same set of page computer program code. This gives the development environment cross-platform development capabilities, facilitating the development of cross-platform pages.

[0141] In this application, a packaging request for the first computer program code of a page of a native application in an engineering project is obtained. The packaging request carries the identifier of the native application and is used to instruct the generation of the page of the native application based on the identifier of the native application and the first computer program code. Based on the identifier of the native application, a transfer instruction for transferring target format graphics data to a second graphics library in the native application and a second rendering instruction for rendering the target format graphics data on the page of the native application using the second graphics library in the native application are obtained; the second graphics library can be called by the native application to render the target format graphics data. The first rendering instruction in the first computer program code is replaced with the transfer instruction and the second rendering instruction to obtain the second computer program code of the page of the native application. The second computer program code of the page of the native application is packaged to obtain the page of the native application.

[0142] Thus, in cases where charts including 2D / 3D graphics need to be rendered on a native application's page, the target format graphics data for rendering on the native application's page can be obtained using a first graphics library in the native application; the target format graphics data can then be rendered by a second graphics library. The target format graphics data is passed to the second graphics library in the native application. The target format graphics data is then rendered on the native application's page using the second graphics library in the native application. The target format graphics data can include charts of 2D / 3D graphics.

[0143] On the one hand, it enables the reuse of a single set of code. For example, a single set of code can be reused in both the carrier web and the carrier native application, achieving the effect of "develop once, use on multiple platforms." This allows developers to develop only one set of computer program code for each page, i.e., the first set of computer program code, thereby reducing the workload of developers and lowering labor costs.

[0144] On the other hand, the computer program code of the converted page, i.e., the second computer program code, can support the technology stack of the carrier's native application and can use the relevant functions of the first graphics library, such as the Echarts graphics library. For example, the first graphics library can be used to obtain graphic data in a target format, such as SVG format, for rendering on the page, and the target format graphic data can be passed to the second graphics library, such as the Skia graphics library. The second graphics library can then be used to render the target format graphic data on the page. In this way, not only can the goal of rendering the target format graphic data to draw charts including 2D / 3D graphics on the page be achieved, but also, since the rendered target format graphic data is obtained using the first graphics library, the appearance of the charts including 2D / 3D graphics on the carrier's native application page is the same as the appearance of the charts including 2D / 3D graphics on the web page hosted on the carrier web. This avoids the situation where the appearance of the charts including 2D / 3D graphics seen by the user on the web page hosted on the carrier web and the native application page are different, thereby avoiding a reduction in user experience.

[0145] Secondly, charts including 2D / 3D graphics in pages displayed on the native application are not constrained by a lower-level technology stack than the native application (such as the technology stack of the native web). This ensures that many expected functions (such as more interactive features) of charts including 2D / 3D graphics in pages displayed on the native application can be used normally, and many expected effects (such as the native application's technology stack supporting faster rendering speed than the technology stack of the native web, thus improving rendering speed) can be achieved, thereby improving the user experience of charts including 2D / 3D graphics in pages displayed on the native application.

[0146] After the developers finally compile the native application, this page (containing charts with 2D / 3D graphics) will be included in the native application. When a user accesses the page using the native application, the application can... Figure 2 This method renders charts, including 2D / 3D graphics, within the pages of native applications.

[0147] For example, specifically, refer to Figure 2 The diagram illustrates a data processing method according to this application, which is applied to an electronic device. The electronic device runs a native application that includes a first graphics library and a second graphics library.

[0148] The method includes:

[0149] In step S201, a first graphics library in the native application is used to obtain graphics data in a target format for rendering on the page of the native application; the graphics data in the target format can be rendered by a second graphics library.

[0150] In one embodiment, the first graphics library may include the Echarts graphics library or other graphics libraries, the target format may include SVG format or other graphics data formats, and the second graphics library may include the Skia graphics library or other graphics libraries.

[0151] In one embodiment of this application, in scenarios where the user is redirected to this page after launching a native application or from another page, it is necessary to obtain the target format graphic data for rendering on this page of the native application and render the target format graphic data to render charts, including 2D / 3D graphics, on this page.

[0152] In this scenario, when the native application enters this page, it retrieves the page data from the cloud based on the page URL. Since this page needs to render charts including 2D / 3D graphics, the page data contains relevant data for these charts. The native application can call a first graphics library and use it to calculate the target format graphics data for rendering on this page of the native application based on the relevant data for the 2D / 3D charts in the page data.

[0153] Alternatively, in another embodiment, the native application has already rendered the page, which includes charts with 2D / 3D graphics. Users can view and control these charts, such as moving them, zooming in and out, hovering their actions over them, and displaying more information. In this case, the native application needs to re-render at least the charts with 2D / 3D graphics based on the user's actions.

[0154] Therefore, in this application, the native application can listen to the manipulation information of the operator (including the user's finger or capacitive stylus, etc.) on the chart currently displayed on the native application's page (the manipulation information can be the manipulation information triggered by touch events (such as TouchEvent events, etc.), and the manipulation information includes the manipulation method information and the manipulation position information, etc.); and then convert the obtained manipulation information into manipulation information in a format supported by the first graphics library.

[0155] In this application, the first graphics library can be used to render charts including 2D / 3D graphics on a web page hosted by a carrier web, and the second graphics library can be used to render charts including 2D / 3D graphics on a page of a carrier native application.

[0156] The interaction methods supported by the web pages hosted on the carrier web differ from those supported by the carrier's native applications.

[0157] The format of the control information that the first graphics library supports processing is different from the format of the control information that the second graphics library supports processing.

[0158] The format of the control information obtained by the native application is often matched with the format of the control information supported by the second graphics library, but not with the format of the control information supported by the first graphics library. Therefore, in order for the native application to use the second graphics library to render new charts including 2D / 3D graphics on the page based on the control information, it is necessary to convert the control information of the monitored operation body on the chart currently displayed on the native application's page into control information in a format supported by the first graphics library.

[0159] For example, the Echarts graphics library can be used to render charts including 2D / 3D graphics on web pages hosted on a carrier web, while the Skia graphics library can be used to render charts including 2D / 3D graphics on pages of native carrier applications.

[0160] The interaction methods supported by the web pages hosted on the carrier web differ from those supported by the carrier's native applications.

[0161] The Echarts graphics library supports a different format for processing control information than the Skia graphics library.

[0162] The format of the control information obtained by the native application is often matched with the format of control information supported by the Skia graphics library, but not with the format of control information supported by the Echarts graphics library. Therefore, in order for the native application to use the Skia graphics library to render new charts, including 2D / 3D graphics, on the page based on the control information, it is necessary to convert the control information of the monitored operation body on the chart currently displayed on the native application's page into control information in a format supported by the Echarts graphics library.

[0163] Then, the first graphics library can be used to calculate the target format graphics data for rendering on the native application's page, based on the currently displayed chart and the manipulation information of the formats supported by the first graphics library.

[0164] In step S202, the target format graphics data is transferred to the second graphics library in the native application.

[0165] In step S203, the target format graphics data is rendered on the page of the native application using a second graphics library in the native application.

[0166] This enables rendering of charts, including 2D / 3D graphics, on native application pages for users to view, etc.

[0167] In one embodiment, the native application includes a first custom rendering component, which is obtained by rewriting the native rendering component in the first graphics library. The first custom rendering component includes a custom rendering class that is a rewritten version of the native rendering class in the native rendering component of the first graphics library. Thus, when using the first graphics library in the native application to obtain graphics data in the target format for rendering on the page of the native application, the graphics data in the target format for rendering on the page of the native application can be obtained using the first graphics library in the native application based on the custom rendering class in the first custom rendering component.

[0168] Furthermore, the first graphics library contains an API, which includes the API of a transfer function in a second custom rendering component within the native application. This second custom rendering component is a rewritten version of the second graphics library and includes both the transfer function and the second graphics library, with an association between the transfer function and the second graphics library. In one embodiment, this API can be located within a custom rendering class. Thus, when transferring graphics data of the target format to the second graphics library in the native application, the transfer function in the second custom rendering component can be called based on the API in the first graphics library, and the target format graphics data can be transferred to the second graphics library within the second custom rendering component through the association based on the transfer function.

[0169] In one embodiment, the native rendering component may include SVGRenderer, etc. The native rendering class may include SVGPainter from SVGRenderer. The passing function may include PatchString, etc.

[0170] In this application, when a chart including 2D / 3D graphics needs to be rendered on a native application's page, a first graphics library in the native application can be used to obtain graphics data in the target format for rendering on the native application's page; the target format graphics data can be rendered by a second graphics library. The target format graphics data is then passed to the second graphics library in the native application. The target format graphics data is then rendered on the native application's page using the second graphics library in the native application.

[0171] On the one hand, it enables the reuse of a single set of code. For example, a single set of code can be reused in both the carrier web and the carrier native application, achieving the effect of "develop once, use on multiple platforms." This allows developers to develop only one set of computer program code for each page, i.e., the first set of computer program code, thereby reducing the workload of developers and lowering labor costs.

[0172] On the other hand, the computer program code of the converted page, i.e., the second computer program code, can support the technology stack of the carrier's native application and can use the relevant functions of the first graphics library, such as the Echarts graphics library. For example, the first graphics library can be used to obtain graphic data in a target format, such as SVG format, for rendering on the page, and the target format graphic data can be passed to the second graphics library, such as the Skia graphics library. The second graphics library can then be used to render the target format graphic data on the page. In this way, not only can the goal of rendering the target format graphic data to draw charts including 2D / 3D graphics on the page be achieved, but also, since the rendered target format graphic data is obtained using the first graphics library, the appearance of the charts including 2D / 3D graphics on the carrier's native application page is the same as the appearance of the charts including 2D / 3D graphics on the web page hosted on the carrier web. This avoids the situation where the appearance of the charts including 2D / 3D graphics seen by the user on the web page hosted on the carrier web and the native application page are different, thereby avoiding a reduction in user experience.

[0173] Secondly, charts including 2D / 3D graphics in pages displayed on the native application are not constrained by a lower-level technology stack than the native application (such as the technology stack of the native web). This ensures that many expected functions (such as more interactive features) of charts including 2D / 3D graphics in pages displayed on the native application can be used normally, and many expected effects (such as the native application's technology stack supporting faster rendering speed than the technology stack of the native web, thus improving rendering speed) can be achieved, thereby improving the user experience of charts including 2D / 3D graphics in pages displayed on the native application.

[0174] It should be noted that, for the sake of simplicity, the method embodiments are all described as a series of actions. However, those skilled in the art should understand that this application is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this application. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are all optional embodiments, and the actions involved are not necessarily essential to this application.

[0175] Reference Figure 3 This diagram illustrates a structural block diagram of a data processing apparatus according to this application, applied in an electronic device. The electronic device runs a native application, which includes a first graphics library and a second graphics library. The native application supports rendering graphics data using the second graphics library, but does not support rendering graphics data using the first graphics library. The apparatus includes:

[0176] The first acquisition module 11 is used to acquire target format graphics data for rendering on the page of the native application using a first graphics library in the native application; the target format graphics data can be rendered by a second graphics library.

[0177] The transfer module 12 is used to transfer graphic data in the target format to the second graphics library in the native application;

[0178] Rendering module 13 is used to render target format graphics data on the page of the native application using a second graphics library in the native application.

[0179] In one alternative implementation, the first graphics library includes the Echarts graphics library, the target format includes SVG format, and the second graphics library includes the Skia graphics library, etc.

[0180] In an optional implementation, the first acquisition module includes:

[0181] The listening unit is used to listen for the manipulation information of the operator on the chart currently displayed on the page of the native application;

[0182] A conversion unit is used to convert the control information into control information in a format supported by a first graphics library;

[0183] The calculation unit is used to calculate the currently displayed chart and the manipulation information of the format supported by the first graphics library using the first graphics library, so as to obtain the target format graphic data for rendering on the page of the native application.

[0184] In one alternative implementation, the native application includes a first custom rendering component, which is obtained by rewriting the native rendering component in the first graphics library. The first custom rendering component includes a custom rendering class that is a rewritten version of the native rendering class in the native rendering component of the first graphics library.

[0185] The first acquisition module includes:

[0186] The acquisition unit is used to acquire graphics data in the target format for rendering on the page of the native application based on the custom rendering class in the first custom rendering component and the first graphics library in the native application.

[0187] In one alternative implementation, the first graphics library has an API, which includes the API of a pass function in a second custom rendering component in the native application. The second custom rendering component is obtained by rewriting the second graphics library. The second custom rendering component includes the pass function and the second graphics library, and there is an association between the pass function and the second graphics library.

[0188] The transmission module includes:

[0189] The calling unit is used to call the passing function in the second custom rendering component based on the API in the first graphics library. The passing unit is used to pass the target format graphics data to the second graphics library in the second custom rendering component through the association relationship based on the passing function.

[0190] In this application, when it is necessary to render a chart including 2D / 3D graphics on a native application's page, a first graphics library in the native application can be used to obtain graphics data in a target format for rendering on the native application's page; the target format graphics data can be rendered by a second graphics library. The target format graphics data is passed to the second graphics library in the native application. The target format graphics data is rendered on the native application's page using the second graphics library in the native application. The target format graphics data may include a chart of 2D / 3D graphics.

[0191] On the one hand, it enables the reuse of a single set of code. For example, a single set of code can be reused in both the carrier web and the carrier native application, achieving the effect of "develop once, use on multiple platforms." This allows developers to develop only one set of computer program code for each page, i.e., the first set of computer program code, thereby reducing the workload of developers and lowering labor costs.

[0192] On the other hand, the computer program code of the converted page, i.e., the second computer program code, can support the technology stack of the carrier's native application and can use the relevant functions of the first graphics library, such as the Echarts graphics library. For example, the first graphics library can be used to obtain graphic data in a target format, such as SVG format, for rendering on the page, and the target format graphic data can be passed to the second graphics library, such as the Skia graphics library. The second graphics library can then be used to render the target format graphic data on the page. In this way, not only can the goal of rendering the target format graphic data to draw charts including 2D / 3D graphics on the page be achieved, but also, since the rendered target format graphic data is obtained using the first graphics library, the appearance of the charts including 2D / 3D graphics on the carrier's native application page is the same as the appearance of the charts including 2D / 3D graphics on the web page hosted on the carrier web. This avoids the situation where the appearance of the charts including 2D / 3D graphics seen by the user on the web page hosted on the carrier web and the native application page are different, thereby avoiding a reduction in user experience.

[0193] Secondly, charts including 2D / 3D graphics in pages displayed on the native application are not constrained by a lower-level technology stack than the native application (such as the technology stack of the native web). This ensures that many expected functions (such as more interactive features) of charts including 2D / 3D graphics in pages displayed on the native application can be used normally, and many expected effects (such as the native application's technology stack supporting faster rendering speed than the technology stack of the native web, thus improving rendering speed) can be achieved, thereby improving the user experience of charts including 2D / 3D graphics in pages displayed on the native application.

[0194] Reference Figure 4 The diagram shows a structural block diagram of a data processing device according to this application, which is applied to an electronic device. The electronic device has a development environment deployed therein. The development environment has a project for creating a native application. The project includes a first graphics library, a second graphics library, and a first computer program code for a page of the native application. The first computer program code includes at least an acquisition instruction for using the first graphics library to obtain graphics data in a target format for rendering on the page of the native application, and a first rendering instruction for using the first graphics library to render the graphics data in the target format on the page of the native application.

[0195] The device includes:

[0196] The second acquisition module 21 is used to acquire a packaging request for the first computer program code of the page of the native application in the project. The packaging request carries the identifier of the native application and is used to instruct the generation of the page of the native application based on the identifier of the native application and the first computer program code.

[0197] The third acquisition module 22 is used to acquire, based on the identifier of the native application, a transfer instruction for transferring the target format graphics data to the second graphics library in the native application and a second rendering instruction for rendering the target format graphics data on the page of the native application using the second graphics library in the native application; the second graphics library can be called by the native application to render the target format graphics data.

[0198] Replacement module 23 is used to replace the first rendering instruction in the first computer program code with the transmission instruction and the second rendering instruction to obtain the second computer program code of the native application's page;

[0199] Packaging module 24 is used to package the second computer program code of the native application's pages to obtain the native application's pages.

[0200] In an alternative implementation, the apparatus further includes:

[0201] A storage module is a second computer program code used to store pages from a native application.

[0202] In this application, a packaging request for the first computer program code of a page of a native application in an engineering project is obtained. The packaging request carries the identifier of the native application and is used to instruct the generation of the page of the native application based on the identifier of the native application and the first computer program code. Based on the identifier of the native application, a transfer instruction for transferring target format graphics data to a second graphics library in the native application and a second rendering instruction for rendering the target format graphics data on the page of the native application using the second graphics library in the native application are obtained; the second graphics library can be called by the native application to render the target format graphics data. The first rendering instruction in the first computer program code is replaced with the transfer instruction and the second rendering instruction to obtain the second computer program code of the page of the native application. The second computer program code of the page of the native application is packaged to obtain the page of the native application.

[0203] Thus, in cases where charts including 2D / 3D graphics need to be rendered on a native application's page, the target format graphics data for rendering on the native application's page can be obtained using a first graphics library in the native application; the target format graphics data can then be rendered by a second graphics library. The target format graphics data is passed to the second graphics library in the native application. The target format graphics data is then rendered on the native application's page using the second graphics library in the native application. The target format graphics data can include charts of 2D / 3D graphics.

[0204] On the one hand, it enables the reuse of a single set of code. For example, a single set of code can be reused in both the carrier web and the carrier native application, achieving the effect of "develop once, use on multiple platforms." This allows developers to develop only one set of computer program code for each page, i.e., the first set of computer program code, thereby reducing the workload of developers and lowering labor costs.

[0205] On the other hand, the computer program code of the converted page, i.e., the second computer program code, can support the technology stack of the carrier's native application and can use the relevant functions of the first graphics library, such as the Echarts graphics library. For example, the first graphics library can be used to obtain graphic data in a target format, such as SVG format, for rendering on the page, and the target format graphic data can be passed to the second graphics library, such as the Skia graphics library. The second graphics library can then be used to render the target format graphic data on the page. In this way, not only can the goal of rendering the target format graphic data to draw charts including 2D / 3D graphics on the page be achieved, but also, since the rendered target format graphic data is obtained using the first graphics library, the appearance of the charts including 2D / 3D graphics on the carrier's native application page is the same as the appearance of the charts including 2D / 3D graphics on the web page hosted on the carrier web. This avoids the situation where the appearance of the charts including 2D / 3D graphics seen by the user on the web page hosted on the carrier web and the native application page are different, thereby avoiding a reduction in user experience.

[0206] Secondly, charts including 2D / 3D graphics in pages displayed on the native application are not constrained by a lower-level technology stack than the native application (such as the technology stack of the native web). This ensures that many expected functions (such as more interactive features) of charts including 2D / 3D graphics in pages displayed on the native application can be used normally, and many expected effects (such as the native application's technology stack supporting faster rendering speed than the technology stack of the native web, thus improving rendering speed) can be achieved, thereby improving the user experience of charts including 2D / 3D graphics in pages displayed on the native application.

[0207] As the device embodiment is basically similar to the method embodiment, the description is relatively simple, and relevant parts can be found in the description of the method embodiment.

[0208] Optionally, this application also provides an electronic device, including: a processor, a memory, and a computer program stored in the memory and executable on the processor. When the computer program is executed by the processor, it implements the various processes of the above method embodiments and achieves the same technical effect. To avoid repetition, it will not be described again here.

[0209] This application also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it implements the various processes of the above-described method embodiments and achieves the same technical effects. To avoid repetition, it will not be described again here. The computer-readable storage medium may be a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, etc.

[0210] Figure 5 This is a block diagram illustrating an electronic device 800. For example, the electronic device 800 may be a mobile phone, computer, digital broadcasting terminal, messaging device, game console, tablet device, medical device, fitness equipment, personal digital assistant, etc.

[0211] Reference Figure 5 The electronic device 800 may include one or more of the following components: a processing component 802, a memory 804, a power supply component 806, a multimedia component 808, an audio component 810, an input / output (I / O) interface 812, a sensor component 814, and a communication component 816.

[0212] Processing component 802 typically controls the overall operation of electronic device 800, such as operations associated with display, telephone calls, data communication, camera operation, and recording operations. Processing component 802 may include one or more processors 820 to execute instructions to complete all or part of the steps of the methods described above. Furthermore, processing component 802 may include one or more modules to facilitate interaction between processing component 802 and other components. For example, processing component 802 may include a multimedia module to facilitate interaction between multimedia component 808 and processing component 802.

[0213] Memory 804 is configured to store various types of data to support the operation of device 800. Examples of this data include instructions for any application or method operating on electronic device 800, contact data, phonebook data, messages, images, videos, etc. Memory 804 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 storage, flash memory, magnetic disk, or optical disk.

[0214] Power supply component 806 provides power to various components of electronic device 800. Power supply component 806 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to electronic device 800.

[0215] Multimedia component 808 includes a screen that provides an output interface between the electronic device 800 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touchscreen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensors may sense not only the boundaries of the touch or swipe action but also the duration and pressure associated with the touch or swipe operation. In some embodiments, multimedia component 808 includes a front-facing camera and / or a rear-facing camera. When the device 800 is in an operating mode, such as a shooting mode or a video mode, the front-facing camera and / or the rear-facing camera may receive external multimedia data. Each front-facing camera and rear-facing camera may be a fixed optical lens system or have focal length and optical zoom capabilities.

[0216] Audio component 810 is configured to output and / or input audio signals. For example, audio component 810 includes a microphone (MIC) configured to receive external audio signals when electronic device 800 is in an operating mode, such as call mode, recording mode, and voice recognition mode. The received audio signals may be further stored in memory 804 or transmitted via communication component 816. In some embodiments, audio component 810 also includes a speaker for outputting audio signals.

[0217] I / O interface 812 provides an interface between processing component 802 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include, but are not limited to, home buttons, volume buttons, power buttons, and lock buttons.

[0218] Sensor assembly 814 includes one or more sensors for providing state assessments of various aspects of electronic device 800. For example, sensor assembly 814 may detect the on / off state of device 800, the relative positioning of components such as the display and keypad of electronic device 800, changes in position of electronic device 800 or a component of electronic device 800, the presence or absence of user contact with electronic device 800, orientation or acceleration / deceleration of electronic device 800, and temperature changes of electronic device 800. Sensor assembly 814 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. Sensor assembly 814 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, sensor assembly 814 may also include an accelerometer, gyroscope, magnetometer, pressure sensor, or temperature sensor.

[0219] Communication component 816 is configured to facilitate wired or wireless communication between electronic device 800 and other devices. Electronic device 800 can access wireless networks based on communication standards, such as WiFi, carrier networks (such as 2G, 3G, 4G, or 5G), or combinations thereof. In one exemplary embodiment, communication component 816 receives broadcast signals or broadcast operation information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, communication component 816 also includes a near-field communication (NFC) module to facilitate short-range communication. For example, the NFC module may be implemented based on radio frequency identification (RFID) technology, Infrared Data Association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

[0220] In an exemplary embodiment, the electronic device 800 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field-programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the methods described above.

[0221] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 804 including instructions, which can be executed by a processor 820 of an electronic device 800 to perform the above-described method. For example, the non-transitory computer-readable storage medium may be a ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage device, etc.

[0222] Figure 6 This is a block diagram of an electronic device 1900 shown in this application. For example, the electronic device 1900 can be provided as a server.

[0223] Reference Figure 6 The electronic device 1900 includes a processing component 1922, which further includes one or more processors, and memory resources represented by memory 1932 for storing instructions, such as application programs, that can be executed by the processing component 1922. The application programs stored in memory 1932 may include one or more modules, each corresponding to a set of instructions. Furthermore, the processing component 1922 is configured to execute instructions to perform the methods described above.

[0224] Electronic device 1900 may also include a power supply component 1926 configured to perform power management of electronic device 1900, a wired or wireless network interface 1950 configured to connect electronic device 1900 to a network, and an input / output (I / O) interface 1958. Electronic device 1900 can operate on an operating system stored in memory 1932, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, or similar.

[0225] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0226] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part 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 ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0227] The embodiments of this application have been described above with reference to the accompanying drawings. However, this application is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of this application without departing from the spirit and scope of the claims, and all of these forms are within the protection scope of this application.

[0228] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed in this application can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0229] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0230] In the embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative. For instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0231] The units described as separate components may or may not be physically separate. 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 the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0232] In addition, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0233] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, ROM, RAM, magnetic disks, or optical disks.

[0234] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A data processing method, characterized by, The method is applied to electronic devices running native applications. These native applications contain a first graphics library and a second graphics library. The native application supports rendering graphics data using the second graphics library, but does not support rendering graphics data using the first graphics library. Use the first graphics library in the native application to obtain graphics data in the target format for rendering on the native application's page; the target format graphics data can be rendered by the second graphics library; Pass the target format graphics data to the second graphics library in the native application; Use a second graphics library in the native application to render graphics data in the target format on the native application's page; The step of using a first graphics library in the native application to obtain graphics data in the target format for rendering on the page of the native application includes: When the native application enters the page, it retrieves page data from the cloud, calls the first graphics library, and uses the first graphics library to perform calculations based on the page data to obtain target format graphics data for rendering on the page of the native application. Alternatively, if the native application has already rendered the page, listen for the operator's manipulation information of the chart currently displayed on the native application's page; The control information is converted into control information in a format supported by the first graphics library; The first graphics library is used to calculate the target format graphics data for rendering on the native application's page by using the currently displayed chart and the manipulation information of the formats supported by the first graphics library.

2. The method of claim 1, wherein, The native application includes a first custom rendering component, which is obtained by rewriting the native rendering component in the first graphics library. The first custom rendering component includes a custom rendering class that is rewritten from the native rendering class in the native rendering component of the first graphics library. The step of using a first graphics library in the native application to obtain graphics data in the target format for rendering on the page of the native application includes: The custom rendering class in the first custom rendering component uses the first graphics library in the native application to obtain graphics data in the target format for rendering on the page of the native application.

3. The method according to claim 1 or 2, characterized in that, The first graphics library has an API, which includes the API of the pass function in the second custom rendering component in the native application. The second custom rendering component is obtained by rewriting the second graphics library. The second custom rendering component includes the pass function and the second graphics library, and there is an association between the pass function and the second graphics library. The step of transferring the target format graphics data to the second graphics library in the native application includes: The API in the first graphics library is used to call the transfer function in the second custom rendering component, and the target format graphics data is transferred to the second graphics library in the second custom rendering component through the association relationship based on the transfer function.

4. A data processing method, characterized by, It is applied to electronic devices, in which a development environment is deployed, and an engineering project with a native application is created in the development environment. The engineering project includes a first graphics library, a second graphics library, and a first computer program code of a page of the native application. The first computer program code includes at least an acquisition instruction for using the first graphics library to obtain graphics data of a target format for rendering on the page of the native application, and a first rendering instruction for using the first graphics library to render graphics data of the target format on the page of the native application. The method includes: Obtain a packaging request for the first computer program code of the native application page in the project, the packaging request carrying the identifier of the native application, the packaging request being used to instruct the generation of the native application page based on the identifier of the native application and the first computer program code; Based on the identifier of the native application, obtain the transfer instruction for passing the target format graphics data to the second graphics library in the native application and the second rendering instruction for rendering the target format graphics data on the page of the native application using the second graphics library in the native application; the second graphics library can be called by the native application to render the target format graphics data. The first rendering instruction in the first computer program code is replaced with the pass instruction and the second rendering instruction to obtain the second computer program code of the native application's page. The second computer program code of the native application's page is packaged to obtain the native application's page.

5. The method of claim 4, wherein, The method further includes: A second computer program code that stores pages from the native application.

6. A data processing apparatus, characterized in that, The device is used in an electronic device that runs a native application. The native application includes a first graphics library and a second graphics library. The native application supports rendering graphics data using the second graphics library, but does not support rendering graphics data using the first graphics library. The first acquisition module is used to acquire target format graphics data for rendering on the page of the native application using a first graphics library in the native application; the target format graphics data can be rendered by a second graphics library. The transfer module is used to transfer graphics data in the target format to the second graphics library in the native application; The rendering module is used to render target format graphics data on the pages of the native application using a second graphics library in the native application; The first acquisition module includes: The listening unit is used to listen for the manipulation information of the operator on the chart currently displayed on the native application's page, when the native application has already rendered the page; A conversion unit is used to convert the control information into control information in a format supported by a first graphics library; The calculation unit is used to calculate the currently displayed chart and the manipulation information of the format supported by the first graphics library using the first graphics library, so as to obtain the target format graphic data for rendering on the page of the native application. The device is also used for: When the native application enters the page, it retrieves page data from the cloud, calls the first graphics library, and uses the first graphics library to perform calculations based on the page data to obtain graphics data in the target format for rendering on the native application's page.

7. The apparatus according to claim 6, characterized in that, The native application includes a first custom rendering component, which is obtained by rewriting the native rendering component in the first graphics library. The first custom rendering component includes a custom rendering class that is rewritten from the native rendering class in the native rendering component of the first graphics library. The first acquisition module includes: The acquisition unit is used to acquire graphics data in the target format for rendering on the page of the native application based on the custom rendering class in the first custom rendering component and the first graphics library in the native application.

8. The apparatus according to claim 6 or 7, characterized in that, The first graphics library has an API, which includes the API of the pass function in the second custom rendering component in the native application. The second custom rendering component is obtained by rewriting the second graphics library. The second custom rendering component includes the pass function and the second graphics library, and there is an association between the pass function and the second graphics library. The transmission module includes: The calling unit is used to call the passing function in the second custom rendering component based on the API in the first graphics library. The passing unit is used to pass the target format graphics data to the second graphics library in the second custom rendering component through the association relationship based on the passing function.

9. A data processing apparatus, characterized in that, It is applied to electronic devices, in which a development environment is deployed, and an engineering project with a native application is created in the development environment. The engineering project includes a first graphics library, a second graphics library, and a first computer program code of a page of the native application. The first computer program code includes at least an acquisition instruction for using the first graphics library to obtain graphics data of a target format for rendering on the page of the native application, and a first rendering instruction for using the first graphics library to render graphics data of the target format on the page of the native application. The device includes: The second acquisition module is used to acquire a packaging request for the first computer program code of the native application page in the project, the packaging request carrying the identifier of the native application, and the packaging request being used to instruct the generation of the native application page based on the identifier of the native application and the first computer program code. The third acquisition module is used to acquire, based on the identifier of the native application, a transfer instruction for transferring the target format graphics data to the second graphics library in the native application, and a second rendering instruction for rendering the target format graphics data on the page of the native application using the second graphics library in the native application; the second graphics library can be called by the native application to render the target format graphics data. A replacement module is used to replace the first rendering instruction in the first computer program code with a pass instruction and a second rendering instruction to obtain the second computer program code of the native application's page; The packaging module is used to package the pages of a native application into a second computer program code, resulting in the pages of the native application.

10. The apparatus according to claim 9, characterized in that, The device further includes: A storage module is a second computer program code used to store pages from a native application.

11. An electronic device, characterized in that, include: A processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the computer program, when executed by the processor, implements the method as described in any one of claims 1 to 5.

12. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the method as described in any one of claims 1 to 5.

Images