概述

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

近日，WijmoJS 2018V2 正式發布，提供 Web 設計器，可動態設計Web頁面并生成代碼，提供 SASS 支持，提升控件可訪問性。

WijmoJS – Web設計器

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

• VSCode設計器：用于自定義Angular 框架下WijmoJS 組件
• Web在線設計器，用于創建和自定義PureJS 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腳本。

SASS支持的控件和主題

我們的控件樣式（布局，默認樣式）以前是用CSS編寫的。最初，它很簡單，但目前已經發展到難以管理的程度。因此，我們決定使用SASS和更好的方式來重寫我們的樣式。

• 您可以輕松使用我們的SASS文件來創建自己的主題風格。我們還提供SASS文件供您使用和自定義。
• 您現在可以選擇要包含在應用程序中的SASS模塊。 例如，我們現在有一個僅包含核心模塊（非企業）的WijmoJS-Core文件，它只是全部CSS文件的一小部分。您可以有選擇地使用要包含的模塊來真正優化CSS大小。
• 我們在Web Component interop中增加了對 Shadow DOM的支持。

我們希望通過這些改進，為使用純前端控件集WijmoJS開發的Web應用程序更易使用，更加輕盈。

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

我們為使用React和Redux的 WijmoJS 增加了加密貨幣跟蹤應用程序，該應用程序是一個財務儀表板，可用于跟蹤加密貨幣值，這些值是在用戶開發的生產應用程序之后建模的。使用React / Redux的現代設計模式和各種WijmoJS 控件，可以幫助您更好地評估和開發 WijmoJS 應用程序。

Wijmo Crypto Currency App

支持Vue V2的集成增強功能

隨著Vue的不斷發展，我們正在改進我們的互操作用法。本次更新中為我們的Vue V2支持增加了很多不錯的功能。比如，WijmoJS 子組件現在可以在動態場景中正確工作，例如v-for和v-if指令。

Child components in Vue.js

我們還添加了WjFlexGridDetail等組件，并添加了一些新的示例。

點擊查看 Vue 2 AllComponents sample

ES6和ESModule支持

本次更新，增加了ES6版本的WijmoJS模塊（測試版），你可以在WijmoJS 安裝包的NpmImages文件夾中找到它：

• wijmo-es2015-esm-min - ESM模塊格式（ES6導入/導出語句）
• wijmo-es2015-commonjs-min - 采用CommonJS模塊格式

今年我們將繼續研究和開發基于ES6 的支持。

WijmoJS 中的Web Components

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

如果您不熟悉Web組件，請參考這篇博客。

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的目標是防止它。有關Shadow DOM規范的新提議可以緩解此限制，我們正在密切關注這些更改。目前，WijmoJS Web組件及其部件可以使用全局CSS以與普通WijmoJS控件相同的方式進行自定義。

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

目前，我們添加了Web Components In Angular示例，演示了如何在Angular應用程序中使用 WijmoJS Web組件。其他流行框架（如React，Vue，Polymer等）的示例正在開發中。（如有需要，請及時聯系我們）

支持Angular 6和TypeScript 2.7

WijmoJS 已經全面支持Angular 6.0.0版。我們仍在努力將所有Demo示例升級到Angular V6，并將我們的TypeScript版本升級到V2.7。

新增的示例

• WebComponentsIntro sample | Web Components intro blog
• WebComponents AllComponents sample
• React/Redux CryptoCurrencyTracking sample
• Vue 2 AllComponents sample
• Vue 2 FlexGrid DynamicColumns sample
• Vue 2 FlexGrid GroupPanel sample
• Vue 2 FlexGrid RowDetail sample

更新日志

• [WebComponents]添加了WebComponents互操作的Beta版本（wijmo.webcomponents.xxx.js模塊）。 Samples \ TS \ WebComponents \ WebComponentsIntro示例說明了互操作的狀態和用法。
• [npm] WijmoJS作為'wijmo'包發布到全局npm注冊表。
• [WebComponents]添加了AllComponents示例，其中包括所有主要支持的組件。
• 添加了基于Web的WijmoJS 在線設計器，使用類似Visual Studio的屬性網格和設計界面，提供基于 Web 的WijmoJS Designer PureJS控件。
• 添加了VSCode WijmoJS Designer擴展，使用類似Visual Studio的屬性網格和設計界面。
• Wijmo CSS文件現在可使用Sass實現。
• [React / Redux]添加了React / Redux CryptoCurrencyTracking示例。
• [ES6]版本462的WijmoJS ES6 npm圖像（NpmImages中的wijmo-es2015-commonjs-min和wijmo-es2015-esm-min文件夾）被批準為發布版本。
• [a11y]添加了一個wj-state-focus類選擇器，它補充了以wj-state為中心的選擇器。 wj-state-focus選擇器獲取具有焦點的WijmoJS控件。 wj-state-focused選擇器獲取包含焦點的所有WijmoJS控件。例如，如果嵌套了WijmoJS控件A，B和C，并且控件C包含活動元素，則.wj-state-focus將選擇C，而.wj-state-focused將選擇A，B和C. wj-state-focus選擇器可用于在CSS中實現焦點輪廓。例如：

