純前端控制元件集 WijmoJS 2018V2釋出，在React、Vue和Angular中更易用

作為一款純前端控制元件集， WijmoJS  秉承“快如閃電，觸控優先”的設計理念，在提供優質服務和產品的同時，專注於企業應用開發，不斷最佳化產品架構，與時俱進。除在全球率先支援  AngularJS 外，現已全面應用於  React 、 Vuejs 、TypeScript 、Ionic 等主流框架中。

近日， WijmoJS 2018V2  正式釋出，提供基於VSCode/線上Web設計器，可動態設計Web頁面並生成程式碼，提供 SASS 支援，大幅提升控制元件集的穩定性和速度。

本次主要更新內容有：

WijmoJS設計器 – 無程式碼配置時代全面來臨

目前為止， WijmoJS  純前端控制元件集已經十分易於前端開發使用，但仍需要編寫程式碼。 WijmoJS 2018V2 宣佈，這種方式將被徹底改變。 WijmoJS 現在擁有了用於建立和自定義前端控制元件的設計器，包含兩個beta版本，一個是與Visual Studio Code完美融合的設計器、另一個則是線上Web設計器，提供實時預覽和編輯頁面屬性的功能。

• VSCode設計器：用於自定義Angular 框架下WijmoJS 元件

• Web線上設計器，用於建立和自定義wijmoJS 控制元件

VSCode設計器

此設計器是VSCode的擴充套件。安裝後，它會在每個Angular 框架下的WijmoJS元件上方新增“Wijmo Designer ...”操作。單擊操作按鈕後，它將開啟一個設計介面，用於自定義該特定元件。開發人員可以實時更改屬性和繫結事件，並將所做更改儲存回 Angular應用程式中。

要在VSCode中安裝此擴充套件，請單擊VS Marketplace上Designer設定中的“安裝”按鈕。或者，還可以在VSCode的擴充套件管理器中搜尋“wijmo”並從那裡安裝。

在安裝後重新載入VSCode。 然後開啟一個使用WijmoJS 控制元件的Angular應用程式並嘗試啟動設計器。

Web線上設計器

此設計器是用於建立和自定義WijmoJS控制元件的Web應用程式。 開發人員可以在任何瀏覽器中執行此設計器。它允許將控制元件新增到設計圖面，然後根據自己的喜好自定義它們。配置完成後，可以將生成的程式碼複製到自己的應用程式中。

Web-based Wijmo Designer

此設計器生成的程式碼是純HTML和JavaScript，生成的程式碼包括初始化控制元件所需的引用，宿主元素和JavaScript指令碼。

支援Angular 6和TypeScript 2.7

WijmoJS 已經全面支援Angular 6.0.0版。目前所做的工作是將所有Demo示例升級到Angular V6，並將WijmoJS 支援的TypeScript版本升級到V2.7。

新的React / Redux加密貨幣跟蹤應用程式

本次更新為使用React和Redux的 WijmoJS 控制元件集增加了加密貨幣跟蹤應用程式，該應用程式是一個財務儀表板，可用於跟蹤加密貨幣值，這些值是在使用者開發的生產應用程式之後建模的。使用React / Redux的現代設計模式和各種WijmoJS 控制元件，可以幫助使用者更好地評估和開發 WijmoJS 應用程式。

Wijmo Crypto Currency App

支援Vue V2的整合增強功能

隨著Vue的不斷髮展，WijmoJS也在不斷改進，以適應其變化。WijmoJS 在本次更新中為Vue V2支援增加了很多不錯的功能。比如，WijmoJS 子元件現在可以在動態場景中正確工作，例如v-for和v-if指令。

Child components in Vue.js

此外，WijmoJS 還新增了WjFlexGridDetail元件和新的示例。

WijmoJS 中的Web Components 應用

WijmoJS 的 Web元件互操作的測試版已經推出，它將WijmoJS控制元件公開為Web元件，更具體地說是自定義元素。WijmoJS Web元件允許使用者以宣告方式將WijmoJS控制元件新增到HTML頁面，並將其作為常用DOM元素進行操作，而無需使用任何其他框架。 某些不完全支援Web元件標準的瀏覽器可能需要一些額外的Polyfill 支援。

