概述
What is Electron?
Electron是一個使用JavaScript、HTML和CSS構建跨平臺桌面應用程序的框架。 您可以將Electron與純JavaScript或您選擇的JavaScript框架一起使用：
React
Angular
Vue
構建一個簡單的Electron應用程序
要創建基本的Electron應用程序，請按照下列步驟操作：
git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start
您應該看到如下所示的Hello World應用程序：
將JavaScript UI控件（WijmoJS）添加到應用程序
要將WijmoJS添加到應用程序，請先安裝它。在命令提示符下，進入app文件夾（electron-quick-start）并鍵入：
npm install Wijmo
接下來，使用VS Code或您喜好的編輯器打開index.html文件，并添加以下內容：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <!-- add Bootstrap and Wijmo css --> <link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css rel="stylesheet"/> <link href=https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css rel="stylesheet"/> <!-- define the app styles --> <style> .app-panel { margin: 0 48pt; } .app-panel .wj-control { display: inline-block; vertical-align: top; width: 400px; height: 300px; } </style> </head> <body> <div class="container"> <h2>Hello World!</h2> <p> <!-- Node.js APIs are available in this renderer process. --> We are using Node.js <script>document.write(process.versions.node)</script>, Chromium <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </p> <!--add Wijmo controls to the page --> <div class="app-panel"> <div id="theGrid"></div> <div id="theChart"></div> </div> </div> <script> // You can also require other files to run in this process require('./renderer.js') </script> </body> </html>
在這一步中，我們為兩個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);
}實現這段代碼首先需要三個WijmoJS模塊：WijmoJS Core，Grid和Chart。 （它設置了WijmoJS許可證密鑰，因此應用程序在運行時不會顯示水印。如果您沒有許可證密鑰，請跳過此步驟，應用程序仍將運行，但會顯示水印元素）
如果您在此之前已經安裝了許可證密鑰，則不需要特定域。WijmoJS電子應用程序會從文件或本地主機協議運行，因此任何有效的WijmoJS密鑰都將起作用，無論用于生成它的域是什么。
最后一步是創建WijmoJS控件并將它們綁定到數據源。 在此示例中，網格和圖表綁定到同一數據源。
運行Electron應用程序
像以前一樣運行應用程序!
npm start
這次你會看到這個：
由于表格和圖表綁定到相同的數據，因此您對網格所做的任何更改（如編輯單元格或排序列）都將自動應用于圖表。
現在，請下載WijmoJS，享用WijmoJS JavaScript控件的Electron應用程序吧。
關于WijmoJS：
快如閃電，觸控優先。純前端控件集 WijmoJS，為您的企業應用提供更加靈活的操作體驗，在全球率先支持 AngularJS，并×××能卓越、零依賴的 FlexGrid 和金融圖表等多個控件，為您提供易用、輕松的操作體驗，全面滿足開發所需。
關于葡萄城：
賦能開發者！葡萄城公司成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
