简单使用electron

简单使用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 步骤

1. 建立文件夹
   
   可以使用xshell命令行创建，也可以windows下直接可视化建立。

mkdir my-electron-app

2. 使用脚手架创建
   初始化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

4. 建立测试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

持续学习更新中。。。