CN111897607A

CN111897607A - Application interface loading and interaction method, device and storage medium

Info

Publication number: CN111897607A
Application number: CN201910372273.1A
Authority: CN
Inventors: 赵斌兴
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2019-05-06
Filing date: 2019-05-06
Publication date: 2020-11-06

Abstract

The embodiment of the application provides an application interface loading and interaction method, application interface loading and interaction equipment and a storage medium. In the embodiment of the application, in the application interface loading process, a plurality of data items to be rendered are combined into the data blocks to be rendered, the native UI components are called to render by taking the data blocks to be rendered as units, the number of interface elements needing to be called to be rendered by the native UI components in the loading process at each time is reduced, the number of interaction times between the interface elements and the native UI components is reduced, the interface loading speed can be improved, the problem of unsmooth interface in the loading process can be solved to a certain extent, and the user experience is improved.

Description

Application interface loading and interaction method, device and storage medium

Technical Field

The present application relates to the field of software technologies, and in particular, to a method, a device, and a storage medium for loading and interacting an application interface.

Background

The cross-platform is an important concept in software development, does not depend on an operating system or a hardware environment, and an application developed under one operating system can still run when being put into other operating systems, so that development cost is saved, and development period is shortened.

To achieve a visual experience similar to Native applications, applications developed across platforms typically rely on Native view components, such as Read Native (RN) bridging with javascript core, turning JS calls into Native (Native) calls. Compared with native application, the cross-platform developed application is easy to cause a pause phenomenon and has longer loading time under the condition that the interface loads longer content.

Disclosure of Invention

Aspects of the application provide a method, device and storage medium for loading and interacting an application interface, so as to solve the problem of stutter during interface loading, improve the interface loading speed and further improve the user experience.

The embodiment of the application provides an application interface loading method, which comprises the following steps: responding to an interface loading operation, and acquiring interface data required by rendering an application interface, wherein the interface data comprises a plurality of data items to be rendered; partitioning the data items to be rendered to obtain at least one data block to be rendered and the style attribute of the at least one data block to be rendered; and calling a native UI component to render the at least one data block to be rendered to the application interface according to the style attribute.

The embodiment of the application further provides an application interface interaction method, which comprises the following steps: displaying an application interface comprising a plurality of interface elements, wherein at least one interface element in the plurality of interface elements comprises a plurality of data items; in response to a trigger operation on a target interface element on the application interface, determining the relative position of the trigger operation in the target interface element; the target interface element is any interface element which contains a plurality of data items on the application interface; determining a target data item corresponding to the relative position according to layout information among data items contained in the target interface element; and processing the target data item according to a processing mode corresponding to the trigger operation.

An embodiment of the present application further provides a terminal device, including: a memory, a processor, and a display screen; the memory is used for storing a computer program and a native UI component; the display screen is used for displaying an application interface; the processor, coupled with the memory, to execute the computer program to: responding to an interface loading operation, and acquiring interface data required by rendering an application interface, wherein the interface data comprises a plurality of data items to be rendered; partitioning the data items to be rendered to obtain at least one data block to be rendered and the style attribute of the at least one data block to be rendered; and calling a native UI component to render the at least one data block to be rendered to the application interface according to the style attribute.

Embodiments of the present application also provide a computer-readable storage medium storing computer instructions, which, when executed by one or more processors, cause the one or more processors to perform the steps in the application interface loading method provided in the embodiments of the present application.

An embodiment of the present application further provides a terminal device, including: a memory, a processor, and a display screen; the memory for storing a computer program; the display screen is used for displaying an application interface containing a plurality of interface elements, and at least one interface element in the plurality of interface elements contains a plurality of data items; the processor, coupled with the memory, to execute the computer program to: in response to a trigger operation on a target interface element on the application interface, determining the relative position of the trigger operation in the target interface element; the target interface element is any interface element which contains a plurality of data items on the application interface; determining a target data item corresponding to the relative position according to layout information among data items contained in the target interface element; and processing the target data item according to a processing mode corresponding to the trigger operation.

Embodiments of the present application also provide a computer-readable storage medium storing computer instructions, which, when executed by one or more processors, cause the one or more processors to perform the steps in the application interface interaction method provided by the embodiments of the present application.

In the embodiment of the application, in the application interface loading process, a plurality of data items to be rendered are combined into the data blocks to be rendered, the native UI components are called to render by taking the data blocks to be rendered as units, the number of interface elements needing to be called to be rendered by the native UI components in the loading process at each time is reduced, the number of interaction times between the interface elements and the native UI components is reduced, the interface loading speed can be improved, the problem of unsmooth interface in the loading process can be solved to a certain extent, and the user experience is improved.

Further, for the interface element rendered by the data block to be rendered, the embodiment of the application further provides an interaction method, so that the interaction of the interface element can be ensured while the interface loading speed is increased, and the interaction requirement of a user can be met.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:

fig. 1a is a schematic structural diagram of an application system provided in an exemplary embodiment of the present application;

fig. 1b is an example of a text class list provided in an exemplary embodiment of the present application: a country/region list diagram;

FIG. 1c is a diagram illustrating the result of dividing the country names in the country/region list of FIG. 1b into a block of data to be rendered according to every 3 country names;

FIG. 1d is a diagram illustrating the result of dividing the data block to be rendered by the initial pinyin for the names of countries in the country/region list shown in FIG. 1 b;

FIG. 1e is a diagram illustrating the result of dividing a block of data to be rendered by the number of words contained in the country name for the country name in the country/region list of FIG. 1 b;

FIG. 1f is a diagram illustrating a state of the application interface and its input box or input area after "Germany" is inputted on the application interface of the country/region list shown in FIG. 1 b;

FIG. 1g is a schematic diagram of a process by which a terminal device calculates a distance between a trigger position and a top boundary of a target interface element;

fig. 2a is a schematic flowchart of an application interface loading method according to an exemplary embodiment of the present disclosure;

FIG. 2b is a flowchart illustrating an application interface interaction method according to an exemplary embodiment of the present disclosure;

fig. 3 is a schematic structural diagram of a terminal device according to an exemplary embodiment of the present application;

fig. 4 is a schematic structural diagram of another terminal device according to an exemplary embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be described in detail and completely with reference to the following specific embodiments of the present application and the accompanying drawings. It should be apparent that the described embodiments are only some of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

The existing cross-platform developed application is easy to cause a stuck phenomenon in the interface loading process, especially under the condition of loading longer content, and the loading time is longer. For the technical problems, in some embodiments of the application, in the application interface loading process, a plurality of data items to be rendered are combined into a data block to be rendered, and a native UI component is called by taking the data block to be rendered as a unit for rendering, so that the number of interface elements needing to be called by the native UI component for rendering in each loading process is reduced, the number of interaction times with the native UI component is reduced, the interface loading speed is favorably improved, the problem of stuttering in the interface loading process can be solved to a certain extent, and the user experience is improved.

The technical solutions provided by the embodiments of the present application are described in detail below with reference to the accompanying drawings.

Fig. 1a is a schematic structural diagram of an application system according to an exemplary embodiment of the present application. As shown in fig. 1a, the application system includes: terminal equipment 101 and server side equipment 102.

In this embodiment, the number of the terminal apparatuses 101 may be one or multiple. The terminal device 101 is a computer device located at a user side (generally, various users of the terminal device, which may be a user or another device), and has certain computing, storing, communicating and displaying capabilities, and may be a smart phone with a display screen, a tablet computer, a personal computer, a wearable device, or other electronic devices with a display screen. The terminal device 101 of the present embodiment generally includes at least one processor, at least one memory, and a display screen. The number of processors and memories depends on the configuration and type of terminal device 101. The Memory may include volatile, such as RAM, non-volatile, such as Read-Only Memory (ROM), flash Memory, etc., or both. The memory typically stores an Operating System (OS), one or more application programs, and may also store program data and the like. In addition to the processor and the memory, the terminal device 101 further includes some basic configurations, such as a network card chip, an IO bus, an audio/video component, and the like. Optionally, the terminal device 101 may also include some peripheral devices, such as a keyboard, a mouse, a stylus, a printer, etc. Such peripheral devices are generally known in the art and will not be described in detail herein.

