使用Electron来快速打造你的桌面应用,Web开发者的福音

百度已收录   阅读次数: 247
2021-05-0900:29:32 发表评论
摘要

前些天,伯衡君介绍了如何通过Flutter打造全系统应用,并分享了如何创建用Flutter打造的app,具体可以参看下方的前情提要,但是,对于桌面级应用,Flutter以目前的程度来说还不是很完善,很多丰富多彩的库在手机上运行良好,但是在桌面级上就不能使用了,而这次伯衡君为大家分享如何通过Electron,只要会html,css和html就能快速打造你人生第一个桌面级应用哦,分享给大家……

使用Electron来快速打造你的桌面应用,Web开发者的福音

开篇寄语

前些天,伯衡君介绍了如何通过Flutter打造全系统应用,并分享了如何创建用Flutter打造的app,具体可以参看下方的前情提要,但是,对于桌面级应用,Flutter以目前的程度来说还不是很完善,很多丰富多彩的库在手机上运行良好,但是在桌面级上就不能使用了,而这次伯衡君为大家分享如何通过Electron,只要会html,css和html就能快速打造你人生第一个桌面级应用哦,分享给大家。

前情提要

官方网站

内容详情

要使用electrojs,首先是在本机上安装nodejs,nodejs的官方网址是https://nodejs.org/,无论是下载LTS版还是Current版,都是可以的,下载安装就可以。

如何验证安装是否成功?只需要在terminal(Mac或者Linux),cmd(Windows),分别输入以下两个代码:

node -v
npm -v

如果看到有版本号出现,就说明安装成功了。

之后就是安装Electrojs,输入以下代码:

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

之后就会在硬盘中创建并打开一个my-electron-app,从vs code中打开,就会看到一个package.json,此时,就要创建你的第一个应用啦,新建一个名为main.js的文件,然后输入以下代码:

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

创建html文件,创建一个名为index.html的文件,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

创建另一个js文件,preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

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

编辑之前说的package.json:

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

然后,在terminal安装最新的electron。

npm install [email protected]

安装完成后,继续输入:

npm start

就会看到出现了程序启动的调试结果,如下图所示:

使用Electron来快速打造你的桌面应用,Web开发者的福音

接下来是打包程序,就可以可以生成Windows,MacOS和Linux的app啦。

npm install --save-dev @electron-forge/cli
npx electron-forge import

接下来是这样:

npm run make

随后,就会看到在my-electron-app生成的三种系统的文件。

使用Electron来快速打造你的桌面应用,Web开发者的福音

解压缩出来就是各种软件了。

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: