Hot deployment method for cross-platform dynamic rendering of APP native interface based on server-side data

Abstract

The application relates to APP hot deployment, in particular to a hot deployment method for cross-platform dynamic rendering of an APP native interface based on server data, defining data and display interface standards of a server, defining data and component library standards of an APP native interface, defining a data interface for interaction between each interface in the APP native interface and the server, determining interface components and display data required by each interface, sending a request to the server when the APP is opened, obtaining a language package data set returned by the server by the APP, and updating local cache immediately when language package data changes, jumping into a specific display interface according to a user interaction action generated by the interface component, sending a request to the server through a data interface of the specific display interface, and obtaining specific display data; the technical scheme provided by the application can effectively overcome the defects that a version needs to be re-released to provide updates due to some simple data and interface changes, and cross-platform use is not available.

Description

TECHNICAL FIELD

[0001] The application relates to APP hot deployment, in particular to a hot deployment method for cross-platform dynamic rendering of an APP native interface based on server data. BACKGROUND

[0002] At present, all mobile applications APP need to be downloaded by users through an application market or a website to a mobile phone for use, and when the APP content needs to be changed or several interfaces are changed, a developer needs to publish a new mobile application version to replace the old one, and the developer needs to make different adjustments and modifications according to different platforms, and users also need to download the APP again to update the APP to use new functions, which results in a long time span for each mobile application version update and publication.

[0003] Generally, the operation of a mobile application APP needs to be continuously adjusted and modified, including some simple changes of static text and interface colors. If the developer needs to publish a new version to provide an update only because of some small adjustments and modifications, and different standards are applied to different platforms, a large amount of time and labor cost will be wasted, which is not conducive to the development and operation of the mobile application APP. SUMMARY

[0004] (I) Technical problem solved

[0005] In view of the above-mentioned defects in the prior art, the application provides a hot deployment method for cross-platform dynamic rendering of an APP native interface based on server data, which can effectively overcome the defects in the prior art that a new version needs to be published to provide an update because of some simple data and interface changes, and the method cannot be used cross-platform.

[0006] (II) Technical scheme

[0007] To achieve the above-mentioned purpose, the application is implemented by the following technical scheme:

[0008] The hot deployment method for cross-platform dynamic rendering of an APP native interface based on server data comprises the following steps:

[0009] S1, defining data and display interface standards of a server, and defining data and component library standards of an APP native interface;

[0010] S2, defining a data interface for interaction between each interface of the APP native interface and the server, and determining interface components and display data required by each interface;

[0011] S3, sending a request to the server when the APP is opened, obtaining a language package data set returned by the server, and updating local cache immediately when the language package data changes.

[0012] S4, the APP jumps into a specific display interface according to a user interaction action generated by the interface component, sends a request to the server through a data interface of the specific display interface, and obtains specific display data;

[0013] S5, the APP calls corresponding specific interface components and performs rendering according to the returned interface layout key-value data set, and fills the specific display interface content according to the position of the specific interface component and the specific display data;

[0014] S6, the APP generates a new specific display interface flow and specific display data call according to a user interaction action generated by the interface component, that is, returns to S4.

[0015] Preferably, in S3, the APP sends a request to the server when the APP is opened, and the APP obtains a language package data set returned by the server, including:

[0016] The server calls the corresponding global static language package according to the language type of the APP, converts the global static language package stored in the high-speed static cache file into an array, generates a corresponding MD5 value, and sends the MD5 value to the APP in the data set returned by the APP request.

[0017] Preferably, in S3, the local cache is updated immediately when the language package data changes, including:

[0018] The APP performs asynchronous calling every time it is opened, determines whether the global static language package changes by judging the change of the MD5 value, and updates the local cache immediately when the global static language package changes.

[0019] Preferably, in S4, the APP sends a request to the server through a data interface of the specific display interface, and obtains specific display data, including:

[0020] The server prepares specific display data according to the request sent by the data interface, according to the data and display interface standard of the server, the data and component library standard of the APP native interface, and returns the specific display data to the APP according to the language type of the APP, the data interface of each interface in the APP native interface and the server.

[0021] Preferably, in S5, the APP calls corresponding specific interface components and performs rendering according to the returned interface layout key-value data set, including:

[0022] The APP creates a Dto data object of the component according to the Dto data interface definition in the data interface of each interface in the APP native interface and the server, and fills the display properties of the interface component according to the data and component library standard of the APP native interface;

[0023] The display properties of the interface component include an interface component background color and an interface component font size.

[0024] Preferably, the APP creates a corresponding component object through PZ_CLASSTYPE in the Dto data object, and if there is a component object that is not rendered in the runtime memory, reads it directly from the memory for rendering, otherwise creates a new component object and renders it.

[0025] When the component object is not displayed in the interface, the component object that is not displayed is recycled, the data in the component object is reset, and the component object is put into the memory to wait for the next call for rendering.

[0026] Preferably, the APP implements the call and rendering of the interface component through the second-level cache, and the call and rendering of the interface component are first started from the second-level cache, that is, it is first checked whether there is a rendered component object in the memory.

[0027] If there is a rendered component object in the second-level cache, the component object is directly taken out and filled with specific display data, otherwise a component object is created through the first-level cache for rendering and then added to the second-level cache, and then the specific display data is filled in the component object.

[0028] Preferably, the first-level cache is a local storage and exists in the form of a file, and the second-level cache is a memory storage and is stored in the runtime cache.

[0029] Preferably, in S5, the specific display interface content is filled according to the position of the specific interface component and the specific display data, including:

[0030] After the App obtains the specific interface component that needs to be displayed, the App calls the calculateWidth and calculateHeight parameters of the data of the APP native interface and the unified component interface in the component library standard to dynamically calculate the width and height of the specific interface component.

[0031] The specific interface component is laid out and positioned according to the heightOffset and xOffset parameters, and the interface display of the specific interface component is completed.

[0032] Preferably, before the APP calls the corresponding specific interface component and renders it according to the returned interface layout key value data in S5, the APP includes:

[0033] After the APP jumps into the specific display interface, it checks whether the interface MD5 value and the data MD5 value stored in the local storage are consistent with the data on the server.

[0034] If the interface MD5 value changes, the interface component needs to be re-rendered, otherwise the interface component does not need to be re-rendered, and the specific display data is directly filled and displayed in the interface component.

[0035] (III) Beneficial Effects

[0036] Compared with the prior art, the hot deployment method for cross-platform dynamic rendering of APP native interface based on server data provided by the application has the following beneficial effects:

[0037] 1) Help developers establish unified cross-platform development standards and hot deployment standards. In the case of a mobile application APP that has already been released, without updating the version or re-releasing, the interface can be modified and upgraded, the interface data calling logic can be changed, and the interactive interface can be optimized, thereby avoiding the situation that the developer needs to re-release the version to provide updates due to some simple data and interface changes;

[0038] 2) This method can further standardize the development and maintenance of mobile application APPs, thereby ensuring that user needs and development changes are quickly implemented and deployed, and improving the rapid adaptation ability of mobile application APPs;

[0039] 3) Through the secondary cache mechanism, the interface rendering efficiency and data display speed are improved, thereby significantly improving the user experience;

[0040] 4) This method can be used cross-platform, and can be deployed and used in both Android and iOS platforms. BRIEF DESCRIPTION OF DRAWINGS

[0041] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the drawings needed to be used in the embodiments or the prior art description will be briefly introduced below. Obviously, the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained without creative labor on the basis of these drawings.

[0042] Figure 1 is a flowchart of the present application;

[0043] Figure 2 is a specific flowchart of the present application for hot deployment after opening a mobile application APP. DETAILED DESCRIPTION

[0044] In order to make the purpose, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be described clearly and completely below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are some embodiments of the present application, not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor fall within the scope of the present application.

[0045] A hot deployment method for cross-platform dynamic rendering of APP native interface based on server data, as shown in Figure 1 and Figure 2 ① Define the data and presentation interface standards of the server, and define the data and component library standards of the APP native interface.

[0046] A, define the interface standards of the server data and presentation:

[0047] The data type standards of the server: static global variable data, dynamic content presentation data, and dynamic layout presentation data;

[0048] The data storage standards of the server: database dynamic storage, high-speed static cache file storage;

[0049] The data interaction standards between the server and the App: the specification of data interaction format, and the encryption standards of sensitive data.

[0050] 1) The data definition of the server and the APP must be defined in the form of key-value pair, that is, in the form of KEY=>VALUE. The definition specification of KEY value is:

[0051] a. No more than 15 English or English and number combination strings;

[0052] b. The string must be unique and not repeatable;

[0053] c. The KEY of constant data uses uppercase characters;

[0054] d. The KEY value of APP data needs to be consistent with the server data, one-to-one correspondence;

[0055] e. Color data is uniformly presented in hexadecimal form, such as white #FFFFFF;

[0056] f. User sensitive data must be encrypted, such as user password, nickname, etc.;

[0057] g. All data can be modified and adjusted through the server.

[0058] 2) The data type standards of the server

[0059] a. Static language package data of various countries, such as Chinese language package, English language package, etc.

[0060] b. Interface static data, such as the spacing between components, global color of components, etc.

[0061] c. Content presentation static data, such as the amount of data loaded each time the data is scrolled, the picture address prefix, the runtime cache space size, the data version number, the global notification reminder, the interface address of the server interaction, the update prompt of the new version and the automatic update address;

[0062] d. Dynamic content presentation data includes: user-submitted images, text, voice, video, and manager-submitted images, text, video, etc.

[0063] e. Dynamic layout presentation data includes: component width, height, and X, Y axis position data calculated according to device type and presented content.

[0064] 3) Data storage standards of the server

[0065] a. Database dynamic storage, which can add, modify and delete database data through the system background;

[0066] b. High-speed static cache file storage, which is used for high-frequency extraction and does not require frequent modification of data. The data is stored in a single file using a single array collection and serialized, which can be directly called in other execution files. The data update time is set to a threshold, and if it exceeds the threshold, the latest database data is automatically pulled to update the file.

[0067] 4) Data interaction standards between the server and the App

[0068] a. Data interaction format specification: use Json format for interaction. The Json data set must include the following parameters:

[0069]

[0070]

[0071] The data data set must include the following parameters:

[0072] Parameter Type Whether necessary Description PZ_CLASSTYPE String Yes The name of the corresponding component library, which needs to correspond to the called component library PZ_MESSAGE String Yes The default displayed text PZ_MESSAGE_URL String Yes The service address that needs to be called after the component is displayed …… …… No Other data parameters that need to be passed

[0073] b. Encryption standards for sensitive data, including simple Base64 encryption and secret key encryption. Non-sensitive data such as language packs and link addresses are encrypted using simple Base64 encryption. Secret key encryption uses a dynamic secret key set by the server to encrypt and decrypt user data, such as user names and passwords.

[0074] B. Data and component library standards for APP native interface:

[0075] Data storage standard of App: high-speed runtime cache data storage, runtime cache data space occupation standard, local persistent data storage standard;

[0076] Data display standard of App: definition specification of component library, display rule of component, memory management of component.

[0077] 1) Data storage standard of App

[0078] a. High-speed runtime cache data storage, which is realized by defining APP client global static array, runtime memory setting value is defined according to global variable, generally set to 128K bytes, and the principle of "first in, first out" is followed to insert and destroy data;

[0079] b. Local persistent data storage standard, which stores data through APP client local file, which is equivalent to temporary cache file, and MD5 is used to identify whether local data has changed. If the server has updated, the MD5 flag will change, and then the local data needs to be destroyed and the cache is regenerated.