In this embodiment, the number of the server devices 102 may be one or multiple. The server device 102 is a platform designed to meet various application requirements and comprising a combination of hardware and software, and generally includes a processor, a hard disk, a memory, a system bus, and the like, similar to a general-purpose computer architecture. The embodiment does not limit the implementation form of the server device 102, and may be, for example, a conventional server, a cloud host, a virtual center, or a server array.

In the present embodiment, the terminal device 101 is connected to the server device 102 in a communication manner. The terminal device 101 and the server device 102 may be connected by a wired or wireless network. Optionally, the terminal device 101 may be communicatively connected to the server device 102 through a mobile network, and accordingly, the network format of the mobile network may be any one of 2G (gsm), 2.5G (gprs), 3G (WCDMA, TD-SCDMA, CDMA2000, UTMS), 4G (LTE), 4G + (LTE +), 5G, WiMax, or a new network format that will appear in the future. Optionally, the terminal device 101 may also be communicatively connected to the server device 102 through bluetooth, WiFi, infrared, zigbee, or NFC.

In this embodiment, at least one application program that can provide local services for a user is installed on the terminal device 101, and the application program may be a native application program or an application program developed across platforms (simply referred to as a cross-platform application program). The native application is an application specifically developed for the operating system of the terminal device 101, and cannot run on other operating systems; accordingly, a cross-platform application refers to an application developed based on a cross-platform development framework that can run on different operating systems. In the present embodiment, the cross-platform development framework used for developing the cross-platform application is not limited, and may be Weex, Cordova, Ionic, AppCan, Dcloud, APICloud, or ReactNative, for example. In this embodiment, the emphasis is given to the cross-platform application on the terminal device 101, and the emphasis is subsequently described for the cross-platform application.

It should be noted that, in this embodiment, the cross-platform application installed on the terminal device 101 is not limited, and may be an application developed across platforms and capable of providing any service, for example, a shopping application, a game application, an email application, an instant messaging application, a map application, an audio/video application, an electronic reading application, a home service application, or a financing application developed across platforms.

No matter what kind of service is provided, the terminal device 101 runs the cross-platform application, and may provide the user with one or more application interfaces. Under the condition that a plurality of application interfaces are provided, the application interfaces can be switched with each other or can jump to each other; further, the application interfaces may have a hierarchical relationship therebetween. For any application interface, a plurality of interface elements are generally included, which may include, but are not limited to: pictures, text, buttons, scroll bars, input boxes, navigation type controls, floating window and/or page switching type controls, and the like. Among these interface elements, some interface elements have an interactive function, and some interface elements also have no interactive function; of course, it is also an alternative implementation that all interface elements on the application interface have interactive functionality. For the interface element with the interactive function, the corresponding service can be provided for the user in response to the triggering operation of the user, for example, jumping to the next application interface, or popping up a dialog box, or outputting voice information to the user, or playing audio and video to the user, or displaying image and text type information to the user, and the like.

Optionally, the user may issue an interface loading operation to trigger the terminal device 101 to provide an application interface for the user. In different use states of the cross-platform application program, the interface loading operation mode and the application interface provided for the user are different, and the interface loading operation and the provided application interface are not limited in this embodiment. For example, for the case of launching a cross-platform application, the user may double-click an application icon on the desktop of the terminal device 101, and the terminal device 101 may present an application header interface to the user in response to the user double-clicking the application icon. For another example, in the case that the user returns to the previous application interface from the current application interface during the usage of the cross-platform application program, the user may click a return control on the current application interface, for example, "←", and the terminal device 101 may present the previous application interface to the user in response to the operation of the user clicking the return control. For another example, in the use process of the cross-platform application program, in a case that the user loads the text class list on the current application interface, the user may click the list loading control on the current application interface, taking loading the country/region list related to the address information as an example, the list loading control may be but is not limited to: the "location" selection control, the terminal device 101 may respond to the operation of the user clicking the list loading control on the current application interface to display a text type list, such as the country/region list shown in fig. 1b, to the user, where the list includes a plurality of country names.

For the terminal device 101, in response to the interface loading operation, the process of providing the corresponding application interface to the user includes, but is not limited to: the method comprises the steps of obtaining interface data required by rendering an application interface, and rendering the application interface according to the interface data.

In some optional embodiments, the interface data already exists in the local storage space of the terminal device 101, and the terminal device 101 may directly obtain the interface data required for rendering the application interface from the local storage space in response to the interface loading operation. Optionally, the interface data may be previously issued or pushed by the server device 102 to the terminal device 101, or may be stored in the local storage space of the terminal device 101 by the user in advance.

In other alternative embodiments, the interface data needs to be provided by the server device 102 in real time, and the terminal device 101 may send a data request to the server device 102 in response to the interface loading operation; the server device 102 acquires corresponding interface data according to the data request and returns the interface data to the terminal device 101; the terminal device 101 receives interface data returned by the server device 102.

The server device 102 of this embodiment is installed with a server program corresponding to the cross-platform application program on the terminal device 101, and may respond to various requests issued by the terminal device 101 during the process of running the cross-platform application program, perform relevant processing for the requests, and return processing results to the terminal device 101, and may also provide various resources to the terminal device 101, store relevant data for the terminal device 101, and so on. Based on this, after receiving the data request sent by the terminal device 101, the server device 102 may obtain interface data corresponding to the data request, and return the interface data to the terminal device 101.

After obtaining the Interface data required for rendering the application Interface, in order to achieve a visual experience similar to that of the native application program, the terminal device 101 may invoke a native User Interface (UI) component, and render the application Interface of the cross-platform application program according to the Interface data. The native UI component is a UI component specifically developed for an operating system of the terminal device 101, and mainly implements functions related to interface presentation. These native UI components include, but are not limited to: a text view component, a picture view component, and/or a scroll view component; the text view component is mainly used for displaying texts, the picture view component is mainly used for displaying pictures, and the scroll view component is mainly used for scrolling the components. These components may vary in implementation depending on the operating system of the terminal device 101. For example, for an android system, the text view component may be TextView, the picture view component may be ImageView, and the scroll view component may be ScrollView. For an ios system, the text view component may be UITextField, the picture view component may be UIImageView, and the scroll view component may be UIScrollView.

In this embodiment, the interface data required for rendering the application interface may include one or more data items to be rendered. An item of data to be rendered refers to an item of data that needs to be rendered on an application interface, and may be, but is not limited to: pictures, text, controls, floating windows, audio/video or scroll bars, etc. The different data items to be rendered may be the same type of data, e.g. both text or pictures. Of course, the different data items to be rendered may also be different types of data, for example, a part of the data items to be rendered is text, and a part of the data items to be rendered is pictures. In this embodiment, it is desirable to successfully render the data item to be rendered onto the application interface and to ensure a visual effect similar to that of the native application, thus invoking the native UI component implementation. In this embodiment, in order to increase the loading speed of the application interface, a pause phenomenon is not generated as much as possible in the interface loading process, and when the interface data required by the rendering application interface includes a plurality of data items to be rendered, the data items to be rendered may be blocked to obtain at least one data block to be rendered and a style attribute of the at least one data block to be rendered; and calling a native UI component to render at least one data block to be rendered to the application interface according to the style attribute. For the native UI component, the data blocks to be rendered are used as rendering units, and each data block to be rendered is rendered to the application interface according to the style attribute of each data block to be rendered.

In this embodiment, each data block to be rendered includes at least one data item to be rendered. In theory, the number of the divided data blocks to be rendered is smaller than the number of the data items to be rendered, but is not limited thereto. In a special case, the number of the divided data blocks to be rendered may be the same as the number of the data items to be rendered, i.e. one data item to be rendered is divided into one data block to be rendered. It is worth to be noted that the probability of occurrence of a special case is low, and the embodiment of the present application focuses on a case where the number of divided data blocks to be rendered is smaller than the number of data items to be rendered. Under the condition that the number of the divided data blocks to be rendered is smaller than that of the data items to be rendered, compared with the data items to be rendered, the number of the calling native UI components is reduced by taking the data blocks to be rendered as rendering units, the number of the calling native UI components is reduced, the number of interaction times with the native UI components is reduced, the interface loading speed is favorably improved, the problem of unsmooth interface loading process can be solved to a certain extent, and the user experience is improved.

