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了

  • 相关阅读:
    统一身份认证(CAS)客户端测试获取信息代码
    常用的java工具类
    windows 批处理(bat)中执行程序后不等待直接退出(cmd中新进程执行程序)
    持续交付的八条原则,你能做到几条?(转)
    灵动标签调用栏目导航技巧
    .net网络编程(2)网络适配器
    Property Value Inheritance Tip(1)
    排序算法补充
    编码参考(Encoding)
    .net网络编程(3)Socket基础
  • 原文地址:https://www.cnblogs.com/MartinLwx/p/10506349.html
Copyright © 2011-2022 走看看