[0080] 2) Data display standard of App

[0081] a. Definition specification of component library, naming specification, all components must be named with project prefix, for example: PZButton, PZImage;

[0082] b. All component libraries must inherit the unified component interface, which includes the following parameters:

[0083]

[0084] c. Display rule and memory management of component

[0085] PZ_CLASSTYPE in the data set returned by the server needs to correspond to the component name in the component library one by one, and PZ_CLASSTYPE is used to render the components that need to be displayed in the interface. The rule of "finding memory first, then creating" is followed to obtain the components that need to be displayed in the interface, and the threshold value is set according to the number of the same components that can be stored in the runtime memory defined by the global variable.

[0086] If there is a component object that has not been rendered in the runtime memory, it is directly read from the memory for rendering, otherwise a new component object is created and rendered. When the component object is not displayed in the interface (for example, user page turning, scrolling, etc.), the component object that is not displayed is recycled, the data in it is reset, and it is put into the memory to wait for the next call to render.

[0087] ② Define the data interface of each interface in the APP native interface to interact with the server, determine the interface components and display data required by each interface.

[0088] C、Data interface of each interface in the APP native interface to interact with the server

[0089] All interface components must inherit the unified component interface, which contains an object array Dto for data display. The data display content of the interface is rendered by the Dto data object.

[0090] Each interface component needs to define the Dto data interface, and the Dto data interface definition specification (including parameters) is as follows:

[0091]

[0092] ③ When opening the APP, send a request to the server, and the APP obtains the language package data set returned by the server, and updates the local cache immediately when the language package data changes.

[0093] A、When opening the APP, send a request to the server, and the APP obtains the language package data set returned by the server, including:

[0094] The server calls the corresponding global static language package according to the language type of the APP (for example, if the default language of the user's mobile phone is Chinese, the server calls the zh-cn language package), converts the global static language package stored in the high-speed static cache file into an array, and generates the corresponding MD5 value. The MD5 value is placed in the data set returned by the APP request and sent to the APP.

[0095] B、In the case of changes in language package data, update the local cache immediately, including:

[0096] The APP is called asynchronously each time it is opened. By judging the change of the MD5 value, it is determined whether the global static language package has changed, and the local cache is updated immediately when the global static language package changes.

[0097] In the technical solution of the present application, the global static language package has the following characteristics:

[0098] a、This language package is only called when opening the mobile application APP, and the language package data contains an MD5 identifier and conforms to the language package data specification;

[0099] b、Each call will compare the MD5 identifier returned by the server data feedback. This identifier indicates whether the returned data has changed from the last call. If there is a change, the local cache and runtime cache of the mobile application APP need to be updated, and the interface needs to be re-rendered and displayed. If there is no change, there is no need to re-render.

[0100] IV. The APP jumps into the specific display interface according to the user interaction action generated by the interface component, sends a request to the server through the data interface of the specific display interface, and obtains specific display data.

[0101] The specific display data is obtained by sending a request to the server through the data interface of the specific display interface, including:

[0102] The server prepares specific display data according to the request sent by the data interface, according to the data of the server and the display interface standard, and the data of the APP native interface and the component library standard, and returns the specific display data to the APP according to the language type of the APP, the data interface of each interface in the APP native interface and the server.

[0103] V. The APP calls the corresponding specific interface component and renders it according to the returned interface layout key value data set, and fills the specific display interface content according to the position of the specific interface component and the specific display data.

[0104] A. Before the APP calls the corresponding specific interface component and renders it according to the returned interface layout key value data set, it includes:

[0105] After the APP jumps into the specific display interface, it checks whether the interface MD5 value and the data MD5 value stored locally are consistent with the server data;

[0106] If the interface MD5 value changes (such as modifying color, font size, interface spacing, etc.), the interface component needs to be re-rendered, otherwise the interface component does not need to be re-rendered and the specific display data is directly filled and displayed in the interface component.

[0107] In the technical solution of the present application, the dynamic rendering of the interface and the data display have the following characteristics:

[0108] a. The server data interface returns two parts of data, one part is interface layout data, and the other part is content display data. Both of these two parts of data contain MD5 flag bit. If this flag bit changes, re-rendering and display are performed, and if there is no change, re-rendering and display are not needed;

[0109] b. The general components existing in the interface rendering will be resident in the APP memory in the form of data set after being used for the first time, facilitating fast calling when the interface is rendered next time;

[0110] c. The interface rendering and data display are executed separately. When the flag bit of the interface does not change and only the flag bit of the data changes, only data replacement is performed without interface rendering. Data replacement will notify the component library to call the observeDto parameter in the component interface to update the text display and other content display on the component.

[0111] B, APP calls corresponding specific interface components according to the returned interface layout key value data set and renders, including:

[0112] APP creates the Dto data object of the component according to the Dto data interface definition in the data interface of each interface in the APP native interface and the server interaction, and fills in the display properties of the interface component according to the data of the APP native interface and the component library standard;

[0113] Among them, the display properties of the interface component include interface component background color and interface component font size, etc.

[0114] 1) APP creates a corresponding component object through PZ_CLASSTYPE in the Dto data object. If there is a component object that has not been rendered in the runtime memory, it is directly read from the memory for rendering, otherwise a new component object is created and rendered;