WijmoJS Web元件實現當前狀態的關鍵點：

• WijmoJS 控制元件的WijmoJS“頂級”Web元件（如表示FlexGrid控制元件的wjc-flex-grid元件）繼承自相應的控制元件類。例如，WjcFlexGrid元件類擴充套件了FlexGrid控制元件類。這也意味著當WijmoJS 用於“Web元件模式”時，基礎WijmoJS 控制元件類擴充套件了HTML 元素類。

• 與頂級元件互補的子元件，如定義FlexGrid列的wjc-flex-grid-column元件，作為它們所代表的WijmoJS 類的包裝器。子元件直接從HTMLElementclass繼承，底層 WijmoJS 類例項可透過元件的特殊控制元件屬性訪問。

• 可以使用元件元素上的屬性定義 WijmoJS 類屬性。當屬性值更改時，相應的 WijmoJS 類屬性會相應更新。目前，更改類屬性值不需要更改相應的屬性值。

• JavaScript程式碼可以使用本機Element.addEventListener（'event'，handler）方法為WijmoJS控制元件事件訂閱處理程式。

• WijmoJS 元件現在不使用Shadow DOM。這將在互操作的未來版本中得到解決。目前最大的挑戰是 WijmoJS 允許透過CSS對其控制元件的部件進行深度定製，而Shadow DOM的目標是防止它。目前，WijmoJS Web元件及其部件可以使用全域性CSS以與普通WijmoJS控制元件相同的方式進行自定義。

Web元件的最大好處是，可以在不同的框架中使用相同的元件，並從框架的附加功能（如屬性，屬性和事件繫結）中受益。

隨著新版本上線，WijmoJS 新增了Web Components In Angular示例，演示瞭如何在Angular應用程式中使用 WijmoJS Web元件。其他流行框架（如React，Vue，Polymer等）的示例正在開發中。

支援SASS型別的樣式

• WijmoJS 的控制元件樣式（佈局，預設樣式）最初是用CSS編寫的。但如今，已經完成了SASS樣式重寫。這樣，使用純前端控制元件集WijmoJS開發的Web應用程式將更易使用，更加輕盈。

• 開發人員可以輕鬆使用 WijmoJS 的SASS檔案來建立自己的主題風格。同時，還提供SASS原始檔，以便開發者使用和自定義。

• 開發人員可以選擇要包含在應用程式中的SASS模組。 例如，專案中有一個僅包含核心模組（非企業）的WijmoJS-Core檔案，它可能僅是全部CSS檔案的一小部分，您可以選擇只載入這部分模組來真正最佳化CSS大小。

• WijmoJS 在Web Component interop中增加了對 Shadow DOM的支援。

ES6和ESModule支援

本次更新，增加了ES6版本的WijmoJS模組（測試版），使用者可以在WijmoJS 安裝包的NpmImages資料夾中找到它：

• wijmo-es2015-esm-min - ESM模組格式（ES6匯入/匯出語句）

• wijmo-es2015-commonjs-min - 採用CommonJS模組格式

以上就是Wijmo 2018V2版本的全部內容，獲取更詳細的資料，請訪問 WijmoJS 官網。

WijmoJS – 深度支援Angular、React和Vue的純前端控制元件集

快如閃電，觸控優先。純前端控制元件集 WijmoJS，為您的企業應用提供更加靈活的操作體驗，在全球率先支援 AngularJS，並提供效能卓越、零依賴的 FlexGrid 和金融圖表等多個控制元件，為您提供易用、輕鬆的操作體驗，全面滿足企業Web開發所需。

關於

賦能開發者！葡萄城公司成立於 1980 年，是全球領先的集開發工具、商業智慧解決方案、管理系統設計工具於一身的軟體和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟體研發服務，併為中國企業的資訊化提供國際先進的開發工具、軟體和研發諮詢服務。葡萄城的控制元件和軟體產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。