快速入门(1)

2021-07-25 18:32:49 阅读：173 来源： 互联网

标签：preload npm const 入门 app js electron 快速

1.前言

本节主要讲述Electron的环境搭建以及如何快速创建一个应用

2.环境搭建

(1)安装node.js
(2)创建项目目录，初始化配置文件

//进入项目目录 并在此目录打开cmd窗口 执行以下代码
npm init

//按照后续的提示 填写项目名称，作者等信息

(3)定义npm脚本命令和入口js文件

在scripts节点中配置start属性,将来可使用 npm start/npm run start 命令启动项目
在main节点中程序的入口js文件

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "demo",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "electron": "^13.1.7"
  }
}

3.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>
    <!-- 引入页面js -->
    <script src="./renderer.js"></script>
  </head>
  <body>
    <h1 id="title">Hello World!</h1>
    <!-- 以下的元素都定义id 方便js操作dom -->
    <h3>
        preload run time = <span id="preload-time"></span>
    </h3>
    <h3>
        prenderer.js run time = <span id="renderer-time"></span>
    </h3>
    <h3>
        We are using Node.js <span id="node-version"></span>
    </h3>
    <h3>
        Chromium <span id="chrome-version"></span>
    </h3>
    <h3>
        and Electron <span id="electron-version"></span>
    </h3>
    
  </body>
</html>

4.入口文件编写

//main.js
//引入 app和BrowserWindow 模块
const { app, BrowserWindow } = require('electron')
//引入 path 模块
const path = require('path')


//程序入口
app.whenReady().then(() => {
    //程序就绪后 调用方法
    createWindow()
})

//事件监听 关闭所有窗口时退出应用 (Windows & Linux)
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

//封装创建窗口的函数
function createWindow () {
    //创建新窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'), //引入预加载的js
        }
    })


    //事件监听 如果没有窗口打开则打开一个窗口 (macOS)
    app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })

    //加载页面
    win.loadFile('index.html')
}

5.预加载js文件和renderer文件编写

renderer.js

window.onload = function(){
    //输出运行时间
    document.getElementById('renderer-time').innerHTML = new Date().toLocaleString()
}

preload.js

// All of the Node.js APIs are available in the preload process.
// 所有Node.js API都可以在预加载过程中使用

// It has the same sandbox as a Chrome extension.

//事件监听
window.addEventListener('DOMContentLoaded', () => {
    //创建修改dom的方法
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }

    //在页面输出preload的运行时间
    document.getElementById('preload-time').innerHTML = new Date().toLocaleString()
  
    //循环调用方法 修改页面
    for (const dependency of ['chrome', 'node', 'electron']) {
        //在页面中输出各模块的版本号
        replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

6.启动项目

在项目目录中打开cmd命令，执行以下命令

npm start

执行结果：

标签：preload,npm,const,入门,app,js,electron,快速
来源： https://www.cnblogs.com/OrochiZ-/p/15058577.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。