It is worth noting that the method for blocking the data items to be rendered, which is provided by the embodiment of the application, is not only suitable for the case that the interface data includes a plurality of data items to be rendered, but also suitable for the case that the interface data includes one data item to be rendered. When the interface data includes a data item to be rendered, the data item to be rendered may be used as a data block to be rendered, and the method provided by the embodiment of the present application is also applicable.

In the embodiment of the present application, interface data is not limited, and all data content and data forms that can be rendered on an application interface are applicable to the embodiment of the present application. In an optional embodiment, considering that the list is generally text-type and generally long, and is easy to be jammed during the loading process, the method provided by the embodiment of the present application may be adopted to block the data items in the text-type list, and call the native UI component for rendering by using the block as a rendering unit, so as to reduce the number of interactions with the native UI component, which is beneficial to improving the interface loading speed, and to some extent, may solve the problem of jamming during the interface loading process. Based on this, in this alternative embodiment, the interface data is a list of text classes. Optionally, a line of data in the text class list is a data item to be rendered; or, a column of data in the text class list is a data item to be rendered.

In the embodiment of the present application, a plurality of data items to be rendered may be partitioned, but a specific partitioning manner is not limited. Several blocking methods are listed below:

blocking mode 1: the data items to be rendered can be partitioned according to the original display sequence among the data items to be rendered to obtain at least one data block to be rendered. The blocking mode 1 can ensure that the display sequence between the data items to be rendered does not change before and after blocking, and complies with the display requirements of the service layer.

Further, there may be multiple implementation manners for blocking the multiple data items to be rendered according to the original display sequence among the multiple data items to be rendered, which is further illustrated below:

block mode 1.1: and according to the original display sequence among the multiple data items to be rendered, sequentially dividing every N data items to be rendered into a data block to be rendered, wherein N is a natural number greater than or equal to 2.

For example, taking the country/region list shown in fig. 1b as an example, the country names such as "korean", "equatorial guinea", "danish", "germany", "degogania island", … ", and the like in fig. 1b are the data items to be rendered in the present embodiment, and the order between the country names shown in fig. 1b is the original display order, then according to the original display order shown in fig. 1b, every 3 country names may be divided into one data block to be rendered, and the blocking result is shown in fig. 1 c. In the blocking mode, the country names can be divided into a smaller number of data blocks to be rendered, 3 country names in one data block to be rendered can be rendered by calling the native UI component each time, the number of calling the native UI component is reduced, interface loading speed is improved conveniently, and the problem of blocking in the interface loading process can be solved to a certain extent.

Block mode 1.2: under the condition that the original display sequence among a plurality of data items to be rendered is ordered according to the first letter of pinyin, the data items to be rendered under the same first letter of pinyin can be divided into a data block to be rendered.

Still taking the country/region list shown in fig. 1b as an example, the "korean" and "equatorial-guaiaria" under the pinyin initial C may be divided into one data block to be rendered, the "germany", "degagasia", … ", etc. under the pinyin initial D may be divided into one data block to be rendered, and so on, and the result of the segmentation is shown in fig. 1D. In the blocking mode, the country names are blocked according to the pinyin initial letters, the country names can be divided into a smaller number of data blocks to be rendered, all the country names under the same pinyin initial letter can be rendered at one time by calling the original UI component each time, the number of times of calling the original UI component is reduced, the interface loading speed is improved conveniently, and the problem of blockage in the interface loading process can be solved to a certain extent.

It should be noted that, partitioning the plurality of data items to be rendered may maintain the original display order among the plurality of data items to be rendered, and comply with the display requirement of the business layer, but is not limited thereto. For example, under the condition that the original display sequence among the multiple data items to be rendered does not need to be maintained after the blocking, the multiple data items to be rendered can be blocked by adopting but not limited to the lower blocking mode 2, and the blocking mode can be more flexible and diversified.

Block division 2: and partitioning the data items to be rendered according to the attributes of the data items to be rendered to obtain at least one data block to be rendered.

It is worth noting that the attributes may be different for different data items to be rendered. For a data item of the literal class, its attributes include, but are not limited to: size, font, color and/or font, etc. Wherein the size of the text comprises the height and width of the text. For data items of the photo class, the attributes include, but are not limited to: size, type, shape, and/or color, etc. The size of the picture may include the height and width of the picture. In addition, the shape of the picture can be understood as the shape of the outline of the picture, but is not limited thereto; the color of the picture can be understood as the subject color in the picture, but is not limited thereto. For data items of a control class, the properties include, but are not limited to: height, length, color, location, and/or form, etc.

There may be a variety of blocking modes depending on the attributes of the data items to be rendered. In the following, further examples are given:

block mode 2.1: and dividing the data items to be rendered with the same size into a data block to be rendered according to the sizes of the data items to be rendered.

Still taking the country/region list shown in fig. 1b as an example, the size of the data item to be rendered may be understood as how many words are contained in each country name, and in this understanding manner, the two-word country names such as "korean", "germany", "denmark", … …, etc. may be divided into one data block to be rendered, the five-word country names such as "equatorial guinea" and "dominik" may be divided into one data block to be rendered, and so on, and the result of the division is shown in fig. 1 e. In the blocking mode, the country names are blocked according to the number of words contained in each country name, the country names can be divided into a smaller number of data blocks to be rendered, and all the country names with the same number of words can be rendered at one time by calling the native UI components each time, so that the number of calling the native UI components is reduced, the interface loading speed is improved, and the problem of blocking in the interface loading process can be solved to a certain extent.

Block division mode 2.2: and dividing the data items to be rendered with the same type into a data block to be rendered according to the types of the data items to be rendered. The method is suitable for blocking data items to be rendered, wherein the data items to be rendered are divided into one data block to be rendered, and then the native UI component is called to render by taking the data block to be rendered as a rendering unit, so that the frequency of calling the native UI component can be reduced, the interface loading speed can be increased conveniently, and the problem of blocking in the interface loading process can be solved to a certain extent.

It should be noted that, multiple data items to be rendered may be partitioned according to a certain attribute, for example, the above-mentioned partitioning modes 2.1 and 2.2 may be used separately; multiple data items to be rendered may also be blocked by combining multiple attributes at the same time, for example, the blocking modes 2.1 and 2.2 may be used in combination.

No matter which blocking mode is adopted, blocking operation is carried out on a plurality of data items to be rendered, and besides at least one data block to be rendered, the style attribute of at least one data block to be rendered can be obtained. After the style attributes of the at least one data block to be rendered and the at least one data block to be rendered are obtained, the native UI component can be called, and the native UI component renders the at least one data block to be rendered onto the application interface according to the style attributes of the at least one data block to be rendered.

In an optional embodiment, a default style attribute may be preset, and after the data block to be rendered is obtained, the style attribute of the data block to be rendered may be directly set as the default style attribute. Further optionally, the default style attribute may be preset according to the presentation requirements of the business layer.

In another optional embodiment, in response to the interface loading operation, in addition to obtaining the interface data including a plurality of data items to be rendered, the terminal device 101 may also obtain an original presentation style between the plurality of data items to be rendered, for example, information such as a line height, a font, and a color of each data item to be rendered, and a line spacing and a line feed between the data items to be rendered. Based on the method, the style attribute of at least one data block to be rendered can be generated according to the original display style among the data items to be rendered, so that the data items to be rendered can keep the same or similar display style before and after blocking as much as possible, and the display requirement of a service layer can be met as much as possible. The original display style among the multiple data items to be rendered is a display style meeting the display requirement of the service layer, and the display styles may be preset by the server device 102 or a user according to the display requirement of the service layer.

In this embodiment, the style attribute of the data block to be rendered is mainly embodied as the style attribute of the data item to be rendered contained in the data block to be rendered. Optionally, the original presentation style among the multiple data items to be rendered may be comprehensively considered, and the style attribute of the at least one data block to be rendered may be generated in combination with the distribution of the data items to be rendered in the data block to be rendered. Or, optionally, the style attribute of the data item to be rendered contained in each of the at least one data block to be rendered in the data block to be rendered to which the data item to be rendered belongs may be set according to the original style attribute of the data item to be rendered contained in each of the at least one data block to be rendered. In short, the style attribute of each data block to be rendered is set independently according to the original style attribute of the data item to be rendered contained in each data block to be rendered.

For each data block to be rendered, the style property of the data block to be rendered is set separately according to the original style property of the data item to be rendered, and the manner of setting the style property is the same or similar, and the first data block to be rendered is taken as an example for explanation. The first data block to be rendered is any one of the at least one data block to be rendered.

For the first data block to be rendered, the style attribute of the data item to be rendered contained in the first data block to be rendered may be set according to the original style attribute of the data item to be rendered contained in the first data block to be rendered.

Optionally, the style attribute of the data item to be rendered in the first data block to be rendered includes, but is not limited to: line height attributes, line feed attributes, font attributes, color attributes, and/or line spacing attributes. Based on this, setting the style attribute of the data item to be rendered in the first data block to be rendered according to the original style attribute of the data item to be rendered, which includes at least one of the following operations:

setting the row height attribute of a data item to be rendered (which is the data item to be rendered contained in the first data block to be rendered) in the first data block to be rendered according to the original row height attribute of the data item to be rendered contained in the first data block to be rendered;

setting a line feed attribute of a data item to be rendered (which is the data item to be rendered contained in the first data block to be rendered) in the first data block to be rendered according to an original line feed attribute of the data item to be rendered contained in the first data block to be rendered;

setting the font attribute of a data item to be rendered (which is the data item to be rendered contained in the first data block to be rendered) in the first data block to be rendered according to the original font attribute of the data item to be rendered contained in the first data block to be rendered;

setting the color attribute of a data item to be rendered (which is the data item to be rendered contained in the first data block to be rendered) in the first data block to be rendered according to the original color attribute of the data item to be rendered contained in the first data block to be rendered;

and setting the line spacing attribute between the data items to be rendered (which are contained in the first data block to be rendered) in the first data block to be rendered according to the original line spacing attribute between the data items to be rendered contained in the first data block to be rendered.

Further optionally, in the above various operations, the original style attribute of the data item to be rendered, which is included in the first data block to be rendered, may be directly set as the style attribute of the corresponding data item to be rendered in the first data block to be rendered. For example, for the case that the first data block to be rendered includes data items a and B to be rendered, the original attributes of line height, font, color, etc. of the data item a to be rendered may be set as the attributes of line height, font, color, etc. of the data item a to be rendered in the first data block to be rendered; setting the attributes of original line height, font, color and the like of the data item B to be rendered as the attributes of line height, font, color and the like of the data item B to be rendered in the first data block to be rendered; and setting the original line feed information between the data items A and B to be rendered as the line feed information of the data items A and B to be rendered in the first data block to be rendered.

In embodiments of the present application, a rendering result of a data block to be rendered on an application interface may be referred to as an interface element. It should be noted that the interface elements on the same application interface may be rendered by the data block to be rendered, or may be rendered by the data item to be rendered. In the embodiment of the application, the interface elements obtained by rendering the data blocks to be rendered and the application interfaces containing the interface elements are focused. In other words, the application interface in the embodiment of the present application includes a plurality of interface elements, at least one interface element in the plurality of interface elements includes a plurality of data items, where a data item corresponds to the data item to be rendered and is a rendering result of the data item to be rendered.

In some application scenarios, the application interface has interaction capability, and the interaction capability of the application interface is mainly reflected on the interface elements included in the application interface, that is, the interface elements on the application interface need to have interaction capability in order to interact with the user. In this embodiment of the application, in order to enable the interface element rendered by the data block to be rendered to have an interactive capability, a UI interaction event may be bound to at least one data block to be rendered, so that the interface element rendered by the at least one data block to be rendered has an interactive capability with a user. Depending on the implementation of the terminal 101, the UI interaction events supported by the terminal may vary. Optionally, the UI interaction event comprises at least one of: a click event, a long press event, a double click event, a touch event, or a swipe event. Optionally, the UI interaction event may be bound for the at least one data chunk to be rendered before the at least one data chunk to be rendered is rendered on the application interface, but is not limited thereto.

It should be noted that, in the embodiment of the present application, the UI interaction event bound with the data block to be rendered is different from the UI interaction event in the prior art. In the prior art, after a UI interaction event is bound to an object, a response action according to a trigger operation on the object is also directed to the object. However, in the UI interaction event in the embodiment of the present application, the bound object is the data block to be rendered, but the response action made according to the trigger event on the interface element rendered by the data block to be rendered is directed to a certain data item or certain several data items in the interface element, rather than the whole interface element.

In this embodiment of the present application, after rendering at least one data block to be rendered onto an application interface, if an interface element rendered by the data block to be rendered on the application interface has an interactive capability, the terminal device 101 may further perform the following operations:

responding to a trigger operation of a target interface element on the application interface, and determining the relative position of the trigger operation in the target interface element; the target interface element is an interface element rendered by any one data block in at least one data block to be rendered; determining a target data item corresponding to the relative position according to layout information among data items contained in the target interface element; and processing the target data item according to the processing mode corresponding to the trigger operation.

According to different application scenes, the UI interaction events bound for the data blocks to be rendered are different, the trigger operations corresponding to the UI interaction events are different, and correspondingly, the processing modes corresponding to the trigger operations are also different. The following examples illustrate:

example 1: the processing mode corresponding to the trigger operation refers to displaying the data item at the trigger position at a designated position on the application interface or other application interfaces related to the application interface. Then terminal device 101 may display the target data item at a specified location of the application interface or other associated application interface. The designated location may be a corresponding input box or input area on the application interface.

Taking the application interface shown in fig. 1D as an example, when the user clicks the country name "germany" under the pinyin initial D, the terminal device 101 may calculate the relative position of the click operation in the current interface element in response to the click operation of the user, determine that the target data item corresponding to the relative position is "germany" according to the layout information between the data items included in the current interface element, then return to the previous application interface, and display "germany" in the "country/region" input box or input area on the returned application interface, as shown in fig. 1 f.

Example 2: the processing mode corresponding to the trigger operation is to highlight the data item at the trigger position. Then the terminal device 101 may highlight the target data item. The highlighting manner includes but is not limited to: highlighting, font bolding, font tilting, underlining, line framing, blinking, and/or scrolling.

Example 3: the processing mode corresponding to the trigger operation refers to jumping to other application interfaces associated with the target data item. Then terminal device 101 may jump to other application interfaces associated with the target data item. For example, if the target data item is "commodity name" on the application interface, the user clicks "commodity name" and can jump to the commodity detail page corresponding to the commodity name. For another example, the target data item is a "navigation category control" on the application interface, such as "children garment" or "home appliance", and the user clicks the "navigation category control" to jump to the search result interface corresponding to the corresponding category.

In an alternative embodiment, it is assumed that the UI interaction event bound for the data chunk to be rendered includes a click event (clickevent), and the response action corresponding to the click event includes: and identifying a specific clicked data item (namely a target data item) in the clicked interface element (namely the target interface element), and carrying out corresponding processing on the target data item. In this optional embodiment, the trigger operation on the target interface element is specifically a click operation. Based on this, one way to determine the relative position of the trigger operation in the target interface element includes:

responding to a trigger operation of a target interface element on an application interface, and detecting a moving distance panMove of the trigger operation on the application interface; if the moving distance panMove is within a set distance range, for example-10 < panMove <10, determining that the triggering operation is a click operation instead of a sliding operation, and further determining a triggering position of the triggering operation on the application interface, determining a triggered interface element, and taking the triggered interface element as a target interface element;

calculating the relative position of the trigger position in the target interface element according to the relative position relationship between the boundary of the target interface element and the reference boundary and the relative position relationship between the trigger position and the reference boundary; the reference boundary is a certain boundary of the application interface to which the target interface element belongs or a certain boundary of an electronic screen displaying the application interface.

