CN110020371B - Method and device for page layout linkage based on react-native - Google Patents
Method and device for page layout linkage based on react-native Download PDFInfo
- Publication number
- CN110020371B CN110020371B CN201711431452.5A CN201711431452A CN110020371B CN 110020371 B CN110020371 B CN 110020371B CN 201711431452 A CN201711431452 A CN 201711431452A CN 110020371 B CN110020371 B CN 110020371B
- Authority
- CN
- China
- Prior art keywords
- page
- preset
- pop
- state value
- box
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method and a device based on contact-native page layout linkage, which are applied to a user terminal comprising an Enterprise Resource Planning (ERP) client, wherein the method comprises the following steps: obtaining a first control operation aiming at a preset button on a preset react-native application current page; responding to the first control operation, changing the state value of a preset component corresponding to the preset button, and obtaining the changed state value; rendering the current page based on the changed state value to obtain a rendered page; displaying the rendered page, wherein the rendered page includes a pop-up box including at least one operable button; and if the second control operation aiming at the at least one operable button is obtained, controlling the rendered page to be linked so that the user can perform the next operation on the linked page. The page layout linkage method is simplified, and the use performance of the user terminal is improved.
Description
Technical Field
The invention relates to the technical field of react-native, in particular to a method and a device based on react-native page layout linkage.
Background
The cross-platform development can be independent of an operating system and a hardware environment, the development cost is greatly saved, the maintenance period is shortened, and the development of the computer technology is a trend. The fact Native technology is a newer cross-platform development technology, and is a product of enabling front-end developers to utilize the mobile platform to run JavaScript codes, so that the mobile end can not only transmit configuration information, but also express logic.
In the prior art, page layout linkage (for example, workflow approval) is realized through a native mode, or page layout linkage is realized by combining a react-native technology and a native mode, the code complexity is high, and a pause phenomenon is easy to occur if more linkage effects are realized. In particular, when the user network is poor and the operation is too fast, it is very easy to cause abnormal response of the terminal, jamming or directly quitting the application.
Therefore, the existing page layout linkage method is complex, and the user terminal has low use performance.
Disclosure of Invention
The embodiment of the invention provides a method and a device for page layout linkage based on a react-native, which are used for solving the technical problems of more complex page layout linkage method and low user terminal use performance, simplifying the page layout linkage method and improving the user terminal use performance.
On one hand, the embodiment of the invention provides a method based on contact-native page layout linkage, which is applied to a user terminal comprising an Enterprise Resource Planning (ERP) client and comprises the following steps:
obtaining a first control operation aiming at a preset button on a preset react-native application current page;
responding to the first control operation, changing the state value of a preset component corresponding to the preset button, and obtaining the changed state value;
rendering the current page based on the changed state value to obtain a rendered page;
displaying the rendered page, wherein the rendered page includes a pop-up box including at least one operable button;
and if the second control operation aiming at the at least one operable button is obtained, controlling the rendered page to be linked so that the user can perform the next operation on the linked page.
Optionally, the changing the current state value of the preset component corresponding to the preset button includes:
sending a URL request to a server;
receiving and processing data returned by the server side to obtain processed data;
and changing the current state value of the preset component corresponding to the preset button based on the processed data.
Optionally, the rendering the current page based on the changed state value to obtain a rendered page includes:
and if the state value of the preset assembly is monitored to be changed, triggering a render function, reloading the structure and the data of the current page, and obtaining the rendered page.
Optionally, if the preset react-native application is specifically used for workflow document approval, the method further includes:
after the preset react-native application is started, determining at least one component related to the examination and approval of the workflow document;
initializing a state value of the at least one component, obtaining an initialized state value;
based on the initialized state value, binding the at least one component with a corresponding function to establish service logic;
and if the click operation aiming at the approval button corresponding to the first component in the at least one component is obtained, responding to the click operation, and displaying an initialized pop-up box of the business logic corresponding to the first component, wherein the initialized pop-up box comprises a default style, a default structure and default data of the pop-up box.
Optionally, if the initialized pop-up box includes at least one flow trend and at least one handler, the method further comprises:
and if a third control operation aiming at the first flow trend in the at least one flow trend is received, loading and displaying first processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is the first processor.
Optionally, if the at least one flow trend at least includes the first flow trend and a second flow trend different from the first flow trend, after the first processing person data is loaded and displayed on the initialized pop-up box, the method further includes:
and if a fourth control operation aiming at the trend of the second process is received, clearing the first processor data, reloading and displaying second processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is a second processor.
Optionally, if the initialized pop-up box includes a third flow trend, where the third flow trend includes at least one assignment manner, the method further includes:
if a fifth control operation aiming at the trend of the third process is received, loading and displaying the at least one assignment mode on an initialized pop-up box so as to indicate an approval mode of the user aiming at the approval of the workflow document;
and if a sixth control operation aiming at the first assignment mode in the at least one assignment mode is received, loading and displaying third processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is a third processor.
On the other hand, the embodiment of the invention also provides a device based on the contact-native page layout linkage, which is applied to a user terminal comprising an Enterprise Resource Planning (ERP) client, and is characterized by comprising the following steps:
the first obtaining unit is used for obtaining a first control operation aiming at a preset button on a preset react-native application current page;
a second obtaining unit, configured to change a state value of a preset component corresponding to the preset button in response to the first control operation, and obtain the changed state value;
a third obtaining unit that renders the current page based on the changed state value, and obtains a rendered page;
a first display unit for displaying a rendered page, wherein the rendered page includes a pop-up box including at least one operable button;
and the control unit is used for controlling the rendered page to be linked if the second control operation aiming at the at least one operable button is obtained, so that the user can perform the next operation on the linked page.
Optionally, the first obtaining unit is specifically configured to:
sending a URL request to a server;
receiving and processing data returned by the server side to obtain processed data;
and changing the current state value of the preset component corresponding to the preset button based on the processed data.
Optionally, the third obtaining unit is specifically configured to:
and if the state value of the preset assembly is monitored to be changed, triggering a render function, reloading the structure and the data of the current page, and obtaining the rendered page.
Optionally, if the preset react-native application is specifically used for workflow document approval, the apparatus further includes:
the determining unit is used for determining at least one component related to examination and approval of the workflow document after the preset react-native application is started;
a fourth obtaining unit, configured to initialize the state value of the at least one component, and obtain the initialized state value;
the establishing unit binds the at least one component with a corresponding function based on the initialized state value and establishes a service logic;
and the second display unit is used for responding to the click operation and displaying an initialized pop-up box of the business logic corresponding to the first component if the click operation of the approval button corresponding to the first component in the at least one component is obtained, wherein the initialized pop-up box comprises a default style, a default structure and default data of the pop-up box.
Optionally, if the initialized pop-up box includes at least one flow direction and at least one handler, the apparatus further comprises:
and the first loading unit loads and displays first handler data on an initialized pop-up box to indicate that the current handler approved by the user for the workflow document is the first handler if a third control operation for the first flow direction in the at least one flow direction is received.
Optionally, if the at least one flow trend at least includes the first flow trend and a second flow trend different from the first flow trend, after the first processing person data is loaded and displayed on the initialized pop-up box, the apparatus further includes:
and the second loading unit is used for emptying the first processor data and reloading and displaying second processor data on an initialized pop-up frame if a fourth control operation aiming at the trend of the second process is received so as to indicate that the current processor of the user aiming at the workflow bill examination and approval is the second processor.
Optionally, if the initialized pop-up box includes a third flow trend, where the third flow trend includes at least one assignment manner, the apparatus further includes:
a third loading unit, configured to load and display the at least one assignment mode on an initialized pop-up box to indicate an approval mode of the user for approval of the workflow document if a fifth control operation for the trend of the third flow is received;
and if a sixth control operation aiming at the first assignment mode in the at least one assignment mode is received, the fourth loading unit loads and displays third processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is a third processor.
On the other hand, an embodiment of the present invention further provides a user terminal, where the user terminal includes a processor, and the processor is configured to implement the above-described method based on a reactive-native page layout linkage when executing a computer program stored in a memory.
In another aspect, an embodiment of the present invention further provides a readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the steps of the method based on the react-native page layout linkage described above.
One or more technical solutions in the embodiments of the present invention at least have one or more of the following technical effects:
in the technical scheme of the embodiment of the invention, a method based on the contact-native page layout linkage is provided, and specifically, a first control operation aiming at a preset button on a preset contact-native application current page is obtained; responding to the first control operation, changing the state value of a preset component corresponding to the preset button, and obtaining the changed state value; rendering the current page based on the changed state value to obtain a rendered page; displaying the rendered page, wherein the rendered page includes a pop-up box including at least one operable button; and if the second control operation aiming at the at least one operable button is obtained, controlling the rendered page to be linked so that the user can perform the next operation on the linked page. That is to say, the state value of the component is controlled by using the react-native technology, further, the current page of the preset react-native application is rendered based on the changed state value, finally, the control of the style content and click interaction of the pop-up box is realized, and the interactive response (page linkage) is given in time under the condition that the page does not jump, so that the technical problems that the page layout linkage method is complex and the user terminal has low use performance are solved, the page layout linkage method is simplified, and the use performance of the user terminal is improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention.
Fig. 1 is a flowchart of a method for performing layout linkage based on a reactive-native page according to a first embodiment of the present invention;
fig. 2 is a schematic diagram of a rendered purchase approval page in a method based on a reactive-native page layout linkage according to a first embodiment of the present invention;
fig. 3 is a flowchart of a method for performing layout linkage based on a reactive-native page according to a first embodiment of the present invention: a method flow chart for changing the current state value of the preset component corresponding to the preset button;
fig. 4 is a flowchart of another method of a method based on a reactive-native page layout linkage according to an embodiment of the present invention;
fig. 5a is an initial schematic diagram of a purchase order approval page in a method based on a react-native page layout linkage according to an embodiment of the present invention;
fig. 5b is a schematic diagram of a pop-up box including initialization in a method based on the reactive-native page layout linkage according to the first embodiment of the present invention;
fig. 5c is a schematic view of page linkage after a process trend "examination and approval _ 2" is selected on fig. 5b in the method based on the reactive-native page layout linkage according to the first embodiment of the present invention;
fig. 6 is a schematic diagram of page linkage in the method based on the reactive-native page layout linkage, where "examination and approval _ 2" is switched to "examination and approval _ 3" in fig. 5 b;
fig. 7 is a flowchart of a method of a third page linkage manner in the method based on the contact-native page layout linkage according to the first embodiment of the present invention;
fig. 8a is a schematic page linkage diagram when a process including two assignment modes is selected to go to "examination-approval _ 4" in a third page linkage mode in the method for performing layout linkage based on a reactive-native page according to the first embodiment of the present invention;
fig. 8b is a schematic diagram of page linkage when the first assignment mode is selected in a third page linkage mode in the method for page layout linkage based on a react-native according to the first embodiment of the present invention;
fig. 9 is a schematic diagram of page linkage after successful examination and approval in a method based on a reactive-native page layout linkage according to a first embodiment of the present invention;
fig. 10 is a schematic structural diagram of a device based on a reactive-native page layout linkage according to a second embodiment of the present invention.
Detailed Description
The embodiment of the invention provides a method and a device for page layout linkage based on a react-native, which are used for solving the technical problems of more complex page layout linkage method and low user terminal use performance, simplifying the page layout linkage method and improving the user terminal use performance.
In order to solve the technical problems, the technical scheme in the embodiment of the invention has the following general idea:
a method based on contact-native page layout linkage is applied to a user terminal comprising an Enterprise Resource Planning (ERP) client, and comprises the following steps:
obtaining a first control operation aiming at a preset button on a preset react-native application current page;
responding to the first control operation, changing the state value of a preset component corresponding to the preset button, and obtaining the changed state value;
rendering the current page based on the changed state value to obtain a rendered page;
displaying the rendered page, wherein the rendered page includes a pop-up box including at least one operable button;
and if the second control operation aiming at the at least one operable button is obtained, controlling the rendered page to be linked so that the user can perform the next operation on the linked page.
In the technical scheme of the embodiment of the invention, a method based on the contact-native page layout linkage is provided, and specifically, a first control operation aiming at a preset button on a preset contact-native application current page is obtained; responding to the first control operation, changing the state value of a preset component corresponding to the preset button, and obtaining the changed state value; rendering the current page based on the changed state value to obtain a rendered page; displaying the rendered page, wherein the rendered page includes a pop-up box including at least one operable button; and if the second control operation aiming at the at least one operable button is obtained, controlling the rendered page to be linked so that the user can perform the next operation on the linked page. That is to say, the state value of the component is controlled by using the react-native technology, further, the current page of the preset react-native application is rendered based on the changed state value, finally, the control of the style content and click interaction of the pop-up box is realized, and the interactive response (page linkage) is given in time under the condition that the page does not jump, so that the technical problems that the page layout linkage method is complex and the user terminal has low use performance are solved, the page layout linkage method is simplified, and the use performance of the user terminal is improved.
In a specific implementation process, the method based on the contact-native page layout linkage may be applied to a user terminal, and the user terminal mentioned in the embodiment of the present invention includes but is not limited to: smart phones (such as Android phones and IOS phones), tablet computers, notebook computers, palmtop computers, wearable smart devices, and other electronic devices, which are not examples herein.
In order to better understand the technical solutions of the present invention, the technical solutions of the present invention are described in detail below with reference to the drawings and the specific embodiments, and it should be understood that the specific features in the embodiments and the embodiments of the present invention are detailed descriptions of the technical solutions of the present invention, and are not limitations of the technical solutions of the present invention, and the technical features in the embodiments and the embodiments of the present invention may be combined with each other without conflict.
Example one
Referring to fig. 1, an embodiment of the present invention provides a method based on a reactive-native page layout linkage, which is applied to a user terminal including an enterprise resource planning ERP client, and includes:
s101: obtaining a first control operation aiming at a preset button on a preset react-native application current page;
s102: responding to the first control operation, changing the state value of a preset component corresponding to the preset button, and obtaining the changed state value;
s103: rendering the current page based on the changed state value to obtain a rendered page;
s104: displaying the rendered page, wherein the rendered page includes a pop-up box including at least one operable button;
s105: and if the second control operation aiming at the at least one operable button is obtained, controlling the rendered page to be linked so that the user can perform the next operation on the linked page.
In the specific implementation process, the specific implementation process of step S101 to step S105 is as follows:
firstly, obtaining a first control operation aiming at a preset button on a preset react-native application current page; the preset react-native application is an application preset on the user terminal, such as a capital finance (Kyoto), a QQ (QQ) space and the like, and for the preset react-native application, a set of codes can be commonly used under an IOS (operating system) and an Android system. The preset react-native applies a current page, namely a current running interface of the preset react-native, such as an approval page, a sales page and the like. The preset button may be, for example, an "approval" button on an approval page, or of course, may be any button on a current page of the preset react-native application, which is not necessarily illustrated herein. The first control operation may specifically be, for example, a click operation, a double click operation, or the like.
And then, responding to the first control operation, changing the state value of the preset component corresponding to the preset button, and obtaining the changed state value. For example, when the user clicks the "approval" button, the state value of the component corresponding to the "approval" button is adjusted from "0" to "1".
And then, rendering the current page based on the changed state value, and obtaining the rendered page, for example, re-rendering each component on the current approval page, the layout structure among the components, and the data in the components.
Further, the user terminal displays the rendered page. As a specific example, as shown in fig. 2, after the user a clicks the "approval" button on the purchase approval page, a pop-up box pops up above the current purchase approval page, and the pop-up box includes data such as a process trend and a handler, and what the user sees on the user terminal is a state where the user terminal re-renders the current purchase approval page based on the changed state value.
In a specific implementation process, the pop-up box includes at least one operable button, where the at least one operable button may be an operation button corresponding to "flow direction", "approval manner", "handler", and the like, and of course, a person skilled in the art may design the at least one operable button according to an actual usage habit of a user, which is not necessarily illustrated herein.
In the embodiment of the present invention, if the second control operation for the at least one operable button on the pop-up box is obtained, the rendered page is controlled to be linked, so that the user can perform the next operation on the linked page, still taking fig. 2 as an example, when the user clicks the first flow trend in the determined flow trends, the handler corresponding to the flow trend is adjusted from the default handler a to the handler b.
In the embodiment of the present invention, as shown in fig. 3, for step S102: responding to the first control operation, changing the state value of a preset component corresponding to the preset button, and obtaining the changed state value: changing the current state value of the preset component corresponding to the preset button, including:
s201: sending a URL request to a server;
s202: receiving and processing data returned by the server side to obtain processed data;
s203: and changing the current state value of the preset component corresponding to the preset button based on the processed data.
In the specific implementation process, the specific implementation process of step S201 to step S203 is as follows:
in the specific implementation process, firstly, a corresponding relation between the component change in the ERP client and the data returned by the server is established, and then, the state value of the component is correspondingly changed according to the corresponding relation. Specifically, after the user terminal responds to the first control operation, a URL (Uniform Resource Locator) request associated with the preset button is sent to the server, then, data returned by the server is received and processed, and processed data is obtained, for example, after the user clicks an "approval" button on a purchase approval page, the background server performs a series of business processes, and finally returns a "success" field, then the ERP client modifies the state value of the button according to the successful field, changes the state value of the original control color of the "approval" button, changes the color from black to gray, and changes the current state of the "approval" button to an inoperable state for the user, that is, the button does not respond to any control operation of the user for the button.
In the embodiment of the present invention, step S103: rendering the current page based on the changed state value to obtain a rendered page, which can be specifically realized by the following method: and if the state value of the preset assembly is monitored to be changed, triggering a render function, reloading the structure and the data of the current page, and obtaining the rendered page. In a specific implementation process, the state value of the component is mainly used for storing data required by the component, and once the state value of the component is changed, the preset reactive-native application monitors the change of the state value of the component. Once the state value of the component is changed, a render function is triggered, and the page is rearranged, including reloading of the structure and data of the page, so as to obtain a rendered page.
In this embodiment of the present invention, the preset react-native application may specifically be an application program for workflow document approval, and as shown in fig. 4, the method further includes:
s301: after the preset react-native application is started, determining at least one component related to the examination and approval of the workflow document;
s302: initializing a state value of the at least one component, obtaining an initialized state value;
s303: based on the initialized state value, binding the at least one component with a corresponding function to establish service logic;
s304: and if the click operation aiming at the approval button corresponding to the first component in the at least one component is obtained, responding to the click operation, and displaying an initialized pop-up box of the business logic corresponding to the first component, wherein the initialized pop-up box comprises a default style, a default structure and default data of the pop-up box.
In the specific implementation process, the specific implementation process of steps S301 to S304 is as follows:
firstly, after the preset react-native application is started, at least one component related to the examination and approval of the workflow document is determined, wherein different react-native applications have different components of the application page required to be laid out. For example, when the preset exact-naitve application is application a, the determined components include a text component, a picture component, a user click component, and a pop-up box component for which a user clicks a button to perform subsequent logic, such as radio cells, checkboxes, and a pop-up box Dialog. And so on. Then, initializing the state value of the at least one component to obtain the initialized state value, for example, the data is empty under the initialization of radio cells, checkboxes, and Dialog boxes.
In the embodiment of the present invention, after determining at least one component associated with the examination and approval of the workflow document, in order to present the page content corresponding to the examination and approval of the workflow document to the user, the following implementation manners are required to specify the page structure, the display sequence, and each content of the document detail page, such as data items of the service type, the provider, the purchase date, and the like. Taking the at least one component as radio cells, checkboxes and popup boxes as examples, the specific implementation process is as follows:
then, further defining initialization items of the page components, when a user operates a button on the document, corresponding values of the initialized state values (state values) are changed, for example, after clicking an "approval" button, a page pops up a pop-up box, and data items on the pop-up box are initialized first, and the specific implementation process is as follows:
then, based on the initialized state value, binding the at least one component with a corresponding function, and establishing a service logic; specifically, after obtaining the initialized state value, a corresponding function is bound for the at least one component, that is, a business processing logic is bound, for example, a radio button corresponding to a flow direction "approval _ 1" is clicked, and data of a handler is changed from initialized null data to data corresponding to a single option "[ department 001] zhao six" and "[ department 001] zhang three".
And then, if the click operation of the approval button corresponding to the first component in the at least one component is obtained, responding to the click operation, and displaying an initialized pop-up box of the business logic corresponding to the first component, wherein the initialized pop-up box comprises a default style, a default structure and default data of the pop-up box. Specifically, the initialized pop-up box specifies the default style, structure and data popped up by the pop-up box on the current page of the preset react-native application, once the state value of the component is changed, the page is re-rendered, and the user can directly see the content re-loaded on the initialized pop-up box.
In the embodiment of the present invention, after the user terminal sends the URL request to the server, a processing procedure of data returned by the server is specifically as follows:
in the embodiment of the invention, the user terminal can have the following three page linkage modes, but is not limited to the following three page linkage modes.
First page linkage mode
The first page linkage mode specifically comprises the following steps: if the initialized pop-up box includes at least one flow trend and at least one handler, the method further comprises: and if a third control operation aiming at the first flow trend in the at least one flow trend is received, loading and displaying first processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is the first processor. The third control operation may specifically be a click operation or a double click operation for the first flow trend, but may also be another operation. Specifically, when the user specifies the first flow direction from among the at least one flow direction, the data is dynamically loaded, and the data of the processing person corresponding to the first flow direction is directly added to the initialized pop-up box. After the user opens the react-native application, the user terminal first displays a page giving an initial state value, for example, a purchase order approval page shown in fig. 5a, on which the content of the document, including data items such as a service type, a provider, and a purchase date, is displayed. Fig. 5b shows an interface corresponding to an initialized pop-up box displayed by the user terminal after the user clicks the "approval" button on the approval page 5a, where data in an initial state of the data item on the pop-up box is empty. When the user selects the flow to "approve _ 2" in fig. 5b, the data is dynamically loaded, and the process person data "[ department 001 zhao ] six (dd)" and "[ department 001] zhang three (aa)" are directly added to the initialized pop-up box, as shown in fig. 5 c. That is, when the user determines "approval-2" from the 4 processes "approval _ 1", "approval _ 2", "approval _ 3" and "approval _ 4", the corresponding data of the handler can be directly loaded on the initialized pop-up box without page jump, thereby realizing page linkage.
Second page linkage mode
The second page linkage mode specifically comprises the following steps: the at least one process run at least includes the first process run and a second process run different from the first process run, and after the first handler data is loaded and displayed on the initialized pop-up box, the method further includes: and if a fourth control operation aiming at the trend of the second process is received, clearing the first processor data, reloading and displaying second processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is a second processor. The fourth control operation may specifically be a click operation or a double click operation for the second flow trend, but may also be another operation. Specifically, when the user switches the flow direction, the processing person data associated with the flow direction is dynamically changed when the at least one flow direction includes the first flow direction and a second flow direction different from the first flow direction. When the user clicks the flow trend "examination and approval _ 3" on the pop-up box shown in fig. 5b, the original flow trend is switched from "examination and approval _ 2" to "examination and approval _ 3", and the corresponding data of the handler is switched from "[ section 001] zhao six (dd)" and "[ section 001] zhangsan (aa)", to "[ section 001] wangwu (cc)", as shown in fig. 6 specifically, thereby realizing that the pages are linked without jumping.
Third page linkage mode
As shown in fig. 7, the third page linkage mode specifically includes: if the initialized pop-up box comprises a third flow trend, wherein the third flow trend comprises at least one assignment mode, the method further comprises the following steps:
s401: if a fifth control operation aiming at the trend of the third process is received, loading and displaying the at least one assignment mode on an initialized pop-up box so as to indicate an approval mode of the user aiming at the approval of the work flow document;
s402: and if a sixth control operation aiming at the first assignment mode in the at least one assignment mode is received, loading and displaying third processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is a third processor.
In the specific implementation process, the specific implementation process from step S401 to step S402 is as follows:
if the initialized pop-up box comprises a third flow trend, wherein the third flow trend comprises at least one assignment mode (for example, the transactor is completely submitted and the approval is passed), and once a fifth control operation aiming at the third flow trend is received, the at least one assignment mode is loaded and displayed on the initialized pop-up box so as to indicate the approval mode of the user aiming at the workflow receipt approval. The fifth control operation may specifically be a click operation or a double click operation for the trend of the third flow, or may also be another operation. For example, the flow towards "approval _ 4" includes two assignment methods. When the user clicks the flow trend "examination-approval-4" on the pop-up box shown in fig. 5b, two assignment ways associated with the flow trend are loaded and displayed in the initialized pop-up box shown in fig. 5b, and a page display diagram after loading is shown in fig. 8 a.
In the embodiment of the present invention, each assignment manner of the at least one assignment manner may be determined by a single selection performed by a user. In a specific implementation process, if a sixth control operation for a first assignment mode of the at least one assignment mode is received, loading and displaying third handler data on an initialized pop-up box to indicate that a current handler of the user for the workflow document approval is a third handler, and a page display schematic diagram after loading is shown in fig. 8 b. The sixth control operation may specifically be a click operation or a double click operation for the first assignment manner, but may also be other operations. That is, if the flow selected by the user includes the assignment mode, the assignment mode option is added to the pop-up box, and when the user operates the data content on the pop-up box, the associated data item is also changed, thereby realizing dynamic linkage of data on the pop-up box.
In the embodiment of the invention, when the user clicks the confirmation button after finishing each operation of workflow document approval, a request is sent to the server, the background server carries out the processing of the business logic, and finally the failure or success of the processing result is returned. If the document is successfully approved, the state value of the button style of the document initialization is changed, the prompt of successful approval is given, the 'approval' button on the document is grayed, and meanwhile, a check is displayed above the purchase page to prompt the user that the document is approved, as shown in fig. 9, so that the workflow approval operation of the whole document is completed.
In addition, in the embodiment of the invention, the component is rendered to have different display effects by changing the initial state value of the component, so that the approval process of the workflow document is realized. Specific effects of rendering the components in the process are different between Android and IOS platforms to a certain extent, the components can be adjusted in a micro manner through css (Cascading Style Sheet) patterns of the subassemblies of the adjusting part, and the components can be compatible between the two platforms, so that the interface can achieve a uniform display Style on different platforms.
Example two
Based on the same inventive concept as the embodiment of the present invention, please refer to fig. 10, the embodiment of the present invention further provides a device based on the real-native page layout linkage, which includes:
the first obtaining unit 10 is configured to obtain a first control operation for a preset button on a preset react-native application current page;
a second obtaining unit 20, configured to change a state value of a preset component corresponding to the preset button in response to the first control operation, and obtain a changed state value;
a third obtaining unit 30, which renders the current page based on the changed state value, and obtains a rendered page;
a first display unit 40 for displaying the rendered page, wherein the rendered page includes a pop-up box including at least one operable button;
and the control unit 50, if the second control operation for the at least one operable button is obtained, controlling the rendered page to be linked so that the user can perform the next operation on the linked page.
In the embodiment of the present invention, the first obtaining unit 10 is specifically configured to:
sending a URL request to a server;
receiving and processing data returned by the server side to obtain processed data;
and changing the current state value of the preset component corresponding to the preset button based on the processed data.
In the embodiment of the present invention, the third obtaining unit 30 is specifically configured to:
and if the state value of the preset assembly is monitored to be changed, triggering a render function, reloading the structure and the data of the current page, and obtaining the rendered page.
In this embodiment of the present invention, if the preset react-native application is specifically used for workflow document approval, the apparatus further includes:
the determining unit is used for determining at least one component related to examination and approval of the workflow document after the preset react-native application is started;
a fourth obtaining unit, configured to initialize the state value of the at least one component, and obtain the initialized state value;
the establishing unit binds the at least one component with a corresponding function based on the initialized state value and establishes a service logic;
and the second display unit is used for responding to the click operation and displaying an initialized pop-up box of the business logic corresponding to the first component if the click operation of the approval button corresponding to the first component in the at least one component is obtained, wherein the initialized pop-up box comprises a default style, a default structure and default data of the pop-up box.
In an embodiment of the present invention, if the initialized pop-up box includes at least one process trend and at least one handler, the apparatus further includes:
and the first loading unit loads and displays first handler data on an initialized pop-up box to indicate that the current handler approved by the user for the workflow document is the first handler if a third control operation for the first flow direction in the at least one flow direction is received.
In an embodiment of the present invention, if the at least one flow direction at least includes the first flow direction and a second flow direction different from the first flow direction, after loading and displaying the first processing person data on the initialized pop-up box, the apparatus further includes:
and the second loading unit is used for emptying the first processor data and reloading and displaying second processor data on an initialized pop-up frame if a fourth control operation aiming at the trend of the second process is received so as to indicate that the current processor of the user aiming at the workflow bill examination and approval is the second processor.
In an embodiment of the present invention, if the initialized pop-up box includes a third flow trend, where the third flow trend includes at least one assignment manner, the apparatus further includes:
a third loading unit, configured to load and display the at least one assignment mode on an initialized pop-up box to indicate an approval mode of the user for approval of the workflow document if a fifth control operation for the trend of the third flow is received;
and if a sixth control operation aiming at the first assignment mode in the at least one assignment mode is received, the fourth loading unit loads and displays third processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is a third processor.
A further aspect of an embodiment of the present invention provides a computer apparatus comprising a processor, a memory, and a computer program stored in the memory and executable on the processor, such as: detecting a control operation acting on a preset area of the display screen when the terminal is in a screen-off standby state; if the control operation meets a preset condition, acquiring fingerprint information input by the control operation, and verifying the fingerprint information; if the fingerprint information passes the verification, controlling the display screen to maintain a screen-off state, and calling the camera module to acquire information to be paid; and completing payment based on the information to be paid. The processor, when executing the computer program, performs the steps in the method embodiments described in the above aspects, such as the method steps shown in fig. 1. Alternatively, the processor implements the functions of the units in the above-described device embodiments when executing the computer program.
Illustratively, the computer program may be partitioned into one or more modules/units that are stored in the memory and executed by the processor to implement the invention. The one or more modules/units may be a series of computer program instruction segments capable of performing specific functions, which are used to describe the execution process of the computer program in the search apparatus/terminal device. For example, the computer program may be divided into a detection unit, an acquisition unit, a processing unit, and a payment unit, and the specific functions of the modules are as follows: the detection unit is used for detecting control operation acting on a preset area of the display screen when the terminal is in a screen-off standby state; the acquisition unit is used for acquiring the fingerprint information input by the control operation and verifying the fingerprint information if the control operation meets a preset condition; the processing unit controls the display screen to maintain a screen-off state if the fingerprint information passes verification, and calls the camera module to acquire information to be paid; and the payment unit completes payment based on the information to be paid.
The payment device/terminal device may be a desktop computer, a notebook, a palm computer, a cloud server, or other computing device. The payment device/terminal apparatus may include, but is not limited to, a processor, a memory. It will be appreciated by those skilled in the art that the schematic diagram is merely an example of a payment apparatus/terminal device and does not constitute a limitation of the payment apparatus/terminal device, and may include more or less components than those shown, or combine some components, or different components, for example, the payment apparatus/terminal device may further include input and output devices, network access devices, buses, etc.
The Processor may be a Central Processing Unit (CPU), other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic, discrete hardware components, etc. The general processor may be a microprocessor or the processor may be any conventional processor or the like, which is the control center of the payment device/terminal equipment, with various interfaces and lines connecting the various parts of the entire payment device/terminal equipment.
The memory may be used to store the computer programs and/or modules, and the processor may implement the various functions of the payment device/terminal equipment by running or executing the computer programs and/or modules stored in the memory, as well as invoking data stored in the memory. The memory may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required by at least one function (such as a sound playing function, an image playing function, etc.), and the like; the storage data area may store data (such as audio data, a phonebook, etc.) created according to the use of the cellular phone, and the like. In addition, the memory may include high speed random access memory, and may also include non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), at least one magnetic disk storage device, a Flash memory device, or other volatile solid state storage device.
Yet another aspect of embodiments of the present invention provides a computer-readable storage medium including instructions that, when executed on a computer, cause the computer to perform the method of the above-described aspects.
The payment means/terminal device integrated module/unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, all or part of the flow of the method according to the embodiments of the present invention may also be implemented by a computer program, which may be stored in a computer-readable storage medium, and when the computer program is executed by a processor, the steps of the method embodiments may be implemented. Wherein the computer program comprises computer program code, which may be in the form of source code, object code, an executable file or some intermediate form, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, usb disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM), Random Access Memory (RAM), electrical carrier wave signals, telecommunications signals, software distribution medium, and the like. It should be noted that the computer readable medium may contain content that is subject to appropriate increase or decrease as required by legislation and patent practice in jurisdictions, for example, in some jurisdictions, computer readable media does not include electrical carrier signals and telecommunications signals as is required by legislation and patent practice.
While preferred embodiments of the present invention have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and all such alterations and modifications as fall within the scope of the invention.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present invention without departing from the spirit and scope of the invention. Thus, if such modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include such modifications and variations.
Claims (9)
1. A method based on contact-native page layout linkage is applied to a user terminal comprising an Enterprise Resource Planning (ERP) client, and is characterized by comprising the following steps:
obtaining a first control operation aiming at a preset button on a preset react-native application current page;
responding to the first control operation, changing the state value of a preset component corresponding to the preset button, and obtaining the changed state value;
rendering the current page based on the changed state value to obtain a rendered page, wherein the rendering of the current page comprises re-rendering of each component on the current page, a layout structure among the components and data in the components;
displaying the rendered page, wherein the rendered page includes a pop-up box including at least one operable button;
if the second control operation aiming at the at least one operable button is obtained, controlling the rendered page to be linked so that the user can perform the next operation on the linked page;
wherein, if the preset react-native application is specifically used for workflow document approval, the method further comprises:
after the preset react-native application is started, determining at least one component related to the examination and approval of the workflow document;
initializing a state value of the at least one component, obtaining an initialized state value;
based on the initialized state value, binding the at least one component with a corresponding function to establish service logic;
and if the click operation aiming at the approval button corresponding to the first component in the at least one component is obtained, responding to the click operation, and displaying an initialized pop-up box of the business logic corresponding to the first component, wherein the initialized pop-up box comprises a default style, a default structure and default data of the pop-up box.
2. The method of claim 1, wherein the changing the current state value of the preset component corresponding to the preset button comprises:
sending a URL request to a server;
receiving and processing data returned by the server side to obtain processed data;
and changing the current state value of the preset component corresponding to the preset button based on the processed data.
3. The method of claim 1, wherein the rendering the current page based on the changed state value to obtain a rendered page comprises:
and if the state value of the preset assembly is monitored to be changed, triggering a render function, reloading the structure and the data of the current page, and obtaining the rendered page.
4. The method of claim 1, wherein if the initialized pop-up box includes at least one flow trend and at least one handler, the method further comprises:
and if a third control operation aiming at the first flow trend in the at least one flow trend is received, loading and displaying first processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is the first processor.
5. The method of claim 4, wherein if the at least one flow run includes at least the first flow run and a second flow run different from the first flow run, after loading and displaying the first handler data on the initialized pop-up box, the method further comprises:
and if a fourth control operation aiming at the trend of the second process is received, clearing the first processor data, reloading and displaying second processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is a second processor.
6. The method of claim 1, wherein if the initialized pop-up box includes a third flow trend, the third flow trend including at least one assignment mode, the method further comprising:
if a fifth control operation aiming at the trend of the third process is received, loading and displaying the at least one assignment mode on an initialized pop-up box so as to indicate an approval mode of the user aiming at the approval of the workflow document;
and if a sixth control operation aiming at the first assignment mode in the at least one assignment mode is received, loading and displaying third processor data on an initialized pop-up box so as to indicate that the current processor of the user aiming at the workflow document examination and approval is a third processor.
7. The utility model provides a device based on react-native page layout linkage, is applied to a user terminal including enterprise resource planning ERP client, its characterized in that includes:
the first obtaining unit is used for obtaining a first control operation aiming at a preset button on a preset react-native application current page;
a second obtaining unit, configured to change a state value of a preset component corresponding to the preset button in response to the first control operation, and obtain the changed state value;
a third obtaining unit, configured to render the current page based on the changed state value, and obtain a rendered page, where the third obtaining unit is configured to re-render each component on the current page, a layout structure between components, and data in the components;
a display unit for displaying the rendered page, wherein the rendered page includes a pop-up box including at least one operable button;
the control unit is used for controlling the rendered page to be linked if second control operation aiming at the at least one operable button is obtained, so that the user can perform next operation on the linked page;
wherein, if the preset react-native application is specifically used for workflow document approval, the device further comprises:
the determining unit is used for determining at least one component related to examination and approval of the workflow document after the preset react-native application is started;
a fourth obtaining unit, configured to initialize the state value of the at least one component, and obtain the initialized state value;
the establishing unit binds the at least one component with a corresponding function based on the initialized state value and establishes a service logic;
and the second display unit is used for responding to the click operation and displaying an initialized pop-up box of the business logic corresponding to the first component if the click operation of the approval button corresponding to the first component in the at least one component is obtained, wherein the initialized pop-up box comprises a default style, a default structure and default data of the pop-up box.
8. A user terminal, characterized in that the user terminal comprises a processor for implementing the steps of the method for exact-native page layout linkage based on any of claims 1-6 when executing a computer program stored in a memory.
9. A readable storage medium having stored thereon a computer program for implementing the steps of the method for exact-native page layout linkage based on claims 1-6 when executed by a processor.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711431452.5A CN110020371B (en) | 2017-12-26 | 2017-12-26 | Method and device for page layout linkage based on react-native |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711431452.5A CN110020371B (en) | 2017-12-26 | 2017-12-26 | Method and device for page layout linkage based on react-native |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110020371A CN110020371A (en) | 2019-07-16 |
| CN110020371B true CN110020371B (en) | 2021-04-16 |
Family
ID=67186979
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711431452.5A Active CN110020371B (en) | 2017-12-26 | 2017-12-26 | Method and device for page layout linkage based on react-native |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110020371B (en) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110825371B (en) * | 2019-08-06 | 2021-12-17 | 杭州美创科技有限公司 | Method for creating, rendering and interacting button group control based on React |
| CN111859214A (en) * | 2020-06-24 | 2020-10-30 | 北京金山云网络技术有限公司 | Method, device and equipment for loading web browser and storage medium |
| CN113825008B (en) * | 2021-11-24 | 2022-03-01 | 飞狐信息技术（天津）有限公司 | Active page display method and device |
| CN114296855B (en) * | 2021-12-29 | 2024-04-30 | 北京字节跳动网络技术有限公司 | State management method and device of user interface, electronic equipment and storage medium |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102073502A (en) * | 2011-01-11 | 2011-05-25 | 百度在线网络技术（北京）有限公司 | Method for rendering page frame by WEB primary layout and device thereof |
| CN103279321A (en) * | 2013-05-07 | 2013-09-04 | 青岛海信电器股份有限公司 | Audio and video control device and audio and video control method |
| CN104049848A (en) * | 2014-07-04 | 2014-09-17 | 北京奇虎科技有限公司 | Application prompting method and device, client side and electronic device |
| CN104111944A (en) * | 2013-04-19 | 2014-10-22 | 阿里巴巴集团控股有限公司 | Page processing method and device and page generating method and device |
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
| CN105843873A (en) * | 2016-03-18 | 2016-08-10 | 北京物思创想科技有限公司 | System and method for managing data modeling |
| CN107368487A (en) * | 2016-05-12 | 2017-11-21 | 阿里巴巴集团控股有限公司 | A kind of page assembly Dynamic Distribution method, apparatus and client |
-
2017
- 2017-12-26 CN CN201711431452.5A patent/CN110020371B/en active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102073502A (en) * | 2011-01-11 | 2011-05-25 | 百度在线网络技术（北京）有限公司 | Method for rendering page frame by WEB primary layout and device thereof |
| CN104111944A (en) * | 2013-04-19 | 2014-10-22 | 阿里巴巴集团控股有限公司 | Page processing method and device and page generating method and device |
| CN103279321A (en) * | 2013-05-07 | 2013-09-04 | 青岛海信电器股份有限公司 | Audio and video control device and audio and video control method |
| CN104049848A (en) * | 2014-07-04 | 2014-09-17 | 北京奇虎科技有限公司 | Application prompting method and device, client side and electronic device |
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
| CN105843873A (en) * | 2016-03-18 | 2016-08-10 | 北京物思创想科技有限公司 | System and method for managing data modeling |
| CN107368487A (en) * | 2016-05-12 | 2017-11-21 | 阿里巴巴集团控股有限公司 | A kind of page assembly Dynamic Distribution method, apparatus and client |
Non-Patent Citations (1)
| Title |
|---|
| React Native 省市区地址选择器（仿京东）;七月_代码君;《CSDN博客 https://blog.csdn.net/weixin_40166364/article/details/78330983》;20171024;第1-13页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110020371A (en) | 2019-07-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10558474B2 (en) | Media information processing method, mobile terminal, and storage medium | |
| CN110020371B (en) | Method and device for page layout linkage based on react-native | |
| US20130263029A1 (en) | Instantiable Gesture Objects | |
| CN109542427B (en) | System customization method and device, electronic equipment and storage medium | |
| CN106547580B (en) | Method and device for hooking function, mobile terminal and storage medium | |
| CN109347898B (en) | Scene information sending method, scene information display method, server and mobile terminal | |
| CN105378662A (en) | Bundle package generation | |
| CN110533464A (en) | A kind of advertisement detecting method, apparatus, system and calculate equipment | |
| US9307026B2 (en) | Fulfillment of applications to devices | |
| CN112230923A (en) | User interface rendering method, user interface rendering device and server | |
| US20190107929A1 (en) | Method and device for loading content of page, and electronic device | |
| US20200034101A1 (en) | Data displaying method and electronic device | |
| CN109358927B (en) | Application program display method and device and terminal equipment | |
| CN111626021B (en) | Presentation generation method and device | |
| CN109740079A (en) | Loading method, device and the computer equipment of the H5 page | |
| CN109034808B (en) | Operation method and device of payment application program and terminal equipment | |
| EP3848800B1 (en) | Method and apparatus for displaying message box, terminal and storage medium | |
| CN114741294A (en) | Page debugging method, device, equipment and storage medium | |
| US20170169419A1 (en) | Method and electronic device for setting default payment mode adaptively | |
| CN110879738B (en) | Operation step display method and device and electronic equipment | |
| US20170185270A1 (en) | Animation display method for view and terminal device | |
| CN110750742B (en) | Page optimization method, system, medium and electronic equipment | |
| CN117689377A (en) | Account service information processing method and electronic equipment | |
| CN115793905A (en) | Page display method and device | |
| CN116644723A (en) | Document processing method and device and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |