Page rendering method and device, equipment and storage medium

Abstract

The invention provides a page rendering method and device, equipment and a storage medium, and relates to the technical field of computers. The method comprises the steps of receiving service data sent by a client terminal; determining a component corresponding to the business data according to the business data and a pre-stored information block; and sending the component to a client terminal, so that the service terminal renders the component to obtain a page corresponding to the component, and in order to improve the service development delivery speed and reduce the development difficulty, a part of work needing multi-terminal development is transferred to a server to be completed, and the issued prefabricated member still needs to be rendered by the terminal, so that the service development delivery speed is improved, and the development difficulty is reduced. Compared with the prior art, the terminal rendering work is abstraction enough, new services do not need to be developed by the terminal generally, most requirements can be directly online without front-end development under the condition that display and interaction are carried out according to existing specifications, the landing speed of the new requirements is greatly increased, and meanwhile the development cost is also reduced.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a page rendering method, device, equipment and storage medium. Background Art

[0002] Currently, the rendering in the server and web front-end fields is at two extremes. One is completely based on the data protocol, and the rendering is completely handled by the front-end, which is called client-side rendering, or CSR for short; or it is completely server-side rendering, sending HTML and other front-end rendering language codes to the front-end, which is called server rendering, or SSR for short. For client-side rendering, the first screen loading time is long, and it is necessary to download js and execute the complete js logic before rendering; it has high technical requirements for front-end developers, and they need to be compatible with browsers and have sufficient understanding of the business to maintain it. For server rendering, the server is under great pressure and needs to generate complete page code; the development difficulty is high, and developers must understand how to render pages; if some dependent js components only support browser execution, then they cannot be executed. In addition, for these two technologies, the development of the front-end and back-end is coupled in the interface data, and each new business logic needs to add an interface or modify the existing interface data format to complete. Summary of the invention

[0003] The present application shows a page rendering method, apparatus, device and storage medium.

[0004] In a first aspect, the present application provides a page rendering method, the method comprising: Receive business data sent by the client terminal; Determining a component corresponding to the business data according to the business data and a pre-stored information block; The component is sent to the client terminal so that the service terminal renders the component to obtain a page corresponding to the component.

[0005] Optionally, the pre-stored information blocks include at least: a header area, a business status area, a business prompt area, a business content area, an attachment element area, a business dynamics area, a reply dynamics tab and a button action layer, a reply dynamics tab, a reply dynamics expansion area and an action button layer.

[0006] Optionally, the service terminal renders the component to obtain a page corresponding to the component, including: The service terminal renders the plurality of components in order from top to bottom to obtain pages corresponding to the components.

[0007] Optionally, the receiving the service data sent by the client terminal includes: The service data sent by the client terminal is received through the HTTP protocol, wherein the client terminal at least includes an IOS system terminal, a computer client terminal, a web client terminal and an Android system terminal.

[0008] In a second aspect, the present application provides a page rendering device, the device comprising: A receiving module, used for receiving business data sent by a client terminal; A determination module, configured to determine a component corresponding to the business data according to the business data and a pre-stored information block; The rendering module is used to send the component to the client terminal so that the service terminal renders the component to obtain a page corresponding to the component.

[0009] Optionally, the pre-stored information blocks include at least: a header area, a business status area, a business prompt area, a business content area, an attachment element area, a business dynamics area, a reply dynamics tab and a button action layer, a reply dynamics tab, a reply dynamics expansion area and an action button layer.

[0010] Optionally, the rendering module is used to: The service terminal renders the plurality of components in order from top to bottom to obtain pages corresponding to the components.

[0011] Optionally, the receiving module is used to: The service data sent by the client terminal is received through the HTTP protocol, wherein the client terminal at least includes an IOS system terminal, a computer client terminal, a web client terminal and an Android system terminal.

[0012] In a third aspect, the present application shows an electronic device, which includes: a processor; a memory for storing processor-executable instructions; wherein the processor is configured to execute the method described in any of the above aspects.

[0013] In a fourth aspect, the present application illustrates a non-temporary computer-readable storage medium, which, when instructions in the storage medium are executed by a processor of an electronic device, enables the electronic device to execute a method as described in any of the above aspects.

[0014] In a fifth aspect, the present application illustrates a computer program product. When instructions in the computer program product are executed by a processor of an electronic device, the electronic device is enabled to execute the method described in any of the above aspects.