It should be noted that the reference boundary is specifically which boundary of the application interface or the electronic screen, and can be flexibly selected according to the layout style between the data items contained in the target interface element. For example, if the data items included in the target interface element are arranged from top to bottom, the top boundary of the application interface or the electronic screen may be selected as the reference boundary, or the bottom boundary of the application interface or the electronic screen may also be selected as the reference boundary. For another example, if the data items included in the target interface element are arranged from left to right, the left side boundary of the application interface or the electronic screen may be selected as the reference boundary, or the right side boundary of the application interface or the electronic screen may be selected as the reference boundary.

In an alternative embodiment, the reference boundary is assumed to be the top boundary of the application interface or electronic screen. Based on this, the manner of calculating the relative position of the trigger position in the target interface element includes: and calculating the distance between the trigger position and the top boundary of the target interface element according to the distance between the top boundary of the target interface element and the top boundary of the application interface or the electronic screen and the distance between the trigger position and the top boundary of the application interface or the electronic screen, and taking the distance as the relative position of the trigger operation in the target interface element.

Continuing with the previous example, and again taking the application interface shown in FIG. 1D as an example, the user clicks on the country name "Germany" under the Pinyin initial D, and the process by which the terminal device 101 calculates the distance between the trigger position and the top boundary of the target interface element is shown in FIG. 1 g. In fig. 1g, d1 represents the distance between the top boundary of the target interface element and the top boundary of the application interface, d2 represents the distance between the trigger position and the top boundary of the application interface, and d3 represents the distance between the trigger position and the top boundary of the target interface element.

After the distance between the trigger position and the top boundary of the target interface element is calculated, the average height of the data items is further calculated according to the number of the data items contained in the target interface element in the height direction and the overall height of the target interface element; and determining the data item at the trigger position as a target data item according to the distance between the trigger position and the top boundary of the target interface element and the average height of the data items and by combining the sequence of the data items contained in the target interface element in the height direction. In conjunction with fig. 1g, the target data item may be determined to be the country name "germany".

Further, after the target data item is determined, the target data item may be correspondingly processed according to a manner corresponding to the trigger operation. Alternatively, one approach may be as shown in FIG. 1 f.

It should be noted that, in the above-described embodiment, the relative positional relationship between the two objects is expressed by the distance between the two objects, but the relative positional relationship between the two objects may be expressed by using the relative positional coordinates of the two objects or the relative positional coordinates of the two objects in a certain direction, without being limited to the distance. For example, in the above-described embodiment, the relative positional relationship between the top boundary of the target interface element and the top boundary of the application interface or the electronic screen is represented by the distance between the top boundary of the target interface element and the top boundary of the application interface or the electronic screen, and besides, the relative positional relationship between the top boundary of the target interface element and the top boundary of the application interface or the electronic screen may also be represented by the relative positional coordinates of the top boundary of the target interface element and the top boundary of the application interface or the electronic screen.

Regarding the case that the bottom boundary of the application interface or the electronic screen is selected as the reference boundary, or the left boundary of the application interface or the electronic screen is selected as the reference boundary, or the right boundary of the application interface or the electronic screen is selected as the reference boundary, the manner of calculating the relative position of the trigger position in the target interface element is similar to the above, and details are not repeated.

In the above embodiments, the interface element including a plurality of data items, which is rendered by the data block to be rendered, is taken as an example, and the interaction manner between the user and the application interface is described. It should be noted that, any interface element including a plurality of data items exists on the application interface, which is suitable for the above interaction manner. In addition, in the above interaction manner, the generation manner of the "interface element including a plurality of data items" is not limited, and the data block to be rendered may be rendered in the manner described in the foregoing embodiment, and other manners that can render the interface element including a plurality of data items may also be applied to the embodiment of the present application.

Fig. 2a is a schematic flowchart of an application interface loading method according to an exemplary embodiment of the present application. The method is described from the perspective of a terminal device, and as shown in fig. 2a, the method includes:

and 21a, responding to the interface loading operation, and acquiring interface data required by the rendering application interface, wherein the interface data comprises a plurality of data items to be rendered.

22a, partitioning the data items to be rendered to obtain at least one data block to be rendered and the style attribute of the at least one data block to be rendered.

And 23a, calling a native UI component to render at least one data block to be rendered to the application interface according to the style attribute.

In this embodiment, the terminal device runs a cross-platform application program, and may provide an application interface to the user, where the number of the application interfaces may be one or more. For the terminal device, in response to the interface loading operation, the process of providing the corresponding application interface to the user includes but is not limited to: the method comprises the steps of obtaining interface data required by rendering an application interface, and rendering the application interface according to the interface data.

In some optional embodiments, the interface data already exists in the local storage space of the terminal device, and the terminal device may directly obtain the interface data required for rendering the application interface from the local storage space in response to the interface loading operation. Optionally, the interface data may be previously issued or pushed to the terminal device by the server device, or may be previously stored in the local storage space of the terminal device by the user.

In other optional embodiments, the interface data needs to be provided by the server device in real time, and the terminal device may send a data request to the server device in response to the interface loading operation; the server side equipment acquires corresponding interface data according to the data request and returns the interface data to the terminal equipment; and the terminal equipment receives interface data returned by the server equipment.

After obtaining the interface data required for rendering the application interface, in order to achieve a visual experience similar to that of the native application program, the terminal device may invoke a native user UI component and render the application interface of the cross-platform application program according to the interface data. An item of data to be rendered refers to an item of data that needs to be rendered on an application interface, and may be, but is not limited to: pictures, text, controls, floating windows, audio/video or scroll bars, etc. The different data items to be rendered may be the same type of data, e.g. both text or pictures. Of course, the different data items to be rendered may also be different types of data, for example, a part of the data items to be rendered is text, and a part of the data items to be rendered is pictures.

In this embodiment, in order to increase the loading speed of the application interface, a pause phenomenon is not generated as much as possible in the interface loading process, and when the interface data required by the rendering application interface includes a plurality of data items to be rendered, the data items to be rendered may be blocked to obtain at least one data block to be rendered and a style attribute of the at least one data block to be rendered; and calling a native UI component to render at least one data block to be rendered to the application interface according to the style attribute. For the native UI component, the data blocks to be rendered are used as rendering units, and each data block to be rendered is rendered to the application interface according to the style attribute of each data block to be rendered.

It should be noted that the method provided by this embodiment is not only suitable for the case where the interface data includes a plurality of data items to be rendered, but also suitable for the case where the interface data includes one data item to be rendered. When the interface data contains a data item to be rendered, the data item to be rendered can be used as a data block to be rendered, but the blocking effect is not obvious enough.

In the embodiment of the present application, interface data is not limited, and all data content and data forms that can be rendered on an application interface are applicable to the embodiment of the present application. In an alternative embodiment, the interface data is a list of text classes. Optionally, a line of data in the text class list is a data item to be rendered; or, a column of data in the text class list is a data item to be rendered.

In an alternative embodiment, in step 22a, blocking the plurality of data items to be rendered may include the following steps:

according to the original display sequence among the multiple data items to be rendered, partitioning the multiple data items to be rendered to obtain at least one data block to be rendered; or

And partitioning the data items to be rendered according to the attributes of the data items to be rendered to obtain at least one data block to be rendered.

Further optionally, the multiple data items to be rendered are blocked according to an original display order among the multiple data items to be rendered to obtain at least one data block to be rendered, including but not limited to the following manners:

sequentially dividing every N data items to be rendered into a data block to be rendered according to the original display sequence among the data items to be rendered, wherein N is a natural number which is greater than or equal to 2; or

Under the condition that the original display sequence among a plurality of data items to be rendered is ordered according to the first letter of pinyin, dividing the data items to be rendered under the same first letter of pinyin into a data block to be rendered.

Further optionally, the multiple data items to be rendered are blocked according to the attributes of the multiple data items to be rendered, so as to obtain at least one data block to be rendered, including but not limited to the following manners:

dividing the data items to be rendered with the same size into a data block to be rendered according to the sizes of the data items to be rendered; and/or

And dividing the data items to be rendered with the same type into a data block to be rendered according to the types of the data items to be rendered.

In an optional embodiment, in step 22a, obtaining the style attribute of at least one data block to be rendered may include: and generating the style attribute of at least one data block to be rendered according to the original display style among the multiple data items to be rendered.

