摘要：概述是一個使用和構建跨平臺桌面應用程序的框架。它設置了許可證密鑰，因此應用程序在運行時不會顯示水印。最后一步是創(chuàng)建控件并將它們綁定到數(shù)據(jù)源。現(xiàn)在，請下載，享用控件的應用程序吧。靈活高效的前端開發(fā)工具包，可快速搭建企業(yè)應用程序

What is Electron?
Electron是一個使用JavaScript、HTML和CSS構建跨平臺桌面應用程序的框架。 您可以將Electron與純JavaScript或您選擇的JavaScript框架一起使用：

React

Angular

Vue

要創(chuàng)建基本的Electron應用程序，請按照下列步驟操作：

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

您應該看到如下所示的Hello World應用程序：

要將WijmoJS添加到應用程序，請先安裝它。在命令提示符下，進入app文件夾（electron-quick-start）并鍵入：

npm install Wijmo

接下來，使用VS Code或您喜好的編輯器打開index.html文件，并添加以下內(nèi)容：

  
    
    

    
    
    

    
    
  
  
    

      
Hello World!
      

        
        We are using Node.js
        ,
        Chromium ,
        and Electron
        .
      

      
      

        

        

      
    
    
  

在這一步中，我們?yōu)閮蓚€WijmoJS控件添加了一些樣式和主題元素。接下來，打開“renderer.js”文件并按如下所示進行編輯：

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

// import Wijmo
var wjCore = require("./node_modules/wijmo/wijmo.js");
var wjGrid = require("./node_modules/wijmo/wijmo.grid.js");
var wjChart = require("./node_modules/wijmo/wijmo.chart.js");

// set the Wijmo license key
var key = "GrapeCity-Internal-Use-Only,…";
wjCore.setLicenseKey(key);

// create the controls
var theGrid = new wjGrid.FlexGrid("#theGrid", {
    itemsSource: getData()
});
var theChart = new wjChart.FlexChart("#theChart", {
    itemsSource: theGrid.itemsSource,
    bindingX: "country",
    series: [
        { name: "Sales", binding: "sales" },
        { name: "Expenses", binding: "expenses" },
        { name: "Downloads", binding: "downloads" },
    ]
});

// get some random data
function getData() {
    var countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
        data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
        country: countries[i],
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000,
        downloads: Math.round(Math.random() * 20000),
        });
    }
    return new wjCore.CollectionView(data);
}

實現(xiàn)這段代碼首先需要三個WijmoJS模塊：WijmoJS Core，Grid和Chart。 （它設置了WijmoJS許可證密鑰，因此應用程序在運行時不會顯示水印。如果您沒有許可證密鑰，請?zhí)^此步驟，應用程序仍將運行，但會顯示水印元素）

如果您在此之前已經(jīng)安裝了許可證密鑰，則不需要特定域。WijmoJS電子應用程序會從文件或本地主機協(xié)議運行，因此任何有效的WijmoJS密鑰都將起作用，無論用于生成它的域是什么。

最后一步是創(chuàng)建WijmoJS控件并將它們綁定到數(shù)據(jù)源。 在此示例中，網(wǎng)格和圖表綁定到同一數(shù)據(jù)源。

像以前一樣運行應用程序!

npm start

這次你會看到這個：

由于表格和圖表綁定到相同的數(shù)據(jù)，因此您對網(wǎng)格所做的任何更改（如編輯單元格或排序列）都將自動應用于圖表。

現(xiàn)在，請下載WijmoJS，享用WijmoJS JavaScript控件的Electron應用程序吧。

WijmoJS：靈活高效的前端開發(fā)工具包，可快速搭建企業(yè) Web 應用程序