简单使用electron
引言
学习使用electron将浏览器端的内容。将浏览器端内容转换成兼容性更高的桌面应用。
1 介绍
1.1 electron简介
官方网址:https://www.electronjs.org/
一种基于Node.js + Chromium+NativeAPI的跨平台桌面应用程序框架。
使用前需要安装Node.js和npm。
1.2 环境搭建
按照网上教程直接安装node.js即可,npm会在安装node的同时自动安装。
2 快速使用
2.1 参考文件
官网:https://www.electronjs.org/zh/docs/latest/tutorial/quick-start#scaffold-the-project
非官网:
https://blog.csdn.net/weixin_39457424/article/details/109645669
2.2 步骤
- 建立文件夹
可以使用xshell命令行创建,也可以windows下直接可视化建立。
mkdir my-electron-app
- 使用脚手架创建
初始化npm
npm init
过程中,entry point 默认不是main.js,要在后面修改一下。其他内容随意,author和description两项为了打包操作方便直接填写内容,非空。
成功后,之前创建的文件夹中多了package.json
3. 导入electron依赖,建立main.js
npm install --save-dev electron
导入依赖后,文件夹中多了一个node_modules文件夹和package-lock.json文件。
2中图片需要添加scripts中start那一行
添加一个名为main.js的文件,然后输入npm启动命令不报错。
npm start
- 建立测试html文件。此处根据官方文档。并补充js文件中的初始内容。但是启动时遇到困难。
2.3 问题
运行时不知道怎么用,根据csdn的那篇文章测试是否安装了electron,发现返回了命令错误的问题,所以重新装了electron并检查是否成功。
npm install -g electron
npm -v
2.4 运行
2.4.1 vscode
直接点击了vscode中的运行,出现了下面界面,应该也可以输入npm启动命令来运行。
2.4.2 package.json
而后查看文件发现package.json中出现调试按钮,点击后出现2.4.1状态。
2.5 执行结果
3 参考内容
3.1 流程模型【主进程等内容】
https://www.electronjs.org/zh/docs/latest/tutorial/process-model
3.2 设置应用展示内容
之前展示的内容适html文件,静态资源,可以设置成网页链接。
const{app,BrowserWindow} = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width:800,
height:600
})
win.loadURL('https://baidu.com')
}
app.whenReady().then(()=>{
createWindow()
})
4 打包
4.1 安装依赖
npm install --save-dev electron-packager
4.2 打包
electron-packager . demo1 --out ../app --platform=win32 --arch=x64 --app-version=0.0.1 --electron-version=v20.1.0
提示:
Unsupported platform=win64 (string); must be a string matching: darwin, linux, mas,
win32
持续学习更新中。。。