TW201947424A - 文件展示方法和裝置 - Google Patents
文件展示方法和裝置 Download PDFInfo
- Publication number
- TW201947424A TW201947424A TW108108018A TW108108018A TW201947424A TW 201947424 A TW201947424 A TW 201947424A TW 108108018 A TW108108018 A TW 108108018A TW 108108018 A TW108108018 A TW 108108018A TW 201947424 A TW201947424 A TW 201947424A
- Authority
- TW
- Taiwan
- Prior art keywords
- file
- code
- component
- react native
- web
- Prior art date
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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Information Transfer Between Computers (AREA)
- Document Processing Apparatus (AREA)
Abstract
本申請實施例提供了一種文件展示方法和裝置，所述方法包括：在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；在所述Web端將所述Markdown文件轉換為Html網頁文件；在所述Web端加載用於模擬React Native運行環境的相容碼；在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。在本申請實施例中，透過在Web端加載用於模擬React Native運行環境的相容碼，可以實現在展示React Native組件碼和相應的文件資料的同時，展示React Native組件碼的預覽效果。
Description
本申請涉及電腦技術領域，特別是涉及一種文件展示方法和一種文件展示裝置。
隨著應用程式的發展，應用程式中用到的UI組件也越來越多。其中，用於原生系統(iOS系統和Android系統)React Native 組件是一種常見的UI組件。
開發者在開發React Native組件時，為了便於其他使用者使用該組件，可以為React Native組件編寫用於說明React Native組件如何使用的文件。
但是，目前針對React Native組件的文件只能展示React Native組件的原始碼，無法預覽碼的運行效果，不利於使用者快速瞭解React Native組件。
開發者在開發React Native組件時，為了便於其他使用者使用該組件，可以為React Native組件編寫用於說明React Native組件如何使用的文件。
但是，目前針對React Native組件的文件只能展示React Native組件的原始碼，無法預覽碼的運行效果，不利於使用者快速瞭解React Native組件。
鑒於上述問題，提出了本申請實施例以便提供一種克服上述問題或者至少部分地解決上述問題的一種文件展示方法和相應的一種文件展示裝置。
為了解決上述問題，本申請實施例公開了一種文件展示方法，包括：
在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；
在所述Web端將所述Markdown文件轉換為Html網頁文件；
在所述Web端加載用於模擬React Native運行環境的相容碼；
在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
較佳的，還包括：
解析所述Markdown文件中的元資料；
所述在所述Web端將所述Markdown文件轉換為Html網頁文件的步驟包括：
加載轉換組件；
透過所述轉換組件採用所述元資料產生Html網頁文件。
較佳的，還包括：
產生指定所述元資料的設定檔；
將所述設定檔傳入所述轉換組件；
所述透過所述轉換組件採用所述元資料產生Html網頁文件的步驟包括：
透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生Html網頁文件。
較佳的，所述在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用React Native組件碼在所述Html網頁文件中展示預覽效果的步驟包括：
在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼；
在所述Web端展示所述Html網頁文件，並採用所述適配所述Web端的碼在所述Html網頁文件中展示預覽效果。
較佳的，在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼的步驟包括：
在所述Web端基於所述相容碼模擬的React Native運行環境下，透過所述轉換組件將所述React Native組件碼轉換為適配所述Web端的碼。
較佳的，所述解析所述Markdown文件中的元資料的步驟包括：
加載解析組件；
透過所述解析組件，解析所述Markdown文件中的元資料。
較佳的，所述產生指定所述元資料的設定檔的步驟包括：
透過所述解析組件產生指定所述元資料的設定檔。
較佳的，還包括：
建立多個所述Html網頁文件的之間的鏈接關係。
較佳的，所述Markdown文件透過如下方式產生：
加載組件庫；所述組件庫中包括多個React Native組件碼；
產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
較佳的，所述產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件的步驟包括：
加載文件產生組件；
透過所述文件產生組件，產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
本申請實施例還公開了一種文件展示方法，包括：
在Web端獲取第一格式文件；所述第一格式文件包含有前端組件碼；
在所述Web端將所述第一格式文件轉換為第二格式文件；
在所述Web端加載用於模擬前端運行環境的相容碼；
在所述Web端基於所述相容碼模擬的前端運行環境下，展示所述第二格式文件，並採用所述前端組件碼在所述第二格式文件中展示預覽效果。
較佳的，還包括：
解析所述第一格式文件中的元資料；
所述在所述Web端將所述第一格式文件轉換為第二格式文件的步驟包括：
加載轉換組件；
透過所述轉換組件採用所述元資料產生第二格式文件。
較佳的，所述在所述Web端基於所述相容碼模擬的前端運行環境下，展示所述第二格式文件，並採用所述前端組件碼在所述第二格式文件中展示預覽效果的步驟包括：
在所述Web端基於所述相容碼模擬的前端運行環境下，將所述前端組件碼轉換為適配所述Web端的碼；
在所述Web端展示所述第二格式文件，並採用所述適配所述Web端的碼在所述第二格式文件中展示預覽效果。
較佳的，在所述Web端基於所述相容碼模擬的前端運行環境下，將所述前端組件碼轉換為適配所述Web端的碼的步驟包括：
在所述Web端基於所述相容碼模擬的前端運行環境下，透過所述轉換組件將所述前端組件碼轉換為適配所述Web端的碼。
本申請實施例還公開了一種文件展示裝置，包括：
文件獲取模組，用於在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；
文件轉換模組，用於在所述Web端將所述Markdown文件轉換為Html網頁文件；
相容碼加載模組，用於在所述Web端加載用於模擬React Native運行環境的相容碼；
展示模組，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
較佳的，還包括：
解析模組，用於解析所述Markdown文件中的元資料；
所述文件轉換模組包括：
轉換組件加載子模組，用於加載轉換組件；
轉換子模組，用於透過所述轉換組件採用所述元資料產生Html網頁文件。
較佳的，還包括：
設定檔產生模組，用於產生指定所述元資料的設定檔；
設定檔傳入模組，用於將所述設定檔傳入所述轉換組件；
所述透過所述轉換組件採用所述元資料產生Html網頁文件的步驟包括：
頁面文件產生單元，用於透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生Html網頁文件。
較佳的，所述展示模組包括：
碼轉換子模組，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼；
展示子模組，用於在所述Web端展示所述Html網頁文件，並採用所述適配所述Web端的碼在所述Html網頁文件中展示預覽效果。
較佳的，所述碼轉換子模組包括：
碼轉換單元，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，透過所述轉換組件將所述React Native組件碼轉換為適配所述Web端的碼。
較佳的，所述解析模組包括：
解析組件加載子模組，用於加載解析組件；
解析子模組，用於透過所述解析組件，解析所述Markdown文件中的元資料。
較佳的，所述設定檔產生模組包括：
設定檔產生子模組，用於透過所述解析組件產生指定所述元資料的設定檔。
較佳的，還包括：
連接關係建立模組，用於建立多個所述Html網頁文件的之間的鏈接關係。
較佳的，所述Markdown文件透過如下模組產生：
組件庫加載模組，用於加載組件庫；所述組件庫中包括多個React Native組件碼；
文件產生模組，用於產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
較佳的，所述文件產生模組包括：
文件產生組件加載子模組，用於加載文件產生組件；
文件產生子模組，用於透過所述文件產生組件，產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
本申請實施例還公開了一種裝置，包括：
一個或多個處理器；和
其上儲存有指令的一個或多個機器可讀媒體，當由所述一個或多個處理器執行時，使得所述裝置執行如上所述的一個或多個的方法。
本申請實施例還公開了一個或多個機器可讀媒體，其上儲存有指令，當由一個或多個處理器執行時，使得所述處理器執行如權上所述的一個或多個的方法。
本申請實施例包括以下優點：
在本申請實施例中，透過在Web端加載用於模擬React Native運行環境的相容碼，可以實現在展示React Native組件碼和相應的文件資料的同時，展示React Native組件碼的預覽效果。
為了解決上述問題，本申請實施例公開了一種文件展示方法，包括：
在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；
在所述Web端將所述Markdown文件轉換為Html網頁文件；
在所述Web端加載用於模擬React Native運行環境的相容碼；
在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
較佳的，還包括：
解析所述Markdown文件中的元資料；
所述在所述Web端將所述Markdown文件轉換為Html網頁文件的步驟包括：
加載轉換組件；
透過所述轉換組件採用所述元資料產生Html網頁文件。
較佳的，還包括：
產生指定所述元資料的設定檔；
將所述設定檔傳入所述轉換組件；
所述透過所述轉換組件採用所述元資料產生Html網頁文件的步驟包括：
透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生Html網頁文件。
較佳的，所述在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用React Native組件碼在所述Html網頁文件中展示預覽效果的步驟包括：
在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼；
在所述Web端展示所述Html網頁文件，並採用所述適配所述Web端的碼在所述Html網頁文件中展示預覽效果。
較佳的，在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼的步驟包括：
在所述Web端基於所述相容碼模擬的React Native運行環境下，透過所述轉換組件將所述React Native組件碼轉換為適配所述Web端的碼。
較佳的，所述解析所述Markdown文件中的元資料的步驟包括：
加載解析組件；
透過所述解析組件，解析所述Markdown文件中的元資料。
較佳的，所述產生指定所述元資料的設定檔的步驟包括：
透過所述解析組件產生指定所述元資料的設定檔。
較佳的，還包括：
建立多個所述Html網頁文件的之間的鏈接關係。
較佳的，所述Markdown文件透過如下方式產生：
加載組件庫；所述組件庫中包括多個React Native組件碼；
產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
較佳的，所述產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件的步驟包括：
加載文件產生組件；
透過所述文件產生組件，產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
本申請實施例還公開了一種文件展示方法，包括：
在Web端獲取第一格式文件；所述第一格式文件包含有前端組件碼；
在所述Web端將所述第一格式文件轉換為第二格式文件；
在所述Web端加載用於模擬前端運行環境的相容碼；
在所述Web端基於所述相容碼模擬的前端運行環境下，展示所述第二格式文件，並採用所述前端組件碼在所述第二格式文件中展示預覽效果。
較佳的，還包括：
解析所述第一格式文件中的元資料；
所述在所述Web端將所述第一格式文件轉換為第二格式文件的步驟包括：
加載轉換組件；
透過所述轉換組件採用所述元資料產生第二格式文件。
較佳的，所述在所述Web端基於所述相容碼模擬的前端運行環境下，展示所述第二格式文件，並採用所述前端組件碼在所述第二格式文件中展示預覽效果的步驟包括：
在所述Web端基於所述相容碼模擬的前端運行環境下，將所述前端組件碼轉換為適配所述Web端的碼；
在所述Web端展示所述第二格式文件，並採用所述適配所述Web端的碼在所述第二格式文件中展示預覽效果。
較佳的，在所述Web端基於所述相容碼模擬的前端運行環境下，將所述前端組件碼轉換為適配所述Web端的碼的步驟包括：
在所述Web端基於所述相容碼模擬的前端運行環境下，透過所述轉換組件將所述前端組件碼轉換為適配所述Web端的碼。
本申請實施例還公開了一種文件展示裝置，包括：
文件獲取模組，用於在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；
文件轉換模組，用於在所述Web端將所述Markdown文件轉換為Html網頁文件；
相容碼加載模組，用於在所述Web端加載用於模擬React Native運行環境的相容碼；
展示模組，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
較佳的，還包括：
解析模組，用於解析所述Markdown文件中的元資料；
所述文件轉換模組包括：
轉換組件加載子模組，用於加載轉換組件；
轉換子模組，用於透過所述轉換組件採用所述元資料產生Html網頁文件。
較佳的，還包括：
設定檔產生模組，用於產生指定所述元資料的設定檔；
設定檔傳入模組，用於將所述設定檔傳入所述轉換組件；
所述透過所述轉換組件採用所述元資料產生Html網頁文件的步驟包括：
頁面文件產生單元，用於透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生Html網頁文件。
較佳的，所述展示模組包括：
碼轉換子模組，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼；
展示子模組，用於在所述Web端展示所述Html網頁文件，並採用所述適配所述Web端的碼在所述Html網頁文件中展示預覽效果。
較佳的，所述碼轉換子模組包括：
碼轉換單元，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，透過所述轉換組件將所述React Native組件碼轉換為適配所述Web端的碼。
較佳的，所述解析模組包括：
解析組件加載子模組，用於加載解析組件；
解析子模組，用於透過所述解析組件，解析所述Markdown文件中的元資料。
較佳的，所述設定檔產生模組包括：
設定檔產生子模組，用於透過所述解析組件產生指定所述元資料的設定檔。
較佳的，還包括：
連接關係建立模組，用於建立多個所述Html網頁文件的之間的鏈接關係。
較佳的，所述Markdown文件透過如下模組產生：
組件庫加載模組，用於加載組件庫；所述組件庫中包括多個React Native組件碼；
文件產生模組，用於產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
較佳的，所述文件產生模組包括：
文件產生組件加載子模組，用於加載文件產生組件；
文件產生子模組，用於透過所述文件產生組件，產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
本申請實施例還公開了一種裝置，包括：
一個或多個處理器；和
其上儲存有指令的一個或多個機器可讀媒體，當由所述一個或多個處理器執行時，使得所述裝置執行如上所述的一個或多個的方法。
本申請實施例還公開了一個或多個機器可讀媒體，其上儲存有指令，當由一個或多個處理器執行時，使得所述處理器執行如權上所述的一個或多個的方法。
本申請實施例包括以下優點：
在本申請實施例中，透過在Web端加載用於模擬React Native運行環境的相容碼，可以實現在展示React Native組件碼和相應的文件資料的同時，展示React Native組件碼的預覽效果。
為使本申請的上述目的、特徵和優點能夠更加明顯易懂，下面結合附圖和具體實施方式對本申請作進一步詳細的說明。
參照圖1，示出了本申請的一種文件展示方法實施例一的步驟流程圖，具體可以包括如下步驟：
步驟101，在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；
Web端可以是瀏覽器端或是其他提供網頁存取功能的用戶端。
對於開發者而言，為組件編寫說明文件是必不可少的工作。文件的編寫可以採樣多種形式，在本申請實施例中採用Markdown來編寫文件。
Markdown是一種可以使用普通文字編輯器編寫的標記語言。Markdown具有簡單的語法規則，其允許使用易讀易寫的純文字格式編寫文件，並且Markdown文件能轉換成Html網頁文件、pdf文件，方便其他使用者打開。
在本申請實施例中，Markdown文件包含有React Native組件碼和用於說明React Native組件碼的文件資料。
在實際中，每個Markdown文件都可以儲存在獨立的目錄中。將碼和文件資料放在一個目錄中，可以方便文件的維護者同時維護碼和文件資料。其中，文件資料可以包括：標題、屬性等資訊。
在實際中，往往需要對多個React Native組件產生說明文件。例如，對React Native組件庫中的所有React Native組件產生說明文件。
在本申請實施例中，Markdown文件可以透過如下步驟產生：
加載組件庫；所述組件庫中包括多個React Native組件碼；產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
具體的，所述產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件可以包括：
加載文件產生組件；透過所述文件產生組件，產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
文件產生組件是開發者開發的用於產生React Native組件碼的文件資料的組件，文件產生組件在掃描React Native組件碼後，即可產生相應的文件資料。
步驟102，在所述Web端將所述Markdown文件轉換為Html網頁文件；
為了方便將Markdown文件轉換成Html網頁文件，可以開發轉換組件來進行轉換。對於使用者而言，可以在Web端安裝其他開發者開發的轉換組件。
在本申請實施例中，Markdown文件轉換為Html網頁文件後，Markdown文件中的React Native組件碼和文件資料會被保留。因此，仍然可以在Html頁面中瀏覽React Native組件碼和相應的文件資料。
步驟103，在所述Web端加載用於模擬React Native運行環境的相容碼；
在實際中，React Native 碼只相容兩個平臺(iOS 和 Android)，並沒有相容 Web 端存取。為了能在Web端實現React Native碼，可以開發用於在Web端模擬React Native運行環境的相容碼。
React Native運行環境也可以稱為React Native框架，React Native運行環境包含了React Native組件碼運行所依賴的函數和參數。
在Web端加載該相容碼後，即可以實現在Web端運行React Native組件碼。
步驟104，在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
Web端模擬出React Native運行環境後，在Web端啟動Html網頁文件即可展示Html網頁文件中的React Native碼和用於描述React Native碼的文件資料。同時，在模擬出的React Native運行環境下，可以實現React Native組件碼的運行，從而展示React Native組件碼的預覽效果。
在本申請實施例中，透過在Web端加載用於模擬React Native運行環境的相容碼，可以實現在展示React Native組件碼和相應的文件資料的同時，展示React Native組件碼的預覽效果。
參照圖2，示出了本申請的一種文件展示方法實施例二的步驟流程圖，具體可以包括如下步驟：
步驟201，在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；
步驟202，解析所述Markdown文件中的元資料；所述元資料包括：文件資料以及React Native組件碼；
在本申請實施例中，所述步驟202可以包括如下子步驟：
子步驟S11，加載解析組件；
解析組件是由開發者開發的用於解析出Markdown文件中的碼和文件資料的組件。
在實際中，解析組件可以包括多個相互配合來實現分析的組件。
子步驟S12，透過所述解析組件，解析所述Markdown文件中的元資料。
解析得到的元資料，可以按結構化的形式儲存(例如，樹結構)，從而方便其他組件或系統使用這些元資料。
步驟203，加載轉換組件；
轉換組件是由開發者開發的用於將Markdown文件轉換為Html網頁文件。
在實際中，轉換組件可以包括多個相互配合來實現轉換的組件。
步驟204，透過所述轉換組件採用所述元資料產生Html網頁文件；
在本申請實施例中，所述的方法還可以包括：產生指定所述元資料的設定檔；將所述設定檔傳入所述轉換組件；
具體的，可以由解析組件在解析出元資料後，產生指定所述元資料的設定檔，並將設定檔傳入到轉換組件。
所述步驟204可以為：透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生Html頁面。
為了使轉換組件能更方便、更準確的獲取到元資料，可用透過設定檔來指定元資料。轉換組件可以根據設定檔，獲取指定的元資料。
在本申請實施例中，所述的方法還可以包括：建立多個所述Html網頁文件的之間的鏈接關係。
透過建立多個所述Html網頁文件的之間的鏈接關係，就可以實現Html網頁文件之間的跳轉。
具體的，每個Markdown文件可以獨立放在一個目錄中，多個目錄對應的就是多個站點，多個目錄下的Markdown文件可以使用一種相對路徑格式相互引用，實現了站點間的跳轉。
步驟205，在所述Web端加載用於模擬React Native運行環境的相容碼；
步驟206，在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
在本申請實施例中，所述步驟206可以包括如下子步驟：
子步驟S21，在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼；
具體的，React Native組件實際使用的是.jsx碼，而在Web端運行的則是.js碼。相容碼的實際作用就提供將.jsx碼轉換為.js碼的方法。
透過相容碼提供的轉換方法，可以將React Native組件所用到的.jsx碼都轉換為.js碼。
在本申請實施例中，所述子步驟S21可以包括為：在所述Web端基於所述相容碼模擬的React Native運行環境下，透過所述轉換組件將所述React Native組件碼轉換為適配所述Web端的碼。
具體的，可以透過轉換組件呼叫相容碼提供的轉換方法，將React Native組件碼轉換為適配Web端的碼。
子步驟S22，在所述Web端展示所述Html網頁文件，並採用所述適配所述Web端的碼在所述Html網頁文件中展示預覽效果。
在本申請實施例中，透過在Web端加載用於模擬React Native運行環境的相容碼，可以實現在展示React Native組件碼和相應的文件資料的同時，展示React Native組件碼的預覽效果。
參照圖3所示，為本申請實施例中實現在Web端預覽文件的示意圖。
對於Markdown文件和Markdown文件中.jsx格式的React Native組件碼，可以採用分析組件(例如，解析器parser)進行分析，得到結構化的元資料meta.json。
在Web端加載用於模擬React Native運行環境的相容碼，以在Web端模擬React Native運行環境。
在模擬的React Native運行環境下，透過轉換組件將元資料meta.json使用相容碼轉換為Html網頁文件，並在Html網頁文件中展示React Native組件碼的預覽效果。
參照圖4示出了本申請的一種文件展示方法實施例三的步驟流程圖，具體可以包括如下步驟：
步驟401，在Web端獲取第一格式文件；所述第一格式文件包含有前端組件碼；
在本申請實施例中，第一格式文件可以為Markdown文件；前端組件碼可以為React Native組件碼、Weex組件碼。Weex 是一個使用 Web 開發原生應用的框架。Weex組件碼是基於Weex框架編寫的組件碼。
步驟402，在所述Web端將所述第一格式文件轉換為第二格式文件；
第二格式文件可以為Html網頁文件。
在本申請實施例中，所述的方法還可以包括：解析所述第一格式文件中的元資料；
所述步驟402可以包括：加載轉換組件；透過所述轉換組件採用所述元資料產生第二格式文件。
在本申請實施例中，所述的方法還可以包括：產生指定所述元資料的設定檔；將所述設定檔傳入所述轉換組件；
所述透過所述轉換組件採用所述元資料產生第二格式文件的步驟可以包括：
透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生第二格式文件。
在本申請實施例中，所述解析所述第一格式文件中的元資料的步驟包括：加載解析組件；透過所述解析組件，解析所述第一格式文件中的元資料。
在本申請實施例中，所述產生指定所述元資料的設定檔的步驟包括：透過所述解析組件產生指定所述元資料的設定檔。
在本申請實施例中，所述的方法還可以包括：建立多個所述第二格式文件的之間的鏈接關係。
在本申請實施例中，所述第二格式文件透過如下方式產生：
加載組件庫；所述組件庫中包括多個前端組件碼；產生針對所述前端組件碼的文件資料，並採用所述文件資料和所述前端組件碼產生第二格式文件。
在本申請實施例中，所述產生針對所述前端組件碼的文件資料，並採用所述文件資料和所述前端組件碼產生第二格式文件的步驟包括：
加載文件產生組件；透過所述文件產生組件，產生針對所述前端組件碼的文件資料，並採用所述文件資料和所述前端組件碼產生第二格式文件。
步驟403，在所述Web端加載用於模擬前端運行環境的相容碼；
前端運行環境包含了前端組件碼運行所依賴的函數和參數。在Web端加載該相容碼後，即可以實現在Web端運行前端組件碼。
步驟404，在所述Web端基於所述相容碼模擬的前端運行環境下，展示所述第二格式文件，並採用所述前端組件碼在所述第二格式文件中展示預覽效果。
Web端模擬出前端運行環境後，在Web端啟動第二格式文件即可展示第二格式文件中的前端組件碼和用於描述前端組件碼的文件資料。同時，在模擬出的前端運行環境下，可以實現前端組件碼的運行，從而展示前端組件碼的預覽效果。
在本申請實施例中，透過在Web端加載用於模擬前端運行環境的相容碼，可以實現在展示前端組件碼和相應的文件資料的同時，展示前端組件碼的預覽效果。
在本申請實施例中，所述步驟404可以包括：
在所述Web端基於所述相容碼模擬的前端運行環境下，將所述前端組件碼轉換為適配所述Web端的碼；
在所述Web端展示所述第二格式文件，並採用所述適配所述Web端的碼在所述第二格式文件中展示預覽效果。
在本申請實施例中，在所述Web端基於所述相容碼模擬的前端運行環境下，將所述前端組件碼轉換為適配所述Web端的碼的步驟包括：
在所述Web端基於所述相容碼模擬的前端運行環境下，透過所述轉換組件將所述前端組件碼轉換為適配所述Web端的碼。
需要說明的是，對於方法實施例，為了簡單描述，故將其都表述為一系列的動作組合，但是本領域技術人員應該知悉，本申請實施例並不受所描述的動作順序的限制，因為依據本申請實施例，某些步驟可以採用其他順序或者同時進行。其次，本領域技術人員也應該知悉，說明書中所描述的實施例均屬於較佳實施例，所涉及的動作並不一定是本申請實施例所必須的。
參照圖5，示出了本申請的一種文件展示裝置實施例的結構方塊圖，具體可以包括如下模組：
文件獲取模組501，用於在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；
文件轉換模組502，用於在所述Web端將所述Markdown文件轉換為Html網頁文件；
相容碼加載模組503，用於在所述Web端加載用於模擬React Native運行環境的相容碼；
展示模組504，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
在本申請實施例中，所述的裝置還可以包括：
解析模組，用於解析所述Markdown文件中的元資料；
所述文件轉換模組502可以包括：
轉換組件加載子模組，用於加載轉換組件；
轉換子模組，用於透過所述轉換組件採用所述元資料產生Html網頁文件。
在本申請實施例中，所述的裝置還可以包括：
設定檔產生模組，用於產生指定所述元資料的設定檔；
設定檔傳入模組，用於將所述設定檔傳入所述轉換組件；
所述透過所述轉換組件採用所述元資料產生Html網頁文件的步驟包括：
頁面文件產生單元，用於透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生Html網頁文件。
在本申請實施例中，所述展示模組504可以包括：
碼轉換子模組，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼；
展示子模組，用於在所述Web端展示所述Html網頁文件，並採用所述適配所述Web端的碼在所述Html網頁文件中展示預覽效果。
在本申請實施例中，所述碼轉換子模組可以包括：
碼轉換單元，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，透過所述轉換組件將所述React Native組件碼轉換為適配所述Web端的碼。
在本申請實施例中，所述解析模組可以包括：
解析組件加載子模組，用於加載解析組件；
解析子模組，用於透過所述解析組件，解析所述Markdown文件中的元資料。
在本申請實施例中，所述設定檔產生模組可以包括：
設定檔產生子模組，用於透過所述解析組件產生指定所述元資料的設定檔。
在本申請實施例中，所述的裝置還可以包括：
連接關係建立模組，用於建立多個所述Html網頁文件的之間的鏈接關係。
在本申請實施例中，所述Markdown文件透過如下模組產生：
組件庫加載模組，用於加載組件庫；所述組件庫中包括多個React Native組件碼；
文件產生模組，用於產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
在本申請實施例中，所述文件產生模組包括：
文件產生組件加載子模組，用於加載文件產生組件；
文件產生子模組，用於透過所述文件產生組件，產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
對於裝置實施例而言，由於其與方法實施例基本相似，所以描述的比較簡單，相關之處參見方法實施例的部分說明即可。
本申請實施例還提供了一種裝置，包括：
一個或多個處理器；和
其上儲存有指令的一個或多個機器可讀媒體，當由所述一個或多個處理器執行時，使得所述裝置執行本申請實施例所述的方法。
本申請實施例還提供了一個或多個機器可讀媒體，其上儲存有指令，當由一個或多個處理器執行時，使得所述處理器執行本申請實施例所述的方法。
本說明書中的各個實施例均採用循序的方式描述，每個實施例重點說明的都是與其他實施例的不同之處，各個實施例之間相同相似的部分互相參見即可。
本領域內的技術人員應明白，本申請實施例的實施例可提供為方法、裝置、或電腦程式產品。因此，本申請實施例可採用完全硬體實施例、完全軟體實施例、或結合軟體和硬體態樣的實施例的形式。而且，本申請實施例可採用在一個或多個其中包含有電腦可用程式碼的電腦可用儲存媒體(包括但不限於磁碟記憶體、CD-ROM、光學記憶體等)上實施的電腦程式產品的形式。
本申請實施例是參照根據本申請實施例的方法、終端設備(系統)、和電腦程式產品的流程圖及/或方塊圖來描述的。應理解可由電腦程式指令實現流程圖及/或方塊圖中的每一流程及/或方塊、以及流程圖及/或方塊圖中的流程及/或方塊的結合。可提供這些電腦程式指令到通用電腦、專用電腦、嵌入式處理機或其他可程式資料處理終端設備的處理器以產生一個機器，使得透過電腦或其他可程式資料處理終端設備的處理器執行的指令產生用於實現在流程圖一個流程或多個流程及/或方塊圖一個方塊或多個方塊中指定的功能的裝置。
這些電腦程式指令也可儲存在能引導電腦或其他可程式資料處理終端設備以特定方式工作的電腦可讀記憶體中，使得儲存在該電腦可讀記憶體中的指令產生包括指令裝置的製造品，該指令裝置實現在流程圖一個流程或多個流程及/或方塊圖一個方塊或多個方塊中指定的功能。
這些電腦程式指令也可裝載到電腦或其他可程式資料處理終端設備上，使得在電腦或其他可程式終端設備上執行一系列操作步驟以產生電腦實現的處理，從而在電腦或其他可程式終端設備上執行的指令提供用於實現在流程圖一個流程或多個流程及/或方塊圖一個方塊或多個方塊中指定的功能的步驟。
儘管已描述了本申請實施例的較佳實施例，但本領域內的技術人員一旦得知了基本進步性概念，則可對這些實施例做出另外的變更和修改。所以，所附申請專利範圍意欲解釋為包括較佳實施例以及落入本申請實施例範圍的所有變更和修改。
最後，還需要說明的是，在本文中，諸如第一和第二等之類的關係術語僅僅用來將一個實體或者操作與另一個實體或操作區分開來，而不一定要求或者暗示這些實體或操作之間存在任何這種實際的關係或者順序。而且，術語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者終端設備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者終端設備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，並不排除在包括所述要素的過程、方法、物品或者終端設備中還存在另外的相同要素。
以上對本申請所提供的一種文件展示方法和一種文件展示裝置，進行了詳細介紹，本文中應用了具體個例對本申請的原理及實施方式進行了闡述，以上實施例的說明只是用於幫助理解本申請的方法及其核心思想；同時，對於本領域的一般技術人員，依據本申請的思想，在具體實施方式及應用範圍上均會有改變之處，綜上所述，本說明書內容不應理解為對本申請的限制。
參照圖1，示出了本申請的一種文件展示方法實施例一的步驟流程圖，具體可以包括如下步驟：
步驟101，在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；
Web端可以是瀏覽器端或是其他提供網頁存取功能的用戶端。
對於開發者而言，為組件編寫說明文件是必不可少的工作。文件的編寫可以採樣多種形式，在本申請實施例中採用Markdown來編寫文件。
Markdown是一種可以使用普通文字編輯器編寫的標記語言。Markdown具有簡單的語法規則，其允許使用易讀易寫的純文字格式編寫文件，並且Markdown文件能轉換成Html網頁文件、pdf文件，方便其他使用者打開。
在本申請實施例中，Markdown文件包含有React Native組件碼和用於說明React Native組件碼的文件資料。
在實際中，每個Markdown文件都可以儲存在獨立的目錄中。將碼和文件資料放在一個目錄中，可以方便文件的維護者同時維護碼和文件資料。其中，文件資料可以包括：標題、屬性等資訊。
在實際中，往往需要對多個React Native組件產生說明文件。例如，對React Native組件庫中的所有React Native組件產生說明文件。
在本申請實施例中，Markdown文件可以透過如下步驟產生：
加載組件庫；所述組件庫中包括多個React Native組件碼；產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
具體的，所述產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件可以包括：
加載文件產生組件；透過所述文件產生組件，產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
文件產生組件是開發者開發的用於產生React Native組件碼的文件資料的組件，文件產生組件在掃描React Native組件碼後，即可產生相應的文件資料。
步驟102，在所述Web端將所述Markdown文件轉換為Html網頁文件；
為了方便將Markdown文件轉換成Html網頁文件，可以開發轉換組件來進行轉換。對於使用者而言，可以在Web端安裝其他開發者開發的轉換組件。
在本申請實施例中，Markdown文件轉換為Html網頁文件後，Markdown文件中的React Native組件碼和文件資料會被保留。因此，仍然可以在Html頁面中瀏覽React Native組件碼和相應的文件資料。
步驟103，在所述Web端加載用於模擬React Native運行環境的相容碼；
在實際中，React Native 碼只相容兩個平臺(iOS 和 Android)，並沒有相容 Web 端存取。為了能在Web端實現React Native碼，可以開發用於在Web端模擬React Native運行環境的相容碼。
React Native運行環境也可以稱為React Native框架，React Native運行環境包含了React Native組件碼運行所依賴的函數和參數。
在Web端加載該相容碼後，即可以實現在Web端運行React Native組件碼。
步驟104，在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
Web端模擬出React Native運行環境後，在Web端啟動Html網頁文件即可展示Html網頁文件中的React Native碼和用於描述React Native碼的文件資料。同時，在模擬出的React Native運行環境下，可以實現React Native組件碼的運行，從而展示React Native組件碼的預覽效果。
在本申請實施例中，透過在Web端加載用於模擬React Native運行環境的相容碼，可以實現在展示React Native組件碼和相應的文件資料的同時，展示React Native組件碼的預覽效果。
參照圖2，示出了本申請的一種文件展示方法實施例二的步驟流程圖，具體可以包括如下步驟：
步驟201，在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；
步驟202，解析所述Markdown文件中的元資料；所述元資料包括：文件資料以及React Native組件碼；
在本申請實施例中，所述步驟202可以包括如下子步驟：
子步驟S11，加載解析組件；
解析組件是由開發者開發的用於解析出Markdown文件中的碼和文件資料的組件。
在實際中，解析組件可以包括多個相互配合來實現分析的組件。
子步驟S12，透過所述解析組件，解析所述Markdown文件中的元資料。
解析得到的元資料，可以按結構化的形式儲存(例如，樹結構)，從而方便其他組件或系統使用這些元資料。
步驟203，加載轉換組件；
轉換組件是由開發者開發的用於將Markdown文件轉換為Html網頁文件。
在實際中，轉換組件可以包括多個相互配合來實現轉換的組件。
步驟204，透過所述轉換組件採用所述元資料產生Html網頁文件；
在本申請實施例中，所述的方法還可以包括：產生指定所述元資料的設定檔；將所述設定檔傳入所述轉換組件；
具體的，可以由解析組件在解析出元資料後，產生指定所述元資料的設定檔，並將設定檔傳入到轉換組件。
所述步驟204可以為：透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生Html頁面。
為了使轉換組件能更方便、更準確的獲取到元資料，可用透過設定檔來指定元資料。轉換組件可以根據設定檔，獲取指定的元資料。
在本申請實施例中，所述的方法還可以包括：建立多個所述Html網頁文件的之間的鏈接關係。
透過建立多個所述Html網頁文件的之間的鏈接關係，就可以實現Html網頁文件之間的跳轉。
具體的，每個Markdown文件可以獨立放在一個目錄中，多個目錄對應的就是多個站點，多個目錄下的Markdown文件可以使用一種相對路徑格式相互引用，實現了站點間的跳轉。
步驟205，在所述Web端加載用於模擬React Native運行環境的相容碼；
步驟206，在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
在本申請實施例中，所述步驟206可以包括如下子步驟：
子步驟S21，在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼；
具體的，React Native組件實際使用的是.jsx碼，而在Web端運行的則是.js碼。相容碼的實際作用就提供將.jsx碼轉換為.js碼的方法。
透過相容碼提供的轉換方法，可以將React Native組件所用到的.jsx碼都轉換為.js碼。
在本申請實施例中，所述子步驟S21可以包括為：在所述Web端基於所述相容碼模擬的React Native運行環境下，透過所述轉換組件將所述React Native組件碼轉換為適配所述Web端的碼。
具體的，可以透過轉換組件呼叫相容碼提供的轉換方法，將React Native組件碼轉換為適配Web端的碼。
子步驟S22，在所述Web端展示所述Html網頁文件，並採用所述適配所述Web端的碼在所述Html網頁文件中展示預覽效果。
在本申請實施例中，透過在Web端加載用於模擬React Native運行環境的相容碼，可以實現在展示React Native組件碼和相應的文件資料的同時，展示React Native組件碼的預覽效果。
參照圖3所示，為本申請實施例中實現在Web端預覽文件的示意圖。
對於Markdown文件和Markdown文件中.jsx格式的React Native組件碼，可以採用分析組件(例如，解析器parser)進行分析，得到結構化的元資料meta.json。
在Web端加載用於模擬React Native運行環境的相容碼，以在Web端模擬React Native運行環境。
在模擬的React Native運行環境下，透過轉換組件將元資料meta.json使用相容碼轉換為Html網頁文件，並在Html網頁文件中展示React Native組件碼的預覽效果。
參照圖4示出了本申請的一種文件展示方法實施例三的步驟流程圖，具體可以包括如下步驟：
步驟401，在Web端獲取第一格式文件；所述第一格式文件包含有前端組件碼；
在本申請實施例中，第一格式文件可以為Markdown文件；前端組件碼可以為React Native組件碼、Weex組件碼。Weex 是一個使用 Web 開發原生應用的框架。Weex組件碼是基於Weex框架編寫的組件碼。
步驟402，在所述Web端將所述第一格式文件轉換為第二格式文件；
第二格式文件可以為Html網頁文件。
在本申請實施例中，所述的方法還可以包括：解析所述第一格式文件中的元資料；
所述步驟402可以包括：加載轉換組件；透過所述轉換組件採用所述元資料產生第二格式文件。
在本申請實施例中，所述的方法還可以包括：產生指定所述元資料的設定檔；將所述設定檔傳入所述轉換組件；
所述透過所述轉換組件採用所述元資料產生第二格式文件的步驟可以包括：
透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生第二格式文件。
在本申請實施例中，所述解析所述第一格式文件中的元資料的步驟包括：加載解析組件；透過所述解析組件，解析所述第一格式文件中的元資料。
在本申請實施例中，所述產生指定所述元資料的設定檔的步驟包括：透過所述解析組件產生指定所述元資料的設定檔。
在本申請實施例中，所述的方法還可以包括：建立多個所述第二格式文件的之間的鏈接關係。
在本申請實施例中，所述第二格式文件透過如下方式產生：
加載組件庫；所述組件庫中包括多個前端組件碼；產生針對所述前端組件碼的文件資料，並採用所述文件資料和所述前端組件碼產生第二格式文件。
在本申請實施例中，所述產生針對所述前端組件碼的文件資料，並採用所述文件資料和所述前端組件碼產生第二格式文件的步驟包括：
加載文件產生組件；透過所述文件產生組件，產生針對所述前端組件碼的文件資料，並採用所述文件資料和所述前端組件碼產生第二格式文件。
步驟403，在所述Web端加載用於模擬前端運行環境的相容碼；
前端運行環境包含了前端組件碼運行所依賴的函數和參數。在Web端加載該相容碼後，即可以實現在Web端運行前端組件碼。
步驟404，在所述Web端基於所述相容碼模擬的前端運行環境下，展示所述第二格式文件，並採用所述前端組件碼在所述第二格式文件中展示預覽效果。
Web端模擬出前端運行環境後，在Web端啟動第二格式文件即可展示第二格式文件中的前端組件碼和用於描述前端組件碼的文件資料。同時，在模擬出的前端運行環境下，可以實現前端組件碼的運行，從而展示前端組件碼的預覽效果。
在本申請實施例中，透過在Web端加載用於模擬前端運行環境的相容碼，可以實現在展示前端組件碼和相應的文件資料的同時，展示前端組件碼的預覽效果。
在本申請實施例中，所述步驟404可以包括：
在所述Web端基於所述相容碼模擬的前端運行環境下，將所述前端組件碼轉換為適配所述Web端的碼；
在所述Web端展示所述第二格式文件，並採用所述適配所述Web端的碼在所述第二格式文件中展示預覽效果。
在本申請實施例中，在所述Web端基於所述相容碼模擬的前端運行環境下，將所述前端組件碼轉換為適配所述Web端的碼的步驟包括：
在所述Web端基於所述相容碼模擬的前端運行環境下，透過所述轉換組件將所述前端組件碼轉換為適配所述Web端的碼。
需要說明的是，對於方法實施例，為了簡單描述，故將其都表述為一系列的動作組合，但是本領域技術人員應該知悉，本申請實施例並不受所描述的動作順序的限制，因為依據本申請實施例，某些步驟可以採用其他順序或者同時進行。其次，本領域技術人員也應該知悉，說明書中所描述的實施例均屬於較佳實施例，所涉及的動作並不一定是本申請實施例所必須的。
參照圖5，示出了本申請的一種文件展示裝置實施例的結構方塊圖，具體可以包括如下模組：
文件獲取模組501，用於在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼；
文件轉換模組502，用於在所述Web端將所述Markdown文件轉換為Html網頁文件；
相容碼加載模組503，用於在所述Web端加載用於模擬React Native運行環境的相容碼；
展示模組504，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
在本申請實施例中，所述的裝置還可以包括：
解析模組，用於解析所述Markdown文件中的元資料；
所述文件轉換模組502可以包括：
轉換組件加載子模組，用於加載轉換組件；
轉換子模組，用於透過所述轉換組件採用所述元資料產生Html網頁文件。
在本申請實施例中，所述的裝置還可以包括：
設定檔產生模組，用於產生指定所述元資料的設定檔；
設定檔傳入模組，用於將所述設定檔傳入所述轉換組件；
所述透過所述轉換組件採用所述元資料產生Html網頁文件的步驟包括：
頁面文件產生單元，用於透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生Html網頁文件。
在本申請實施例中，所述展示模組504可以包括：
碼轉換子模組，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼；
展示子模組，用於在所述Web端展示所述Html網頁文件，並採用所述適配所述Web端的碼在所述Html網頁文件中展示預覽效果。
在本申請實施例中，所述碼轉換子模組可以包括：
碼轉換單元，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，透過所述轉換組件將所述React Native組件碼轉換為適配所述Web端的碼。
在本申請實施例中，所述解析模組可以包括：
解析組件加載子模組，用於加載解析組件；
解析子模組，用於透過所述解析組件，解析所述Markdown文件中的元資料。
在本申請實施例中，所述設定檔產生模組可以包括：
設定檔產生子模組，用於透過所述解析組件產生指定所述元資料的設定檔。
在本申請實施例中，所述的裝置還可以包括：
連接關係建立模組，用於建立多個所述Html網頁文件的之間的鏈接關係。
在本申請實施例中，所述Markdown文件透過如下模組產生：
組件庫加載模組，用於加載組件庫；所述組件庫中包括多個React Native組件碼；
文件產生模組，用於產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
在本申請實施例中，所述文件產生模組包括：
文件產生組件加載子模組，用於加載文件產生組件；
文件產生子模組，用於透過所述文件產生組件，產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
對於裝置實施例而言，由於其與方法實施例基本相似，所以描述的比較簡單，相關之處參見方法實施例的部分說明即可。
本申請實施例還提供了一種裝置，包括：
一個或多個處理器；和
其上儲存有指令的一個或多個機器可讀媒體，當由所述一個或多個處理器執行時，使得所述裝置執行本申請實施例所述的方法。
本申請實施例還提供了一個或多個機器可讀媒體，其上儲存有指令，當由一個或多個處理器執行時，使得所述處理器執行本申請實施例所述的方法。
本說明書中的各個實施例均採用循序的方式描述，每個實施例重點說明的都是與其他實施例的不同之處，各個實施例之間相同相似的部分互相參見即可。
本領域內的技術人員應明白，本申請實施例的實施例可提供為方法、裝置、或電腦程式產品。因此，本申請實施例可採用完全硬體實施例、完全軟體實施例、或結合軟體和硬體態樣的實施例的形式。而且，本申請實施例可採用在一個或多個其中包含有電腦可用程式碼的電腦可用儲存媒體(包括但不限於磁碟記憶體、CD-ROM、光學記憶體等)上實施的電腦程式產品的形式。
本申請實施例是參照根據本申請實施例的方法、終端設備(系統)、和電腦程式產品的流程圖及/或方塊圖來描述的。應理解可由電腦程式指令實現流程圖及/或方塊圖中的每一流程及/或方塊、以及流程圖及/或方塊圖中的流程及/或方塊的結合。可提供這些電腦程式指令到通用電腦、專用電腦、嵌入式處理機或其他可程式資料處理終端設備的處理器以產生一個機器，使得透過電腦或其他可程式資料處理終端設備的處理器執行的指令產生用於實現在流程圖一個流程或多個流程及/或方塊圖一個方塊或多個方塊中指定的功能的裝置。
這些電腦程式指令也可儲存在能引導電腦或其他可程式資料處理終端設備以特定方式工作的電腦可讀記憶體中，使得儲存在該電腦可讀記憶體中的指令產生包括指令裝置的製造品，該指令裝置實現在流程圖一個流程或多個流程及/或方塊圖一個方塊或多個方塊中指定的功能。
這些電腦程式指令也可裝載到電腦或其他可程式資料處理終端設備上，使得在電腦或其他可程式終端設備上執行一系列操作步驟以產生電腦實現的處理，從而在電腦或其他可程式終端設備上執行的指令提供用於實現在流程圖一個流程或多個流程及/或方塊圖一個方塊或多個方塊中指定的功能的步驟。
儘管已描述了本申請實施例的較佳實施例，但本領域內的技術人員一旦得知了基本進步性概念，則可對這些實施例做出另外的變更和修改。所以，所附申請專利範圍意欲解釋為包括較佳實施例以及落入本申請實施例範圍的所有變更和修改。
最後，還需要說明的是，在本文中，諸如第一和第二等之類的關係術語僅僅用來將一個實體或者操作與另一個實體或操作區分開來，而不一定要求或者暗示這些實體或操作之間存在任何這種實際的關係或者順序。而且，術語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者終端設備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者終端設備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，並不排除在包括所述要素的過程、方法、物品或者終端設備中還存在另外的相同要素。
以上對本申請所提供的一種文件展示方法和一種文件展示裝置，進行了詳細介紹，本文中應用了具體個例對本申請的原理及實施方式進行了闡述，以上實施例的說明只是用於幫助理解本申請的方法及其核心思想；同時，對於本領域的一般技術人員，依據本申請的思想，在具體實施方式及應用範圍上均會有改變之處，綜上所述，本說明書內容不應理解為對本申請的限制。
101‧‧‧步驟
102‧‧‧步驟
103‧‧‧步驟
104‧‧‧步驟
201‧‧‧步驟
202‧‧‧步驟
203‧‧‧步驟
204‧‧‧步驟
205‧‧‧步驟
206‧‧‧步驟
401‧‧‧步驟
402‧‧‧步驟
403‧‧‧步驟
404‧‧‧步驟
501‧‧‧文件獲取模組
502‧‧‧文件轉換模組
503‧‧‧相容碼加載模組
504‧‧‧展示模組
圖1是本申請的一種文件展示方法實施例一的步驟流程圖；
圖2是本申請的一種文件展示方法實施例二的步驟流程圖；
圖3是本申請實施例中實現在Web端預覽文件的示意圖；
圖4是本申請的一種文件展示方法實施例三的步驟流程圖；
圖5是本申請的一種文件展示裝置實施例的結構方塊圖。
Claims (26)
- 一種文件展示方法，其特徵在於，包括： 在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼； 在所述Web端將所述Markdown文件轉換為Html網頁文件； 在所述Web端加載用於模擬React Native運行環境的相容碼； 在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
- 根據請求項1所述的方法，其中，還包括： 解析所述Markdown文件中的元資料； 所述在所述Web端將所述Markdown文件轉換為Html網頁文件的步驟包括： 加載轉換組件； 透過所述轉換組件採用所述元資料產生Html網頁文件。
- 根據請求項2所述的方法，其中，還包括： 產生指定所述元資料的設定檔； 將所述設定檔傳入所述轉換組件； 所述透過所述轉換組件採用所述元資料產生Html網頁文件的步驟包括： 透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生Html網頁文件。
- 根據請求項3所述的方法，其中，所述在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用React Native組件碼在所述Html網頁文件中展示預覽效果的步驟包括： 在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼； 在所述Web端展示所述Html網頁文件，並採用所述適配所述Web端的碼在所述Html網頁文件中展示預覽效果。
- 根據請求項4所述的方法，其中，在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼的步驟包括： 在所述Web端基於所述相容碼模擬的React Native運行環境下，透過所述轉換組件將所述React Native組件碼轉換為適配所述Web端的碼。
- 根據請求項5所述的方法，其中，所述解析所述Markdown文件中的元資料的步驟包括： 加載解析組件； 透過所述解析組件，解析所述Markdown文件中的元資料。
- 根據請求項6所述的方法，其中，所述產生指定所述元資料的設定檔的步驟包括： 透過所述解析組件產生指定所述元資料的設定檔。
- 根據請求項7所述的方法，其中，還包括： 建立多個所述Html網頁文件的之間的鏈接關係。
- 根據請求項1至8中任一項所述的方法，其中，所述Markdown文件透過如下方式產生： 加載組件庫；所述組件庫中包括多個React Native組件碼； 產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
- 根據請求項9所述的方法，其中，所述產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件的步驟包括： 加載文件產生組件； 透過所述文件產生組件，產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
- 一種文件展示方法，其特徵在於，包括： 在Web端獲取第一格式文件；所述第一格式文件包含有前端組件碼； 在所述Web端將所述第一格式文件轉換為第二格式文件； 在所述Web端加載用於模擬前端運行環境的相容碼； 在所述Web端基於所述相容碼模擬的前端運行環境下，展示所述第二格式文件，並採用所述前端組件碼在所述第二格式文件中展示預覽效果。
- 根據請求項11所述的方法，其中，還包括： 解析所述第一格式文件中的元資料； 所述在所述Web端將所述第一格式文件轉換為第二格式文件的步驟包括： 加載轉換組件； 透過所述轉換組件採用所述元資料產生第二格式文件。
- 根據請求項12所述的方法，其中，所述在所述Web端基於所述相容碼模擬的前端運行環境下，展示所述第二格式文件，並採用所述前端組件碼在所述第二格式文件中展示預覽效果的步驟包括： 在所述Web端基於所述相容碼模擬的前端運行環境下，將所述前端組件碼轉換為適配所述Web端的碼； 在所述Web端展示所述第二格式文件，並採用所述適配所述Web端的碼在所述第二格式文件中展示預覽效果。
- 根據請求項13所述的方法，其中，在所述Web端基於所述相容碼模擬的前端運行環境下，將所述前端組件碼轉換為適配所述Web端的碼的步驟包括： 在所述Web端基於所述相容碼模擬的前端運行環境下，透過所述轉換組件將所述前端組件碼轉換為適配所述Web端的碼。
- 一種文件展示裝置，其特徵在於，包括： 文件獲取模組，用於在Web端獲取Markdown文件；所述Markdown文件包含有React Native組件碼； 文件轉換模組，用於在所述Web端將所述Markdown文件轉換為Html網頁文件； 相容碼加載模組，用於在所述Web端加載用於模擬React Native運行環境的相容碼； 展示模組，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，展示所述Html網頁文件，並採用所述React Native組件碼在所述Html網頁文件中展示預覽效果。
- 根據請求項15所述的裝置，其中，還包括： 解析模組，用於解析所述Markdown文件中的元資料； 所述文件轉換模組包括： 轉換組件加載子模組，用於加載轉換組件； 轉換子模組，用於透過所述轉換組件採用所述元資料產生Html網頁文件。
- 根據請求項16所述的裝置，其中，還包括： 設定檔產生模組，用於產生指定所述元資料的設定檔； 設定檔傳入模組，用於將所述設定檔傳入所述轉換組件； 所述透過所述轉換組件採用所述元資料產生Html網頁文件的步驟包括： 頁面文件產生單元，用於透過所述轉換組件獲取所述設定檔指定的元資料，並採用所述元資料產生Html網頁文件。
- 根據請求項17所述的裝置，其中，所述展示模組包括： 碼轉換子模組，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，將所述React Native組件碼轉換為適配所述Web端的碼； 展示子模組，用於在所述Web端展示所述Html網頁文件，並採用所述適配所述Web端的碼在所述Html網頁文件中展示預覽效果。
- 根據請求項18所述的裝置，其中，所述碼轉換子模組包括： 碼轉換單元，用於在所述Web端基於所述相容碼模擬的React Native運行環境下，透過所述轉換組件將所述React Native組件碼轉換為適配所述Web端的碼。
- 根據請求項19所述的裝置，其中，所述解析模組包括： 解析組件加載子模組，用於加載解析組件； 解析子模組，用於透過所述解析組件，解析所述Markdown文件中的元資料。
- 根據請求項20所述的裝置，其中，所述設定檔產生模組包括： 設定檔產生子模組，用於透過所述解析組件產生指定所述元資料的設定檔。
- 根據請求項21所述的裝置，其中，還包括： 連接關係建立模組，用於建立多個所述Html網頁文件的之間的鏈接關係。
- 根據請求項15至22中任一項所述的裝置，其中，所述Markdown文件透過如下模組產生： 組件庫加載模組，用於加載組件庫；所述組件庫中包括多個React Native組件碼； 文件產生模組，用於產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
- 根據請求項23所述的裝置，其中，所述文件產生模組包括： 文件產生組件加載子模組，用於加載文件產生組件； 文件產生子模組，用於透過所述文件產生組件，產生針對所述React Native組件碼的文件資料，並採用所述文件資料和所述React Native組件碼產生Markdown文件。
- 一種裝置，其特徵在於，包括： 一個或多個處理器；和 其上儲存有指令的一個或多個機器可讀媒體，當由所述一個或多個處理器執行時，使得所述裝置執行如請求項1至10或者11至14中所述的一個或多個的方法。
- 一個或多個機器可讀媒體，其上儲存有指令，當由一個或多個處理器執行時，使得所述處理器執行如請求項1至10或者11至14中所述的一個或多個的方法。
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810434160.5 | 2018-05-08 | ||
| CN201810434160.5A CN110457656B (zh) | 2018-05-08 | 2018-05-08 | 一种文档展示方法、装置和机器可读介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| TW201947424A true TW201947424A (zh) | 2019-12-16 |
Family
ID=68466895
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| TW108108018A TW201947424A (zh) | 2018-05-08 | 2019-03-11 | 文件展示方法和裝置 |
Country Status (3)
| Country | Link |
|---|---|
| CN (1) | CN110457656B (zh) |
| TW (1) | TW201947424A (zh) |
| WO (1) | WO2019214539A1 (zh) |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111045668B (zh) * | 2019-12-03 | 2023-06-06 | 安徽航天信息科技有限公司 | 一种跨平台的移动端系统开发方法及装置 |
| CN111290996A (zh) * | 2020-01-16 | 2020-06-16 | 平安医疗健康管理股份有限公司 | 文档格式转换方法、装置、设备及可读存储介质 |
| US11704474B2 (en) * | 2020-02-25 | 2023-07-18 | Transposit Corporation | Markdown data content with action binding |
| CN111596948B (zh) * | 2020-04-09 | 2021-07-16 | 北京五八信息技术有限公司 | 一种基于Flutter的文档处理方法和装置 |
| CN111736812A (zh) * | 2020-06-16 | 2020-10-02 | 北京三快在线科技有限公司 | 文档代码执行方法、装置、计算机设备及存储介质 |
| CN112130819A (zh) * | 2020-09-16 | 2020-12-25 | 北京值得买科技股份有限公司 | 页面处理方法、页面处理装置、电子设备和计算机可读介质 |
| CN113792531B (zh) * | 2021-08-17 | 2024-02-27 | 罗普特科技集团股份有限公司 | 一种基于markdown语法扩展的文本编辑方法与系统 |
| CN114004195B (zh) * | 2021-11-01 | 2024-08-20 | 盐城天眼察微科技有限公司 | Pdf文件的生成方法、装置、电子设备及计算机存储介质 |
Family Cites Families (6)
| 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 (zh) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | 一种基于react-native的页面展示系统 |
| CN106095889A (zh) * | 2016-06-07 | 2016-11-09 | 浪潮软件股份有限公司 | 一种基于Markdown的文档管理方法 |
| CN106371844B (zh) * | 2016-08-31 | 2019-10-22 | 北京奇艺世纪科技有限公司 | 一种用原生用户界面组件展示网页的方法及系统 |
| CN106970946A (zh) * | 2017-02-24 | 2017-07-21 | 阿里巴巴集团控股有限公司 | 一种页面显示方法及装置 |
| CN107347179A (zh) * | 2017-03-28 | 2017-11-14 | 吉林市东杰科技开发有限公司 | 一种基于ReactNative实现LBS的方法 |
-
2018
- 2018-05-08 CN CN201810434160.5A patent/CN110457656B/zh active Active
-
2019
- 2019-03-11 TW TW108108018A patent/TW201947424A/zh unknown
- 2019-05-05 WO PCT/CN2019/085466 patent/WO2019214539A1/zh active Application Filing
Also Published As
| Publication number | Publication date |
|---|---|
| WO2019214539A1 (zh) | 2019-11-14 |
| CN110457656A (zh) | 2019-11-15 |
| CN110457656B (zh) | 2022-05-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| TW201947424A (zh) | 文件展示方法和裝置 | |
| KR101908162B1 (ko) | 통합 개발 환경에서의 라이브 브라우저 툴 제공 기법 | |
| US10594769B2 (en) | Selection mapping between fetched files and source files | |
| CN110442330B (zh) | 列表组件转换方法、装置、电子设备及存储介质 | |
| WO2017124952A1 (zh) | 一种网页脚本加载方法和装置 | |
| US9128723B2 (en) | Method and apparatus for dynamic document object model (DOM) aware code editing | |
| US9952835B2 (en) | Generation of hybrid enterprise mobile applications in cloud environment | |
| Hales | HTML5 and JavaScript Web Apps | |
| CN110389755B (zh) | 代码处理方法及装置、电子设备和计算机可读存储介质 | |
| Chatti et al. | Model-driven mashup personal learning environments | |
| Ullman | PHP for the world wide web: visual quickstart guide | |
| Gottfried et al. | Drawsocket: A browser based system for networked score display | |
| CN113360385A (zh) | 一种测试方法、装置、设备及介质 | |
| Saleh | JavaScript Unit Testing | |
| Stenroos | Headless WordPress development with React using Gatsby. js | |
| D'mello et al. | Web Development with MongoDB and Node: Build fast web applications for handling any kind of data | |
| CN116804933A (zh) | 数据转换方法、电子设备及计算机可读存储介质 | |
| Dreyer | Instant storyboarding | |
| Steinberg | Shots: A High-Performance Web Templating Language | |
| Borggreve | Server-Side Enterprise Development with Angular: Use Angular Universal to pre-render your web pages, improving SEO and application UX | |
| Meştereagã | Intelligent Source Code Visualisation for the MindXpres Presentation Tool | |
| KR20150041352A (ko) | 웹 앱 생성 장치 및 방법 | |
| CN117931181A (zh) | 一种pdf文档生成方法及装置 | |
| Dreyer | Instant Storyboarding: immediate visualization of ontology learning for acceptance tests with graph transformations in web applications | |
| CN116820985A (zh) | 一种检测注解配置错误的方法和装置及设备 |