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

What is Electron?
Electron是一個(gè)使用JavaScript、HTML和CSS構(gòu)建跨平臺(tái)桌面應(yīng)用程序的框架。 您可以將Electron與純JavaScript或您選擇的JavaScript框架一起使用：

React

Angular

Vue

要?jiǎng)?chuàng)建基本的Electron應(yīng)用程序，請(qǐng)按照下列步驟操作：

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

您應(yīng)該看到如下所示的Hello World應(yīng)用程序：

要將WijmoJS添加到應(yīng)用程序，請(qǐng)先安裝它。在命令提示符下，進(jìn)入app文件夾（electron-quick-start）并鍵入：

npm install Wijmo

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

  
    
    

    
    
    

    
    
  
  
    

      
Hello World!
      

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

      
      

        

        

      
    
    
  

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

// 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);
}

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

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

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

像以前一樣運(yùn)行應(yīng)用程序!

npm start

這次你會(huì)看到這個(gè)：

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

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

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