.wj-state-focus, a:focus, button:not(.wj-btn-default):focus, input:not(.wj-form-control):focus, input[type=checkbox]:focus {box-shadow: 0px 0px 17px 0px rgb(41,173,68); }

• [a11y]改進了Calendar，TreeView，InputDate和FlexGridFilter的可訪問性。
• [a11y]為FlexGrid本機編輯器元素添加了aria-required屬性
• [a11y]用按鈕元素替換了按鈕（更好的輔助功能，支持輸入/空格鍵）
• [a11y]用按鈕元素（過濾器，細節，列表，折疊/展開）替換FlexGrid中的所有單元格按鈕
• [a11y]為DropDown，InputDateTime，InputNumber，Calendar，ColumnFilterEditor控件中的按鈕添加了ARIA屬性
• [a11y]為ListBox，Calendar，TreeView中的選定項添加了aria-selected屬性（如FlexGrid和TabPanel）
• [a11y]清理了ComboBox ARIA屬性
• [a11y]在Calendar和TreeView控件中添加了漫游tabindex（更好的可訪問性，如FlexGrid和TabPanel）
• [a11y]在FlexGrid的ColumnCollecion和Column類中添加了'describedById'屬性。這用于在列標題和過濾元素上設置aria-describedby屬性。
• [a11y]為FlexGridDetailProvider類添加了keyActionEnter屬性。
• 改進了FlexGrid.virtualizationThreshold以支持數組：[rowThreshold，columnThreshold] * [Vue2]添加了許多子組件，如各種圖表系列。
• [Vue2]子組件現在可以在動態場景中正確工作，例如v-for和v-if指令。
• [Vue2]添加了WjFlexGridDetail組件。
• [Vue2]添加了新示例。
• 所有示例都使用httpS CDN引用。
• OData示例現在使用httpS。
• 使用WijmoJS Designer主題更新WijmoHelp。
• 使用Sass相關主題更新文檔。
• 添加了Gauge.stackRanges屬性，該屬性使控件堆疊范圍。 RadialGauge將它們顯示為同心扇區，將LinearGauge顯示為堆疊條。
• 添加了FlexGrid.autoSearch屬性，允許用戶通過不可編輯的單元格搜索網格中的內容。
• 打開下拉列表時優化的ComboBox性能。
• 填充列表時優化ListBox性能。
• 添加了ODataCollectionView.expand屬性以允許檢索相關實體（如在OData的\$ expand選項中）。
• 添加了ODataCollectionView.jsonReviver屬性，該屬性允許自定義從服務器返回的JSON數據的解析過程。
• 支持在FlexSheet的綁定工作表中插入/刪除列。
• 向PdfPageArea類添加了文檔屬性。
• 向IFlexGridDrawSettings接口添加了drawDetailRows屬性。
• 向ReportViewer和PdfViewer控件添加了requestHeaders屬性。
• 向ReportViewer和PdfViewer控件添加了beforeSendRequest事件。
• 為ReportViewer控件添加了參數屬性。
• 改進了CollectionView排序以處理變音符號（重音符號）。

重大更新

• [NPM]“themes”文件夾現在是“styles”文件夾的子項。以前是“Styles”的同級目錄。
• 新的基于Sass的CSS文件包含一些比原始CSS更具體的規則，因此如果您有自定義CSS文件，則可能需要調整其規則。
• 新的CSS文件有關于顏色，填充等的更一致的規則，因此您在升級時可能會看到一些小的更改。例如，我們在ListBox，FlexGrid，Calendar等中使項目填充一致。
• 新的基于Sass的主題文件是自包含的，不需要您再將基本wijmo.css文件添加到頁面。這意味著對包含主題控件的頁面的HTTP請求減少了一個。這不是一個突破性的變化，而是一個提高性能的機會。
• 將AutoComplete.isContentHtml屬性的默認值從true更改為false。這不應該影響大多數應用程序，新的默認值可以防止非自愿的腳本/ html注入。如果它確實會影響您的應用程序，請將AutoComplete.isContentHtml屬性設置為true，您將獲得原始行為。

---

WijmoJS | 下載試用

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

您對WijmoJS產品的任何技術問題，都有技術支持工程師提供1對1專業解答，點擊此處即可發帖提問>>

轉載于:https://blog.51cto.com/7787339/2153922

總結

以上是生活随笔為你收集整理的新一代纯前端控件集 WijmoJS 2018V2发布，提供 Web 设计器，可动态设计页面并生成代码...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。