Electron 入门教程

最新推荐文章于 2023-06-29 10:37:13 发布

emperinter

最新推荐文章于 2023-06-29 10:37:13 发布

阅读量1.3k

点赞数

分类专栏： Blog 文章标签： electron node.js html gui 大前端

原文链接：https://www.emperinter.info/2021/09/06/electron/

版权

Blog 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述

整个教程不涉及过于深入的知识，通过一系列c操作能够运行一个简单的MarkDown编辑器。在整个过程中体会Electron的作用，对于我来说就是把整个网页和浏览器打包成一个程序了，简单说可能就是我们常说的大前端。

安装

安装npm,详情请参考官网https://nodejs.org/en/
创建项目文件夹

mkdir Markdown

初始化

npm init

初始化后会生成一个项目描述文件package.json，内容(特别注意main何scripts选项)如下：

{
  "name": "markdownediter",
  "version": "1.0.0",
  "description": "markdownediter",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "markdown"
  ],
  "author": "emperinter",
  "license": "MIT",
  "devDependencies": {
    "electron": "^14.0.0"
  }
}

安装electron依赖

npm install --save-dev electron

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-okhC3n7J-1633931211826)(https://www.emperinter.info/wp-content/uploads/2021/09/wp_editor_md_782ae4dc278fc686ce39a04493c9f227.jpg)]

如果安装失败切换到淘宝镜像

npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"

下载Markdown依赖(用的是Editor.md,我这里用的是自己一个项目旧版本，新版本自己去琢磨)。下载后把JS目录整个移到该项目文件夹下；我整个项目也导报到上面了，不用整个也行，文章末尾有说明。

git clone https://github.com/emperinter/SimpleElectronGuide

Markdown配置步骤

创建index.html文件,内容如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Markdown</title>

		<link href="index.css" rel="stylesheet">

		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>

		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

		<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


		<!--markdwwn需要-->
		<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<script src="js/editor.md-master/editormd.min.js"></script>

		<!--markdwwn需要-->
		<link rel="stylesheet" href="js/editor.md-master/css/editormd.css" />

	</head>

	<body>


		<br/>
			
		<div align="center">
			<form action="" method="POST">
				<table border="1" width="95%">
					<tr>
						<div id="test-editor">
							<textarea style="display:none;" name="mark">### 关于 Editor.md**Editor.md
** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。**
> print("hello world !")
</textarea>
		<!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
							<textarea class="editormd-html-textarea" name="post"></textarea>
						</div>
					</tr>

				</table>
			</form>
		</div>

		<hr/>


        <br/>
        <br/>
        <br/>

		<footer class="footer mt-auto py-3">
			<div class="container" align="center" style="text-decoration:none;font-size:22px;">
				<span class="text-muted">Produced By <a style="text-decoration:none;" href="https://www.emperinter.info">emperinter</a>| <a style="text-decoration:none;" href="https://github.com/emperinter/MessageBoard">Github</a> | <a style="text-decoration:none;" href="mailto:blog@emperinter.info">Email</a></a></span>
			</div>
		</footer>

		<script type="text/javascript">
			$(function() {
				var editor = editormd("test-editor", {
					width  : "95%",
						height : 350,
				path   : "js/editor.md-master/lib/",
				saveHTMLToTextarea : true
				});
			});
		</script>
	</body>
</html>

index.js配置

//引入模块
const { app, BrowserWindow } = require('electron')

// 创建一个窗口

function createWindow () {

	const win = new BrowserWindow({
		width:800,
		height:600

	})
	win.loadFile('index.html')

}

// 侦听 app 的ready事件

app.whenReady().then(() => {

	createWindow()

})

运行（可看到项目运行时什么样子的）

npm start

如需了解如何打包成可执行文件，请访问：https://www.emperinter.info/2021/09/06/electron/

emperinter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron 入门教程

整个教程不涉及过于深入的知识，通过一系列c操作能够运行一个简单的MarkDown编辑器。在整个过程中体会Electron的作用，对于我来说就是把整个网页和浏览器打包成一个程序了，简单说可能就是我们常说的大前端。安装安装npm,详情请参考官网https://nodejs.org/en/创建项目文件夹mkdir Markdown初始化npm init初始化后会生成一个项目描述文件package.json，内容(特别注意main何scripts选项)如下：{ "nam..
复制链接

扫一扫