zoukankan      html  css  js  c++  java

  • Electron之Hello world（一）

    1. Electron简介

    Electron 是由Github开发，以Node.js为基本开发环境，以Chromium 为浏览器，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。

    简言之，Electron是一个以网页为交互的桌面图形用户界面（GUI）开源库。也是说可以帮助我们开发多款以网页为页面的桌面应用程序。比如像桌面版的网易云音乐，编译器、小工具，小游戏等。

    Electron官网：https://www.electronjs.org

    Electron Github: https://github.com/electron

    Electron文档：https://www.electronjs.org/docs

    2. Electron应用

    用lectron开发的应用有：VS Code客户端、GitHub客户端、Atom客户端等等。

    Electron应用：https://www.electronjs.org/apps

    3. Electron vs NW.js

    NW.js是基于Chromium和的应用程序运行时node.js。您可以使用NW.js用HTML和JavaScript编写本机应用程序。它还使您可以直接从DOM调用Node.js模块，并启用一种使用所有Web技术编写本机应用程序的新方式。

    NW.js官网：https://nwjs.io/

    特点：

    （1）以网络最流行的技术编写原生应用程序的新方法

    （2）基于HTML5, CSS3, JS and WebGL而编写

    （3）完全支持nodejs所有api及第三方模块

    （4）可以使用DOM直接调用nodejs模块

    （5）容易打包和分发

    （6）支持运行环境包括32位和64位的Window、Linux和Mac OS

    NW.js和Electron基本类似，但是Electron生态比较好一点，应用广泛，有专业的团队在维护，文档等这些比较全面，虽然NW.js和Electron都支持桌面程序，但缺点就是打包文件打，没有原生的程序效率高。

    推荐书籍

    百度云盘：xxx

    链接密码：xxx

    image-20200409172722934

    4. Electron Hello world应用程序

    4.1 环境安装

    安装node.js，参考：https://blog.csdn.net/antma/article/details/86104068

    4.2 编译器选择

    官方推荐使用 Atom 或者 Visual Studio Code开发Electron，但本人作为后端人员偏向IDEA Webstrom,所以接下来开发几乎都用IDEA Webstrom 。

    4.3 安装electron

    1、在webstormworkplace中，新建Electrom-demo,作为Electrom学习所有的案例的集合

    2、打开Windows power Shell,查看node和npm的版本

    # 下面这行的命令会打印出Node.js的版本信息
node -v
# 下面这行的命令会打印出npm的版本信息
npm -v
    image-20200409182441530

    3、安装electron过程

    cd E:webstormworkplaceElectron-demo
#安装 electron
npm install --save-dev electron
    image-20200409182737854

    出现错误：原因是我开了代理（翻墙），因此关闭代理（翻墙）

    image-20200409182958086

    再次执行npm install --save-dev electron，成功慢慢下载，但太慢了

    image-20200409183524818

    安装失败和速度解决方式：

    1.如果通过 npm 安装失败，您可以尝试直接从 electron/electron/releases 直接下载 Electron。

    2.在较慢的网络上, 最好使用 --verbose 标志来显示下载进度:

    npm install --verbose electron

    3.如果上述错误仍然存在, 则可能需要将参数 unsafe-perm 设置为 true

    sudo npm install electron --unsafe-perm=true

    4.代理安装

    对此，我还是选择手动下载去https://github.com/electron/electron/releases 直接下载 Electron

    那么选择那个版本下载呢，肯定是稳定版本，那么到底是哪个稳定版本呢，从刚才的截图可以得知

    image-20200409185054994

    下载：electron-v8.2.1-win32-x64.zip

    image-20200409185145590

    没有开代理，速度仍然很慢，所以我还是去弄代理下载了......，没有代理只能慢慢等

    下载完成，下面的警告表示你没有初始化node.js项目，等下弄就可以。

    image-20200409194140116 image-20200409195216363

    4.4 electron的简单使用

    1、新建目录lession1,把文件放进去

    image-20200409195539628

    2、初始化node.js项目转化为electron项目

    cd Electron-demolession1
#初始化node.js项目
npm init
#只填写入口文件
entry point: (index.js) main.js
一直回车默认
    image-20200409200208634

    lession1/package.json,生成的package.json有electron的版本

    {
"name": "lession1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"electron": "^8.2.1"
},
"devDependencies": {},
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}

    在scripts脚本中，添加

     "start": "electron ."

    此时的lession1/package.json

    {
"name": "lession1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"electron": "^8.2.1"
},
"devDependencies": {},
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
  "start": "electron ."
},
"author": "",
"license": "ISC"
}

    3、创建lession1/main.js以及index.html

    image-20200409202443226

    main.js

    //引用 electron的API
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  let win = new BrowserWindow({
     800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')
}
//启动打开窗口
app.whenReady().then(createWindow)

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
Hello
</body>
</html>

    4、启动Electron程序，需要等待几十秒

    #进入目录
cd lession1
#启动
npm start

    5、效果

    image-20200409201955616

    4.5 electrom 的简单改造

    对原来的electrom案例进行改造，添加一些信息显示

    main.js

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

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
     800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

    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>
node 版本： <script>document.write(process.versions.node)</script>,
Chrome 版本： <script>document.write(process.versions.chrome)</script>,
Electron 版本：<script>document.write(process.versions.electron)</script>.
</body>
</html>

    启动：

    #进入目录
cd lession1
#启动
npm start

    效果：显示版本和打开开发者工具

    image-20200409203646030
  • 相关阅读:
    Array.sort源码
    Linkedlist源码
    最大公约数 2.7
    腾讯笔试题
    腾讯2014校园招聘笔试题
    指针问题
    JavaScript 日历
    QT 初阶 第二章 创建对话框（查找对话框实例）
    QT 初阶 1.3 节 控件的几何排列
    “项目中的问题”
  • 原文地址：https://www.cnblogs.com/fby698/p/12669573.html
Copyright © 2011-2022 走看看