[0015] The technical solution provided by the present application may include the following beneficial effects: An embodiment of the present application provides a page rendering method and device, including: receiving business data sent by a client terminal; determining a component corresponding to the business data based on the business data and a pre-stored information block; sending the component to the client terminal so that the business terminal renders the component to obtain a page corresponding to the component.

[0016] In order to speed up the delivery of business development and reduce the difficulty of development, part of the work that requires multi-terminal development is transferred to the server. The prefabricated parts issued still need to be rendered by the terminal. The terminal rendering work is abstract enough. New businesses usually do not require terminal development. As long as the display and interaction are in accordance with the existing specifications, most requirements can be directly launched without front-end development, which greatly speeds up the implementation of new requirements and reduces development costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 It is a flow chart of the steps of a page rendering method of the present application; Figure 2 It is a structural diagram of a page rendering system of the present application; Figure 3 It is a mobile terminal / H5 terminal display schematic diagram of a component of the present application; Figure 4 It is a web-side / PC-side display diagram of a component of the present application; Figure 5 It is a structural block diagram of a page rendering device of the present application; Figure 6 is a block diagram of an electronic device of the present application; Figure 7 It is a block diagram of a computer-readable storage medium of the present application. DETAILED DESCRIPTION

[0018] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0019] Reference Figure 1 , shows a flow chart of the steps of a page rendering method of the present application, which can be applied in an electronic device, wherein the method specifically may include the following steps: S101, receiving business data sent by a client terminal; S102, determining a component corresponding to the business data according to the business data and the pre-stored information block; S103: Send the component to the client terminal so that the service terminal renders the component to obtain a page corresponding to the component.

[0020] Server Side Rendering, or SSR for short, is a rendering method that runs Node.js programs on the server to dynamically generate HTML. Compared with the traditional browser-side rendering mode (CSR), SSR is less affected by device performance and network conditions, and can achieve better performance experience and SEO capabilities.

[0021] The embodiment of the present application provides a page rendering method, including: receiving business data sent by a client terminal; determining the component corresponding to the business data according to the business data and the pre-stored information block; sending the component to the client terminal so that the business terminal renders the component and obtains the page corresponding to the component. In order to increase the speed of business development delivery and reduce the development difficulty, part of the work that requires multi-terminal development is transferred to the server end to complete, and the prefabricated parts sent down still need to be rendered by the terminal. However, the work of terminal rendering is sufficiently abstract, and new businesses usually do not require terminal development.

[0022] Another embodiment of the present application further supplements the page rendering method provided in the above embodiment.

[0023] Optionally, the pre-stored information blocks include at least: a header area, a business status area, a business prompt area, a business content area, an attachment element area, a business dynamics area, a reply dynamics tab and a button action layer, a reply dynamics tab, a reply dynamics expansion area and an action button layer.

[0024] Optionally, the business terminal renders the component to obtain a page corresponding to the component, including: The business terminal renders multiple components in order from top to bottom to obtain pages corresponding to the components.

[0025] Optionally, receiving service data sent by a client terminal includes: Receive business data sent by client terminals through the HTTP protocol, where the client terminals at least include IOS system terminals, computer client terminals, web client terminals and Android system terminals.

[0026] The protocol of the embodiment of the present application uses a JSON structure to express a timeline. First, the timeline is an ordered list of information, so its first-level content is an array. Each element of the array is called an information block (Feed) in the embodiment of the present application. The rendering of each information block is as follows: Figure 3 and Figure 4shown.

[0027] The structure within each information block is the original solution of the embodiment of the present application: first, the partition of the information block. Each partition in the figure has its own exclusive key, such as the header area, its key is profile; the business content area, its key is bizData, and so on. These partitions together form an information block. This partition is called a component in the embodiment of the present application.

[0028] In most components, such as the business content area component, it is a top-down control array. When rendering, just render each control one by one from top to bottom to complete the rendering of this component.

[0029] So how is each control rendered? In the structure of each control, the present embodiment defines a string information, cmpt, which represents the type of the control. The cmpt tells the front end whether the current control is a text (TEXT control) or a collaborative rich text (PAAS_XT_TEXT control).

[0030] With the rendering method, we also need to tell the front end what to do when the control interacts with the user. Therefore, it also has an action attribute, which can be NONE for no interaction or FSLINK for executing an action of the FSLINK protocol.

[0031] The structure of this protocol is as follows: cmpt "TEXT"; action":"NONE", "cmpt":"PAAS XT TEXT"; "action":"NONE'.

[0032] However, the rendering of the control is sometimes more detailed, such as the background color, the highlight color when pointing, the response color when clicking, etc. This part of the embodiment of the present application retains the CSS properties of the front end, which belongs to the server rendering part. For example, for a discussion button control, the data structure of the color when it is sent is as follows: { "cmpt":"BIZ_BUTTON", "critical":false, "controlArg":{ "fslinkURL":"event: / / CML / CRM / Approval / Discuss?jsondata=%7B%22entityId%22%3A%22object_ProductGray__c%22%2C%22objectId%22%3A%2267613a3df6b84e00012306c2%22%2C%22instanceId%22%3A%2267613a3f4d78c51c946d8c44%22%2C%22applicantId%22%3A%2210297%22%2C%22discussPersons%22%3A%5B%2210297%22%2C%229859%22%2C%225397%22%2C%2210297%22%2C%228064%22%2C%2211171%22%5D%2C%22relevantTeam%22%3A%5B%2210297%22%5D%7D", "feedId":8346633, "buttonStyle":false }, "feedId":8346633, "feedType":2007, "name":"Discussion", "icon":"approval_flow_discussion", "action":"FSLINK", "style":{ "color":"#91959E", "activeIconColor":"#91959E", "hoverColor":"#91959E", "squareButton":false, "border-radius":3, "--active-icon-color":"#91959E", "--active-color":"#91959E", "--hover-icon-color":"#91959E", "--color":"#91959E", "--icon-color":"#91959E", "--hover-color":"#91959E", "hoverIconColor":"#91959E", "activeColor":"#91959E", "iconColor":"#91959E" } } In addition, controlArg can be seen above. This is to tell the front end some parameters that the front end needs to know when executing the current Action. In addition, there is another parameter bizArg, which means that part of the data that the front end needs to submit to the server when executing the action is directly sent from the server to the front end, so the front end does not need to go deep into the business logic to obtain relevant data and execute business actions. This structure is as follows: { "cmpt":"REPLY_BUTTON", "controlArg":{ "approveType":1, "senderId":9242, "hasOuterContact":false, "currentTaskId":"9255c70584c24bcf99b00d4c47801367", "currentApproverId":5397 }, "feedId":6367606, "feedType":4, "icon":"REPLY", "count":2, "bizArg":{ "feedId":6367606, "feedType":4 }, "action":"REPLY", "style":{ "color":"#91959E", "iconColor":"#91959E", "isSquareButton":false, "activeColor":"#91959E", "activeIconColor":"#91959E", "hoverColor":"#FF8000", "hoverBackground":"#F2F4FB", "hoverIconColor":"#91959E" } } This traditional KV-style protocol, together with the server-side rendering method of components + controls + CSS attributes, constitutes the design and implementation of part of the server rendering protocol.

[0033] In order to support the above-mentioned protocol, the back-end has a special module to process the business data, process it into components and controls, and sort it according to business expectations. This embodiment of the present application is called the back-end rendering module; the front-end needs to implement the rendering of the component library and the control library, which is called the front-end rendering engine in this embodiment of the present application; and implement the action development of the corresponding Action, which is called the front-end action engine in this embodiment of the present application.

[0034] This protocol requires the client to implement rendering and triggering mechanisms according to a set of standard protocols, and the server sends data according to this mechanism. The purpose of this is to give the business enough flexibility without having to design a very complex protocol. The extreme of this direction is that the client becomes a virtual machine, and the server sends code to the client virtual machine for execution, and the protocol becomes a language.

[0035] The embodiments of the present application do not need to achieve flexibility at the language level, but flexibility at the business level. Each business is the same for the client, and the client does not need to support a certain business separately. The unit recognized by the new protocol for the client is the control. The process of client development is the process of continuously improving the parsing and action of the control, rather than understanding the needs of the business one by one and repeating the process of developing controls and parsing data. The principle of control design is that the control type cmpt determines the rendering, and action determines the triggering action. All parameters for rendering and triggering actions are in this control, such as feedId and userId. How a feed is displayed, the embodiments of the present application display the feed according to Figure 3 and Figure 4As shown, it is divided into the header area (A), business status area (B), business prompt area (C), business content area (D), attachment element area (E), business dynamic area (F), reply dynamic tab and button action layer (H), reply dynamic tab (G), reply dynamic expansion area (K) and action button layer (J). Among them, the profile area, status area and actionbar area are required elements.

[0036] A feed object contains the following properties: / ** *feedId, unique identifier * / Long feedId; / ** *Feed title, used for mobile phone users to display at the top of the details page * / String feedTitle; / ** *Feed type, undefined by default. Used for terminal troubleshooting.

[0037] * / Int feedType; / ** *Feed profile picture, source, release time and other information, Area A * / FeedProfile feedProfile; / ** *Feed status, such as unapproved, unexecuted, log, approved, etc., Area B * / FeedStatusBar feedStatus; --- / **--- ---*The structure still used by the pre-670 web and 670 version terminals, the content is all the group controls in the C, D, E, and F areas--- ---* / --- ---MutableList <jsonobject>bizData;--- / ** *Feed dynamic tab, used for display in area G of the mobile client details page and area H of the web page * / FeedInformationTabGroup feedTabStatus; / ** *Feed action bar, you can reply, like, etc., used for mobile phone J area display and web page H area * / FeedActionBar actionBar; / ** * Prompt area C, for 670 web page * / MutableList <jsonobject>?hintArea; / ** * Main text and attachment area DE area, used for 670 web page * / MutableList <jsonobject>?bizDataArea; / ** *The source information area is between areas E and F and is used for the 670 web page * / MutableList <jsonobject>?externalSourceArea; / ** *Feed business dynamics area F, used for 670 web page * / MutableList <jsonobject>?criticalArea; The K zone is implemented by each terminal and is not issued through the Feed card.

[0038] The profile contains five controls: head, name, createTime, source, and range, which represent the head, name, creation time, source, and range respectively. A normal profile must have head, name, createTime, and source, but may not have range.

[0039] FeedStatus: Feed status. There are two rows of data in this position, so there are two rows in the definition. The first row is required, and the second row may not exist. If both rows of data in the status here cannot be displayed, the fallbackTitle text is displayed.

[0040] Here is an example: { "lineOne":{ "cmpt":"STATUS_LINE", "action":"NONE", "text":{ "cmpt":"TEXT", "color":"#545861", "background":"#FFFFFF", "action":"NONE", "fontSize":12, "bold":false, "content":"Approval" }, "state":{ "cmpt":"FEED_STATUS", "color":"#91959E", "background":"#FFFFFF", "action":"NONE", "fontSize":12, "bold":false, "content":"Awaiting approval" } }, "lineTwo":{ "cmpt": "STATUS_LINE", "action": "NONE", "text": { "cmpt": "TEXT", "color": "#C1C5CE", "background": "#FFFFFF", "action": "NONE", "fontSize": 12, "bold": false, "content": "NO.6367606" } }, "statuslines": { "cmpt": "STATUS_LINE", "action": "NONE", "text": { "cmpt": "TEXT", "color": "#545861", "background": "#FFFFFF", "action": "NONE", "fontSize": 12, "bold": false, "content": "Approval" }, "state": { "cmpt": "FEED_STATUS", "color": "#91959E", "background": "#FFFFFF", "action": "NONE", "fontSize": 12, "bold": false, "content": "Pending Approval" } }, { "cmpt": "STATUS_LINE", "action": "NONE", "text":{ "cmpt":"TEXT", "color":"#C1C5CE", "background":"#FFFFFF", "action":"NONE", "fontSize":12, "bold":false, "content":"NO.6367606" } } ] } Feed BizData area: Feed business data, the content is the feed control array, this part of the control display is displayed from top to bottom, all of its controls occupy the current feed width. The following is an example: [ { "cmpt":"SIMPLE_CONTENT", "hasIcon":false, "action":"NONE", "content":{ "cmpt":"XT_TEXT", "feedId":6367606, "feedType":4, "action":"NONE", "text":[ { "feedId":0, "objectType":0, "subType":0, "text":"content", "type":0, "color":"#181C25", "colorEnum":"NEUTRALS", "fontSize":14, "bold":false } ], "content":"Apply to take the virtual machine service offline. The service has been migrated to k8s.\n172.17.21.44: / opt / fs / fs-organization-sqlserver-proxy-provider / webapps / ROOT\n172.17.21.45: / opt / fs / fs-organization-sqlserver-proxy-provider / webapps / ROOT\t\n172.17.21.3: / opt / fs / fs-organization-sqlserver-proxy-provider / webapps / ROOT\t\n172.17.21.4: / opt / fs / fs-organization-sqlserver-proxy-provider / webapps / ROOT\t\n\n1. Disable the service on the corresponding service and execute the following script\nsh / opt / fs / fs-organization-sqlserver-proxy-provider / service.sh stop\n2. After the service is stopped, you can choose to shut down the virtual machine at an appropriate time" } } ] Feed Element area: The feed element area is used for compatibility capabilities of the old feed, such as attachments, positioning, CRM elements, etc. The new feed will store the above elements in the paas field instead of storing them in the element field of the feed. The structure is defined as follows: message FeedElement{ optional AttachmentComponentVO attachment; / / Attachment optional FormComponentVO formComponent; / / form optional ResourceComponentVO resourceComponent; / / resource optional UrlComponentVO urlComponent; / / url } Feed ActionBar is the button bar at the bottom of the feed. Although the structure of the details page and list page of the same feed is: message FeedActionBar{ optional repeated controlActionButton; } The button bar of the list page and detail page of iOS and Android clients are not in the same position (the list page is below the current feed, the detail page is at the bottom of the page, and there is a reply list and reply and like tab bar between the feed body and the button bar). The reply list and tab bar of the detail page are implemented by the terminal itself, rather than sent down.

[0041] The Feed control library includes at least the following: PORTRAIT-User portrait, click to jump to personal homepage FULL_USER - Personal information SYS_USER-CRM system user information FULL_DEPARTMENT-department information FULL_COMPANY - Company information IMAGE - thumbnail, click to display the full image TIME SOURCE SIMPLE_USER - user id SIMPLE_DEPARTMENT-department id MY_COMPANY - company name, no action when clicked RANGE - Range browsing STATUS_LINE - Status bar TEXT-text box FEED_STATUS - feed status ICON ACTION_BUTTON - Function button REWARD_ITEM-Reward REPLY_BUTTON, / / Reply button RECEIPT_BUTTON, / / Receipt button LIKE_BUTTON, / / Like--button MORE_BUTTON, / / More buttons REWARD_BUTTON, / / Reward--button BIZ_BUTTON, / / Business button, all business buttons share one BIZ_BUTTON REMIND_BUTTON, / / Reminder button FOCUS_BUTTON, / / Focus button FAVOURITE_BUTTON, / / Favorite button PRINT_BUTTON, / / Print button RETWEET_BUTTON, / / Forward button DELETE_BUTTON, / / Delete button LEFT_BUTTON, / / Left button, currently there is a change record on the Web side EMPLOYEE_DEPARTMENT_CHOOSER - Select employees and departments TIME_CHOOSER - select time OPTIONS_CHOOSER-select controls, including reminder time selection, rating selection, etc. INTERVAL_CHOOSER - select interval ERROR_HINT - Error hint PAAS_ERROR_HINT - Error hint LIST_CONTAINER - component list PAAS_TEXT-PaaS text box PAAS_LONG_TEXT - PaaS multi-line text PAAS_EMPLOYEE-PaaS employee information PAAS_XT_TEXT-collaborative text, supports emoticons, positioning, voice attachments, etc. EVALUATE_BUTTON - Review button MORE_TILE_BUTTON - Tiled secondary menu SIGN_STAR - Star CRITICAL_BIZ_INFO - Business critical response CRITICAL_BIZ_NODE, / / Business critical response node information SIGN_OK - OK sign OLD_DATA - Collaborate with old data NONE - compatible with non-existent components CHECK_BOX, / / Selection box PROGRESS_BAR, / / Progress bar COMPLETE_OR_REFORM_BUTTON, / / Complete task / redo task button / ** *A tab group, this control has a tab button bar. *The terminal also needs to implement a dynamically lengthened area below it. *Used to store replies, likes, rewards, etc. * / INFO_TAB_GROUP, XT_TEXT, / / Collaborative rich text SHORT_CONTENT, / / Editable row, used to drill down to business EMPLOYEE, LONG_CONTENT, / / Long text, title on top, body on bottom, line breaks handled on the client MORE_TILE_BUTTON, / / Support old feed TAG, / / Tag, exists in the sales record STARS, / / Rating information displayed in the dynamic area Feed action library, there are many actions triggered when the control is clicked, here are just some examples: / **feed standard action* / NONE - No action when clicking PERSONAL_HOME - Gets the user ID from the userId field of the current control and opens its work page DEPARTMENT_HOME - Opens the department home page IMAGE_OPEN - Opens an image from the URL of the current control FEED_OPEN-Get the feedId from the feedId field of the current control and open the feed details page. At this time, the data can be prepared by the client in advance or pulled in now. RANGE_POP-pop-up range browsing, currently only web pages should have this operation REPLY REPLY_LIST - reply list RECEIPT LIKE REWARD TASK REMIND RETWEET FAVOURITE-Collection FOCUS CANCEL_FOCUS - Cancel focus PRINT-Print CANCEL_FAVOURITE - Cancel favorite DELETE_FEED - delete feed MAP_OPEN - Open the map MENU_POP-Pop-up menu, no distinction between business buttons and feed buttons MORE_BUTTON_POP-Pops up more buttons. The pop-up buttons are divided into business buttons and feed buttons. INVALID / **Common business actions of Feed* / BIZ_ACTION - Business action, which does not generate a response BIZ_REPLY_ACTION - business action that generates a reply FSLINK-FSLink CREATE_PAAS_PAGE - creates a page of a paas object CREATE_PREBUILD_PAGE - Creates a preset feed CHOOSE_TIME_IMMEDIATELY - Select a time CHOOSE_OPTION_IMMEDIATELY - Select option / **Enterprise WeChat Phase III* / CREATE_PREBUILD_SHARE - Creates a preset share feed CREATE_PREBUILD_SALES - Creates a preset sales record feed CREATE_PREBUILD_OUT - Creates a preset outbound feed / **old feed* / / **Actions for Task 1.0* / DNET_TASK_CHOOSE_EMPLOYEE-Change the executor DNET_TASK_VIEW_EMPLOYEE-Task pop-up executor details DNET_TASK_CHOOSE_TIME - Task selection deadline DNET_TASK_CHOOSE_REMIND - Task selection reminder time DNET_TASK_VIEW_REMIND - Task view reminder time DNET_TASK_CANCEL - cancel a task DNET_TASK_FINISH - Finish the task / **schedule* / DNET_SCHEDULE_CHOOSE_EMPLOYEE - Select a participant DNET_SCHEDULE_VIEW_EMPLOYEE - View participants DNET_SCHEDULE_CHOOSE_TIME - Edit schedule time DNET_SCHEDULE_VIEW_TIME - View schedule time DNET_SCHEDULE_CHOOSE_REMIND - Select a reminder time DNET_SCHEDULE_VIEW_REMIND - View the schedule time DNET_CHANGE_RELEVANT_IMMEDIATELY - Modify schedule related item information DNET_CHANGE_REINVENT_IMMEDIATELY - Modify the schedule recurrence settings information DNET_VIEW_REINVENT_IMMEDIATELY - View schedule recurrence settings information DNET_STOP_SCHEDULE - End the schedule loop DNET_CANCEL_SCHEDULE - cancel a schedule / **log* / DNET_PLAN_REVIEW / **Approval* / DNET_APPROVAL_ACTION - Agree, Disagree, Reject DNET_APPROVAL_CHOOSE_EMPLOYEE-Change approver DNET_APPROVAL_ADD_RECEIPTS - Add CC recipients DNET_APPROVAL_CANCEL - Cancel approval DNET_APPROVE_FROM_DETAIL - Open approval details DNET_APPROVE_RESUBMISSION - Resubmit for approval DNET_APPROVE_GET_FLOW_DETAIL-Drill down to approval F area DNET_ERROR_APPROVE_FRESH - abnormal approval refresh / **instruction* / DNET_WORK_CANCEL - command canceled DNET_WORK_FINISH - instruction completed DNET_WORK_REVIEW - Instruction review DNET_WORK_CONTINUE - instruction continues DNET_WORK_CANCEL_AND_OTHER-Cancel and transfer the work to others like Figure 2 As shown in the figure, the Feed platform is the implementation device of this part of the server rendering protocol. It is divided into the following three layers: Feed core: The access layer and storage layer of the feed are at this level. The feed at this level is mainly connected to the front end and stores the data required by the feed itself. Feed adapter: The access layer between feed and business, responsible for converting business data, decoupling business from the feed core, and isolating business anomalies Feed business: If the business is too complex, or it is another platform-level business, such as Qixin or PAAS, the Feed platform will assist in implementing a Feed business to complete the business data organization and maintenance functions from the Feed perspective. Generally speaking, this Feed business will directly access the data layer of the real business. Another special business is the AI ​​business. The embodiment of the present application encapsulates the AI ​​business in the Feed business layer. The current typical AI business application scenario is that every week AI will dynamically generate a sales record for customer follow-up, summarizing the customer's sales this week. The components of AI business rendering are encapsulated in the Feed business layer.

