CN107133046A - Page building method, device and electric terminal - Google Patents
Page building method, device and electric terminal Download PDFInfo
- Publication number
- CN107133046A CN107133046A CN201710331375.XA CN201710331375A CN107133046A CN 107133046 A CN107133046 A CN 107133046A CN 201710331375 A CN201710331375 A CN 201710331375A CN 107133046 A CN107133046 A CN 107133046A
- Authority
- CN
- China
- Prior art keywords
- page
- room
- picture
- architecture
- slip
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 47
- 230000006870 function Effects 0.000 claims abstract description 51
- 238000009877 rendering Methods 0.000 claims abstract description 15
- 230000015654 memory Effects 0.000 claims description 9
- 238000004590 computer program Methods 0.000 claims description 8
- 230000005611 electricity Effects 0.000 claims description 4
- 239000004744 fabric Substances 0.000 claims 1
- 230000008569 process Effects 0.000 abstract description 13
- 238000011161 development Methods 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 12
- 230000005540 biological transmission Effects 0.000 description 4
- 241000251468 Actinopterygii Species 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 230000009467 reduction Effects 0.000 description 2
- 241000208340 Araliaceae Species 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 101000857680 Xenopus laevis Runt-related transcription factor 1 Proteins 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000001568 sexual effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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
Abstract
The embodiment of the present invention provides a kind of page building method, device and electric terminal, this method includes realizing initialization to page architecture by running constructed fuction constructor, page rendering component functions render is performed to render the page architecture after initialization, to create room in the page architecture and slide page, the room and the corresponding page data of slip page loading to establishment, perform componentDidMount functions to complete building for the page.In the page building method that the present invention is provided, development process is more succinct, and the page, which is presented, more to be understood, meanwhile, the convenience for also improve the reconstruct of the later stage page, safeguarding.
Description
Technical field
It is whole in particular to a kind of page building method, device and electronics the present invention relates to field of computer technology
End.
Background technology
Study and find through inventor, the recommendation page of the homepage of existing Android Pro edition exists many in build process
Problem, such as logic flow are complicated, later stage reconstruct, maintenance difficulties height etc., therefore, how to solve the above problems as this area skill
Art personnel are badly in need of the technical problem solved.
The content of the invention
In view of this, the present invention provide it is a kind of based on React Native platforms realize page building method, device and
Electric terminal, can effectively simplify the page and build flow, the reconstruct of reduction later stage, the difficulty safeguarded.
Present pre-ferred embodiments provide a kind of page building method, applied to the electronics based on React Native platforms
Terminal, the electric terminal includes page rendering component, and methods described includes：
Initialization is realized to page architecture by running constructed fuction constructor；
Perform page rendering component functions render to render the page architecture after initialization, with the page
Room is created in framework and page is slided；
The room and the corresponding page data of slip page loading to establishment；
ComponentDidMount functions are performed to complete building for the page.
Further, the room is multiple, and the step of creating the room includes：
The parameter value and background image for creating multiple rooms are obtained, the parameter value and background image is sent to institute
Page architecture is stated to form the first layout for characterizing multiple rooms in the page architecture；
Obtain click event corresponding with multiple rooms and added to the described first each room being laid out；
Obtain edge attributes corresponding with multiple rooms and be laid out according to the edge attributes to described first
Each room is configured.
Further, the step of creating the slip page includes：
Obtain initial picture and be sent to the page architecture and slide the of picture to be formed to characterize in the page architecture
Two layouts；
The parameter value of the initial picture is obtained to be configured each initial picture in the described second layout；
Attribute and the property clicked on are slided to each initial picture addition being provided with, to obtain sliding picture；
By it is each it is described slide image link to corresponding room with complete it is described slip page establishment.
Further, the parameter value of the initial picture includes picture number and dimension of picture, and the acquisition is described initial
The step of image parameters value to each initial picture in the described second layout to be configured, including：
Obtain the picture number and page assignment is carried out to each picture according to the picture number；
The dimension of picture is obtained to carry out size setting to each picture after assignment according to the dimension of picture.
Further, the room of described pair of establishment includes with the step of sliding page loading page data：
Page data corresponding with the slip page is obtained, and the slip page is loaded onto by the first api interface；
Page data corresponding with the room is obtained, and the room is loaded onto by the second api interface.
Present pre-ferred embodiments also provide a kind of page and build device, applied to the electricity based on React Native platforms
Sub- terminal, the electric terminal includes page rendering component, and described device includes：
Initialization module, for realizing initialization to page architecture by running constructed fuction constructor；
First performing module, enters for performing page rendering component functions render to the page architecture after initialization
Row is rendered, to create room in the page architecture and slide page；
Data load-on module, for the room to establishment and the corresponding page data of slip page loading；
Second performing module, for performing componentDidMount functions to build with completing the page.
Further, the room is multiple, and first performing module includes：
Room parameter acquiring unit, for obtaining the parameter value and background image that are used for creating multiple rooms, sends the ginseng
Numerical value and background image give the page architecture to form the first layout for characterizing multiple rooms in the page architecture；
Click event adding device, for obtaining click event corresponding with multiple rooms and being added to described first
Each room in layout；
Room creating unit, for obtaining edge attributes corresponding with multiple rooms and according to the edge attributes pair
Each room in first layout is configured to complete the establishment in the multiple room.
Further, the data load-on module includes：
First loading unit, for obtaining page data corresponding with the slip page, and is loaded by the first api interface
To the slip page；
Second loading unit, for obtaining page data corresponding with the room, and is loaded onto by the second api interface
The room.
Present pre-ferred embodiments also provide a kind of electric terminal, are realized based on React Native platforms, the electronics
Terminal builds device including memory, processor and the above-mentioned page, and the page builds device and is installed on the memory simultaneously
Including one or more software function modules by the computing device.
Present pre-ferred embodiments also provide a kind of computer-readable recording medium, are stored thereon with computer program, institute
State computer program and realize step in above-mentioned page building method upon execution.
Compared with prior art, the page side of building provided in an embodiment of the present invention realized based on React Native platforms
Method, device and electric terminal, can effectively simplify the page and build flow, reduce the difficulty that the page later stage is reconstructed, safeguarded, and page
Face, which is shown, more to be understood.
Brief description of the drawings
In order to illustrate the technical solution of the embodiments of the present invention more clearly, below will be attached to what is used required in embodiment
Figure is briefly described, it will be appreciated that the following drawings illustrate only certain embodiments of the present invention, therefore is not construed as pair
The restriction of scope, for those of ordinary skill in the art, on the premise of not paying creative work, can also be according to this
A little accompanying drawings obtain other related accompanying drawings.
Fig. 1 is the application scenarios schematic diagram that the page provided in an embodiment of the present invention builds device.
Fig. 2 is the schematic flow sheet of page building method provided in an embodiment of the present invention.
Fig. 3 is the sub-process schematic diagram of the step S104 shown in Fig. 2.
Fig. 4 is another sub-process schematic diagram of the step S104 shown in Fig. 2.
Fig. 5 is the sub-process schematic diagram of the step S106 shown in Fig. 2.
Fig. 6 is the frame structure schematic diagram that the page provided in an embodiment of the present invention builds device.
Fig. 7 is the frame structure schematic diagram of the first performing module shown in Fig. 6.
Icon：10- electric terminals；The 100- pages build device；102- initialization modules；The performing modules of 104- first；
1040- rooms parameter acquiring unit；1042- clicks on event adding device；1044- rooms creating unit；106- data load mould
Block；The loading units of 1060- first；The loading units of 1062- second；The performing modules of 108- second；200- memories；300- storage controls
Device processed；400- processors.
Embodiment
To make the purpose, technical scheme and advantage of the embodiment of the present invention clearer, below in conjunction with the embodiment of the present invention
In accompanying drawing, the technical scheme in the embodiment of the present invention is clearly and completely described, it is clear that described embodiment is
A part of embodiment of the present invention, rather than whole embodiments.The present invention implementation being generally described and illustrated herein in the accompanying drawings
The component of example can be arranged and designed with a variety of configurations.
Therefore, the detailed description of embodiments of the invention below to providing in the accompanying drawings is not intended to limit claimed
The scope of the present invention, but be merely representative of the present invention selected embodiment.Based on the embodiment in the present invention, this area is common
The every other embodiment that technical staff is obtained under the premise of creative work is not made, belongs to the model that the present invention is protected
Enclose.
It should be noted that：Similar label and letter represents similar terms in following accompanying drawing, therefore, once a certain Xiang Yi
It is defined in individual accompanying drawing, then it further need not be defined and explained in subsequent accompanying drawing.
As shown in figure 1, building the application scenarios schematic diagram of device 100 for the page provided in an embodiment of the present invention.Wherein, it is electric
Sub- terminal 10 builds device 100, memory 200, storage control 300 and processor 400 including the page.Wherein, the electricity
Sub- terminal 10 may be, but not limited to, and computer, mobile internet surfing equipment (mobile Internet device, MID) etc. have place
The electronic equipment of function is managed, server etc. is can also be.
Alternatively, the memory 200, storage control 300, each element of processor 400 are direct or indirect each other
Ground is electrically connected with, to realize the transmission or interaction of data.For example, passing through one or more communication bus or letter between these elements
Number line, which is realized, to be electrically connected with.The page builds device 100 can be stored in institute including at least one in the form of software or firmware
State in memory 200 or be solidificated in the software function module in the operating system of the electric terminal 10.The processor 400 exists
The memory 200 is accessed under the control of the storage control 300, can for what is stored in the execution memory 200
Performing module, the software function module and computer program such as included by the page builds device 100.
It is appreciated that the structure shown in Fig. 1 is only signal, the electric terminal 10 may also include more more than shown in Fig. 1
Either less component or with the configuration different from shown in Fig. 1.Each component shown in Fig. 1 can use hardware, software
Or its combination is realized.
Further, Fig. 2 is please referred to, the embodiment of the present invention, which also provides one kind and can be applied to the page, builds device
100 page building method, wherein, with the pro editions App homepages of fish React Native that struggle against the page of page will be recommended to build below
Exemplified by process, the idiographic flow shown in Fig. 2 is described in detail.It should be noted that, the page side of building of the present invention
Method is not using Fig. 2 and particular order as described below as limitation.It should be appreciated that page building method of the present invention is wherein
The order of part steps can be exchanged with each other according to actual needs, or part steps therein can also be omitted or deleted.
Step S102, initialization is realized by running constructed fuction constructor to page architecture.
In the present embodiment, according to React Native life cycle, operation constructed fuction constructor builds state
Machine, is initialized with being realized to the variable being related in page rendering component, that is, is being carried out when the page is built first to page architecture
Realize initialization.
Step S104, performs page rendering component functions render and the page architecture after initialization is rendered,
To create room in the page architecture and slide page.
In the present embodiment, so that the homepage in the pro editions App of fish RN that struggle against recommends page as an example, the page is main by positioned at top
Slide page part and the room list composition of correspondence direct broadcasting room can be directly entered by clicking on.Therefore, to the page architecture
Realize after initialization, need order to perform page rendering component functions render and the page architecture is rendered, with the page
Room is created in face frame structure and page is slided.Wherein, render functions include multiple subfunctions for being used to realize page rendering.
It should be noted that render is the method that a component must have, embodied in the form of function, to render boundary
Face, and return to JSX or other assemblies to constitute DOM, the XAML layouts of XML layout, WPF with Android are similar, can only return
One top-level element.
Specifically, as shown in figure 3, in the present embodiment, being created between the enterprising having sexual intercourse of the page architecture first after initialization
Build, the room can be multiple, and specific establishment process comprises the following steps.
Step S1040, obtains the parameter value and background image for creating multiple rooms, sends the parameter value and the back of the body
Scape image gives the page architecture to form the first layout for characterizing multiple rooms in the page architecture.
In the present embodiment, the parameter value can be that room quantity, ID, size etc. are used to be formed in the page architecture
The arbitrary parameter of room layout.During actual implementation, the subfunction in render functions _ renderRow functions can be passed through and realized, it is first
First pass through call _ renderRoom functions define the rowData in room, rowID, then by define marginStyle value come
The spacing in multiple rooms is defined, roomHolder functions is then back to and defines room ID, so as to realize to the first layout
Create.It should be understood that the setting of room parameter value, transmission are not limited to aforesaid way.
Step S1042, obtain click event corresponding with multiple rooms and added to described first be laid out it is each
Room.
In the present embodiment, directly redirected by adding the realization of click event on the room when user clicks on the room
To corresponding direct broadcasting room, during actual implementation, the property clicked in room can be defined by { this._onRoomPress }, makes room
Add click event.
Step S1044, obtains edge attributes corresponding with multiple rooms and according to the edge attributes to described the
Each room in one layout is configured.
In the present embodiment, after step S1040 and step S1042 is completed, also need to edge attributes such as the width in room
It is configured.Specifically, the width in room can be set by using (LayoutUtils.SCREEN_WIDTH-21)/2, then
By margin={ marginStyle } sentence, the marginStyle set is assigned to margin, thus complete it is whole _
The major function of renderRoom functions.It should be understood that after the establishment in multiple rooms is completed, being formed in first layout
The room list being made up of multiple rooms, user can enter direct broadcasting room according to corresponding room is clicked on.
It should be noted that when carrying out room establishment, called by subfunction _ renderRow in render functions _
RenderRoom functions realize that above-mentioned room creates function, and should _ renderRoom functions in the design parameter transmission that is related to etc.
Flexible design can be carried out according to actual conditions.
Further, as shown in figure 4, being the visioning procedure schematic diagram of the slip page, following steps are specifically included.
Step S1046, obtains initial picture and is sent to the page architecture and slided with being formed to characterize in the page architecture
Second layout of motion picture cartoon.
Step S1048, obtains the initial picture parameter value to set each initial picture in the described second layout
Put.
In the present embodiment, the establishment that initial picture completes second layout is obtained first, further according to the initial picture
Quantity to each picture carry out page assignment, then obtain the dimension of picture with according to the dimension of picture to each picture after assignment
Carry out size setting., can be by calling render subfunction _ renderHeader to enter the wound of line slip page during actual implementation
Build.For example, first determine whether to slide picture number in renderHeader functions, will in the case where there is picture
This.state.piclist.map is assigned to the pages pages, defines the wide high of slip page returning to value part, can pass through
{ LayoutUtils.SCREEN_WIDTH*9/16 } autoplay is set.
Step S1050, slides attribute and the property clicked on, to be slided to each initial picture addition being provided with
Picture.
In the present embodiment, slided after the setting in completing step S1048 to initial picture, it is necessary to be added to initial picture
Attribute and the property clicked on, to obtain sliding picture.During actual implementation, slip can be set by call function _ swiperItem
Page attribute.
Step S1052, by it is each it is described slide image link to corresponding room with complete it is described slip page establishment.
In this implementation, because the slip page is used to cause user after APP is logined, more intuitively, easily to understand mesh
Live content relatively popular on preceding live platform, and then correspondence room is rapidly entered by clicking directly on slip page, therefore, need
By each slip image link to corresponding room.It is actual when implementing, can first it be defined in _ swiperItem functions<
TouchableOpacity>, then re-define _ onRoomPress click function functions click on slip picture to redirect, and
And pass through<Image>Function imports pic_url parameters and realizes importing image data, so as to complete the whole establishment for sliding page.Need
It is noted that in the present embodiment, it is whole slide page create part function mainly pass through _ renderHeader and _
SwiperItem is realized.
Step S106, the room and the corresponding page data of slip page loading to establishment.
In the present embodiment, it is necessary to will be relative by data-interface after the basic setup in above-mentioned room and slip page be completed
The page data transmission answered is to corresponding position, specifically, as shown in figure 5, to the room of establishment and slip page
Comprise the following steps when loading corresponding page data.
Step S1060, obtain with the corresponding page data of the slip page, and described in being loaded onto by the first api interface
Slide page.
Step S1062, obtains page data corresponding with the room, and be loaded onto the room by the second api interface
Between.
During actual implementation, render function calls _ onRequestData subfunctions can be passed through and carry out data loading.Specifically
Ground, when to the slip page loading data, can by calling _ subfunction _ getSlideData of onRequestData functions
Realize.And when loading data to the room, can by calling _ subfunctions of onRequestData functions _
GetRecommendData is realized, so as to complete the data loading to full page.
It should be noted that in the present embodiment, first api interface and second api interface are that virtual function call connects
Mouthful, in the present embodiment, first api interface can be understood as _ onRequestData functions, and second api interface can be with
It is interpreted as _ getRecommendData functions.
Step S108, performs componentDidMount functions to complete building for the page.
In React Native, completed by the render to after the rendering of whole interface, need to sequentially call
ComponentDidMount functions are simultaneously performed, so as to start to initialize other frameworks in React Native.
Based on the description to above-mentioned page building method, the embodiment of the present invention gives a kind of computer-readable storage medium
Matter, is stored thereon with computer program, and the computer program realizes the step in above-mentioned page building method upon execution.
Further, Fig. 6 is please referred to, the page provided in an embodiment of the present invention, which builds device 100, includes initialization mould
Block 102, the first performing module 104, the performing module 108 of data load-on module 106 and second.
The initialization module 102, for being realized initially to page architecture by running constructed fuction constructor
Change.
In the present embodiment, the step S102 in Fig. 2 is performed by the initialization module 102, and detailed process refer to step
S102, will not be repeated here.
First performing module 104, for performing page rendering component functions render to the page after initialization
Face frame structure is rendered, to create room in the page architecture and slide page.
In the present embodiment, the step S104 in Fig. 2 is performed by first performing module 104, and detailed process refer to step
Rapid S104, will not be repeated here.Wherein, as shown in fig. 7, first performing module 104 includes room parameter acquiring unit
1040th, click on event adding device 1042 and room creating unit 1044,
The room parameter acquiring unit 1040, for obtaining the parameter value and background image that are used for creating multiple rooms,
The parameter value and background image are sent to the page architecture with formed in the page architecture for characterize multiple rooms
One layout.
In the present embodiment, the step S1040 in Fig. 3 is performed by the room parameter acquiring unit 1040, and detailed process please
With reference to step S1040, it will not be repeated here.
The click event adding device 1042, for obtaining click event corresponding with multiple rooms and being added to
Each room in first layout.
In the present embodiment, the step S1042 in Fig. 3 is performed by the click event adding device 1042, and detailed process please
With reference to step S1042, it will not be repeated here.
The room creating unit 1044, for obtaining edge attributes corresponding with multiple rooms and according to the side
Edge attribute is configured to complete the establishment in the multiple room to each room in the described first layout.
In the present embodiment, the step S1044 in Fig. 3 is performed by the room creating unit 1044, and detailed process refer to
Step S1044, will not be repeated here.
The data load-on module 106, for the room to establishment and the corresponding page number of slip page loading
According to.In the present embodiment, the step S106 in Fig. 2 is performed by the data load-on module 106, and detailed process refer to step
S106, will not be repeated here.During actual implementation, the data load-on module 106 includes the first loading unit 1060 and second and added
Carrier unit 1062.
First loading unit 1060, for obtaining page data corresponding with the slip page, and passes through the first API
Interface is loaded onto the slip page.
In the present embodiment, the step S1060 in Fig. 5 is performed by first loading unit 1060, and detailed process refer to
Step S1060, will not be repeated here.
Second loading unit 1062, for obtaining page data corresponding with the room, and is connect by the 2nd API
Mouth is loaded onto the room.
In the present embodiment, the step S1062 in Fig. 5 is performed by second loading unit 1062, and detailed process refer to
Step S1062, will not be repeated here.
Second performing module 108, for performing componentDidMount functions to take with completing the page
Build.
In the present embodiment, the step S108 in Fig. 2 is performed by second performing module 108, and detailed process refer to step
Rapid S108, will not be repeated here.
In summary, the present invention is provided page building method, device, electric terminal 10 and computer-readable storage medium
Matter, wherein, based on React Native Development Frameworks, can effectively simplify the page and build flow, reduction to the reconstruct of page later stage,
The difficulty of maintenance, meanwhile, the page building method that the present invention is provided has stronger scalability.
In the description of the invention, term " setting ", " connected ", " connection " should be interpreted broadly, for example, it may be fixed
Connect or be detachably connected, or be integrally connected；Can be mechanical connection or electrical connection；Can be direct
It is connected, can also be indirectly connected to by intermediary, can be the connection of two element internals.For the ordinary skill of this area
For personnel, the concrete meaning of above-mentioned term in the present invention can be understood with concrete condition.
In several embodiments that the embodiment of the present invention is provided, it should be understood that disclosed apparatus and method, also may be used
To realize by other means.Apparatus and method embodiment described above is only schematical, for example, the stream in accompanying drawing
Journey figure and block diagram show that the device of the predetermined number embodiment according to the present invention, method and computer program product may be real
Existing architectural framework, function and operation.At this point, each square frame in flow chart or block diagram can represent module, a journey
A part for sequence section or code.A part for the module, program segment or code is used to realize comprising one or predetermined number
Defined logic function.
It should also be noted that in some implementations as replacement, the function of being marked in square frame can also be with difference
The order marked in accompanying drawing occurs.For example, two continuous square frames can essentially be performed substantially in parallel, they are sometimes
It can also perform in the opposite order, this is depending on involved function.It is also noted that in block diagram and/or flow chart
The combination of each square frame and the square frame in block diagram and/or flow chart, can be with function as defined in performing or action it is special
Hardware based system is realized, or can be realized with the combination of specialized hardware and computer instruction.
The preferred embodiments of the present invention are the foregoing is only, are not intended to limit the invention, for the skill of this area
For art personnel, the present invention can have various modifications and variations.Within the spirit and principles of the invention, that is made any repaiies
Change, equivalent substitution, improvement etc., should be included in the scope of the protection.
Claims (10)
1. a kind of page building method, it is characterised in that applied to the electric terminal based on React Native platforms, the electricity
Sub- terminal includes page rendering component, and methods described includes：
Initialization is realized to page architecture by running constructed fuction constructor；
Perform page rendering component functions render to render the page architecture after initialization, with the page architecture
Middle establishment room and slip page；
The room and the corresponding page data of slip page loading to establishment；
ComponentDidMount functions are performed to complete building for the page.
2. page building method according to claim 1, it is characterised in that the room is multiple, creates the room
The step of include：
The parameter value and background image for creating multiple rooms are obtained, the parameter value and background image is sent to the page
Face frame structure with formed in the page architecture for characterize multiple rooms first layout；
Obtain click event corresponding with multiple rooms and added to the described first each room being laid out；
Obtain edge attributes corresponding with multiple rooms and each room being laid out according to the edge attributes to described first
Between be configured.
3. page building method according to claim 1, it is characterised in that the step of creating the slip page includes：
Obtain initial picture and be sent to the page architecture and characterize the second cloth for sliding picture to be formed in the page architecture
Office；
The parameter value of the initial picture is obtained to be configured each initial picture in the described second layout；
Attribute and the property clicked on are slided to each initial picture addition being provided with, to obtain sliding picture；
By it is each it is described slide image link to corresponding room with complete it is described slip page establishment.
4. page building method according to claim 3, it is characterised in that the parameter value of the initial picture includes picture
Quantity and dimension of picture, the acquisition initial picture parameter value are set with each initial picture being laid out to described second
The step of putting, including：
Obtain the picture number and page assignment is carried out to each picture according to the picture number；
The dimension of picture is obtained to carry out size setting to each picture after assignment according to the dimension of picture.
5. page building method according to claim 1, it is characterised in that the room and slip page of described pair of establishment
The step of loading page data, includes：
Page data corresponding with the slip page is obtained, and the slip page is loaded onto by the first api interface；
Page data corresponding with the room is obtained, and the room is loaded onto by the second api interface.
6. a kind of page builds device, it is characterised in that applied to the electric terminal based on React Native platforms, the electricity
Sub- terminal includes page rendering component, and described device includes：
Initialization module, for realizing initialization to page architecture by running constructed fuction constructor；
First performing module, wash with watercolours is carried out for performing page rendering component functions render to the page architecture after initialization
Dye, to create room in the page architecture and slide page；
Data load-on module, for the room to establishment and the corresponding page data of slip page loading；
Second performing module, for performing componentDidMount functions to complete building for the page.
7. the page according to claim 6 builds device, it is characterised in that the room is multiple, and described first performs
Module includes：
Room parameter acquiring unit, for obtaining the parameter value and background image that are used for creating multiple rooms, sends the parameter value
The page architecture is given with background image to form the first layout for characterizing multiple rooms in the page architecture；
Click event adding device, for obtaining click event corresponding with multiple rooms and being laid out added to described first
On each room；
Room creating unit, for obtaining edge attributes corresponding with multiple rooms and according to the edge attributes to described
Each room in first layout is configured to complete the establishment in the multiple room.
8. the page according to claim 6 builds device, it is characterised in that the data load-on module includes：
First loading unit, for obtaining page data corresponding with the slip page, and is loaded onto institute by the first api interface
State slip page；
Second loading unit, for obtaining corresponding with room page data, and described in being loaded onto by the second api interface
Room.
9. a kind of electric terminal, it is characterised in that realized based on React Native platforms, the electric terminal includes storage
The page any one of device, processor and the claims 6-8 builds device, and the page builds device and is installed on institute
State memory and including one or more software function modules by the computing device.
10. a kind of computer-readable recording medium, is stored thereon with computer program, it is characterised in that the computer program
The step in the page building method any one of the claims 1-5 is realized upon execution.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710331375.XA CN107133046B (en) | 2017-05-11 | 2017-05-11 | Page construction method and device and electronic terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710331375.XA CN107133046B (en) | 2017-05-11 | 2017-05-11 | Page construction method and device and electronic terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107133046A true CN107133046A (en) | 2017-09-05 |
| CN107133046B CN107133046B (en) | 2021-02-02 |
Family
ID=59733198
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710331375.XA Active CN107133046B (en) | 2017-05-11 | 2017-05-11 | Page construction method and device and electronic terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107133046B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109240784A (en) * | 2018-08-30 | 2019-01-18 | 贵州白山云科技股份有限公司 | A kind of the chart rendering method and system of memory object |
| CN109657086A (en) * | 2018-12-14 | 2019-04-19 | 苏州好玩友网络科技有限公司 | Image preview method, apparatus, equipment and storage medium |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080172608A1 (en) * | 2006-06-06 | 2008-07-17 | Bellsouth Intellectual Property Corporation | Site builder |
| CN102929941A (en) * | 2012-09-29 | 2013-02-13 | 四川长虹电器股份有限公司 | Sliding loading method for Web page based on Android platform browser |
| CN103513915A (en) * | 2012-06-29 | 2014-01-15 | Lg电子株式会社 | Digital device and method for controlling same |
| CN103902722A (en) * | 2014-04-10 | 2014-07-02 | 白杨 | B/S (browser/server) based webpage display method and terminal |
| CN104536649A (en) * | 2015-01-12 | 2015-04-22 | 天脉聚源(北京)传媒科技有限公司 | Page display method and device |
| CN105574207A (en) * | 2016-01-21 | 2016-05-11 | 上海谦讯网络科技有限公司 | WAP webpage developing method |
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
| CN106375799A (en) * | 2016-08-31 | 2017-02-01 | 广州华多网络科技有限公司 | Direct broadcasting room broadcast information customizing and pushing method and device and server |
| CN106527886A (en) * | 2016-09-30 | 2017-03-22 | 北京小米移动软件有限公司 | Picture display method and apparatus |
-
2017
- 2017-05-11 CN CN201710331375.XA patent/CN107133046B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080172608A1 (en) * | 2006-06-06 | 2008-07-17 | Bellsouth Intellectual Property Corporation | Site builder |
| CN103513915A (en) * | 2012-06-29 | 2014-01-15 | Lg电子株式会社 | Digital device and method for controlling same |
| CN102929941A (en) * | 2012-09-29 | 2013-02-13 | 四川长虹电器股份有限公司 | Sliding loading method for Web page based on Android platform browser |
| CN103902722A (en) * | 2014-04-10 | 2014-07-02 | 白杨 | B/S (browser/server) based webpage display method and terminal |
| CN104536649A (en) * | 2015-01-12 | 2015-04-22 | 天脉聚源(北京)传媒科技有限公司 | Page display method and device |
| CN105574207A (en) * | 2016-01-21 | 2016-05-11 | 上海谦讯网络科技有限公司 | WAP webpage developing method |
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
| CN106375799A (en) * | 2016-08-31 | 2017-02-01 | 广州华多网络科技有限公司 | Direct broadcasting room broadcast information customizing and pushing method and device and server |
| CN106527886A (en) * | 2016-09-30 | 2017-03-22 | 北京小米移动软件有限公司 | Picture display method and apparatus |
Non-Patent Citations (1)
| Title |
|---|
| 蓝鹰: ""高校门户网站的页面布局技术研究"", 《智能计算机与应用》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109240784A (en) * | 2018-08-30 | 2019-01-18 | 贵州白山云科技股份有限公司 | A kind of the chart rendering method and system of memory object |
| CN109657086A (en) * | 2018-12-14 | 2019-04-19 | 苏州好玩友网络科技有限公司 | Image preview method, apparatus, equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107133046B (en) | 2021-02-02 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110109659A (en) | A kind of system that realizing front end applications scaffold and server | |
| CN106569900A (en) | Application processing method and device | |
| CN108647028A (en) | Application information processing method and device | |
| CN108089857A (en) | A kind of industry web monitors the generation method of the page in real time | |
| CN105955888A (en) | Page debugging and previewing method and system | |
| CN106250083A (en) | Double screen dual control intelligent terminal and implementation method | |
| CN103914450A (en) | Method and device for presenting web graphics in mobile terminal platform | |
| CN110297624B (en) | Implementation method of Widget system based on electron framework and television adopting system | |
| CN106569856A (en) | Method and device of loading application view resource file | |
| CN102566983B (en) | Object based on Windows system pulls implementation method and system thereof | |
| CN109189400A (en) | Program dissemination method and device, storage medium, processor | |
| CN107463307A (en) | Document display method and device | |
| CN107635001A (en) | Web scripts abnormality eliminating method and device | |
| CN107133046A (en) | Page building method, device and electric terminal | |
| CN109086105A (en) | A kind of page layout conversion method, device and electronic equipment | |
| CN107273541A (en) | Network picture display method, device and electric terminal | |
| CN105320662B (en) | Webpage generating method and device | |
| CN110868324A (en) | Service configuration method, device, equipment and storage medium | |
| CN108228139B (en) | Singlechip development system and device based on HTML5 browser frame | |
| CN106293658B (en) | Interface component generation method and equipment | |
| CN102955656A (en) | All-media desktop operating method and device for mobile communication terminal | |
| CN111273980B (en) | Interface thread visualization method and device, computer equipment and storage medium | |
| CN109240664A (en) | A kind of method and terminal acquiring user behavior information | |
| CN108717357A (en) | Page presentation code conversion method, device, equipment and computer storage media | |
| CN108255562A (en) | Method for page jump and device |
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 | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20240202 Address after: Room 801, 85 Kefeng Road, Huangpu District, Guangzhou City, Guangdong Province Patentee after: Yami Technology (Guangzhou) Co.,Ltd. Country or region after: China Address before: 430000 East Lake Development Zone, Wuhan City, Hubei Province, No. 1 Software Park East Road 4.1 Phase B1 Building 11 Building Patentee before: WUHAN DOUYU NETWORK TECHNOLOGY Co.,Ltd. Country or region before: China |