Further optionally, generating a style attribute of at least one data block to be rendered according to an original presentation style among the multiple data items to be rendered, including: and respectively setting the style attribute of the data item to be rendered contained in the at least one data block to be rendered in the data block to be rendered to which the data item to be rendered belongs according to the original style attribute of the data item to be rendered contained in the at least one data block to be rendered. In short, the style attribute of each data block to be rendered is set independently according to the original style attribute of the data item to be rendered contained in each data block to be rendered.

Further optionally, in the above various operations, the original style attribute of the data item to be rendered, which is included in the first data block to be rendered, may be directly set as the style attribute of the corresponding data item to be rendered in the first data block to be rendered.

In some optional embodiments, in order to enable the interface element rendered by the data block to be rendered to have an interactive capability, the method of this embodiment further includes: and binding a UI interaction event for the at least one data block to be rendered, so that the interface element rendered by the at least one data block to be rendered has the capability of interacting with the user. According to different implementation forms of the terminal device, the supported UI interaction events are different. Optionally, the UI interaction event comprises at least one of: a click event, a long press event, a double click event, a touch event, or a swipe event. Optionally, the UI interaction event may be bound for the at least one data chunk to be rendered before the at least one data chunk to be rendered is rendered on the application interface, but is not limited thereto.

Further, after rendering at least one data block to be rendered onto the application interface, if the interface element rendered by the data block to be rendered has an interactive capability, the method of this embodiment further includes the following operations:

Optionally, the processing of the target data item according to the processing mode corresponding to the trigger operation includes at least one of the following modes:

displaying the target data item at a designated position of the application interface or other associated application interfaces;

highlighting the target data item;

and jumping to other application interfaces associated with the target data item.

Optionally, in response to a trigger operation on a target interface element on the application interface, determining a relative position of the trigger operation in the target interface element includes: responding to a trigger operation of a target interface element on an application interface, and detecting a moving distance of the trigger operation on the application interface; if the moving distance is within the set distance range, determining a trigger position of the trigger operation on the application interface, and taking the triggered interface element as a target interface element; calculating the relative position of the trigger position in the target interface element according to the relative position relationship between the boundary of the target interface element and the reference boundary and the relative position relationship between the trigger position and the reference boundary; the reference boundary is a certain boundary of the application interface to which the target interface element belongs or a certain boundary of an electronic screen displaying the application interface.

In an alternative embodiment, the reference boundary is assumed to be the top boundary of the application interface or electronic screen. Based on this, the manner of calculating the relative position of the trigger position in the target interface element includes: and calculating the distance between the trigger position and the top boundary of the target interface element according to the distance between the top boundary of the target interface element and the top boundary of the application interface or the electronic screen and the distance between the trigger position and the top boundary of the application interface or the electronic screen, wherein the distance is used as the relative position of the trigger operation in the target interface element.

Optionally, determining a target data item corresponding to the relative position according to layout information between data items included in the target interface element includes: calculating the average height of the data items according to the number of the data items contained in the height direction of the target interface element and the overall height of the target interface element; and determining the data item at the trigger position as the target data item according to the distance between the trigger position and the top boundary of the target interface element and the average height of the data item.

For some descriptions of the method provided in this embodiment, reference may be made to the corresponding descriptions in the foregoing system embodiments, which are not repeated herein.

Fig. 2b is a flowchart illustrating an application interface interaction method according to an exemplary embodiment of the present disclosure. The method is described from the perspective of a terminal device, and as shown in fig. 2b, the method includes:

21b, displaying an application interface containing a plurality of interface elements, wherein at least one interface element in the plurality of interface elements contains a plurality of data items.

22b, responding to the trigger operation of the target interface element on the application interface, and determining the relative position of the trigger operation in the target interface element; the target interface element is any interface element which contains a plurality of data items on the application interface.

And 23b, determining the target data item corresponding to the relative position according to the layout information among the data items contained in the target interface element.

And 24b, processing the target data item according to the processing mode corresponding to the trigger operation.

In this embodiment, the application interface has a plurality of interface elements, and at least one of the interface elements includes a plurality of data items. The interface element containing a plurality of data items has interactive capability.

When a user interacts with an interface element containing a plurality of data items, a trigger operation may be issued to the interface element containing the plurality of data items, and the trigger operation may be any one of a click, a long press, a slide, or a touch. For convenience of description, an interface element in which a user initiates an interactive operation is denoted as a target interface element, which is any interface element containing a plurality of data items. The terminal equipment can respond to the trigger operation of the target interface element on the application interface and determine the relative position of the trigger operation in the target interface element; determining a target data item corresponding to the relative position according to layout information among data items contained in the target interface element; and further, processing the target data item according to the processing mode corresponding to the trigger operation, and finishing the interactive operation with the target interface element.

Optionally, according to different application scenarios, UI interaction events bound for the data block to be rendered may be different, and then trigger operations corresponding to the UI interaction events may be different, and correspondingly, processing manners corresponding to the trigger operations may also be different. The following examples illustrate:

example 1: the processing mode corresponding to the trigger operation refers to displaying the data item at the trigger position at a designated position on the application interface or other application interfaces related to the application interface. The terminal device may then display the target data item at a specified location of the application interface or other associated application interface. The designated location may be a corresponding input box or input area on the application interface.

Example 2: the processing mode corresponding to the trigger operation is to highlight the data item at the trigger position. The terminal device may then highlight the target data item. The highlighting manner includes but is not limited to: highlighting, font bolding, font tilting, underlining, line framing, blinking, and/or scrolling.

Example 3: the processing mode corresponding to the trigger operation refers to jumping to other application interfaces associated with the target data item. Then the terminal device may jump to other application interfaces associated with the target data item.

Further, after the distance between the trigger position and the top boundary of the target interface element is calculated, the average height of the data items can be calculated according to the number of the data items contained in the target interface element in the height direction and the overall height of the target interface element; and determining the data item at the trigger position as a target data item according to the distance between the trigger position and the top boundary of the target interface element and the average height of the data items and by combining the sequence of the data items contained in the target interface element in the height direction.

Further, after the target data item is determined, the target data item may be correspondingly processed according to a manner corresponding to the trigger operation.

In this embodiment, the "interface element including a plurality of data items" may be obtained by rendering the data block to be rendered by using an application interface loading method, but is not limited thereto. Or in other ways that an interface element containing multiple data items can be rendered.

By adopting the application interface interaction method provided by the embodiment, the interaction between the user and the specific data item in the interface element can be realized under the condition that the interface element comprises a plurality of data items, the problem of interactivity faced by the interface element comprising a plurality of data items is solved, and the interaction requirement of the user is met.

It should be noted that in some of the flows described in the above embodiments and the drawings, a plurality of operations are included in a specific order, but it should be clearly understood that the operations may be executed out of the order presented herein or in parallel, and the sequence numbers of the operations, such as 21a, 22a, etc., are merely used for distinguishing different operations, and the sequence numbers themselves do not represent any execution order. Additionally, the flows may include more or fewer operations, and the operations may be performed sequentially or in parallel. It should be noted that, the descriptions of "first", "second", etc. in this document are used for distinguishing different messages, devices, modules, etc., and do not represent a sequential order, nor limit the types of "first" and "second" to be different.

Fig. 3 is a schematic structural diagram of a terminal device according to an exemplary embodiment of the present application. As shown in fig. 3, the terminal device includes: memory 31, processor 32 and display screen 33.

The memory 31 is used for storing computer programs and can be configured to store other various data to support operations on the terminal device. Examples of such data include instructions for any application or method operating on the terminal device, contact data, phonebook data, messages, pictures, videos, and native UI components, and the like. Optionally, the application herein comprises a cross-platform application.

And a display screen 33 for displaying an application interface, wherein the application interface is an application interface in a cross-platform application program. Of course, the display screen 33 may also display an application interface in the native application.

A processor 32, coupled to the memory 31, for executing the computer program in the memory 31 for:

responding to an interface loading operation, and acquiring interface data required by rendering an application interface, wherein the interface data comprises a plurality of data items to be rendered;

