wex5 教程 前端UI編譯原理與記事本編輯

一 前言

   wex5頁面，與html頁面有何差別？二者以前的關係是什麼？是如何完成轉譯的？

   可否像編輯html那樣用記事原本修改w頁面？

   wex5前端UI在雲部署後可否在雲端進行二次編輯，而不須要在wex5編輯器裏修改後再次上傳？？

   帶着這些問題，從新認識wex5的UI設計與編譯原理，有助於咱們分離前端開發。

二 頁面結構分析：

    

  wex5頁面由w.js,css三個頁面構成,具體功能與對應關係以下：

 

三 編譯後頁面結構

   1 在公有云部署時，要將wex5頁面進行編譯，獲得部署須要的Native下的www包。

   

  2 index首頁分析

    

         編譯後的頁面，自動生成一個index.html頁面，這裏主要是對url進行了跳轉前的拼接和判斷。相關功能進行了註釋。

         從中能夠看出：

         頁面跳轉前的等待時間，正在努力加載中...... //此處爲頁面跳轉前的提示，能夠更改。

         window.location.search; //瀏覽器地址欄裏的值會進行取值判斷，拼接相應的參數   

        window.location.hash;//瀏覽器地址欄裏的值從第2個字符取出+設定頁面標籤值做爲url,用location.hash方法使頁面具備前進後退能力   

 2 w頁面轉譯結構：

   

   從中能夠看出，w文件又轉譯成了html和js兩個文件

   

  html頁面內容

  分別對多個頁面展開分析：

  index.w.html

 

從中能夠看出，全部w頁面中相關的頁面展現組件與內容進行了標準html5編制譯。

index.w.js

 w頁面中的組件，由組件包構成,經過w.js文件件引入到UI包中，再經過html頁面調用wex5提供的組件。

結構以下：

 

 

 組件包在UI編譯時就進行了封裝。

 

 

 由此能夠看出，w頁面自己不具有瀏覽器展現能力，須要w.html和展現和w.js的組件調用才能在瀏覽器中展現。這其實是說，w頁面的展現須要一個小型web應用來完成！！！

 正由於如此，咱們的w頁面在wex5中編輯後必須經過tomcat啓動才能正常瀏覽。

 神同樣的邏輯，運行一個頁面要啓動一個web應用來解釋運行。

 這顯然與html的編輯後直接瀏覽運行差別巨大。

以下圖，原本很小的html頁面變成了20M的web應用。這是以前沒有想到的。

 

3 主頁分析：

  首頁中主要是頁面跳轉和映射，在主頁中會有大量的組件。

 先看w.html

 

  與index.w.html同樣，全部展現的組件進行了html標準化的編譯。

  不一樣的是，data組件出如今了w.js文件件中

  

 因而可知，data組件在w文件編譯過程當中，不能進入到html頁面中，須要放到w.js文件中，由w.html進行引用。

 在w.js中,data組件能夠進行修改。好比刷新條數：

 

 通過雲端測試，直接在雲端修改w.js中的data裏的limit的值，能夠在前端測試到加載條數發生了變化。由一次加載變成了一次加載6條數據.

4 其它js和css文件沒有編譯，與標準js和css相同。

四 總結：

    1 w頁面由w.html和w.js組成的小型web應用來執行，依賴於組件包,必須依賴於tomcat應用服務器才能正常瀏覽。

    2 編輯後的w.html是頁面展現部分，w.js是data組件部分。能夠用記事本進行二次編輯。

    3 w頁面因爲編譯後的轉譯層級和組件依賴，執行性能明顯劣於原生html.

    4 data組件一次性加載數據庫表全部字段，對資源消費過大。

    5 儘可能減小wex5封裝組件的大規模使用，好比windowContainer,儘可能提升頁面的性能和速度。

    6 全部頁面最終表現爲w.html,w.js.js,css四個文件，基於此實現了跨平臺。

    7 基於編譯後的標準html，引入codova，加入app打包工具，實現了一次開發，多平臺app打包。

    若是是初學者，或者只是進行web開發，對wex5頁面的原理有清晰的認知， 有助於正確分析頁面的流程和選擇。

  

相關視頻製做完成，上傳優酷。教學app製做中。我是邯鄲戲曲開發，tel：15175073123,qq:1017945251