zoukankan      html  css  js  c++  java
  • 如何用Electron Js创建第一个应用Hello World

    什么是Electron

    Node.js和Chromium的结合品。允许只使用HTML,CSS和JavaScript来开发跨平台桌面应用。

    编写第一个Electron程序(Hello World)

    1. 在开始之前确保Node.js和Electron已经正确安装,可以用node -v,electron -v来看看有没有输出版号信息

    2. 确定必要环境都安装好之后就可以开始

      1. 首先创建一个新的文件夹,可以叫做Hello World
      2. 在该文件夹下创建三个文件,分别是index.html,main.js,package.json

    index.html

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

    main.js

    const electron = require("electron");
    const app = electron.app;
    const BrowserWindow = electron.BrowserWindow;
    const path = require("path");
    const url = require("url");   //基本是electron应用必备的语句,用来导入包,处理不同的内容
    
    
    let win;    //让JavaScript不要回收窗口,保持全局引用
    
    function createWindow(){
        win = new BrowserWindow();
        win.loadURL(url.format({
            pathname: path.join(__dirname, 'index.html'),
            protocol: 'file',
            slashes: true
        }));	//载入对应的html文件
    
        win.on('closed', ()=> {
            win = null;
        }) //关闭窗口时释放掉
    }   //创建窗口的函数
    
    app.on('ready', createWindow);   //打开应用时,调用createWindow,即创建窗口函数
    

    package.json

    {
      "name": "electron-js-test",  //应用的名字
      "version": "1.0.0",	//应用的版本
      "main": "main.js", //主进程
      "scripts": {
        "start": "electron ."
      }		//告诉npm应该加载什么命令
    }
    

    最后在Hello World文件夹里打开命令行,输入npm start就可以看到应用打开而且输出Hello,World了

  • 相关阅读:
    个人笔记 给hover 伪类 恢复默认值
    vue 正则判断
    音乐播放器封装
    jq封装插件,简单dome
    功能齐全轮播
    vue 前端判断输入框不能输入0 空格。特殊符号。
    jq 下拉框
    IPC : 进程间通信方式
    内存
    const char* str 与char str[10]
  • 原文地址:https://www.cnblogs.com/MartinLwx/p/10506349.html
Copyright © 2011-2022 走看看