CN110457656A - A kind of document display method and apparatus - Google Patents
A kind of document display method and apparatus Download PDFInfo
- Publication number
- CN110457656A CN110457656A CN201810434160.5A CN201810434160A CN110457656A CN 110457656 A CN110457656 A CN 110457656A CN 201810434160 A CN201810434160 A CN 201810434160A CN 110457656 A CN110457656 A CN 110457656A
- Authority
- CN
- China
- Prior art keywords
- document
- code
- web
- react native
- component
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
-
- 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 application provides a kind of document display method and apparatus, which comprises obtains Markdown document at the end Web；The Markdown document includes React Native component code；The Markdown document is converted into Html web document at the end Web；The compatibility code for simulating React Native running environment is loaded at the end Web；In the Web end group under the React Native running environment that the compatibility code is simulated, the Html web document is shown, and preview effect is shown in the Html web document using the React Native component code.In the embodiment of the present application, by loading the compatibility code for simulating React Native running environment at the end Web, it may be implemented to show the preview effect of React Native component code while showing React Native component code and corresponding document data.
Description
Technical field
This application involves field of computer technology, fill more particularly to a kind of document display method and a kind of document display
It sets.
Background technique
With the development of application program, the UI component used in application program is also more and more.Wherein, it is used for native system
(iOS system and android system) React Native component is a kind of common UI component.
Developer uses the component, Ke Yiwei when developing React Native component, for the ease of other users
React Native component writes the document how used for illustrating React Native component.
But the source code of React Native component can only be shown for the document of React Native component at present,
Can not preview code operational effect, be unfavorable for user and quickly understand React Native component.
Summary of the invention
In view of the above problems, it proposes the embodiment of the present application and overcomes the above problem or at least partly in order to provide one kind
A kind of document display method to solve the above problems and a kind of corresponding document display device.
To solve the above-mentioned problems, the embodiment of the present application discloses a kind of document display method, comprising:
Markdown document is obtained at the end Web；The Markdown document includes React Native component code；
The Markdown document is converted into Html web document at the end Web；
The compatibility code for simulating React Native running environment is loaded at the end Web；
In the Web end group under the React Native running environment that the compatibility code is simulated, the Html is shown
Web document, and preview effect is shown in the Html web document using the React Native component code.
Preferably, further includes:
Parse the metadata in the Markdown document；
It is described to include: the step of the Markdown document is converted to Html web document by the end Web
Load transition components；
Html web document is generated using the metadata by the transition components.
Preferably, further includes:
Generate the configuration file for specifying the metadata；
The configuration file is passed to the transition components；
It is described to include: using the step of metadata generation Html web document by the transition components
The specified metadata of the configuration file is obtained by the transition components, and Html is generated using the metadata
Web document.
Preferably, it is described in the Web end group under the React Native running environment that the compatibility code is simulated, exhibition
Show the Html web document, and preview effect is shown in the Html web document using React Native component code
The step of include:
In the Web end group under the React Native running environment that the compatibility code is simulated, by the React
Native component code is converted to the code for being adapted to the end Web；
The Html web document is shown at the end Web, and using the code at the adaptation end Web described
Preview effect is shown in Html web document.
It preferably, will be described in the Web end group under the React Native running environment that the compatibility code is simulated
React Native component code is converted to the step of code for being adapted to the end Web and includes:
In the Web end group under the React Native running environment that the compatibility code is simulated, pass through the conversion
The React Native component code is converted to the code for being adapted to the end Web by component.
Preferably, the step of metadata parsed in the Markdown document includes:
Load resolution component；
By the resolution component, the metadata in the Markdown document is parsed.
Preferably, described generation the step of specifying the configuration file of the metadata, includes:
The configuration file for specifying the metadata is generated by the resolution component.
Preferably, further includes:
Establish the linking relationship between multiple Html web documents.
Preferably, the Markdown document generates in the following way:
Charging assembly library；It include multiple React Native component codes in the Component Gallery；
The document data for being directed to the React Native component code is generated, and using the document data and described
React Native component code generates Markdown document.
Preferably, described to generate the document data for being directed to the React Native component code, and use the document
Data and the React Native component code generate the step of Markdown document and include:
Load document structure tree component；
By the document structure tree component, the document data for being directed to the React Native component code is generated, and is adopted
Markdown document is generated with the document data and the React Native component code.
The embodiment of the present application also discloses a kind of document display method, comprising:
The first format file is obtained at the end Web；First format file includes front end assemblies code；
First format file is converted into the second format file at the end Web；
At the end Web, load is used for the compatibility code of AFE(analog front end) running environment；
In the Web end group under the front end running environment that the compatibility code is simulated, second format file is shown,
And preview effect is shown in second format file using the front end assemblies code.
Preferably, further includes:
Parse the metadata in first format file；
It is described to include: the step of first format file is converted to the second format file by the end Web
Load transition components；
The second format file is generated using the metadata by the transition components.
Preferably, it is described in the Web end group under the front end running environment that the compatibility code is simulated, show described the
Two format files, and shown in second format file using the front end assemblies code and include: the step of preview effect
In the Web end group under the front end running environment that the compatibility code is simulated, the front end assemblies code is turned
It is changed to the code for being adapted to the end Web；
Second format file is shown at the end Web, and using the code at the adaptation end Web described the
Preview effect is shown in two format files.
Preferably, in the Web end group under the front end running environment that the compatibility code is simulated, by the front end assemblies
Code conversion is the step of being adapted to the code at the end Web
In the Web end group under the front end running environment that the compatibility code is simulated, by the transition components by institute
Stating front end assemblies code conversion is the code for being adapted to the end Web.
The embodiment of the present application also discloses a kind of document display device, comprising:
Document obtains module, for obtaining Markdown document at the end Web；The Markdown document includes React
Native component code；
Document conversion module, for the Markdown document to be converted to Html web document at the end Web；
Compatibility code loading module, for loading at the end Web for simulating the simultaneous of React Native running environment
Hold code；
Display module, in the Web end group under the React Native running environment that the compatibility code is simulated,
It shows the Html web document, and is shown in the Html web document in advance using the React Native component code
Look at effect.
Preferably, further includes:
Parsing module, for parsing the metadata in the Markdown document；
The document conversion module includes:
Transition components load submodule, for loading transition components；
Transform subblock, for generating Html web document using the metadata by the transition components.
Preferably, further includes:
Configuration file generation module, for generating the configuration file for specifying the metadata；
Configuration file afferent module, for the configuration file to be passed to the transition components；
It is described to include: using the step of metadata generation Html web document by the transition components
Page documents generation unit, for obtaining the specified metadata of the configuration file by the transition components, and
Html web document is generated using the metadata.
Preferably, the display module includes:
Code conversion submodule, the React Native operation for being simulated in the Web end group in the compatibility code
Under environment, the React Native component code is converted to the code for being adapted to the end Web；
Submodule is shown, for showing the Html web document at the end Web, and using the adaptation Web
The code at end shows preview effect in the Html web document.
Preferably, the code conversion submodule includes:
Transcoding unit, for running ring in the React Native that the compatibility code is simulated in the Web end group
Under border, the React Native component code is converted to the code for being adapted to the end Web by the transition components.
Preferably, the parsing module includes:
Resolution component loads submodule, for loading resolution component；
Analyzing sub-module, for parsing the metadata in the Markdown document by the resolution component.
Preferably, the configuration file generation module includes:
Configuration file generates submodule, for generating the configuration file for specifying the metadata by the resolution component.
Preferably, further includes:
Connection relationship establishes module, the linking relationship for establishing between multiple Html web documents.
Preferably, the Markdown document is generated by following module:
Component Gallery loading module is used for charging assembly library；It include multiple React Native component generations in the Component Gallery
Code；
Document creation module for generating the document data for being directed to the React Native component code, and uses institute
It states document data and the React Native component code generates Markdown document.
Preferably, the document creation module includes:
Document structure tree component loads submodule, for loading document structure tree component；
Document structure tree submodule, for generating and being directed to the React Native component by the document structure tree component
The document data of code, and Markdown document is generated using the document data and the React Native component code.
The embodiment of the present application also discloses a kind of device, comprising:
One or more processors；With
One or more machine readable medias of instruction are stored thereon with, are executed when by one or more of processors
When, so that described device executes one or more method as described above.
The embodiment of the present application also discloses one or more machine readable medias, is stored thereon with instruction, when by one or
When multiple processors execute, so that the processor executes one or more methods as described in power is upper.
The embodiment of the present application includes the following advantages:
In the embodiment of the present application, by loading the compatibility generation for simulating React Native running environment at the end Web
Code may be implemented to show React Native while showing React Native component code and corresponding document data
The preview effect of component code.
Detailed description of the invention
Fig. 1 is a kind of step flow chart of document display embodiment of the method one of the application；
Fig. 2 is a kind of step flow chart of document display embodiment of the method two of the application；
Fig. 3 is the schematic diagram realized in the embodiment of the present application in the end Web preview document；
Fig. 4 is a kind of step flow chart of document display embodiment of the method three of the application；
Fig. 5 is a kind of structural block diagram of document display Installation practice of the application.
Specific embodiment
In order to make the above objects, features, and advantages of the present application more apparent, with reference to the accompanying drawing and it is specific real
Applying mode, the present application will be further described in detail.
Referring to Fig.1, a kind of step flow chart of document display embodiment of the method one of the application is shown, specifically can wrap
Include following steps:
Step 101, Markdown document is obtained at the end Web；The Markdown document includes React Native group
Part code；
The end Web can be browser end or other provide the client of web page access function.
For developer, is write for component and illustrate that document is essential work.Writing for document can sample
Diversified forms write document using Markdown in the embodiment of the present application.
Markdown is a kind of markup language that ordinary text editor can be used and write.Markdown has simple
Syntax rule allows the plain text format easily write using readability to write document, and Markdown document can be converted into Html
Web document, pdf document facilitate other users to open.
In the embodiment of the present application, Markdown document includes React Native component code and for illustrating
The document data of React Native component code.
In practice, each Markdown document may be stored in independent catalogue.Code and document data are put
In a catalogue, it can be convenient the guardian of document while safeguarding code and document data.Wherein, document data can wrap
It includes: the information such as title, attribute.
In practice, it generally requires to generate multiple React Native components and illustrates document.For example, to React
All React Native components generation in Native Component Gallery illustrates document.
In the embodiment of the present application, Markdown document can generate as follows:
Charging assembly library；It include multiple React Native component codes in the Component Gallery；It generates and is directed to the React
The document data of Native component code, and generated using the document data and the React Native component code
Markdown document.
Specifically, described generate the document data for being directed to the React Native component code, and use the document
Data and the React Native component code generate Markdown document
Load document structure tree component；By the document structure tree component, generates and be directed to the React Native component generation
The document data of code, and Markdown document is generated using the document data and the React Native component code.
Document structure tree component is the group of the document data for generating React Native component code of developer's exploitation
Part, document structure tree component produce corresponding document data after scanning React Native component code.
Step 102, the Markdown document is converted into Html web document at the end Web；
Markdown document is converted into Html web document for convenience, transition components can be developed to be converted.
For user, the transition components of other developers exploitation can be installed at the end Web.
In the embodiment of the present application, after Markdown document is converted to Html web document, in Markdown document
React Native component code and document data can be retained.Therefore, still React can be browsed in the Html page
Native component code and corresponding document data.
Step 103, the compatibility code for simulating React Native running environment is loaded at the end Web；
In practice, React Native code is only compatible with two platforms (iOS and Android), and there is no the compatible ends Web
Access.In order to realize React Native code at the end Web, can develop in the end Web simulation React Native fortune
The compatibility code of row environment.
React Native running environment is referred to as React Native frame, React Native running environment packet
Contain React Native component code and runs relied on function and parameter.
After the end Web loads the compatibility code, it can realize and run React Native component code at the end Web.
Step 104, it in the Web end group under the React Native running environment that the compatibility code is simulated, shows
The Html web document, and show that preview is imitated in the Html web document using the React Native component code
Fruit.
After the end Web simulates React Native running environment, at the end Web, starting Html web document can show Html
React Native code in web document and the document data for describing React Native code.Meanwhile it simulating
Under React Native running environment out, the operation of React Native component code may be implemented, to show React
The preview effect of Native component code.
In the embodiment of the present application, by loading the compatibility generation for simulating React Native running environment at the end Web
Code may be implemented to show React Native while showing React Native component code and corresponding document data
The preview effect of component code.
Referring to Fig. 2, a kind of step flow chart of document display embodiment of the method two of the application is shown, specifically can wrap
Include following steps:
Step 201, Markdown document is obtained at the end Web；The Markdown document includes React Native group
Part code；
Step 202, the metadata in the Markdown document is parsed；The metadata include: document data and
React Native component code；
In the embodiment of the present application, the step 202 may include following sub-step:
Sub-step S11 loads resolution component；
Resolution component is by developer's exploitation for parsing the group of code and document data in Markdown document
Part.
In practice, resolution component may include multiple components for cooperating to realize analysis.
Sub-step S12 parses the metadata in the Markdown document by the resolution component.
Obtained metadata is parsed, (for example, tree construction) can be stored by the form of structuring, to facilitate other assemblies
Or system uses these metadata.
Step 203, transition components are loaded；
Transition components are by developer's exploitation for Markdown document to be converted to Html web document.
In practice, transition components may include multiple components for cooperating to realize conversion.
Step 204, Html web document is generated using the metadata by the transition components；
In the embodiment of the present application, the method can also include: to generate the configuration file for specifying the metadata；It will
The configuration file is passed to the transition components；
Specifically, the configuration file for specifying the metadata can be generated by resolution component after parsing metadata, and
Configuration file is passed to transition components.
The step 204 can be with are as follows: obtains the specified metadata of the configuration file by the transition components, and uses
The metadata generates the Html page.
In order to enable transition components to be more convenient, more accurately get metadata, member can be specified with by configuration file
Data.Transition components can obtain specified metadata according to configuration file.
In the embodiment of the present application, the method can also include: to establish between multiple Html web documents
Linking relationship.
Pass through the linking relationship established between multiple Html web documents, so that it may realize Html web document it
Between jump.
Specifically, each Markdown document can be independently placed in a catalogue, corresponding multiple catalogues are exactly multiple
Website, the Markdown document under multiple catalogues can be used a kind of relative path format and mutually quote, and realize between website
It jumps.
Step 205, the compatibility code for simulating React Native running environment is loaded at the end Web；
Step 206, it in the Web end group under the React Native running environment that the compatibility code is simulated, shows
The Html web document, and show that preview is imitated in the Html web document using the React Native component code
Fruit.
In the embodiment of the present application, the step 206 may include following sub-step:
Sub-step S21 will in the Web end group under the React Native running environment that the compatibility code is simulated
The React Native component code is converted to the code for being adapted to the end Web；
Specifically, React Native component actual use be .jsx code, and the end Web operation be then .js generation
Code.The practical function of compatibility code is provided with the method by .jsx code conversion for .js code.
The conversion method provided by compatibility code .jsx code used in React Native component can all be turned
It is changed to .js code.
In the embodiment of the present application, the sub-step S21 may include are as follows: in the Web end group in the compatibility code
Under the React Native running environment of simulation, the React Native component code is converted to by the transition components
It is adapted to the code at the end Web.
Specifically, the conversion method that compatibility code can be called to provide by transition components, by React Native component
Code conversion is the code for being adapted to the end Web.
Sub-step S22 shows the Html web document at the end Web, and using the generation at the adaptation end Web
Code shows preview effect in the Html web document.
In the embodiment of the present application, by loading the compatibility generation for simulating React Native running environment at the end Web
Code may be implemented to show React Native while showing React Native component code and corresponding document data
The preview effect of component code.
It is the schematic diagram realized in the embodiment of the present application in the end Web preview document referring to shown in Fig. 3.
For the React Native component code of .jsx format in Markdown document and Markdown document, can adopt
It is analyzed with analytic unit (for example, resolver parser), obtains the metadata meta.json of structuring.
The compatibility code for simulating React Native running environment is loaded at the end Web, to simulate React at the end Web
Native running environment.
Under the React Native running environment of simulation, metadata meta.json is used into compatibility by transition components
Code conversion is Html web document, and the preview effect of React Native component code is shown in Html web document.
A kind of step flow chart of document display embodiment of the method three of the application is shown referring to Fig. 4, specifically can wrap
Include following steps:
Step 401, the first format file is obtained at the end Web；First format file includes front end assemblies code；
In the embodiment of the present application, the first format file can be Markdown document；Front end assemblies code can be
React Native component code, Weex component code.Weex is a frame using Web exploitation native applications.Weex group
Part code is the component code write based on Weex frame.
Step 402, first format file is converted into the second format file at the end Web；
Second format file can be Html web document.
In the embodiment of the present application, the method can also include: the metadata in parsing first format file；
The step 402 may include: load transition components；The is generated using the metadata by the transition components
Two format files.
In the embodiment of the present application, the method can also include: to generate the configuration file for specifying the metadata；It will
The configuration file is passed to the transition components；
It is described to may include: using the step of metadata the second format file of generation by the transition components
The specified metadata of the configuration file is obtained by the transition components, and generates second using the metadata
Format file.
In the embodiment of the present application, the step of metadata parsed in first format file includes: load solution
Analyse component；By the resolution component, the metadata in first format file is parsed.
In the embodiment of the present application, the step of configuration file of the metadata is specified in the generation includes: by described
Resolution component generates the configuration file for specifying the metadata.
In the embodiment of the present application, the method can also include: to establish between multiple second format files
Linking relationship.
In the embodiment of the present application, second format file generates in the following way:
Charging assembly library；It include multiple front end assemblies codes in the Component Gallery；It generates and is directed to the front end assemblies code
Document data, and use the document data and second format file of front end assemblies code building.
In the embodiment of the present application, described to generate the document data for being directed to the front end assemblies code, and use the text
The step of file data and second format file of front end assemblies code building includes:
Load document structure tree component；By the document structure tree component, the document for being directed to the front end assemblies code is generated
Data, and use the document data and second format file of front end assemblies code building.
Step 403, the compatibility code in the end Web load for AFE(analog front end) running environment；
Front end running environment contains front end assemblies code and runs relied on function and parameter.It is simultaneous that this is loaded at the end Web
After holding code, it can realize and run front end assemblies code at the end Web.
Step 404, in the Web end group under the front end running environment that the compatibility code is simulated, described second is shown
Format file, and preview effect is shown in second format file using the front end assemblies code.
After the end Web simulates front end running environment, the second format file can be shown by starting the second format file at the end Web
In front end assemblies code and document data for describing front end assemblies code.Meanwhile in the front end running environment simulated
Under, the operation of front end assemblies code may be implemented, to show the preview effect of front end assemblies code.
In the embodiment of the present application, by being used for the compatibility code of AFE(analog front end) running environment, Ke Yishi in the load of the end Web
While showing front end assemblies code and corresponding document data now, the preview effect of front end assemblies code is shown.
In the embodiment of the present application, the step 404 may include:
In the Web end group under the front end running environment that the compatibility code is simulated, the front end assemblies code is turned
It is changed to the code for being adapted to the end Web；
Second format file is shown at the end Web, and using the code at the adaptation end Web described the
Preview effect is shown in two format files.
In the embodiment of the present application, in the Web end group under the front end running environment that the compatibility code is simulated, by institute
To state front end assemblies code conversion, which be the step of being adapted to the code at the end Web, includes:
In the Web end group under the front end running environment that the compatibility code is simulated, by the transition components by institute
Stating front end assemblies code conversion is the code for being adapted to the end Web.
It should be noted that for simple description, therefore, it is stated as a series of action groups for embodiment of the method
It closes, but those skilled in the art should understand that, the embodiment of the present application is not limited by the described action sequence, because according to
According to the embodiment of the present application, some steps may be performed in other sequences or simultaneously.Secondly, those skilled in the art also should
Know, the embodiments described in the specification are all preferred embodiments, and related movement not necessarily the application is implemented
Necessary to example.
Referring to Fig. 5, show a kind of structural block diagram of document display Installation practice of the application, can specifically include as
Lower module:
Document obtains module 501, for obtaining Markdown document at the end Web；The Markdown document includes
React Native component code；
Document conversion module 502, for the Markdown document to be converted to Html web document at the end Web；
Compatibility code loading module 503, for loading at the end Web for simulating React Native running environment
Compatibility code；
Display module 504, the React Native running environment for being simulated in the Web end group in the compatibility code
Under, show the Html web document, and open up in the Html web document using the React Native component code
Show preview effect.
In the embodiment of the present application, the device can also include:
Parsing module, for parsing the metadata in the Markdown document；
The document conversion module 502 may include:
Transition components load submodule, for loading transition components；
Transform subblock, for generating Html web document using the metadata by the transition components.
In the embodiment of the present application, the device can also include:
Configuration file generation module, for generating the configuration file for specifying the metadata；
Configuration file afferent module, for the configuration file to be passed to the transition components；
It is described to include: using the step of metadata generation Html web document by the transition components
Page documents generation unit, for obtaining the specified metadata of the configuration file by the transition components, and
Html web document is generated using the metadata.
In the embodiment of the present application, the display module 504 may include:
Code conversion submodule, the React Native operation for being simulated in the Web end group in the compatibility code
Under environment, the React Native component code is converted to the code for being adapted to the end Web；
Submodule is shown, for showing the Html web document at the end Web, and using the adaptation Web
The code at end shows preview effect in the Html web document.
In the embodiment of the present application, the code conversion submodule may include:
Transcoding unit, for running ring in the React Native that the compatibility code is simulated in the Web end group
Under border, the React Native component code is converted to the code for being adapted to the end Web by the transition components.
In the embodiment of the present application, the parsing module may include:
Resolution component loads submodule, for loading resolution component；
Analyzing sub-module, for parsing the metadata in the Markdown document by the resolution component.
In the embodiment of the present application, the configuration file generation module may include:
Configuration file generates submodule, for generating the configuration file for specifying the metadata by the resolution component.
In the embodiment of the present application, the device can also include:
Connection relationship establishes module, the linking relationship for establishing between multiple Html web documents.
In the embodiment of the present application, the Markdown document is generated by following module:
Component Gallery loading module is used for charging assembly library；It include multiple React Native component generations in the Component Gallery
Code；
Document creation module for generating the document data for being directed to the React Native component code, and uses institute
It states document data and the React Native component code generates Markdown document.
In the embodiment of the present application, the document creation module includes:
Document structure tree component loads submodule, for loading document structure tree component；
Document structure tree submodule, for generating and being directed to the React Native component by the document structure tree component
The document data of code, and Markdown document is generated using the document data and the React Native component code.
For device embodiment, since it is basically similar to the method embodiment, related so being described relatively simple
Place illustrates referring to the part of embodiment of the method.
The embodiment of the present application also provides a kind of devices, comprising:
One or more processors；With
One or more machine readable medias of instruction are stored thereon with, are executed when by one or more of processors
When, so that described device executes method described in the embodiment of the present application.
The embodiment of the present application also provides one or more machine readable medias, are stored thereon with instruction, when by one or
When multiple processors execute, so that the processor executes method described in the embodiment of the present application.
All the embodiments in this specification are described in a progressive manner, the highlights of each of the examples are with
The difference of other embodiments, the same or similar parts between the embodiments can be referred to each other.
It should be understood by those skilled in the art that, the embodiments of the present application may be provided as method, apparatus or calculating
Machine program product.Therefore, the embodiment of the present application can be used complete hardware embodiment, complete software embodiment or combine software and
The form of the embodiment of hardware aspect.Moreover, the embodiment of the present application can be used one or more wherein include computer can
With in the computer-usable storage medium (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.) of program code
The form of the computer program product of implementation.
The embodiment of the present application is referring to according to the method for the embodiment of the present application, terminal device (system) and computer program
The flowchart and/or the block diagram of product describes.It should be understood that flowchart and/or the block diagram can be realized by computer program instructions
In each flow and/or block and flowchart and/or the block diagram in process and/or box combination.It can provide these
Computer program instructions are set to general purpose computer, special purpose computer, Embedded Processor or other programmable data processing terminals
Standby processor is to generate a machine, so that being held by the processor of computer or other programmable data processing terminal devices
Capable instruction generates for realizing in one or more flows of the flowchart and/or one or more blocks of the block diagram
The device of specified function.
These computer program instructions, which may also be stored in, is able to guide computer or other programmable data processing terminal devices
In computer-readable memory operate in a specific manner, so that instruction stored in the computer readable memory generates packet
The manufacture of command device is included, which realizes in one side of one or more flows of the flowchart and/or block diagram
The function of being specified in frame or multiple boxes.
These computer program instructions can also be loaded into computer or other programmable data processing terminal devices, so that
Series of operation steps are executed on computer or other programmable terminal equipments to generate computer implemented processing, thus
The instruction executed on computer or other programmable terminal equipments is provided for realizing in one or more flows of the flowchart
And/or in one or more blocks of the block diagram specify function the step of.
Although preferred embodiments of the embodiments of the present application have been described, once a person skilled in the art knows bases
This creative concept, then additional changes and modifications can be made to these embodiments.So the following claims are intended to be interpreted as
Including preferred embodiment and all change and modification within the scope of the embodiments of the present application.
Finally, it is to be noted that, herein, relational terms such as first and second and the like be used merely to by
One entity or operation are distinguished with another entity or operation, without necessarily requiring or implying these entities or operation
Between there are any actual relationship or orders.Moreover, the terms "include", "comprise" or its any other variant meaning
Covering non-exclusive inclusion, so that process, method, article or terminal device including a series of elements not only wrap
Those elements are included, but also including other elements that are not explicitly listed, or further includes for this process, method, article
Or the element that terminal device is intrinsic.In the absence of more restrictions, being wanted by what sentence "including a ..." limited
Element, it is not excluded that there is also other identical elements in process, method, article or the terminal device for including the element.
Above to a kind of document display method provided herein and a kind of document display device, detailed Jie has been carried out
It continues, specific examples are used herein to illustrate the principle and implementation manner of the present application, and the explanation of above embodiments is only
It is to be used to help understand the method for this application and its core ideas；At the same time, for those skilled in the art, according to this Shen
Thought please, there will be changes in the specific implementation manner and application range, in conclusion the content of the present specification should not manage
Solution is the limitation to the application.
Claims (26)
1. a kind of document display method characterized by comprising
Markdown document is obtained at the end Web；The Markdown document includes React Native component code；
The Markdown document is converted into Html web document at the end Web；
The compatibility code for simulating React Native running environment is loaded at the end Web；
In the Web end group under the React Native running environment that the compatibility code is simulated, the Html webpage is shown
Document, and preview effect is shown in the Html web document using the React Native component code.
2. the method according to claim 1, wherein further include:
Parse the metadata in the Markdown document；
It is described to include: the step of the Markdown document is converted to Html web document by the end Web
Load transition components；
Html web document is generated using the metadata by the transition components.
3. according to the method described in claim 2, it is characterized by further comprising:
Generate the configuration file for specifying the metadata；
The configuration file is passed to the transition components；
It is described to include: using the step of metadata generation Html web document by the transition components
The specified metadata of the configuration file is obtained by the transition components, and Html webpage is generated using the metadata
Document.
4. according to the method described in claim 3, it is characterized in that, described simulate in the Web end group in the compatibility code
React Native running environment under, show the Html web document, and using React Native component code in institute
State in Html web document show preview effect the step of include:
In the Web end group under the React Native running environment that the compatibility code is simulated, by the React
Native component code is converted to the code for being adapted to the end Web；
The Html web document is shown at the end Web, and using the code at the adaptation end Web in the Html net
Preview effect is shown in page document.
5. according to the method described in claim 4, it is characterized in that, being simulated in the compatibility code in the Web end group
Under React Native running environment, the React Native component code is converted to the code for being adapted to the end Web
Step includes:
In the Web end group under the React Native running environment that the compatibility code is simulated, pass through the transition components
The React Native component code is converted to the code for being adapted to the end Web.
6. according to the method described in claim 5, it is characterized in that, metadata in the parsing Markdown document
Step includes:
Load resolution component；
By the resolution component, the metadata in the Markdown document is parsed.
7. according to the method described in claim 6, it is characterized in that, described generate the step for specifying the configuration file of the metadata
Suddenly include:
The configuration file for specifying the metadata is generated by the resolution component.
8. the method according to the description of claim 7 is characterized in that further include:
Establish the linking relationship between multiple Html web documents.
9. method according to claim 1-8, which is characterized in that the Markdown document is in the following way
It generates:
Charging assembly library；It include multiple React Native component codes in the Component Gallery；
The document data for being directed to the React Native component code is generated, and uses the document data and the React
Native component code generates Markdown document.
10. according to the method described in claim 9, it is characterized in that, described generate is directed to the React Native component generation
The document data of code, and using the step of the document data and React Native component code generation Markdown document
Suddenly include:
Load document structure tree component；
By the document structure tree component, the document data for being directed to the React Native component code is generated, and uses institute
It states document data and the React Native component code generates Markdown document.
11. a kind of document display method characterized by comprising
The first format file is obtained at the end Web；First format file includes front end assemblies code；
First format file is converted into the second format file at the end Web；
At the end Web, load is used for the compatibility code of AFE(analog front end) running environment；
In the Web end group under the front end running environment that the compatibility code is simulated, second format file is shown, and adopt
Preview effect is shown in second format file with the front end assemblies code.
12. according to the method for claim 11, which is characterized in that further include:
Parse the metadata in first format file；
It is described to include: the step of first format file is converted to the second format file by the end Web
Load transition components；
The second format file is generated using the metadata by the transition components.
13. according to the method for claim 12, which is characterized in that it is described in the Web end group in the compatibility code mould
Under quasi- front end running environment, second format file is shown, and using the front end assemblies code in second format
It is shown in document and includes: the step of preview effect
In the Web end group under the front end running environment that the compatibility code is simulated, it is by the front end assemblies code conversion
It is adapted to the code at the end Web；
Second format file is shown at the end Web, and using the code at the adaptation end Web in second lattice
Preview effect is shown in formula document.
14. according to the method for claim 13, which is characterized in that simulated in the Web end group in the compatibility code
Under the running environment of front end, being the step of being adapted to the code at the end Web by the front end assemblies code conversion includes:
In the Web end group under the front end running environment that the compatibility code is simulated, will be described by the transition components before
End component code is converted to the code for being adapted to the end Web.
15. a kind of document display device characterized by comprising
Document obtains module, for obtaining Markdown document at the end Web；The Markdown document includes React
Native component code；
Document conversion module, for the Markdown document to be converted to Html web document at the end Web；
Compatibility code loading module, for loading the compatibility generation for simulating React Native running environment at the end Web
Code；
Display module, under the React Native running environment that the compatibility code is simulated, being shown in the Web end group
The Html web document, and show that preview is imitated in the Html web document using the React Native component code
Fruit.
16. device according to claim 15, which is characterized in that further include:
Parsing module, for parsing the metadata in the Markdown document；
The document conversion module includes:
Transition components load submodule, for loading transition components；
Transform subblock, for generating Html web document using the metadata by the transition components.
17. device according to claim 16, which is characterized in that further include:
Configuration file generation module, for generating the configuration file for specifying the metadata；
Configuration file afferent module, for the configuration file to be passed to the transition components；
It is described to include: using the step of metadata generation Html web document by the transition components
Page documents generation unit for obtaining the specified metadata of the configuration file by the transition components, and uses
The metadata generates Html web document.
18. device according to claim 17, which is characterized in that the display module includes:
Code conversion submodule, the React Native running environment for being simulated in the Web end group in the compatibility code
Under, the React Native component code is converted to the code for being adapted to the end Web；
Submodule is shown, for showing the Html web document at the end Web, and using the adaptation end Web
Code shows preview effect in the Html web document.
19. device according to claim 18, which is characterized in that the code conversion submodule includes:
Transcoding unit, in the Web end group under the React Native running environment that the compatibility code is simulated,
The React Native component code is converted to the code for being adapted to the end Web by the transition components.
20. device according to claim 19, which is characterized in that the parsing module includes:
Resolution component loads submodule, for loading resolution component；
Analyzing sub-module, for parsing the metadata in the Markdown document by the resolution component.
21. device according to claim 20, which is characterized in that the configuration file generation module includes:
Configuration file generates submodule, for generating the configuration file for specifying the metadata by the resolution component.
22. device according to claim 21, which is characterized in that further include:
Connection relationship establishes module, the linking relationship for establishing between multiple Html web documents.
23. the described in any item devices of 5-22 according to claim 1, which is characterized in that the Markdown document passes through as follows
Module generates:
Component Gallery loading module is used for charging assembly library；It include multiple React Native component codes in the Component Gallery；
Document creation module for generating the document data for being directed to the React Native component code, and uses the text
File data and the React Native component code generate Markdown document.
24. device according to claim 23, which is characterized in that the document creation module includes:
Document structure tree component loads submodule, for loading document structure tree component；
Document structure tree submodule, for generating and being directed to the React Native component code by the document structure tree component
Document data, and Markdown document is generated using the document data and the React Native component code.
25. a kind of device characterized by comprising
One or more processors；With
One or more machine readable medias of instruction are stored thereon with, when being executed by one or more of processors, are made
The methods for obtaining the one or more that described device is executed as described in claim 1-10 or 11-14.
26. one or more machine readable medias, are stored thereon with instruction, when executed by one or more processors, so that
The processor executes one or more methods as described in claim 1-10 or 11-14.
Priority Applications (3)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810434160.5A CN110457656B (en) | 2018-05-08 | 2018-05-08 | Document display method and device and machine readable medium |
| TW108108018A TW201947424A (en) | 2018-05-08 | 2019-03-11 | Document display method and apparatus |
| PCT/CN2019/085466 WO2019214539A1 (en) | 2018-05-08 | 2019-05-05 | Document display method and apparatus |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810434160.5A CN110457656B (en) | 2018-05-08 | 2018-05-08 | Document display method and device and machine readable medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110457656A true CN110457656A (en) | 2019-11-15 |
| CN110457656B CN110457656B (en) | 2022-05-24 |
Family
ID=68466895
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810434160.5A Active CN110457656B (en) | 2018-05-08 | 2018-05-08 | Document display method and device and machine readable medium |
Country Status (3)
| Country | Link |
|---|---|
| CN (1) | CN110457656B (en) |
| TW (1) | TW201947424A (en) |
| WO (1) | WO2019214539A1 (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111290996A (en) * | 2020-01-16 | 2020-06-16 | 平安医疗健康管理股份有限公司 | Document format conversion method, device, equipment and readable storage medium |
| CN111596948A (en) * | 2020-04-09 | 2020-08-28 | 北京五八信息技术有限公司 | File processing method and device based on Flutter |
| CN111736812A (en) * | 2020-06-16 | 2020-10-02 | 北京三快在线科技有限公司 | Document code execution method and device, computer equipment and storage medium |
| US20210264096A1 (en) * | 2020-02-25 | 2021-08-26 | Transposit Corporation | Markdown data content with action binding |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111045668B (en) * | 2019-12-03 | 2023-06-06 | 安徽航天信息科技有限公司 | Cross-platform mobile terminal system development method and device |
| CN112130819A (en) * | 2020-09-16 | 2020-12-25 | 北京值得买科技股份有限公司 | Page processing method, page processing device, electronic equipment and computer readable medium |
| CN113792531B (en) * | 2021-08-17 | 2024-02-27 | 罗普特科技集团股份有限公司 | Text editing method and system based on markdown grammar expansion |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
| CN106095889A (en) * | 2016-06-07 | 2016-11-09 | 浪潮软件股份有限公司 | A kind of document management method based on Markdown |
| CN106371844A (en) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | Method and system for presenting webpage by native user interface assembly |
| CN107347179A (en) * | 2017-03-28 | 2017-11-14 | 吉林市东杰科技开发有限公司 | A kind of method that LBS is realized based on ReactNative |
| US9852117B1 (en) * | 2015-06-01 | 2017-12-26 | Haydn Labs, Inc. | Text-fragment based content editing and publishing |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106970946A (en) * | 2017-02-24 | 2017-07-21 | 阿里巴巴集团控股有限公司 | A kind of page display method and device |
-
2018
- 2018-05-08 CN CN201810434160.5A patent/CN110457656B/en active Active
-
2019
- 2019-03-11 TW TW108108018A patent/TW201947424A/en unknown
- 2019-05-05 WO PCT/CN2019/085466 patent/WO2019214539A1/en active Application Filing
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9852117B1 (en) * | 2015-06-01 | 2017-12-26 | Haydn Labs, Inc. | Text-fragment based content editing and publishing |
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
| CN106095889A (en) * | 2016-06-07 | 2016-11-09 | 浪潮软件股份有限公司 | A kind of document management method based on Markdown |
| CN106371844A (en) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | Method and system for presenting webpage by native user interface assembly |
| CN107347179A (en) * | 2017-03-28 | 2017-11-14 | 吉林市东杰科技开发有限公司 | A kind of method that LBS is realized based on ReactNative |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111290996A (en) * | 2020-01-16 | 2020-06-16 | 平安医疗健康管理股份有限公司 | Document format conversion method, device, equipment and readable storage medium |
| US20210264096A1 (en) * | 2020-02-25 | 2021-08-26 | Transposit Corporation | Markdown data content with action binding |
| US11704474B2 (en) * | 2020-02-25 | 2023-07-18 | Transposit Corporation | Markdown data content with action binding |
| CN111596948A (en) * | 2020-04-09 | 2020-08-28 | 北京五八信息技术有限公司 | File processing method and device based on Flutter |
| CN111596948B (en) * | 2020-04-09 | 2021-07-16 | 北京五八信息技术有限公司 | File processing method and device based on Flutter |
| CN111736812A (en) * | 2020-06-16 | 2020-10-02 | 北京三快在线科技有限公司 | Document code execution method and device, computer equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2019214539A1 (en) | 2019-11-14 |
| TW201947424A (en) | 2019-12-16 |
| CN110457656B (en) | 2022-05-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110457656A (en) | A kind of document display method and apparatus | |
| CN110580147B (en) | Application program development method and device | |
| CN102819561B (en) | Picture display method and device based on webpage | |
| US10067856B2 (en) | Employing code overlays to facilitate software development | |
| CN106293675B (en) | System static resource loading method and device | |
| CN104408204A (en) | Method and device for obtaining webpage page link address | |
| US9952835B2 (en) | Generation of hybrid enterprise mobile applications in cloud environment | |
| Hales | HTML5 and JavaScript Web Apps: Bridging the gap between the web and the mobile web | |
| CN113031932B (en) | Project development method, apparatus, electronic device and storage medium | |
| CN110780874B (en) | Method and device for generating information | |
| CN111324833A (en) | Page display method, device, electronic design and computer readable medium | |
| KR20150078840A (en) | Storage medium, method and system for storinging integrated platform for developing mobile user interface | |
| CN107015903B (en) | Interface test program generation method and device and electronic equipment | |
| Halliday | Vue. js 2 Design Patterns and Best Practices: Build enterprise-ready, modular Vue. js applications with Vuex and Nuxt | |
| Kienle et al. | Evolution of web systems | |
| Saleh | JavaScript Unit Testing | |
| Cimino et al. | An efficient model-based methodology for developing device-independent mobile applications | |
| Sarkis et al. | A multi-screen refactoring system for video-centric web applications | |
| Penberthy | Beginning ASP. NET for Visual Studio 2015 | |
| Johnson | Programming in HTML5 with JavaScript and CSS3 | |
| Zhang et al. | Research of web front-end engineering solution in public cultural service project | |
| CN110516185B (en) | Method and device for processing dynamic website | |
| CN113849164A (en) | Data processing method and device, electronic equipment and memory | |
| Honkala | Web user interaction: a declarative approach based on XForms | |
| Nagesh et al. | Cross-platform mobile application development |
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 | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 40016260 Country of ref document: HK |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |