Electron 12 学习(二)Electron 12 安装与配置

Electron 12 学习 专栏收录该内容
12 篇文章 1 订阅
  1. 设置 electron 镜像:

    npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
    
  2. 全局安装 Electron 并测试:

    npm i -g electron
    
    C:\Users\xuxiaowei>npm i -g electron
    D:\Program Files\nodejs\node_global\electron -> D:\Program Files\nodejs\node_global\node_modules\electron\cli.js
    
    > electron@12.0.9 postinstall D:\Program Files\nodejs\node_global\node_modules\electron
    > node install.js
    
    + electron@12.0.9
    updated 3 packages in 8.465s
    
    C:\Users\xuxiaowei>
    
  3. 测试启动 electron:

    C:\Users\xuxiaowei>electron
    
    
    Electron 12.0.9 - Build cross platform desktop apps with JavaScript, HTML, and CSS
    Usage: electron [options] [path]
    
    A path to an Electron app may be specified. It must be one of the following:
      - index.js file.
      - Folder containing a package.json file.
      - Folder containing an index.js file.
      - .html/.htm file.
      - http://, https://, or file:// URL.
    
    Options:
      -i, --interactive     Open a REPL to the main process.
      -r, --require         Module to preload (option can be repeated).
      -v, --version         Print the version.
      -a, --abi             Print the Node ABI version.
    

    在这里插入图片描述

  4. 创建 Node 项目:
    Electron 文档 创建基本应用程序

    mkdir electron-12-study
    cd electron-12-study
    npm init
    
    D:\WebstormProjects>mkdir electron-12-study
    
    D:\WebstormProjects>cd electron-12-study
    
    D:\WebstormProjects\electron-12-study>npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help init` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    package name: (electron-12-study)
    version: (1.0.0)
    description: Electron 12 学习
    entry point: (index.js)
    test command:
    git repository: https://github.com/xuxiaowei-com-cn/Electron-12-Study.git
    keywords: electron
    author: 徐晓伟 <xuxiaowei@xuxiaowei.com.cn>
    license: (ISC) MIT
    About to write to D:\WebstormProjects\electron-12-study\package.json:
    
    {
      "name": "electron-12-study",
      "version": "1.0.0",
      "description": "Electron 12 学习",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/xuxiaowei-com-cn/Electron-12-Study.git"
      },
      "keywords": [
        "electron"
      ],
      "author": "徐晓伟 <xuxiaowei@xuxiaowei.com.cn>",
      "license": "MIT",
      "bugs": {
        "url": "https://github.com/xuxiaowei-com-cn/Electron-12-Study/issues"
      },
      "homepage": "https://github.com/xuxiaowei-com-cn/Electron-12-Study#readme"
    }
    
    
    Is this OK? (yes)
    
    D:\WebstormProjects\electron-12-study>
    
  5. 创建项目内容如下:
    在这里插入图片描述

  6. 添加版本控制:
    GitHub 地址
    CodeChina 地址
    Gitee 地址
    已上版本控制地址将同步推送
    在这里插入图片描述

  7. 安装 electron:
    Electron 文档 - 安装-electron

    npm i -D electron
    
    Microsoft Windows [版本 10.0.19042.985]
    (c) Microsoft Corporation。保留所有权利。
    
    D:\WebstormProjects\electron-12-study>npm i -D electron
    
    > core-js@3.12.1 postinstall D:\WebstormProjects\electron-12-study\node_modules\core-js
    > node -e "try{require('./postinstall')}catch(e){}"
    
    Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
    
    The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
    > https://opencollective.com/core-js 
    > https://www.patreon.com/zloirock 
    
    Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
    
    
    > electron@12.0.9 postinstall D:\WebstormProjects\electron-12-study\node_modules\electron
    > node install.js
    
    npm notice created a lockfile as package-lock.json. You should commit this file.
    + electron@12.0.9
    added 87 packages from 96 contributors in 18.751s
    
    6 packages are looking for funding
      run `npm fund` for details
    
    
    D:\WebstormProjects\electron-12-study>
    
  8. 创建主脚本文件:
    Electron 文档 - 创建主脚本文件

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

    在这里插入图片描述

  9. 创建网页:
    Electron 文档 - 创建网页

    <!DOCTYPE html>
    <html lang="zh">
    <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>
    

    在这里插入图片描述

  10. 定义一个预加载脚本:
    Electron 文档 - 定义一个预加载脚本

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

    在这里插入图片描述

  11. 修改您的-packagejson-文件
    Electron 文档 - 修改您的-packagejson-文件

     "start": "electron .",
    
    {
      "name": "electron-12-study",
      "version": "1.0.0",
      "description": "Electron 12 学习",
      "main": "index.js",
      "scripts": {
        "start": "electron .",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/xuxiaowei-com-cn/Electron-12-Study.git"
      },
      "keywords": [
        "electron"
      ],
      "author": "徐晓伟 <xuxiaowei@xuxiaowei.com.cn>",
      "license": "MIT",
      "bugs": {
        "url": "https://github.com/xuxiaowei-com-cn/Electron-12-Study/issues"
      },
      "homepage": "https://github.com/xuxiaowei-com-cn/Electron-12-Study#readme",
      "devDependencies": {
        "electron": "^12.0.9"
      }
    }
    
  12. 启动项目:
    在这里插入图片描述
    在这里插入图片描述

  13. 源码:
    GitHub
    Gitee
    CodeChina

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值