[0042] In addition, Feed also has an asynchronous task and notification center, which is responsible for external synchronization of Feed addition, deletion and modification events, receiving business notifications and synchronizing them to the Qixin session and polling notifications. It is irrelevant to the implementation of this protocol, so I will not go into details.

[0043] The server-side rendering module is located in fs-feeds-biz, and it renders the data when it is output to the client. The client-side rendering engine is located on each client, and it renders the data by parsing the component controls. At the same time, the client has an action engine, which can execute any action sent down.

[0044] While satisfying the fact that most businesses can be displayed and interacted according to existing specifications, most requirements can be directly launched without front-end development, which greatly speeds up the implementation of new requirements and reduces development costs. For example, when adding AI services in the subsequent embodiments of this application, AI services can quickly implement the functions of issuing components and displaying them by controlling the data in the BizData area.

[0045] The embodiment of the present application provides a page rendering method, including: receiving business data sent by a client terminal; determining a component corresponding to the business data based on the business data and a pre-stored information block; sending the component to the client terminal so that the business terminal renders the component to obtain a page corresponding to the component. In order to increase the speed of business development delivery and reduce the development difficulty, a part of the work that requires multi-terminal development is transferred to the server to complete, and the prefabricated parts issued still need to be rendered by the terminal. The terminal rendering work is abstract enough, and new businesses usually do not need to be developed by the terminal. Under the condition of meeting the display and interaction requirements in accordance with the existing specifications, most requirements can be directly launched without front-end development, which greatly speeds up the implementation of new requirements and reduces the development cost.

