HTML+CSS+JavaScript开发跨平台应用程序Electron框架

Electron是什么?

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux
官方文档:Electron

由 Electron 构建的应用

在这里插入图片描述

框架需求依赖

Node.js建议您使用最新的LTS版本。
注意 因为 Electron 将 Node.js 嵌入到其二进制文件中,你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。

创建你的应用程序

Electron 应用程序遵循与其他 Node.js 项目相同的结构。首先我们创建一个文件夹并且初始化npm包
在init初始化命令会提示您在项目初始化配置中设置一些值。请遵守下面的规则来初始化配置
entry point 应为 main.js. author 与 description 可为任意值,但对于应用打包是必填项。

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

完成上面操作后我们就可以输入指令下载Electron包npm install --save-dev electron
在package.js中我们在加上一句start命令能让您在开发模式下打开您的应用

{
  "scripts": {
    "start": "electron ."
  }
}

现在我们运行npm start是会出现报错的

运行主进程

任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程,它运行在一个完整的Node.js环境中,负责控制您应用的生命周期,显示原生界面,执行特殊操作并管理渲染器进程
在你的目录下创建main.js文件
注意:如果您此时再次运行start命令,您的应用将不再抛出任何错误! 然而,它不会做任何事因为我们还没有在main.js中添加任何代码。

创建页面

在您的项目根目录下创建index.html文件
在Electron中,各个窗口显示的内容可以是本地HTML文件,也可以是一个远程url。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
</html>

现在我们在main.js中引入两个模块app, BrowserWindow

//main.js
const { app, BrowserWindow } = require('electron')
//添加一个createWindow()方法来将index.html加载进一个新的BrowserWindow实例。
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}
//在 Electron 中,只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 
//您可以通过使用 app.whenReady() API来监听此事件。 在whenReady()成功后调用createWindow()。
app.whenReady().then(() => {
  createWindow()
  //监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的,则调用 createWindow() 方法。
   app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

注意:此时,您的应用程序应当成功 打开显示您页面的窗口!

通过预加载脚本从渲染器访问Node.js

在您的项目根目录下创建 preload.js 文件

//preload.js
//访问 Node.js process.versions 对象
//运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

在你现有的 BrowserWindow 构造器中将preload.js文件引入入 webPreferences.preload 选项。

//main.js
const { app, BrowserWindow } = require('electron')
//添加一个createWindow()方法来将index.html加载进一个新的BrowserWindow实例。
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    //__dirname 字符串指向当前正在执行脚本的路径 (在本例中,它指向你的项目的根文件夹)。
    //path.join API 将多个路径联结在一起,创建一个跨平台的路径字符串。
     webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}
//在 Electron 中,只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 
//您可以通过使用 app.whenReady() API来监听此事件。 在whenReady()成功后调用createWindow()。
app.whenReady().then(() => {
  createWindow()
  //监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的,则调用 createWindow() 方法。
   app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

最后一步

对于与您的网页内容的任何交互,您想要将脚本添加到您的渲染器进程中。 由于渲染器运行在正常的 Web 环境中,因此您可以在 index.html 文件关闭 标签之前添加一个

<script src="./renderer.js"></script>

renderer.js 中包含的代码可以在接下来使用与前端开发相同的 JavaScript API 和工具。例如使用 webpack 打包并最小化您的代码,或者使用 Vue等框架来管理您的用户界面。

本文按照官方文档进行了一个简单上手的应用程序开发感兴趣的可以点个关注下次发一下使用Electron做一个自动化登录的应用程序

  • 9
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Electron是一个基于Chromium和Node.js框架,可以帮助开发者使用Web技术(HTMLCSSJavaScript)来构建跨平台桌面应用程序。VueCli是一个基于Vue.js的命令行工具,可以帮助开发者快速构建Vue.js项目。使用Electron7+VueCli4开发跨平台桌面应用的过程如下: 1. 安装Node.js和npm 在安装Electron和VueCli之前,需要先安装Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,npm是Node.js的包管理器。安装Node.js和npm可以让你在本地开发环境中运行和管理Electron和VueCli。 2. 安装Electron 在安装Electron之前,需要先创建一个空目录作为项目根目录,然后在命令行中切换到该目录下,执行以下命令: ``` npm init -y npm install electron --save-dev ``` 以上命令会创建一个package.json文件,并将Electron安装到本地项目中。 3. 创建Electron应用 在项目根目录下创建一个名为main.js的文件,这是Electron应用的主进程文件。在main.js中添加以下代码: ```javascript 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() }) ``` 以上代码创建了一个Electron窗口,并加载了一个名为index.html的文件。在项目根目录下创建一个名为index.html的文件,并添加以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 以上代码创建了一个包含“Hello World!”文本的HTML页面。 4. 安装VueCli 在命令行中执行以下命令安装VueCli: ``` npm install -g @vue/cli ``` 以上命令会全局安装VueCli。 5. 创建Vue.js应用 在项目根目录下执行以下命令创建一个Vue.js应用: ``` vue create renderer ``` 以上命令会创建一个名为renderer的子目录,并在其中初始化一个Vue.js项目。 6. 集成Vue.js应用 在main.js中添加以下代码将Vue.js应用集成到Electron应用中: ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, preload: path.join(__dirname, 'preload.js') // 加载preload.js文件 } }) // 加载renderer/index.html文件 win.loadFile(path.join(__dirname, 'renderer', 'dist', 'index.html')) } app.whenReady().then(() => { createWindow() }) ``` 以上代码添加了一个preload.js文件,并将Vue.js应用的入口文件设置为renderer/dist/index.html。 7. 编译Vue.js应用 在renderer目录下执行以下命令编译Vue.js应用: ``` npm run build ``` 以上命令会生成一个名为dist的子目录,并在其中包含一个编译后的Vue.js应用。 8. 运行应用 在命令行中执行以下命令启动Electron应用: ``` npm start ``` 以上命令会启动Electron应用,并在Electron窗口中显示“Hello World!”文本和一个Vue.js应用。通过Electron7+VueCli4开发跨平台桌面应用,你可以使用Web技术来构建跨平台桌面应用程序,为用户提供更好的体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值