partitioning the data items to be rendered to obtain at least one data block to be rendered and the style attribute of the at least one data block to be rendered;

and calling a native UI component to render the at least one data block to be rendered to the application interface according to the style attribute.

In an alternative embodiment, the interface data is a list of text classes. Optionally, a line of data in the text class list is a data item to be rendered; or, a column of data in the text class list is a data item to be rendered.

In an optional embodiment, when the processor 32 blocks the plurality of data items to be rendered, it is specifically configured to: according to the original display sequence among the multiple data items to be rendered, partitioning the multiple data items to be rendered to obtain at least one data block to be rendered; or partitioning the data items to be rendered according to the attributes of the data items to be rendered to obtain at least one data block to be rendered.

Further optionally, when the processor 32 blocks the multiple data items to be rendered according to the original display order among the multiple data items to be rendered, the processor is specifically configured to: sequentially dividing every N data items to be rendered into a data block to be rendered according to the original display sequence among the data items to be rendered, wherein N is a natural number which is greater than or equal to 2; or under the condition that the original display sequence among the data items to be rendered is ordered according to the first letter of pinyin, dividing the data items to be rendered under the same first letter of pinyin into a data block to be rendered.

Further optionally, when the processor 32 blocks the multiple data items to be rendered according to the attributes of the multiple data items to be rendered, specifically configured to: dividing the data items to be rendered with the same size into a data block to be rendered according to the sizes of the data items to be rendered; and/or dividing the data items to be rendered with the same type into a data block to be rendered according to the types of the data items to be rendered.

In an optional embodiment, when obtaining the style attribute of at least one data block to be rendered, the processor 32 is specifically configured to: and generating the style attribute of at least one data block to be rendered according to the original display style among the multiple data items to be rendered.

Further optionally, when the processor 32 generates the style attribute of at least one data block to be rendered according to the original presentation style among the multiple data items to be rendered, it is specifically configured to: and respectively setting the style attribute of the data item to be rendered contained in the at least one data block to be rendered in the data block to be rendered to which the data item to be rendered belongs according to the original style attribute of the data item to be rendered contained in the at least one data block to be rendered. In short, the style attribute of each data block to be rendered is set independently according to the original style attribute of the data item to be rendered contained in each data block to be rendered.

Further, the processor 32 is specifically configured to: for the first data block to be rendered, the style attribute of the data item to be rendered in the first data block to be rendered may be set according to the original style attribute of the data item to be rendered included in the first data block to be rendered, including at least one of the following operations:

And the first data block to be rendered is any one of the at least one data block to be rendered.

In an alternative embodiment, processor 32 is further configured to: and binding a UI interaction event for the at least one data block to be rendered, so that the interface element rendered by the at least one data block to be rendered has the capability of interacting with the user. Optionally, the UI interaction event comprises at least one of: a click event, a long press event, a double click event, a touch event, or a swipe event. Optionally, the UI interaction event may be bound for the at least one data chunk to be rendered before the at least one data chunk to be rendered is rendered on the application interface, but is not limited thereto.

In an alternative embodiment, processor 32 is further configured to: in response to a trigger operation on a target interface element on the application interface, determining the relative position of the trigger operation in the target interface element; the target interface element is an interface element rendered by any data block in the at least one data block to be rendered; determining a target data item corresponding to the relative position according to layout information among data items contained in the target interface element; and processing the target data item according to a processing mode corresponding to the trigger operation.

Further optionally, when the processor 32 triggers a processing manner corresponding to the operation and processes the target data item, it is specifically configured to perform at least one of the following operations:

highlighting the target data item;

Further optionally, when determining the relative position of the trigger operation in the target interface element, the processor 32 is specifically configured to: responding to a trigger operation of a target interface element on an application interface, and detecting a moving distance of the trigger operation on the application interface; if the moving distance is within the set distance range, determining a trigger position of the trigger operation on the application interface, and taking the triggered interface element as a target interface element; calculating the relative position of the trigger position in the target interface element according to the relative position relationship between the boundary of the target interface element and the reference boundary and the relative position relationship between the trigger position and the reference boundary; the reference boundary is a certain boundary of the application interface to which the target interface element belongs or a certain boundary of an electronic screen displaying the application interface.

In an alternative embodiment, the reference boundary is assumed to be the top boundary of the application interface or electronic screen. Based on this, when calculating the relative position of the trigger position in the target interface element, the processor 32 is specifically configured to: and calculating the distance between the trigger position and the top boundary of the target interface element as the relative position of the trigger operation in the target interface element according to the distance between the top boundary of the target interface element and the top boundary of the application interface or the electronic screen and the distance between the trigger position and the top boundary of the application interface or the electronic screen.

Further optionally, when determining the target data item corresponding to the relative position, the processor 32 is specifically configured to: calculating the average height of the data items according to the number of the data items contained in the height direction of the target interface element and the overall height of the target interface element; and determining the data item at the trigger position as the target data item according to the distance between the trigger position and the top boundary of the target interface element and the average height of the data item.

Further, as shown in fig. 3, the terminal device further includes: communication components 34, power components 35, audio components 36, and the like. Only some of the components are schematically shown in fig. 3, and the terminal device is not meant to include only the components shown in fig. 3.

Accordingly, the present application further provides a computer-readable storage medium storing a computer program, where the computer program can implement the steps in the application interface loading method executable by the terminal device in the foregoing method embodiments when executed.

Fig. 4 is a schematic structural diagram of another terminal device according to an exemplary embodiment of the present application. As shown in fig. 4, the terminal device includes: a memory 41, a processor 42 and a display screen 43.

A memory 41 for storing the computer program and may be configured to store other various data to support operations on the terminal device. Examples of such data include instructions for any application or method operating on the terminal device, contact data, phonebook data, messages, pictures, videos, and native UI components, and the like. Optionally, the application herein comprises a cross-platform application.

The display screen 43 is used for displaying an application interface including a plurality of interface elements, and at least one interface element in the plurality of interface elements includes a plurality of data items.

A processor 42, coupled to the memory 41, for executing the computer program in the memory 41 to:

in response to a trigger operation on a target interface element on the application interface, determining the relative position of the trigger operation in the target interface element; the target interface element is any interface element which contains a plurality of data items on the application interface;

determining a target data item corresponding to the relative position according to layout information among data items contained in the target interface element;

and processing the target data item according to a processing mode corresponding to the trigger operation.

Further optionally, when the processor 42 triggers a processing manner corresponding to the operation and processes the target data item, it is specifically configured to perform at least one of the following operations:

highlighting the target data item;

Further optionally, when determining the relative position of the trigger operation in the target interface element, the processor 42 is specifically configured to: responding to a trigger operation of a target interface element on an application interface, and detecting a moving distance of the trigger operation on the application interface; if the moving distance is within the set distance range, determining a trigger position of the trigger operation on the application interface, and taking the triggered interface element as a target interface element; calculating the relative position of the trigger position in the target interface element according to the relative position relationship between the boundary of the target interface element and the reference boundary and the relative position relationship between the trigger position and the reference boundary; the reference boundary is a certain boundary of the application interface to which the target interface element belongs or a certain boundary of an electronic screen displaying the application interface.

In an alternative embodiment, the reference boundary is assumed to be the top boundary of the application interface or electronic screen. Based on this, when calculating the relative position of the trigger position in the target interface element, the processor 42 is specifically configured to: and calculating the distance between the trigger position and the top boundary of the target interface element as the relative position of the trigger operation in the target interface element according to the distance between the top boundary of the target interface element and the top boundary of the application interface or the electronic screen and the distance between the trigger position and the top boundary of the application interface or the electronic screen.

Further optionally, when determining the target data item corresponding to the above relative position, the processor 42 is specifically configured to: calculating the average height of the data items according to the number of the data items contained in the height direction of the target interface element and the overall height of the target interface element; and determining the data item at the trigger position as the target data item according to the distance between the trigger position and the top boundary of the target interface element and the average height of the data item.

Further, as shown in fig. 4, the terminal device further includes: communication components 44, power components 45, audio components 46, and the like. Only some of the components are schematically shown in fig. 4, and it is not meant that the terminal device includes only the components shown in fig. 4.

