初探Electron.js

Posted on 2021-02-13 22:05:28
Author: 可乐小可爱メ
1. 安装

前言介绍就直接跳过了,

按官网 npm i --save-dev electron

但有时候网络环境欠佳就一直安装不成功,(实际上是安装一个 精简版的 Chromium, 默认从github下载,服务器在国外)

即使我nrm 切换到 taobao源指向 


结果也安装超时:


可以尝试 yarn set electron的镜像:

yarn config set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron/

然后: yarn add electron --dev --platform=win64


2. 初始demo项目

这里写一个建议版本的 react 

主进程 index.js

const { app, BrowserWindow } = require("electron");

const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
frame: false, // 静止边框和标题栏
webPreferences: {
nodeIntegration: true, // 开放node能力
},
});

win.loadFile("./index.html");
};

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});

app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});


渲染进程 index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React - ReactRedux</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
<script src="https://unpkg.com/redux@4.0.5/dist/redux.js"></script>
<script src="https://unpkg.com/react-redux@7.2.2/dist/react-redux.js"></script>
<script type="text/babel">
const root = document.querySelector("#app");
const reducer = (state = { count: 1 }, action) => {
if (action.type === "PLUS") {
return { count: ++state.count };
} else if (action.type === "REDUCE") {
return { count: --state.count };
}
return state;
};

const store = Redux.createStore(reducer);

const App = (props) => {
const count = ReactRedux.useSelector((state) => state.count);
const dispatch = ReactRedux.useDispatch();
return (
<div>
<p>React - ReactRedux</p>
<button onClick={() => dispatch({ type: "PLUS" })}>+</button>
<p>count: {count}</p>
<button onClick={() => dispatch({ type: "REDUCE" })}>-</button>
</div>
);
};

const ConnectApp = ReactRedux.connect((state) => state)(App);

ReactDOM.render(
<ReactRedux.Provider store={store}>
<ConnectApp />
</ReactRedux.Provider>,
root
);
</script>
</html>


3.  编译

这里是用的 官方维护的 electron-builder

yarn add electron-builder --dev

然后在 package.json 中添加 script 命令

"scripts": {
"dev": "electron .",
"build": "electron-builder --dir",
"test": "echo "Error: no test specified" && exit 1"
},

执行后:



4. 工程化

当然,应该通过 webpack 工程化 引入 React or  Vue

这里给两个传送门, 具体的 electron webpack 及 前端框架的工程化配置 没有做深入研究

electron-react-boilerplate;

Vue的话 官方提供的 @vue/cli 

vue add electron-builder

直接初始话 vue-electron 项目, 通过 package.json 中的 script命令


项目同时支持 web 和 electron 的 开发以及生成模式。

当前评论 (1) 登录后评论

小蜜獾
2021-03-30 11:50:43

cool

回复
1