electron+react
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的更多相关文章
- electron+react项目改为typescript
1.添加typescript依赖 yarn add typescript 2.修改tsconfig.json "isolatedModules": true => " ...
- Electron+React+七牛云 实战跨平台桌面应用(最新更新)
课程资料获取链接:点击这里 前市场上对 Electron 的呼声很高,它几乎是 Web 开发人员开发桌面客户端的唯一途径,很多大厂都使用 Electron 开发自己的原生应用.Electron 天生适 ...
- 基于 react + electron 开发及结合爬虫的应用实践🎅
前言 Electron 是一个可以使用 Web 技术如 JavaScript.HTML 和 CSS 来创建跨平台原生桌面应用的框架.借助 Electron,我们可以使用纯 JavaScript 来调用 ...
- 2019 年 React 学习路线图(转)
转自:https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc 之前我们已经介绍了2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框 ...
- (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去
原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...
- 2019年React学习路线图
作者|javinpaul 译者|无明 之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发展,我们 ...
- PDF.js Electron Viewer
PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源. 本文旨在介绍 PDF.js 于 Electron 里如何开始使用,实际尝试了用其 A ...
- 2019 front-end web trending
2019 front-end web trending https://github.com/kamranahmedse/developer-roadmap https://raw.githubuse ...
- 一名全栈工程师Node.js之路-转
Node.js 全球现状 虽然 Node.js 在国内没有盛行,但据 StackOverflow 2016 年开发者调查,其中 node.js .全栈.JavaScript 相关的技术在多个领域(包括 ...
随机推荐
- Javascript 字符串(二)常用操作整理
一.js获取字符串的字节数 这个好使--- function getBytesLength(str) { // 在GBK编码里,除了ASCII字符,其它都占两个字符宽 return str.repla ...
- Css3实现波浪效果2
一.不规则圆,旋转实现波浪效果 .info { width: 200px; height: 200px; ; background: #009A61; border-radius: 45%; colo ...
- 利用Caffe训练模型(solver、deploy、train_val) + python如何使用已训练模型
版权声明:博主原创文章,微信公众号:素质云笔记,转载请注明来源“素质云博客”,谢谢合作!! https://blog.csdn.net/sinat_26917383/article/details/5 ...
- ANTLR v4 权威参考笔记(目录)
ANTLR v4是一款强大的语法分析器生成器,可以用来读取.处理.执行和转换结构化文本或二进制文件.通过称为文法的形式化语言描述,ANTLR可以为该语言自动生成词法分析器.生成的语法分析器可以自动构建 ...
- 【转】Java并发的AQS原理详解
申明:此篇文章转载自:https://juejin.im/post/5c11d6376fb9a049e82b6253写的真的很棒,感谢老钱的分享. 打通 Java 任督二脉 —— 并发数据结构的基石 ...
- 基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应
没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem,而字体要用px 安装flexible npm install lib-flexible --save 引入flexi ...
- 11个超震撼的HTML5和纯CSS3动画源码
1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...
- idea maven 集成多模块 module
首先第一步创建 顶级项目 也就是父项目 在创面那部中 不管你勾不勾 create from 那个选项 都无所谓,最终创建的项目要全删的 ,只保留pom.xml 父项目结构 接下来 创建子项目 也是 ...
- jQuery EasyUI 详解
EasyUI 简介 easyui 是一种基于 jQuery 的用户界面插件集合. easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能. 使用 easyui 你不需要写很多 ...
- 力导向图Demo
<html> <head> <meta charset="utf-8"> <title>力导向图</title> < ...