单机游戏下载单机游戏下载基地
最新游戏|热门游戏|游戏大全|游戏专题
压缩解压光盘工具文字输入杀毒软件文件处理转换翻译股票证券办公学习编程软件虚拟光驱
当前位置:首页应用软件编程软件 → Electron程序开发助手Electron Fiddle V0.16.1 最新版
Electron程序开发助手Electron Fiddle

Electron程序开发助手Electron FiddleV0.16.1 最新版

Electron程序开发助手Electron Fiddle是一款非常优秀的Electron程序开发编辑软件,大家可以使用这款Electron Fiddle创建并运行小段 Electron 程序,让我们可以轻松掌握Electron的入门技巧,对此感兴趣的程序爱好者可以下载试试。

主要功能:

探索 Electron

尝试使用 Electron 而不安装任何依赖项:Fiddle 包含了您探索 Electron 平台所需的一切。它还包括了 Electron 中可用的每个 API 的示例,因此,如果您想快速查看 BrowserView 是什么或者 desktopCapturer 是如何工作的, Fiddle 都已帮您搞定。

用类型编码

Fiddle 包含了与 Visual Studio Code 同样的来自微软的杰出的 Monaco 编辑器。它还会自动为当前选定的 Electron 版本安装类型定义,确保您只需几次击键即可获得所有的 Electron API 。

编译、打包。

Fiddle 可以自动将您的实验变成您可以与朋友、同事或祖父母分享的二进制文件。这要归功于 electron-forge ,它允许您将您的 Fiddle 打包成一个适用于 Windows 、 macOS 或 Linux 的应用程序。

从 Fiddle 开始,在任何地方继续。

Fiddle 不是一个 IDE - 但它是一个很好的起点。一旦您的 Fiddle 长大,利用或不利用 electron-forge 将其导出为一个项目。然后,使用您最喜欢的编辑器,走向世界!

安装 Electron

现在,您需要安装electron。 我们推荐的安装方法是把它作为您 app 中的开发依赖项,这使您可以在不同的 app 中使用不同的 Electron 版本。 在您的app所在文件夹中运行下面的命令:

npm install --save-dev electron

除此之外,也有其他安装 Electron 的途径。 请咨询安装指南来了解如何用代理、镜像和自定义缓存。

开发一个简易的 Electron

Electron apps 使用JavaScript开发,其工作原理和方法与Node.js 开发相同。 electron模块包含了Electron提供的所有API和功能,引入方法和普通Node.js模块一样:

const electron = require('electron')复制

electron 模块所提供的功能都是通过命名空间暴露出来的。 比如说: electron.app负责管理Electron 应用程序的生命周期, electron.BrowserWindow类负责创建窗口。 下面是一个简单的main.js文件,它将在应用程序准备就绪后打开一个窗口:

const { app, BrowserWindow } = require('electron')function createWindow () {  
 // 创建浏览器窗口
 const win = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      nodeIntegration: true
   }
 })  // 并且为你的应用加载index.html
 win.loadFile('index.html')
}

app.whenReady().then(createWindow)

您应当在 main.js 中创建窗口,并处理程序中可能遇到的所有系统事件。 下面我们将完善上述例子,添加以下功能:打开开发者工具、处理窗口关闭事件、在macOS用户点击dock上图标时重建窗口,添加后,main. js 就像下面这样:

const { app, BrowserWindow } = require('electron')function createWindow () {  
 // 创建浏览器窗口
 const win = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      nodeIntegration: true
   }
 })  // 并且为你的应用加载index.html
 win.loadFile('index.html')  // 打开开发者工具
 win.webContents.openDevTools()
}// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法// 部分 API 在 ready 事件触发后才能使用。app.whenReady().then(createWindow)// Quit when all windows are closed, except on macOS. There, it's common// for applications and their menu bar to stay active until the user quits// explicitly with Cmd + Q.app.on('window-all-closed', () => {  if (process.platform !== 'darwin') {
   app.quit()
 }
})

app.on('activate', () => {  // On macOS it's common to re-create a window in the app when the
 // dock icon is clicked and there are no other windows open.
 if (BrowserWindow.getAllWindows().length === 0) {
   createWindow()
 }
})// 您可以把应用程序其他的流程写在在此文件中// 代码 也可以拆分成几个文件,然后用 require 导入。

最后,创建你想展示的 index.html:

<!DOCTYPE html><html>
 <head>
   <meta charset="UTF-8">
   <title>Hello World!</title>
   <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
   <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
 </head>
 <body>
   <h1>Hello World!</h1>
   We are using node <script>document.write(process.versions.node)</script>,
   Chrome <script>document.write(process.versions.chrome)</script>,
   and Electron <script>document.write(process.versions.electron)</script>.  </body></html>

PC官方
安卓官方手机版
IOS官方手机版
展开

软件截图

其它版本

下载地址

Electron程序开发助手Electron Fiddle V0.16.1 最新版

    热门评论

    最新评论

    发表评论 查看所有评论(0)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    (您的评论需要经过审核才能显示)

    装机必备软件

    关于飞翔 | 联系我们 | 大事记 | 下载帮助(?) | 广告联系 | 网站地图 | 友情链接

    Copyright 2010-2013 单机游戏下载 (R) 版权所有 飞翔下载所有游戏及软件下载资源来源互联网,并由网友上传分享。如有侵权,请来电来函告之。
    飞翔忠告:抵制不良色情、反动、暴力游戏 合理安排游戏时间 享受健康生活【鄂ICP备13011873号-1】