Accordingly, the present application further provides a computer-readable storage medium storing a computer program, where the computer program can implement the steps in the application interface interaction method that can be executed by the terminal device in the foregoing method embodiments when executed.

The memories of fig. 3 and 4 may be implemented by any type of volatile or non-volatile memory device or combination thereof, such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disk.

The communication components of fig. 3 and 4 described above are configured to facilitate wired or wireless communication between the device in which the communication component is located and other devices. The device in which the communication component is located may access a wireless network based on a communication standard, such as WiFi, 2G or 3G, or a combination thereof. In an exemplary embodiment, the communication component receives a broadcast signal or broadcast related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component may further include a Near Field Communication (NFC) module, Radio Frequency Identification (RFID) technology, infrared data association (IrDA) technology, Ultra Wideband (UWB) technology, Bluetooth (BT) technology, and the like.

The display screens in fig. 3 and 4 described above 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 touch screen to receive an input signal from a user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundary of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation.

The power supply components of fig. 3 and 4 described above provide power to the various components of the device in which the power supply components are located. The power components may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the device in which the power component is located.

The audio components of fig. 3 and 4 described above may be configured to output and/or input audio signals. For example, the audio component includes a Microphone (MIC) configured to receive an external audio signal when the device in which the audio component is located is in an operational mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signal may further be stored in a memory or transmitted via a communication component. In some embodiments, the audio assembly further comprises a speaker for outputting audio signals.

As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. An application interface loading method is characterized by comprising the following steps:

2. The method of claim 1, wherein blocking the plurality of data items to be rendered to obtain at least one data block to be rendered comprises:

3. The method of claim 2, wherein partitioning the plurality of data items to be rendered according to an original presentation order among the plurality of data items to be rendered to obtain at least one data block to be rendered, comprises:

according to the original display sequence among the multiple data items to be rendered, sequentially dividing every N data items to be rendered into a data block to be rendered, wherein N is a natural number greater than or equal to 2; or

And under the condition that the original display sequence among the data items to be rendered is ordered according to the first letter of pinyin, dividing the data items to be rendered under the same first letter of pinyin into a data block to be rendered.

4. The method of claim 2, wherein blocking the plurality of data items to be rendered according to the attributes of the plurality of data items to be rendered to obtain at least one data block to be rendered, comprises:

And according to the types of the data items to be rendered, dividing the data items to be rendered with the same type into a data block to be rendered.

5. The method of claim 1, wherein obtaining the style attribute of the at least one data block to be rendered comprises:

and generating the style attribute of the at least one data block to be rendered according to the original display style among the plurality of data items to be rendered.

6. The method of claim 5, wherein generating the style attribute of the at least one data block to be rendered according to the original presentation style among the plurality of data items to be rendered comprises:

and respectively setting the style attribute of the data item to be rendered contained in the data block to be rendered according to the original style attribute of the data item to be rendered contained in the data block to be rendered.

7. The method according to claim 6, wherein for a first data block to be rendered, setting a style attribute of a data item to be rendered contained in the first data block to be rendered according to an original style attribute of the data item to be rendered contained in the first data block to be rendered comprises at least one of the following operations:

setting the row height attribute of the data item to be rendered in the first data block to be rendered according to the original row height attribute of the data item to be rendered contained in the first data block to be rendered;

setting a line feed attribute of a data item to be rendered in the first data block to be rendered according to an original line feed attribute of the data item to be rendered contained in the first data block to be rendered;

setting the font attribute of the data item to be rendered in the first data block to be rendered according to the original font attribute of the data item to be rendered contained in the first data block to be rendered;

setting the color attribute of the data item to be rendered in the first data block to be rendered according to the original color attribute of the data item to be rendered contained in the first data block to be rendered;

setting a line spacing attribute between data items to be rendered in the first data block to be rendered according to an original line spacing attribute between the data items to be rendered contained in the first data block to be rendered;

the first data block to be rendered is any data block to be rendered in the at least one data block to be rendered.

8. The method of claim 1, further comprising:

and binding a UI interaction event for the at least one data block to be rendered, so that an interface element rendered by the at least one data block to be rendered has the capability of interacting with a user.

9. The method of claim 8, wherein the UI interaction event comprises at least one of: a click event, a long press event, a double click event, a touch event, or a swipe event.

10. The method according to any one of claims 1-9, further comprising, after rendering the at least one data chunk to be rendered onto the application interface:

in response to a trigger operation on a target interface element on the application interface, determining the relative position of the trigger operation in the target interface element; the target interface element is an interface element rendered by any data block in the at least one data block to be rendered;

11. The method according to claim 10, wherein the processing the target data item according to the processing mode corresponding to the trigger operation includes at least one of the following modes:

highlighting the target data item;

12. The method of claim 10, wherein determining a relative position of a trigger operation in a target interface element on the application interface in response to the trigger operation on the target interface element comprises:

responding to a trigger operation of a target interface element on the application interface, and detecting a moving distance of the trigger operation on the application interface;

if the moving distance is within a set distance range, determining a trigger position of the trigger operation on the application interface, and taking a triggered interface element as the target interface element;

calculating the relative position of the trigger position in the target interface element according to the relative position relationship between the boundary of the target interface element and a reference boundary and the relative position relationship between the trigger position and the reference boundary;

wherein the reference boundary is a certain boundary of the application interface or a certain boundary of an electronic screen displaying the application interface.

13. The method according to claim 12, wherein the reference boundary is a top boundary of the application interface or the electronic screen, and calculating the relative position of the trigger position in the target interface element according to the relative position relationship between the boundary of the target interface element and the reference boundary and the relative position relationship between the trigger position and the reference boundary comprises:

and calculating the distance between the trigger position and the top boundary of the target interface element as the relative position of the trigger operation in the target interface element according to the distance between the top boundary of the target interface element and the top boundary of the application interface or the electronic screen and the distance between the trigger position and the top boundary of the application interface or the electronic screen.

14. The method of claim 13, wherein determining a target data item corresponding to the relative position based on layout information between data items contained in the target interface element comprises:

calculating the average height of the data items according to the number of the data items contained in the target interface element in the height direction and the overall height of the target interface element;

and determining the data item at the trigger position as the target data item according to the distance between the trigger position and the top boundary of the target interface element and the average height of the data item.

15. The method according to any one of claims 1 to 9, wherein the interface data is a list of text types, and one line of data in the list is one data item to be rendered.

16. An application interface interaction method is characterized by comprising the following steps:

displaying an application interface comprising a plurality of interface elements, wherein at least one interface element in the plurality of interface elements comprises a plurality of data items;

17. The method of claim 16, wherein determining a relative position of a trigger operation in a target interface element on the application interface in response to the trigger operation on the target interface element comprises:

18. The method according to claim 17, wherein the reference boundary is a top boundary of the application interface or the electronic screen, and calculating the relative position of the trigger position in the target interface element according to the relative position relationship between the boundary of the target interface element and the reference boundary and the relative position relationship between the trigger position and the reference boundary comprises:

19. The method of claim 18, wherein determining a target data item corresponding to the relative position based on layout information between data items contained in the target interface element comprises:

and calculating the data item at the trigger position as the target data item according to the distance between the trigger position and the top boundary of the target interface element and the average height of the data item.

20. A terminal device, comprising: a memory, a processor, and a display screen;

the memory is used for storing a computer program and a native UI component;

the display screen is used for displaying an application interface;

the processor, coupled with the memory, to execute the computer program to:

21. The terminal device of claim 20, wherein the processor is further configured to:

22. A computer-readable storage medium having stored thereon computer instructions, which, when executed by one or more processors, cause the one or more processors to perform the steps of the method of any one of claims 1-15.

23. A terminal device, comprising: a memory, a processor, and a display screen;

the memory for storing a computer program;

the display screen is used for displaying an application interface containing a plurality of interface elements, and at least one interface element in the plurality of interface elements contains a plurality of data items;

the processor, coupled with the memory, to execute the computer program to:

24. A computer-readable storage medium having stored thereon computer instructions, which, when executed by one or more processors, cause the one or more processors to perform the steps of the method of any one of claims 16-19.