乐趣区

关于electron:Tauri-与-Electron

Tauri

什么是 Tauri ?

Tauri 是一个为所有支流桌面平台构建小型、疾速二进制文件的框架。开发人员能够集成任何编译成 HTML、JS 和 CSS 的前端框架来构建他们的用户界面。应用程序的后端是一个 Rust 二进制文件,具备前端能够与之交互的 API。

装置形式

Xcode

$ xcode-select --install

Rust

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

装置过程中如果报错 curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused

须要开启代理:

# 7890 和 789 须要换成你本人的代理端口
$ export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:789

要确保 Rust 已胜利装置,请运行以下命令

$ rustc --version

$rustc 1.59.0 (9d1b2106e 2022-02-23)

启动一个新的 Tauri

$ yarn create tauri-app

创立我的项目的时候,如果报错 An unexpected error occurred: "https://registry.yarnpkg.com/create-vite: tunneling socket could not be established

同样的,须要开启代理,应用:

$ yarn config set proxy http://username:password@host:port
$ yarn config set https-proxy http://username:password@host:port

依照阐明抉择您喜爱的 Web 前端框架,create-tauri-app 依据您的输出创立模板我的项目,之后你能够间接去查看 tauri info

启动

$ yarn tauri dev

打包

$ yarn tauri build

Electron

什么是 Electron ?

Electron 框架容许您应用 JavaScript、HTML 和 CSS 编写跨平台的桌面应用程序。它基于 Node.js 和 Chromium,并被 Atom 编辑器和许多其余应用程序应用。

装置形式

创立我的项目

$ mkdir my-electron-app && cd my-electron-app
$ yarn init

批改 package.json,”main” 字段为 main.js,你的 package.json 应该是如下样子:

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

Electron

$ yarn add --dev electron

执行 Electron。在 package.json 配置字段 scripts,增加 start 如下命令

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

根目录新增 main.js

代码如下

// main.js

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {createWindow()

  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()})
})

// 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()})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

根目录新增 index.html

代码如下

<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src'self'; script-src'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src'self'; script-src'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

根目录新增 renderer.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])
  }
})

启动

$ npm run start

打包

增加 Electron Forge 作为应用程序的开发依赖项

$ cnpm install --dev @electron-forge/cli
$ npx electron-forge import

make 应用 Forge 的命令创立一个打包

$ yarn run make

两者区别

  1. 大小比照
  • Electron 官网介绍有提到,它基于 Node.js 和 Chromium,很显著的问题,包太大(62.5mb)应用 Chromium 的决定,也是解决 WebView 临时无奈解决的一些兼容性问题
  • Tauri,前端是通过零碎的 WebView2,后端应用 Rust,包很小(4.32MB)
  1. 官网文档
  • Electron 官网文档和社区迭代,目前比较稳定,公布了多个版本,能够稳固在生产应用
  • Tauri 作为一款新型桌面端开发框架,1.0.0 版本临时未出,能够继续关注,尝试做些小工具

总结

Tauri 作为一款新型桌面端开发框架,踩在了 Rust 和 WebView2 的两位伟人的肩膀上,能够说是时代的产物,Rust 近几年十分受欢迎,Deno 采纳 Rust,微软拥抱 Rust 等,微软又开始推广 WebView2,人造的劣势

结语

如果你感觉这篇内容对你挺有启发,别忘记点赞 + 关注

欢送增加我的集体微信:Jiang9684,备注昵称 + [岗位或业余],实例 Faker- 前端,通过更快噢,一起交换前端技术

退出移动版