yarn create react-app electron-react
cd electron-react
yarn run eject // 修改react-app打包的路径 / -> ./
vi main.js

main.js

const {
app,
BrowserWindow,
ipcMain
} = require('electron') const path = require('path')
const url = require('url') //保留窗口对象的全局引用,如果不这样做,窗口将会
//当JavaScript对象被垃圾收集时自动关闭。
let mainWindow = null; function createWindow() {
//创建浏览器窗口。f12 查看所有的参数
mainWindow = new BrowserWindow({
width: 800,
height: 600,
// backgroundColor: '#f48', // 优雅地显示窗口
// frame: false
}); /**
* ! 优雅地显示窗口
*/
mainWindow.once('ready-to-show', () => {
win.show()
}) /**
* * 加载本地HTML文件
*/
mainWindow.loadURL('http://localhost:3000')
// mainWindow.loadURL(url.format({
// pathname: path.join(__dirname, 'build', 'index.html'),
// protocol: 'file:',
// autoHideMenuBar: true,
// slashes: true
// })) /**
* * 打开DevTools
*/
mainWindow.webContents.openDevTools() /**
* * 关闭窗口时发出。
*/
mainWindow.on('closed', function () {
//解引用窗口对象,通常你会存储窗口
//如果您的应用程序支持多窗口,则在数组中,现在是时候了
//当你应该删除相应的元素。
mainWindow = null
}); // menu
// require('./menu.js');
} // Electron完成后将调用此方法
// 初始化并准备创建浏览器窗口。
// 一些API只能在发生此事件后才能使用。
app.on('ready', createWindow) //关闭所有窗口时退出。
app.on('window-all-closed', function () {
//在OS X上,应用程序及其菜单栏很常见
//保持活动状态,直到用户使用Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit()
}
}) app.on('activate', function () {
//在OS X上,通常会在应用程序中重新创建一个窗口
//点击了dock图标,并且没有其他窗口打开。
if (mainWindow === null) {
createWindow()
}
})

package.json

{
"main": "main.js", "scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom", "e-start": "electron .",
"e-build": "npm run build && electron-builder --win --x64",
}

执行 npm run dev

electron+react的更多相关文章

  1. electron+react项目改为typescript

    1.添加typescript依赖 yarn add typescript 2.修改tsconfig.json "isolatedModules": true => " ...

  2. Electron+React+七牛云 实战跨平台桌面应用(最新更新)

    课程资料获取链接:点击这里 前市场上对 Electron 的呼声很高,它几乎是 Web 开发人员开发桌面客户端的唯一途径,很多大厂都使用 Electron 开发自己的原生应用.Electron 天生适 ...

  3. 基于 react + electron 开发及结合爬虫的应用实践🎅

    前言 Electron 是一个可以使用 Web 技术如 JavaScript.HTML 和 CSS 来创建跨平台原生桌面应用的框架.借助 Electron,我们可以使用纯 JavaScript 来调用 ...

  4. 2019 年 React 学习路线图(转)

    转自:https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc 之前我们已经介绍了2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框 ...

  5. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

  6. 2019年React学习路线图

    作者|javinpaul 译者|无明 之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发展,我们 ...

  7. PDF.js Electron Viewer

    PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源. 本文旨在介绍 PDF.js 于 Electron 里如何开始使用,实际尝试了用其 A ...

  8. 2019 front-end web trending

    2019 front-end web trending https://github.com/kamranahmedse/developer-roadmap https://raw.githubuse ...

  9. 一名全栈工程师Node.js之路-转

    Node.js 全球现状 虽然 Node.js 在国内没有盛行,但据 StackOverflow 2016 年开发者调查,其中 node.js .全栈.JavaScript 相关的技术在多个领域(包括 ...

随机推荐

  1. Javascript 字符串(二)常用操作整理

    一.js获取字符串的字节数 这个好使--- function getBytesLength(str) { // 在GBK编码里,除了ASCII字符,其它都占两个字符宽 return str.repla ...

  2. Css3实现波浪效果2

    一.不规则圆,旋转实现波浪效果 .info { width: 200px; height: 200px; ; background: #009A61; border-radius: 45%; colo ...

  3. 利用Caffe训练模型(solver、deploy、train_val) + python如何使用已训练模型

    版权声明:博主原创文章,微信公众号:素质云笔记,转载请注明来源“素质云博客”,谢谢合作!! https://blog.csdn.net/sinat_26917383/article/details/5 ...

  4. ANTLR v4 权威参考笔记(目录)

    ANTLR v4是一款强大的语法分析器生成器,可以用来读取.处理.执行和转换结构化文本或二进制文件.通过称为文法的形式化语言描述,ANTLR可以为该语言自动生成词法分析器.生成的语法分析器可以自动构建 ...

  5. 【转】Java并发的AQS原理详解

    申明:此篇文章转载自:https://juejin.im/post/5c11d6376fb9a049e82b6253写的真的很棒,感谢老钱的分享. 打通 Java 任督二脉 —— 并发数据结构的基石 ...

  6. 基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应

    没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem,而字体要用px 安装flexible npm install lib-flexible --save 引入flexi ...

  7. 11个超震撼的HTML5和纯CSS3动画源码

    1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...

  8. idea maven 集成多模块 module

    首先第一步创建 顶级项目  也就是父项目 在创面那部中 不管你勾不勾 create from 那个选项 都无所谓,最终创建的项目要全删的 ,只保留pom.xml 父项目结构 接下来 创建子项目  也是 ...

  9. jQuery EasyUI 详解

    EasyUI 简介 easyui 是一种基于 jQuery 的用户界面插件集合. easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能. 使用 easyui 你不需要写很多 ...

  10. 力导向图Demo

    <html> <head> <meta charset="utf-8"> <title>力导向图</title> < ...