CN110333859B - Page creation method, page creation device, electronic device and computer readable storage medium - Google Patents
Page creation method, page creation device, electronic device and computer readable storage medium Download PDFInfo
- Publication number
- CN110333859B CN110333859B CN201910372995.7A CN201910372995A CN110333859B CN 110333859 B CN110333859 B CN 110333859B CN 201910372995 A CN201910372995 A CN 201910372995A CN 110333859 B CN110333859 B CN 110333859B
- Authority
- CN
- China
- Prior art keywords
- item
- view container
- information
- view
- container
- 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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The present disclosure provides a page creation method, apparatus, electronic device, and computer-readable storage medium, the method may include: acquiring a first view container and item configuration information, wherein the item configuration information comprises the item quantity and item content information of an item group positioned at a first position; setting at least one second view container in the first view container according to the number of the items, wherein the second view container is used for one item in the item group at the first position; acquiring style information of a first view container and style information of each second view container; and generating the item group at the first position according to the item content information, the style information of the first view container and the style information of each second view container. The method and the device realize the custom development and creation of the display style of the applet, so that the style is diversified, and the experience of a user when using the applet is improved.
Description
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a page creation method, apparatus, electronic device, and computer readable storage medium.
Background
With the development of computer technology, applets are increasingly favored by users, and are also widely developed and applied. The applet is run on an Application (APP) and can be used without being downloaded by a user; the applet is implemented using web technology. The content presented by the applet includes a set of items and a presentation page.
In the prior art, when the applet is developed, a project group required to be displayed by the applet can be created through a unified component of the applet, wherein the project group comprises a plurality of projects, for example, the project group is a menu bar and the projects are menu items; when the item group required to be displayed by the applet is created, the item group can be generated according to the number of items and content information input by the developer.
However, in the prior art, the unified component provided by the applet has a fixed style, and thus the style of the obtained item group and the style of the items in the item group are fixed, and the style is unified, for example, when the item group is a bottom menu bar and the items are menu items, the style of the obtained bottom menu bar and the style of the menu items in the bottom menu bar are fixed by adopting the mode of the prior art; the display style of the applet cannot be developed and created in a self-defined manner; further, the experience when the user uses the applet is poor.
Disclosure of Invention
The embodiment of the disclosure provides a page creation method, a page creation device, electronic equipment and a computer readable storage medium, which realize the custom development and creation of the display style of an applet, so that the style is diversified, and the experience of a user when using the applet is improved.
In a first aspect, the present disclosure provides a page creation method, including:
acquiring a first view container and item configuration information, wherein the item configuration information comprises the item quantity and item content information of an item group positioned at a first position;
setting at least one second view container in the first view container according to the item quantity, wherein the second view container is used for bearing one item in the item group positioned at the first position;
acquiring style information of the first view container and style information of each second view container;
and generating the item group at the first position according to the item content information, the style information of the first view container and the style information of each second view container.
Further, generating the item group at the first location according to the item content information, the style information of the first view container, and the style information of each of the second view containers, includes:
Generating an item corresponding to each second view container in each second view container according to the item content information;
and adjusting the style of the item group at the first position and the style of the item corresponding to each second view container according to the style information of the first view container and the style information of each second view container so as to generate the item group at the first position.
Further, the project content information comprises picture source information of each project and text information of each project;
generating, in each second view container, an item corresponding to each second view container according to the item content information, including:
providing a picture container and a third view container in each of the second view containers;
according to the picture source information of the items corresponding to each second view container, the picture source information is set into the picture container corresponding to each second view container, and the text information of the items corresponding to each second view container is set into the third view container corresponding to each second view container, so that the items corresponding to each second view container are generated.
Further, the picture source information includes: a first source address and a second source address;
the first source address is used for indicating a picture displayed when the item is in a selected state, and the second source address is used for indicating a picture displayed when the item is not in a selected state.
Further, the text information is provided with color attributes for indicating color values of text on the item, the color values including color values of text in a selected state and color values in an unselected state.
Further, the method further comprises:
acquiring a fourth view container and page information of at least one page to be generated;
and setting at least one fifth view container in the fourth view container, wherein the fifth view container is used for bearing page information of one page.
Further, before generating the item group at the first location according to the item content information, the style information of the first view container, and the style information of each of the second view containers, the method further includes:
setting a callback function for the first view container, wherein the callback function corresponds to a plurality of calling attribute values, and each calling attribute value corresponds to each second view container one by one; and the first view container is configured with a variable value, the variable value being used to indicate the currently selected item;
After generating the item group at the first position according to the item content information, the style information of the first view container and the style information of each of the second view containers, the method further comprises:
receiving a trigger instruction sent by a user, wherein the trigger instruction is used for indicating a second view container corresponding to an item selected by the user;
determining a calling attribute value corresponding to the second view container indicated by the trigger instruction according to the callback function;
when the variable value is determined to be the same as the calling attribute value corresponding to the second view container indicated by the trigger instruction, determining to keep displaying the page corresponding to the currently selected item;
and when the variable value is determined to be different from the call attribute value corresponding to the second view container indicated by the trigger instruction, updating the variable value according to the call attribute value of the second view container indicated by the trigger instruction, and displaying a page corresponding to the item indicated by the updated variable value.
Further, displaying a page corresponding to the item indicated by the updated variable value includes:
determining a second view container corresponding to the item indicated by the updated variable value;
Determining a fifth view container corresponding to the second view container according to a preset corresponding relation between the second view container and the fifth view container;
and rendering a fifth view container corresponding to the second view container according to preset page information to generate a page corresponding to the item indicated by the updated variable value.
In a second aspect, the present disclosure provides a page creation apparatus, including:
a first obtaining unit, configured to obtain a first view container and item configuration information, where the item configuration information includes the number of items and item content information of an item group located at a first position;
a first setting unit, configured to set at least one second view container in the first view container according to the number of items, where the second view container is used to carry one item in the item group located at the first position;
a second acquisition unit configured to acquire style information of the first view container and style information of each of the second view containers;
and the generation unit is used for generating the item group at the first position according to the item content information, the style information of the first view container and the style information of each second view container.
Further, the generating unit is specifically configured to: generating an item corresponding to each second view container in each second view container according to the item content information; and adjusting the style of the item group at the first position and the style of the item corresponding to each second view container according to the style information of the first view container and the style information of each second view container so as to generate the item group at the first position.
Further, the project content information comprises picture source information of each project and text information of each project;
the generating unit is specifically configured to: providing a picture container and a third view container in each of the second view containers; according to the picture source information of the items corresponding to each second view container, the picture source information is set into the picture container corresponding to each second view container, and the text information of the items corresponding to each second view container is set into the third view container corresponding to each second view container, so that the items corresponding to each second view container are generated.
Further, the picture source information includes: a first source address and a second source address;
the first source address is used for indicating a picture displayed when the item is in a selected state, and the second source address is used for indicating a picture displayed when the item is not in a selected state.
Further, the text information is provided with color attributes for indicating color values of text on the item, the color values including color values of text in a selected state and color values in an unselected state.
Further, the apparatus further comprises: a third acquisition unit and a second setting unit;
the third obtaining unit is used for obtaining the fourth view container and page information of at least one page to be generated;
the second setting unit is configured to set at least one fifth view container in the fourth view container, where the fifth view container is used to carry page information of one page.
Further, the apparatus further comprises: a third setting unit and a page switching processing unit;
the third setting unit is configured to set a callback function for the first view container before the generating unit generates the item group located at the first position, where the callback function corresponds to a plurality of call attribute values, and each call attribute value corresponds to each second view container one by one; and the first view container is configured with a variable value, the variable value being used to indicate the currently selected item;
The page processing unit is used for receiving a trigger instruction sent by a user after the generating unit generates the item group positioned at the first position, wherein the trigger instruction is used for indicating a second view container corresponding to the item selected by the user; determining a calling attribute value corresponding to the second view container indicated by the trigger instruction according to the callback function; when the variable value is determined to be the same as the calling attribute value corresponding to the second view container indicated by the trigger instruction, determining to keep displaying the page corresponding to the currently selected item; and when the variable value is determined to be different from the call attribute value corresponding to the second view container indicated by the trigger instruction, updating the variable value according to the call attribute value of the second view container indicated by the trigger instruction, and displaying a page corresponding to the item indicated by the updated variable value.
Further, the page processing unit is specifically configured to: determining a second view container corresponding to the item indicated by the updated variable value; determining a fifth view container corresponding to the second view container according to a preset corresponding relation between the second view container and the fifth view container; and rendering a fifth view container corresponding to the second view container according to preset page information to generate a page corresponding to the item indicated by the updated variable value.
In a third aspect, the present disclosure provides an electronic device comprising: a memory and a processor;
the memory is used for storing a computer program;
wherein the processor executes the computer program in the memory to implement the method as in any of the embodiments of the first aspect.
In a fourth aspect, the present disclosure provides a computer readable storage medium having stored thereon a computer program for execution by a processor to perform a method as any of the embodiments of the first aspect.
The present disclosure provides a page creation method, apparatus, electronic device, and computer readable storage medium, where by acquiring a first view container and item configuration information, then at least one second view container may be set in the first view container according to the number of items in the item configuration information, where the first view container is used to carry a group of items located in a first position, and the second view container is used to carry one item in the group of items located in the first position, then, based on a style attribute provided by the view container, a developer may perform custom development and creation on style information of the first view container and style information of each second view container, and then, after style information of the first view container and style information of each second view container are acquired, a custom style group of items may be generated in combination with item content information in the item configuration information, so that style is diversified, and experience of a user when using a applet is further improved.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the disclosure and together with the description, serve to explain the principles of the disclosure.
FIG. 1 is a flow chart of a page creation method according to an embodiment of the present disclosure;
FIG. 2 is a schematic diagram of a bottom menu bar provided in an embodiment of the present disclosure;
FIG. 3 is a schematic diagram of a bottom menu bar provided by another embodiment of the present disclosure;
FIG. 4 is a flow chart of a page creation method according to another embodiment of the present disclosure;
fig. 5 is a schematic structural diagram of a page creation apparatus according to an embodiment of the present disclosure;
fig. 6 is a schematic structural diagram of a page creation apparatus according to another embodiment of the present disclosure;
fig. 7 is a schematic structural diagram of an electronic device according to an embodiment of the disclosure;
fig. 8 is an exemplary structural schematic diagram of an electronic device according to an embodiment of the present disclosure. Specific embodiments of the present disclosure have been shown by way of the above drawings and will be described in more detail below. These drawings and the written description are not intended to limit the scope of the disclosed concepts in any way, but rather to illustrate the disclosed concepts to those skilled in the art by reference to specific embodiments.
Detailed Description
For the purposes of making the objects, technical solutions and advantages of the embodiments of the present disclosure more apparent, the technical solutions of the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present disclosure, and it is apparent that the described embodiments are some embodiments of the present disclosure, but not all embodiments. Based on the embodiments in this disclosure, all other embodiments that a person of ordinary skill in the art would obtain without making any inventive effort are within the scope of protection of this disclosure.
The related art will be described first.
1. What is an event
The event is a communication mode from a view layer to a logic layer; the event can feed the behavior of the user back to the logic layer for processing; the event can be bound on the component, and when the trigger event is reached, a corresponding event processing function in the logic layer is executed; the event object may carry additional information such as id, dataset, views.
2. Event usage
An event processing function, such as a bindtap, is bound in the component, and when the user clicks the component, the corresponding event processing function is found in the Page corresponding to the Page. The corresponding event handling function is written in the corresponding Page definition, and the parameter is event.
3. Responding to events using WXS functions
The base library 2.4.4 starts to support, and the low version needs to be compatible. Starting from base library version 2.4.4, support to bind events using WXS functions that accept 2 parameters, the first is an event, an event. Instance object is added on the basis of the original event, and the second parameter is an ownerInstance, which is a componentDescriptor object as the event. Instance. The specific use is as follows:
binding and registering WXS functions of event processing in the component; the test.wxs file implements the tapName function. It should be noted that the bound WXS functions must be bracketed with { }.
Among them, ownerInstance contains methods, and the style and class of the component can be set.
4. Event classification
Events are classified into bubbling events and non-bubbling events:
bubbling event: when an event on a component is triggered, the event is passed to the parent node.
Non-bubbling event: when an event on a component is triggered, the event is not passed to the parent node.
A list of bubbling events for WXML is shown in table 1 below:
TABLE 1
It should be noted that, other component custom events except the above table, such as non-bubbling events without special statement, such as a sub event of < form/>, an input event of < input/>, a scroll event of < scroll-view/>.
5. Event binding and bubbling
The writing method of event binding and the attribute of the component are in the form of key and value.
The key starts with bind or catch and then follows the event type, e.g., bindtap, catchtouchstart. From the base library version 1.5.0, in non-native components, bind and catch may be followed by a colon whose meaning is unchanged, e.g., bind: tap, catch: touchstart.
value is a string of characters that requires a function of the same name to be defined in the corresponding Page, or else that may be misplaced when an event is triggered.
The bind event binding does not prevent the bubble event from bubbling up and the catch event binding can prevent the bubble event from bubbling up.
6. Capturing phase of event
From the base library version 1.5.0, touch class events support the capture phase. The capture phase is located before the bubble phase and in the capture phase the order of events reaching the nodes is exactly the opposite of the bubble phase. When it is desired to listen for events during the capture phase, capture-bind, capture-catch keywords may be employed, which will interrupt the capture phase and cancel the bubble phase.
Fig. 1 is a schematic flow chart of a page creation method according to an embodiment of the present disclosure, and as shown in fig. 1, the method provided in this embodiment is applied to a page creation device for illustration, and the method includes:
Step 101: the method comprises the steps of acquiring a first view container and item configuration information, wherein the item configuration information comprises the item quantity and item content information of an item group located at a first position.
In practical applications, the execution body of the embodiment of the disclosure may be a page creation device, where the page creation device may be program software, or may be a medium storing a relevant computer program, for example, a usb disk, etc.; alternatively, the page creation means may be an entity device, such as a chip, a smart terminal, a computer, a server, etc., in which the relevant computer program is integrated or installed.
In the disclosed embodiments, there may be a variety of ways to obtain the first view container. For example, the first view container may be acquired when a creation instruction input by a developer is received, and in one embodiment, the first view container is created when the creation instruction is received; in another embodiment, the first view container is obtained from a storage device when the creation instruction is received, where the storage device stores the first view container, and the storage device may be a chip, an intelligent terminal, a computer, a server, and the like.
In order to improve the efficiency of page creation and the experience of a developer when creating a page, a configurable interface can be provided for the developer, so that the developer can input project configuration information through the configurable interface, namely, the project configuration information can be obtained through the interface. The project configuration information can be set according to actual requirements. The first position may be a top side, a bottom side, a side, etc. of the applet, the item group may be a menu bar, etc., for example, when the first position is a bottom side of the applet and the item group is a menu bar, the item group at the first position is a bottom menu bar of the applet. In addition, the item content information in the configuration information may include picture source information of each item and text information of each item, for example, when the item group is a menu bar, the item may be a menu item; in addition, the item configuration information may further include background color information of the item group located at the first position, and the like.
Step 102: at least one second view container is arranged in the first view container according to the number of items, wherein the second view container is used for carrying one item in the item group located at the first position.
In the embodiment of the disclosure, in order to facilitate the customization of the style of each item, one item corresponds to one second view container.
Specifically, a corresponding number of < view > tags may be created and inserted in the first view container according to the number of items, and each < view > tag may be rendered using a list provided by the applet as a second view container corresponding to the corresponding item.
Step 103: style information of the first view container and style information of each second view container are acquired.
In the embodiment of the disclosure, the first view container and each second view container have class attributes, that is, style attributes, so that a developer can perform custom development and creation on style information of the first view container and style information of each second view container, that is, the page creation device can obtain the style information of the first view container and the style information of each second view container customized by the developer.
In practice, style information may include, but is not limited to, shape, location, color, and the like. For the first view container, for example, the style information of the first view container includes the shape of the item group located at the first position, where the shape of the item group may be set according to the actual requirement, such as an irregular polygon, rectangle, square, and so on. For example, when the first position is the bottom side of the applet and the item group is the menu bar, that is, when the item group at the first position is the bottom menu bar, referring to fig. 2, fig. 2 is a schematic diagram of the bottom menu bar provided in an embodiment of the present disclosure, and the bottom menu bar shown in fig. 2 is elliptical in shape. For the second view container, for example, the style information of the second view container includes the position information of the item, wherein the position information can be set according to the actual requirement, such as setting that the picture in the item is displayed in the corresponding second view container, orThe pictures in the group of items are, however, displayed outside the corresponding second view container. For example, when the first position is the bottom side of the applet, the item group is the menu bar, that is, the item group in the first position is the bottom menu bar, and accordingly, the items in the item group are menu items, referring to fig. 3, fig. 3 is a schematic diagram of the bottom menu bar provided in another embodiment of the disclosure, as shown in fig. 3, a picture in the menu item located in the middle (i.e., "publishing" the corresponding menu item) The remaining four pictures are displayed in the respective second view container outside the respective second view container.
Step 104: and generating the item group at the first position according to the item content information, the style information of the first view container and the style information of each second view container. In the embodiment of the disclosure, after the style information of the first view container and the style information of each second view container are acquired, the item group at the first position can be generated by combining the acquired item content information, wherein the generated item group at the first position has customized style information through the style information of the first view container and the style information of each second view container,
according to the page creation method, through acquiring the first view container and the item configuration information, then at least one second view container can be set in the first view container according to the number of items in the item configuration information, wherein the first view container is used for a group of items located in a first position, the second view container is used for bearing one item in the group of items located in the first position, then based on style attributes provided by the view containers, a developer can perform custom development and creation on style information of the first view container and style information of each second view container, and therefore after the style information of the first view container and the style information of each second view container are acquired, the item group of a custom style can be generated by combining the item content information in the item configuration information, so that style diversification is achieved, and experience of a user when using a small program is improved.
Fig. 4 is a flowchart of a page creation method according to another embodiment of the present disclosure, as shown in fig. 4, where the method may include:
step 401: the method comprises the steps of acquiring a first view container and item configuration information, wherein the item configuration information comprises the item quantity and item content information of an item group located at a first position.
In the embodiment of the present disclosure, taking the item group located at the first position as the bottom menu bar as an example, corresponding items are menu items, and the tabBar object may be used to obtain the item configuration information corresponding to the bottom menu bar. The object has color attribute, selected color attribute, backgroup color attribute and list attribute, wherein the color attribute represents the color of the text information in the unselected menu item, the selected color attribute represents the color of the text information in the selected menu item, the backgroup color attribute represents the background color of the bottom menu bar, and the list attribute corresponds to an array for storing the item content information. That is, the developer can assign a value to each attribute to obtain the item configuration information corresponding to the bottom menu bar. The project content information comprises picture source information of each menu item and text information of each menu item. In addition, by assigning a list attribute, the number of items corresponding to the bottom menu bar can be determined.
Step 402: at least one second view container is arranged in the first view container according to the number of items, wherein the second view container is used for carrying one item in the item group located at the first position.
Step 403: setting a callback function for the first view container, wherein the callback function corresponds to a plurality of calling attribute values, and each calling attribute value corresponds to each second view container one by one; and the first view container is configured with a variable value for indicating the currently selected item.
In the embodiment of the present disclosure, the initialization variable tabIndex is 1, the tabIndex variable indicates the position of the currently selected item in the item group located at the first position, and the variable value of 1 indicates that the currently selected item is the 1 st item (e.g., in order from left to right). Taking the item group as a menu bar as an example, correspondingly, if the item is a menu item, the variable value of 1 indicates that the currently selected menu item is the 1 st menu item. It should be noted that, the initial value of tabIndex may be set to other values according to actual requirements, which is not limited in this scheme.
In order to realize interface switching, for the nth item, the value of the data-index attribute of the second view container corresponding to the nth item may be set to N, that is, a call attribute value is set for each second view container, and a callback function is set for the first view container, where a bindtap callback function may be used.
Step 404: style information of the first view container and style information of each second view container are acquired.
Step 405: and generating an item corresponding to each second view container in each second view container according to the item content information.
In the embodiment of the disclosure, this step may be specifically implemented by the following substeps:
a first substep: providing a picture container and a third view container in each second view container;
a second substep: according to the picture source information of the items corresponding to each second view container, the picture source information is set into the picture container corresponding to each second view container, and the text information of the items corresponding to each second view container is set into the third view container corresponding to each second view container, so that the items corresponding to each second view container are generated.
Specifically, for the first sub-step, a < image > tag may be created and inserted in each of the second view containers as a picture container, and a < view > tag may be created and inserted in each of the second view containers as a third view container.
Step 406: and acquiring a fourth view container and page information of at least one page to be generated.
In the embodiment of the present disclosure, the manner of obtaining the fourth view container may be various, and specific reference may be made to the manner of obtaining the first view container, which is not described herein.
Step 407: and setting at least one fifth view container in the fourth view container, wherein the fifth view container is used for bearing page information of one page.
In the disclosed embodiment, at least one < view > tag is created and inserted in the fourth view container according to the number of items, so that each < view > tag is taken as a fifth view container.
Step 408: and adjusting the style of the item group at the first position and the style of the item corresponding to each second view container according to the style information of the first view container and the style information of each second view container so as to generate the item group at the first position.
In the embodiment of the disclosure, taking the example that the style information of one second view container a is displayed outside the second view container a and the style information of the other second view container B is displayed in the second view container B as the picture 1, after the style information is acquired, style adjustment may be performed so that the picture 1 is displayed outside the second view container a and the picture 2 is displayed in the second view container B in the generated item group, for example, as shown in fig. 3, the picture corresponding to "release" is displayed outside the container and the picture corresponding to other menu items is displayed in the corresponding container. Step 409: and receiving a trigger instruction sent by a user, wherein the trigger instruction is used for indicating a second view container corresponding to the item selected by the user.
Step 410: and determining a calling attribute value corresponding to the second view container indicated by the trigger instruction according to the callback function.
In the embodiment of the present disclosure, according to the callback function, a value of an index attribute of an object corresponding to a dataset attribute may be obtained, where the dataset attribute is an attribute of the object corresponding to a target attribute, and the target attribute is an attribute of an incoming event object. For example, when a user using the applet clicks a menu item in the bottom menu bar, a trigger instruction sent by the user is received, and then an event object is generated according to the trigger instruction, so that a corresponding call attribute value can be obtained according to the callback function and the event object.
The following explains the event object:
when a component triggers an event, the processing function that the logical layer binds the event receives an event object, unless specified otherwise.
The properties of the BaseEvent base event object are shown in table 2 below.
TABLE 2
The properties of the custom event object (inherited BaseEvent) are shown in table 3 below.
TABLE 3 Table 3
Attributes of | Type(s) | Description of the invention |
detail | Object | Additional information |
The attributes (inherited BaseEvent) of the TouchEvent object are shown in table 4 below.
TABLE 4 Table 4
Special events: the touch event in < canvas > is not foamable, so there is no currentTarget.
Wherein type represents the type of event; the timeStamp is the number of milliseconds that a page has passed from opening to a trigger event; target is the source component of the trigger event, and its corresponding attributes are shown in table 5 below:
TABLE 5
currentTarget is the current component of the event binding, and its corresponding attributes are shown in table 6 below.
TABLE 6
The dataset may define data in the component that will be passed to the SERVICE through the event. The writing is data-headed, multiple words are linked by hyphens, and there is no uppercase (uppercase will automatically turn into lowercase) such as data-element-type, and finally hyphens will turn into hump elementType in event.
In addition, the Touch is an array, each element is a Touch object (the Touch carried in a canvas Touch event is a canvas Touch array). Representing the touch point currently hovering over the screen.
The attributes of the Touch object are shown in table 7 below.
TABLE 7
Further, changedTouches data format is the same as touchs. A touch point with a change is indicated, such as from no change (touchstart), position change (touchframe), from no change (touchend, touchcancel).
Step 411: and when the variable value is determined to be the same as the calling attribute value corresponding to the second view container indicated by the trigger instruction, determining to keep displaying the page corresponding to the currently selected item.
In the embodiment of the disclosure, when the acquired calling attribute value is equal to the variable value, the user is stated to click on the selected item again, so that the page corresponding to the currently selected item is still kept.
Step 412: when the variable value is determined to be different from the call attribute value corresponding to the second view container indicated by the trigger instruction, updating the variable value according to the call attribute value of the second view container indicated by the trigger instruction, and displaying the page corresponding to the item indicated by the updated variable value.
In the embodiment of the disclosure, when the obtained calling attribute value is not equal to the variable value, it is indicated that the user clicks other items in the item group, for example, clicks other menu items, the variable value needs to be updated, and then a page corresponding to the updated variable value is displayed.
The page corresponding to the item indicated by the updated variable value is displayed specifically by the following steps:
a first step of determining a second view container corresponding to the item indicated by the updated variable value;
a second step of determining a fifth view container corresponding to the second view container according to a preset corresponding relation between the second view container and the fifth view container;
And thirdly, rendering a fifth view container corresponding to the second view container according to preset page information to generate a page corresponding to the item indicated by the updated variable value.
Specifically, for the third step, the fifth view container corresponding to the second view container may be rendered by the condition provided by the applet, so as to generate the page corresponding to the item indicated by the updated variable value.
In addition, while the page is completed and the item is switched, the picture source information includes: a first source address and a second source address; the first source address is used for indicating a picture displayed when the item is in a selected state, and the second source address is used for indicating a picture displayed when the item is not in a selected state. In addition, the text information is provided with color attributes for indicating color values of the text on the item, the color values including color values of the text in a selected state (i.e., a value of a selected color attribute of tabBar) and color values in an unselected state (i.e., a value of a color attribute of tabBar). Specifically, the value of the src attribute of the < image > tag corresponding to the selected item may be set as the corresponding first source address, and the values of the src attributes of the < image > tags corresponding to other non-selected items may be set as the corresponding second source addresses; and setting the value of the color attribute in the style attribute of the third view container corresponding to the selected item as the value of the selected color attribute of tabBar, and setting the value of the color attribute in the style attribute of the third view container corresponding to the unselected item as the value of the color attribute.
In rendering, this may be achieved by wx:for. And binding an array on the component by using wx for control attribute, namely repeatedly rendering the component by using the data of each item in the array. The index variable name of the current item of the default array defaults to index, and the variable name of the current item of the array defaults to item. The rendered portion of key code may be as follows:
according to the embodiment of the disclosure, the callback function, the calling attribute value and the variable value are set, so that after a trigger instruction sent by a user is received, the calling attribute value corresponding to the item selected by the user can be obtained according to the callback function, page control can be performed according to the relation between the calling attribute value field variable values, and when the calling attribute value field variable values are unequal, switching of a display page and switching of a selected state item are realized.
Fig. 5 is a schematic structural diagram of a page creation apparatus according to an embodiment of the present disclosure, including:
a first obtaining unit 501, configured to obtain a first view container and item configuration information, where the item configuration information includes the number of items and item content information of an item group located at a first position;
a first setting unit 502, configured to set at least one second view container in the first view container according to the number of items, where the second view container is used to carry one item in the item group located at the first position;
A second obtaining unit 503, configured to obtain style information of the first view container and style information of each of the second view containers;
a generating unit 504, configured to generate the item group located at the first position according to the menu item content information, the style information of the first view container, and the style information of each of the second view containers.
The specific manner in which the various modules perform the operations in connection with the apparatus of the embodiments of the present disclosure have been described in detail in connection with the embodiments of the method, and will not be described in detail herein.
The present disclosure provides a page creation method, apparatus, electronic device, and computer readable storage medium, where by acquiring a first view container and item configuration information, then at least one second view container may be set in the first view container according to the number of items in the item configuration information, where the first view container is used to carry a group of items located in a first position, and the second view container is used to carry one item in the group of items located in the first position, then, based on a style attribute provided by the view container, a developer may perform custom development and creation on style information of the first view container and style information of each second view container, and then, after style information of the first view container and style information of each second view container are acquired, a custom style group of items may be generated in combination with item content information in the item configuration information, so that style is diversified, and experience of a user when using a applet is further improved.
Fig. 6 is a schematic structural view of a page creating apparatus according to another embodiment of the present disclosure, on the basis of the page creating apparatus according to the above embodiment, as shown in fig. 6,
the generating unit 504 is specifically configured to: generating an item corresponding to each second view container in each second view container according to the item content information; and adjusting the style of the item group at the first position and the style of the item corresponding to each second view container according to the style information of the first view container and the style information of each second view container so as to generate the item group at the first position.
Further, the project content information comprises picture source information of each project and text information of each project;
the generating unit 504 is specifically configured to: providing a picture container and a third view container in each of the second view containers; according to the picture source information of the items corresponding to each second view container, the picture source information is set into the picture container corresponding to each second view container, and the text information of the items corresponding to each second view container is set into the third view container corresponding to each second view container, so that the items corresponding to each second view container are generated.
Further, the picture source information includes: a first source address and a second source address;
the first source address is used for indicating a picture displayed when the item is in a selected state, and the second source address is used for indicating a picture displayed when the item is not in a selected state.
Further, the text information is provided with color attributes for indicating color values of text on the item, the color values including color values of text in a selected state and color values in an unselected state.
Further, the apparatus further comprises: a third acquisition unit 601 and a second setting unit 602;
the third obtaining unit 601 is configured to obtain a fourth view container and page information of at least one page to be generated;
the second setting unit 602 is configured to set at least one fifth view container in the fourth view container, where each fifth view container is configured to carry page information of one page.
Further, the apparatus further comprises: a third setting unit 603 and a page switching processing unit 604;
the third setting unit 603 is configured to set a callback function for the first view container before the generating unit 504 generates the item group located at the first position, where the callback function corresponds to a plurality of call attribute values, and each call attribute value corresponds to each second view container one by one; and the first view container is configured with a variable value, the variable value being used to indicate the currently selected item;
The page processing unit 604 is configured to receive a trigger instruction sent by a user after the generating unit 504 generates the item group located at the first position, where the trigger instruction is used to instruct a second view container corresponding to the item selected by the user; determining a calling attribute value corresponding to the second view container indicated by the trigger instruction according to the callback function; when the variable value is determined to be the same as the calling attribute value corresponding to the second view container indicated by the trigger instruction, determining to keep displaying the page corresponding to the currently selected item; and when the variable value is determined to be different from the call attribute value corresponding to the second view container indicated by the trigger instruction, updating the variable value according to the call attribute value of the second view container indicated by the trigger instruction, and displaying a page corresponding to the item indicated by the updated variable value.
Further, the page processing unit 604 is specifically configured to: determining a second view container corresponding to the item indicated by the updated variable value; determining a fifth view container corresponding to the second view container according to a preset corresponding relation between the second view container and the fifth view container; and rendering a fifth view container corresponding to the second view container according to preset page information to generate a page corresponding to the item indicated by the updated variable value.
The specific manner in which the various modules perform the operations in connection with the apparatus of the embodiments of the present disclosure have been described in detail in connection with the embodiments of the method, and will not be described in detail herein.
It should be noted that, each of the embodiments of the present disclosure may be implemented separately, or may be implemented in any combination without conflict, without limiting the disclosure.
According to the embodiment of the disclosure, the callback function, the calling attribute value and the variable value are set, so that after a trigger instruction sent by a user is received, the calling attribute value corresponding to the item selected by the user can be obtained according to the callback function, page control can be performed according to the relation between the calling attribute value field variable values, and when the calling attribute value field variable values are unequal, switching of a display page and switching of a selected state item are realized.
Fig. 7 is a schematic structural diagram of an electronic device according to an embodiment of the present disclosure, including: a memory 701 and a processor 702;
the memory is used for storing a computer program;
wherein the processor executes the computer program in the memory to implement the method of any of the embodiments described above.
As an exemplary embodiment, optionally, as shown in fig. 8, an exemplary structural schematic diagram of an electronic device is provided in an embodiment of the disclosure. The electronic device 800 may include a processing means (e.g., a central processor, a graphics processor, etc.) 801 that may perform various appropriate actions and processes in accordance with programs stored in a Read Only Memory (ROM) 802 or loaded from a storage 808 into a Random Access Memory (RAM) 803. In the RAM 803, various programs and data required for the operation of the electronic device 800 are also stored. The processing device 801, the ROM 802, and the RAM 803 are connected to each other by a bus 804. An input/output (I/O) interface 805 is also connected to the bus 804.
In general, the following devices may be connected to the I/O interface 805: input devices 806 including, for example, a touch screen, touchpad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, and the like; an output device 807 including, for example, a Liquid Crystal Display (LCD), speakers, vibrators, etc.; storage 808 including, for example, magnetic tape, hard disk, etc.; communication means 809. The communication means 809 may allow the electronic device 800 to communicate wirelessly or by wire with other devices to exchange data. While fig. 8 shows an electronic device 800 having various means, it is to be understood that not all of the illustrated means are required to be implemented or provided. More or fewer devices may be implemented or provided instead.
In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from a network via communication device 809, or installed from storage device 808, or installed from ROM 802. The above-described functions defined in the methods of the embodiments of the present disclosure are performed when the computer program is executed by the processing device 801.
It should be noted that the computer readable medium described in the present disclosure may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this disclosure, a computer-readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present disclosure, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, fiber optic cables, RF (radio frequency), and the like, or any suitable combination of the foregoing.
Yet another embodiment of the present disclosure provides a computer-readable storage medium having stored thereon a computer program that is executed by a processor to implement the method of any of the embodiments described above.
In the several embodiments provided in the present disclosure, it should be understood that the disclosed apparatus and method may be implemented in other manners. For example, the apparatus embodiments described above are merely illustrative, e.g., the division of the units is merely a logical function division, and there may be additional divisions when actually implemented, e.g., multiple units or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be an indirect coupling or communication connection via some interfaces, devices or units, which may be in electrical, mechanical or other form.
The units described as separate units may or may not be physically separate, and units shown as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purposes of the embodiments of the present disclosure.
In addition, each functional unit in each embodiment of the present disclosure may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit. The integrated units may be implemented in hardware or in hardware plus software functional units.
The integrated units implemented in the form of software functional units described above may be stored in a computer readable storage medium. The software functional unit is stored in a storage medium, and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor (processor) to perform part of the steps of the methods described in the embodiments of the disclosure. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), a magnetic disk, or an optical disk, or other various media capable of storing program codes.
It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-described division of the functional modules is illustrated, and in practical application, the above-described functional allocation may be performed by different functional modules according to needs, i.e. the internal structure of the apparatus is divided into different functional modules to perform all or part of the functions described above. The specific working process of the above-described device may refer to the corresponding process in the foregoing method embodiment, which is not described herein again.
Finally, it should be noted that: the above embodiments are only for illustrating the technical solution of the present disclosure, and not for limiting the same; although the present disclosure has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some or all of the technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit of the corresponding technical solutions from the scope of the technical solutions of the embodiments of the present disclosure.
Claims (10)
1. A method of creating a page, comprising:
acquiring a first view container and item configuration information, wherein the item configuration information comprises the item quantity and item content information of an item group positioned at a first position;
setting at least one second view container in the first view container according to the item quantity, wherein the second view container is used for bearing one item in the item group positioned at the first position;
acquiring style information of the first view container and style information of each second view container;
generating an item corresponding to each second view container in each second view container according to the item content information;
And adjusting the style of the item group at the first position and the style of the item corresponding to each second view container according to the style information of the first view container and the style information of each second view container so as to generate the item group at the first position.
2. The method according to claim 1, wherein the item content information includes picture source information of each item and text information of each item;
generating, in each second view container, an item corresponding to each second view container according to the item content information, including:
providing a picture container and a third view container in each of the second view containers;
according to the picture source information of the items corresponding to each second view container, the picture source information is set into the picture container corresponding to each second view container, and the text information of the items corresponding to each second view container is set into the third view container corresponding to each second view container, so that the items corresponding to each second view container are generated.
3. The method of claim 2, wherein the picture source information comprises: a first source address and a second source address;
The first source address is used for indicating a picture displayed when the item is in a selected state, and the second source address is used for indicating a picture displayed when the item is not in a selected state.
4. The method of claim 2, wherein the text information is provided with color attributes for indicating color values of text on the item, the color values including color values of text in a selected state and color values in an unselected state.
5. The method of any one of claims 1-4, further comprising:
acquiring a fourth view container and page information of at least one page to be generated;
and setting at least one fifth view container in the fourth view container, wherein the fifth view container is used for bearing page information of one page.
6. The method of claim 5, further comprising, prior to generating the set of items at the first location based on the item content information, the style information for the first view container, and the style information for each of the second view containers:
setting a callback function for the first view container, wherein the callback function corresponds to a plurality of calling attribute values, and each calling attribute value corresponds to each second view container one by one; and the first view container is configured with a variable value, the variable value being used to indicate the currently selected item;
After generating the item group at the first position according to the item content information, the style information of the first view container and the style information of each of the second view containers, the method further comprises:
receiving a trigger instruction sent by a user, wherein the trigger instruction is used for indicating a second view container corresponding to an item selected by the user;
determining a calling attribute value corresponding to the second view container indicated by the trigger instruction according to the callback function;
when the variable value is determined to be the same as the calling attribute value corresponding to the second view container indicated by the trigger instruction, determining to keep displaying the page corresponding to the currently selected item;
and when the variable value is determined to be different from the call attribute value corresponding to the second view container indicated by the trigger instruction, updating the variable value according to the call attribute value of the second view container indicated by the trigger instruction, and displaying a page corresponding to the item indicated by the updated variable value.
7. The method of claim 6, wherein displaying the page corresponding to the item indicated by the updated variable value comprises:
Determining a second view container corresponding to the item indicated by the updated variable value;
determining a fifth view container corresponding to the second view container according to a preset corresponding relation between the second view container and the fifth view container;
and rendering a fifth view container corresponding to the second view container according to preset page information to generate a page corresponding to the item indicated by the updated variable value.
8. A page creation apparatus, comprising:
a first obtaining unit, configured to obtain a first view container and item configuration information, where the item configuration information includes item quantity and item content information of an item group located at a first position;
a first setting unit, configured to set at least one second view container in the first view container according to the number of items, where the second view container is used to carry one item in the item group located at the first position;
a second acquisition unit configured to acquire style information of the first view container and style information of each of the second view containers;
a generation unit configured to generate, in each second view container, an item corresponding to each second view container according to the item content information;
And adjusting the style of the item group at the first position and the style of the item corresponding to each second view container according to the style information of the first view container and the style information of each second view container so as to generate the item group at the first position.
9. An electronic device, comprising: a memory and a processor;
the memory is used for storing a computer program;
wherein the processor executes the computer program in the memory to implement the method of any of claims 1-7.
10. A computer readable storage medium, having stored thereon a computer program, the computer program being executed by a processor to implement the method of any of claims 1-7.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910372995.7A CN110333859B (en) | 2019-05-06 | 2019-05-06 | Page creation method, page creation device, electronic device and computer readable storage medium |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910372995.7A CN110333859B (en) | 2019-05-06 | 2019-05-06 | Page creation method, page creation device, electronic device and computer readable storage medium |
Publications (2)
Publication Number | Publication Date |
---|---|
CN110333859A CN110333859A (en) | 2019-10-15 |
CN110333859B true CN110333859B (en) | 2023-05-30 |
Family
ID=68139667
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910372995.7A Active CN110333859B (en) | 2019-05-06 | 2019-05-06 | Page creation method, page creation device, electronic device and computer readable storage medium |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110333859B (en) |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111031376B (en) * | 2019-11-25 | 2020-09-25 | 上海哔哩哔哩科技有限公司 | Bullet screen processing method and system based on WeChat applet |
CN111240680B (en) * | 2020-01-14 | 2023-06-06 | 广州华多网络科技有限公司 | Button creation method, button creation device, computer device and storage medium |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105103154A (en) * | 2013-03-15 | 2015-11-25 | 苹果公司 | Device, method, and graphical user interface for organizing and presenting a collection of media items |
CN108319483A (en) * | 2018-01-30 | 2018-07-24 | 腾讯科技(深圳)有限公司 | Web page processing method, device, terminal and storage medium |
CN108647080A (en) * | 2018-05-21 | 2018-10-12 | 成都路行通信息技术有限公司 | Applied to the information processing method and device and computer readable storage medium in terminal |
CN109165050A (en) * | 2018-07-05 | 2019-01-08 | 腾讯科技(深圳)有限公司 | The operation method of program, calculates equipment and storage medium at device |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20100017702A1 (en) * | 2008-07-16 | 2010-01-21 | International Business Machines Corporation | Asynchronous Partial Page Updates Based On Dynamic Dependency Calculation |
-
2019
- 2019-05-06 CN CN201910372995.7A patent/CN110333859B/en active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105103154A (en) * | 2013-03-15 | 2015-11-25 | 苹果公司 | Device, method, and graphical user interface for organizing and presenting a collection of media items |
CN108319483A (en) * | 2018-01-30 | 2018-07-24 | 腾讯科技(深圳)有限公司 | Web page processing method, device, terminal and storage medium |
CN108647080A (en) * | 2018-05-21 | 2018-10-12 | 成都路行通信息技术有限公司 | Applied to the information processing method and device and computer readable storage medium in terminal |
CN109165050A (en) * | 2018-07-05 | 2019-01-08 | 腾讯科技(深圳)有限公司 | The operation method of program, calculates equipment and storage medium at device |
Also Published As
Publication number | Publication date |
---|---|
CN110333859A (en) | 2019-10-15 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN107957831B (en) | Data processing method, device and processing equipment for displaying interface content | |
EP3531257A1 (en) | Application interface management method and apparatus | |
JP7217357B2 (en) | Mini-program data binding method, apparatus, device and computer program | |
CN110109670B (en) | Method and device for processing view list data, electronic equipment and storage medium | |
CN109471626B (en) | Page logic structure, page generation method, page data processing method and device | |
CN109725901A (en) | Development approach, device, equipment and the computer storage medium of front-end code | |
CN105335132B (en) | Method, device and system for customizing application program function | |
US20130219341A1 (en) | Apparatus and method for creating a shortcut menu | |
US20210019106A1 (en) | Desktop Sharing Method and Mobile Terminal | |
WO2016111975A1 (en) | Implementing desktops on a mobile terminal | |
US20120191756A1 (en) | Terminal having searching function and method for searching using data saved in clipboard | |
CN114385164A (en) | Page generation and rendering method and device, electronic equipment and storage medium | |
CN110333859B (en) | Page creation method, page creation device, electronic device and computer readable storage medium | |
CN109814778B (en) | Method and device for realizing small program tab, electronic equipment and medium | |
CN111324398B (en) | Method, device, terminal and storage medium for processing latest content | |
CN104317561A (en) | Method of interface operation | |
CN113296906B (en) | Task configuration method and device | |
CN110618811B (en) | Information presentation method and device | |
CN105739717B (en) | Data inputting method and device | |
CN111736825A (en) | Information display method, device, equipment and storage medium | |
CN111142990A (en) | WeChat applet page display method and device and storage medium | |
CN111198830A (en) | Identification method and device of mobile storage equipment, electronic equipment and storage medium | |
CN116931895A (en) | Processing method, device and equipment of composite component | |
KR100677141B1 (en) | Apparatus and Method for performing an one to one name-based socket-communication | |
CN116306491A (en) | Document catalog processing method and related 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 |