用 htmi5做网站,代做企业网站备案,网站建设 需求调研,wordpress 留言板样式安装
创建package.json
npm init创建electron npm install --save-dev electron创建程序主入口文件 main.js,electron分为主进程和渲染进程,main,js也可以理解为electron项目的主进程,在主进程中是node环境不可以写操作dom方法,在渲染进程中是浏览器环境 可以写操作dom的一些…安装
创建package.json
npm init创建electron npm install --save-dev electron创建程序主入口文件 main.js,electron分为主进程和渲染进程,main,js也可以理解为electron项目的主进程,在主进程中是node环境不可以写操作dom方法,在渲染进程中是浏览器环境 可以写操作dom的一些方法使用nodemon快速启动项目
npm install -g nodemon package.json文件里面的配置 我这里的版本是28,后续博客关于electron的项目也是这个版本
{name: my-electron-app,version: 1.0.0,description: Hello World!,main: main.js,author: Jane Doe,license: MIT,scripts: {start: nodemon --exec electron .},devDependencies: {electron: ^28.1.0}
}main.js 基本配置
//BrowserWindow 窗口模块
const { app, BrowserWindow } require(electron);
const path require(path);
const createWindow () {// Create the browser window.const mainWindow new BrowserWindow({width: 600,height: 600,webPreferences: {preload: path.join(__dirname, preload.js),},frame: false, //隐藏标题栏});//每次启动弹出调试框mainWindow.webContents.toggleDevTools();// 加载页面文件mainWindow.loadFile(path.resolve(__dirname, index.html));// 加载外部链接// mainWindow.loadURL(https://www.bilibili.com/video/BV1XA411m7Rz?p7vd_source3f2d70e03f43eedd302d3543ad8099b2)// 打开开发工具// mainWindow.webContents.openDevTools()
};在main.js 中加载了index.html页面,也可以使用在线的url,为了方便开发进行调试可以使用mainWindow.webContents.openDevTools()这个方法打开调试器 这样就不用每次手动去点开了
index页面配置
!--index.html--!DOCTYPE html
htmlheadmeta charsetUTF-8!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --meta http-equivContent-Security-Policy contentdefault-src self; script-src selftitle你好!/title
/headbodyh11121asdasdasdasd 3!/h1我们正在使用 Node.js span idnode-version/span, Chromium span idchrome-version/span, 和 Electron span idelectron-version/span.-- 您也可以此进程中运行其他文件 --script src./renderer.js/script
/body/html启动项目
npm start