[0115] When the component object is not displayed in the interface, recycle these non-displayed component objects, reset the data in them, and put them into the memory for next time rendering.

[0116] 2) APP realizes the calling and rendering of interface components through secondary cache. The calling and rendering of interface components start from the second level cache, that is, whether there is a rendered component object in the memory is found first;

[0117] If there is a rendered component object in the second level cache, it is directly taken out and filled with specific display data, otherwise the component object is created through the first level cache for rendering and then added to the second level cache, and then the specific display data is filled in the component object;

[0118] Among them, the first level cache is local storage, which exists in the form of a file; the second level cache is memory storage, which is stored in the runtime cache.

[0119] The size of the runtime cache (i.e. the second level cache) needs to be defined, and the memory destruction order is determined by the calling frequency and creation time, and the calling frequency is prior to the creation time. For example, the calling frequency of A component is 5 and the creation time is 3 hours ago; the calling frequency of B component is 2 and the creation time is 1 hour ago, then destroy the content of B component first.

[0120] C, according to the position of the specific interface component and the specific display data to fill in the specific display interface content, including:

[0121] After App obtains the specific interface component that needs to be displayed, it calls the calculateWidth and calculateHeight parameters of the unified component interface in the data of the APP native interface and the component library standard to dynamically calculate the width and height of the specific interface component;

[0122] According to the two parameters of heightOffset and xOffset, the specific interface component is laid out and positioned, and the interface display of the specific interface component is completed.

[0123] The APP performs new specific display interface flow and specific display data calling according to the user interaction action generated by the interface component, that is, returns to ④.

[0124] The mobile application APP performs new specific display interface flow and specific display data calling according to the user interaction action (such as the click event of the user) generated by the interface component. For example, the KEY is PZButton, the PZButton component is rendered locally, the position of the Button is determined according to the X and Y values set by the server, the text displayed on the Button, and the interaction event of the Button, the Button is clicked, a new data interface is called according to the event defined by the interface, and the interface flow is transferred according to the feedback result.

[0125] The above embodiments are only used to illustrate the technical solutions of the present application, but not to limit them; although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that the technical solutions recorded in the foregoing embodiments can be modified, or some technical features can be replaced by equivalents; and these modifications or replacements will not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A method for hot deployment of dynamic rendering of APP native interface based on service-side data across platforms, characterized in that: The method comprises the following steps: S1, defining the data and presentation interface standard of the server side, and defining the data and component library standard of the APP native interface; S2, defining the data interface of each interface in the APP native interface interacting with the server side, and determining the interface components and presentation data required by each interface; S3, sending a request to the server side when the APP is opened, and the APP obtaining the language package data set returned by the server side and updating the local cache immediately when the language package data changes; S4, the APP jumping into a specific presentation interface according to the user interaction action of the interface component, sending a request to the server side through the data interface of the specific presentation interface, and obtaining specific presentation data; S5, the APP calling the corresponding specific interface component according to the returned interface layout key-value data pair set and performing rendering, and filling the specific presentation interface content according to the position of the specific interface component and the specific presentation data; S6, the APP performing new specific presentation interface flow and specific presentation data calling according to the user interaction action of the interface component, that is, returning to S4; In S3, the APP sends a request to the server side when the APP is opened, and the APP obtains the language package data set returned by the server side, which comprises: The server side calls the corresponding global static language package according to the language type of the APP, converts the global static language package stored in the high-speed static cache file into an array, generates a corresponding MD5 value, and sends the MD5 value to the APP in the data set returned by the APP request; In S3, the local cache is updated immediately when the language package data changes, which comprises: The APP performs asynchronous calling every time it is opened, judges whether the global static language package changes by judging the change of the MD5 value, and updates the local cache immediately when the global static language package changes; In S4, the APP sends a request to the server side through the data interface of the specific presentation interface, and obtains specific presentation data, which comprises: The server side prepares specific presentation data according to the request sent by the data interface according to the data and presentation interface standard of the server side and the data and component library standard of the APP native interface, and returns the specific presentation data to the APP according to the language type of the APP, the data interface of each interface in the APP native interface interacting with the server side; Before S5, the APP calls the corresponding specific interface component and performs rendering according to the returned interface layout key-value data pair set, which comprises: After the APP jumps into the specific presentation interface, it checks whether the interface MD5 value and the data MD5 value stored locally are consistent with the server side data; If the interface MD5 value changes, the interface component needs to be re-rendered, otherwise the interface component does not need to be re-rendered, and the specific presentation data is directly filled and displayed in the interface component; In S5, the APP calls the corresponding specific interface component and performs rendering according to the returned interface layout key-value data pair set, which comprises: The APP creates a Dto data object of the component according to the Dto data interface definition in the data interface of each interface in the APP native interface interacting with the server side, and fills the presentation properties of the interface component according to the data and component library standard of the APP native interface; The display properties of the interface component include an interface component background color and an interface component font size; The APP creates a corresponding component object through PZ_CLASSTYPE in a Dto data object, reads directly from the memory for rendering if there is an unrendered component object in the runtime memory, and otherwise creates a new component object and renders it; When the component object is not displayed in the interface, the component object not displayed is recycled, the data in the component object is reset, and the component object is put into the memory to wait for the next call for rendering; The APP implements the call and rendering of the interface component through a second-level cache, and the call and rendering of the interface component are first started from the second-level cache, that is, whether there is a rendered component object in the memory is first searched; If there is a rendered component object in the second-level cache, the component object is directly taken out and filled with specific display data, and otherwise the component object is created through the first-level cache for rendering and then added to the second-level cache, and then the specific display data is filled in the component object; The first-level cache is a local storage and exists in the form of a file, and the second-level cache is a memory storage and stored in a runtime cache.

2. The hot deployment method for dynamically rendering an APP native interface based on service end data across platforms according to claim 1, characterized in that: In S5, the specific display interface content is filled according to the position of the specific interface component and the specific display data, including: After the App obtains the specific interface component to be displayed, the calculateWidth and calculateHeight parameters of the data of the APP native interface and the unified component interface in the component library standard are called to dynamically calculate the width and height of the specific interface component; The specific interface component is laid out and positioned according to the heightOffset and xOffset parameters, and the interface display of the specific interface component is completed.

Images