如何使用JavaScript UI控件，构建Electron应用程序

zhisheng 发布于2019-08-23 12:39 / 912人阅读

摘要：概述是一个使用和构建跨平台桌面应用程序的框架。它设置了许可证密钥，因此应用程序在运行时不会显示水印。最后一步是创建控件并将它们绑定到数据源。现在，请下载，享用控件的应用程序吧。灵活高效的前端开发工具包，可快速搭建企业应用程序

概述

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文件，并添加以下内容：



  
    
    Hello World!

    
    
    

    
    
  
  
    
      Hello World!
      
        
        We are using Node.js
        ,
        Chromium ,
        and Electron
        .

在这一步中，我们为两个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：灵活高效的前端开发工具包，可快速搭建企业 Web 应用程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98897.html

从用 AngularJS 开发 PC 客户端说起

摘要：你们说能不能就用的开发模式来实现客户端啊这样版版版就都有了。有道云笔记可能就是最贴近我们想法的产品，有客户端，有版。这个项目由发起和维护。最近一个多月一直在用 AngularJS 做公司的一个项目（还没有做完），我之前主要是用 PHP 开发服务端的，AngularJS 也是现学现卖，整个过程还是比较有意义的，觉得很有必要写篇文章记录一下。缘起事情是这样的……我们团队的产品是一款 ...

waltr 2019-08-19 17:15 评论0 收藏0
从用 AngularJS 开发 PC 客户端说起

摘要：你们说能不能就用的开发模式来实现客户端啊这样版版版就都有了。有道云笔记可能就是最贴近我们想法的产品，有客户端，有版。这个项目由发起和维护。最近一个多月一直在用 AngularJS 做公司的一个项目（还没有做完），我之前主要是用 PHP 开发服务端的，AngularJS 也是现学现卖，整个过程还是比较有意义的，觉得很有必要写篇文章记录一下。缘起事情是这样的……我们团队的产品是一款 ...

Reducto 2019-06-27 11:49 评论0 收藏0
前端每周清单第 53 期：Go 与 WebAssembly, React Suspense 演练,

摘要：开发教程步步为营，掌握基础技能发布机器学习速成课程为了帮助更多的人了解与学习机器学习相关的知识技能，发布了人工智能学习网站。更多相关内容参考数据科学与机器学习实战手册。 showImg(https://segmentfault.com/img/remote/1460000013586587); 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热...

lbool 2019-08-22 15:10 评论0 收藏0