[0046] Another embodiment of the present application provides a page rendering device, which is used to execute the page rendering method provided by the above embodiment.

[0047] like Figure 5 , which is a schematic diagram of the structure of a page rendering device provided in an embodiment of the present application. The page rendering device includes a receiving module 801, a determining module 802 and a rendering module 803, wherein: The receiving module 801 is used to receive the service data sent by the client terminal; The determination module 802 is used to determine the component corresponding to the business data according to the business data and the pre-stored information block; The rendering module 803 is used to send the component to the client terminal so that the service terminal renders the component to obtain a page corresponding to the component.

[0048] Regarding the device in this embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0049] The embodiment of the present application provides a page rendering method and device, including: receiving business data sent by a client terminal; determining the component corresponding to the business data according to the business data and the pre-stored information block; sending the component to the client terminal so that the business terminal renders the component and obtains the page corresponding to the component. In order to increase the speed of business development delivery and reduce the development difficulty, part of the work that requires multi-terminal development is transferred to the server end to complete, and the prefabricated parts sent down still need to be rendered by the terminal. However, the work of terminal rendering is sufficiently abstract, and new businesses usually do not require terminal development.

[0050] Another embodiment of the present application further supplements the page rendering device provided in the above embodiment.

[0051] Optionally, the pre-stored information blocks include at least: a header area, a business status area, a business prompt area, a business content area, an attachment element area, a business dynamics area, a reply dynamics tab and a button action layer, a reply dynamics tab, a reply dynamics expansion area and an action button layer.

[0052] Optionally, the rendering module is used to: the business terminal renders the multiple components in order from top to bottom to obtain pages corresponding to the components.

[0053] Optionally, the receiving module is used to: receive business data sent by the client terminal through the HTTP protocol, wherein the client terminal at least includes an IOS system terminal, a computer client terminal, a web client terminal and an Android system terminal.

[0054] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0055] The embodiment of the present application provides a page rendering method and device, including: receiving business data sent by a client terminal; determining the component corresponding to the business data according to the business data and the pre-stored information block; sending the component to the client terminal so that the business terminal renders the component and obtains the page corresponding to the component. In order to increase the speed of business development delivery and reduce the development difficulty, part of the work that requires multi-terminal development is transferred to the server end to complete, and the prefabricated parts sent down still need to be rendered by the terminal. However, the work of terminal rendering is sufficiently abstract, and new businesses usually do not require terminal development.

[0056] Optionally, an embodiment of the present application further provides an electronic device, comprising: a processor, a memory, and a computer program stored in the memory and executable on the processor. When the computer program is executed by the processor, the various processes of the above-mentioned method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be described here.

[0057] The embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, each process of the above method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it is not repeated here. The computer-readable storage medium is, for example, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0058] Figure 6 800 is a block diagram of an electronic device 800 shown in the present application. For example, the electronic device 800 may be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, etc.

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

[0060] The processing component 802 generally controls the overall operation of the electronic device 800, such as operations associated with display, phone calls, data communications, camera operations, and recording operations. The processing component 802 may include one or more processors 820 to execute instructions to complete all or part of the steps of the above method. In addition, the processing component 802 may include one or more modules to facilitate the interaction between the processing component 802 and other components. For example, the processing component 802 may include a multimedia module to facilitate the interaction between the multimedia component 808 and the processing component 802.

[0061] The memory 804 is configured to store various types of data to support operations on the device 800. Examples of such data include instructions for any application or method operating on the electronic device 800, contact data, phone book data, messages, images, videos, etc. The memory 804 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

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

[0063] The multimedia component 808 includes a screen that provides an output interface between the electronic device 800 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP).

[0064] The audio component 810 is configured to output and / or input audio signals. For example, the audio component 810 includes a microphone (MIC). In some embodiments, the audio component 810 also includes a speaker for outputting audio signals.

[0065] The input / output (I / O) interface 812 provides an interface between the processing component 802 and a peripheral interface module, such as a keyboard, a click wheel, a button, etc.

[0066] The sensor component 814 includes one or more sensors for providing status assessment of various aspects for the electronic device 800 .

[0067] The communication component 816 is configured to facilitate wired or wireless communication between the electronic device 800 and other devices.

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

[0069] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 804 including instructions, and the instructions can be executed by the processor 820 of the electronic device 800 to perform the above method.

[0070] Figure 7 19 is a block diagram of a computer-readable storage medium 1900 shown in the present application. For example, the computer-readable storage medium 1900 may be provided as a server.

[0071] Reference Figure 7 , the computer-readable storage medium 1900 includes a processing component 1922, which further includes one or more processors, and a memory resource represented by a memory 1932 for storing instructions, such as an application, that can be executed by the processing component 1922. The application stored in the memory 1932 may include one or more modules, each corresponding to a set of instructions. In addition, the processing component 1922 is configured to execute instructions to perform the above method.

[0072] The computer-readable storage medium 1900 may also include a power component 1926 configured to perform power management of the computer-readable storage medium 1900, a wired or wireless network interface 1950 configured to connect the computer-readable storage medium 1900 to a network, and an input / output (I / O) interface 1958. The computer-readable storage medium 1900 may operate based on an operating system stored in the memory 1932, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, or the like.

[0073] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.< / jsonobject> < / jsonobject> < / jsonobject> < / jsonobject> < / jsonobject>

Claims

1. A page rendering method, characterized in that: The method comprises: Receive business data sent by the client terminal; Determining a component corresponding to the business data according to the business data and a pre-stored information block; The component is sent to the client terminal so that the service terminal renders the component to obtain a page corresponding to the component.

2. The page rendering method according to claim 1, characterized in that: The pre-stored information blocks include at least: a header area, a business status area, a business prompt area, a business content area, an attachment element area, a business dynamics area, a reply dynamics tab and an action button layer, a reply dynamics tab, a reply dynamics expansion area and an action button layer.

3. The page rendering method according to claim 1, characterized in that: The service terminal renders the component to obtain a page corresponding to the component, including: The service terminal renders the plurality of components in order from top to bottom to obtain pages corresponding to the components.

4. The page rendering method according to claim 1, characterized in that: The receiving of service data sent by the client terminal includes: The service data sent by the client terminal is received through the HTTP protocol, wherein the client terminal at least includes an IOS system terminal, a computer client terminal, a web client terminal and an Android system terminal.

5. A page rendering device, characterized in that: The device comprises: A receiving module, used for receiving business data sent by a client terminal; A determination module, configured to determine a component corresponding to the business data according to the business data and a pre-stored information block; The rendering module is used to send the component to the client terminal so that the service terminal renders the component to obtain a page corresponding to the component.

6. The page rendering device according to claim 5, characterized in that: The pre-stored information blocks include at least: a header area, a business status area, a business prompt area, a business content area, an attachment element area, a business dynamics area, a reply dynamics tab and an action button layer, a reply dynamics tab, a reply dynamics expansion area and an action button layer.

7. The page rendering device according to claim 5, characterized in that: The rendering module is used to: The service terminal renders the plurality of components in order from top to bottom to obtain pages corresponding to the components.

8. The page rendering device according to claim 5, characterized in that: The receiving module is used for: The service data sent by the client terminal is received through the HTTP protocol, wherein the client terminal at least includes an IOS system terminal, a computer client terminal, a web client terminal and an Android system terminal.

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

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images