Electron⼊门教程
整个教程不涉及过于深⼊的知识，通过⼀系列c操作能够运⾏⼀个简单的MarkDown编辑器。在整个过程中体会Electron的作⽤，对于我来说就是把整个⽹页和浏览器打包成⼀个程序了，简单说可能就是我们常说的⼤前端。
安装
创建项⽬⽂件夹
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
如果安装失败切换到淘宝镜像
npm config set electron_mirror "/mirrors/electron/"
下载Markdown依赖(⽤的是Editor.md，我这⾥⽤的是⾃⼰⼀个项⽬旧版本，新版本⾃⼰去琢磨)。下载后把JS⽬录整个移到该项⽬⽂件夹下；我整个项⽬也导报到上⾯了，不⽤整个也⾏，⽂章末尾有说明。
git clone github/emperinter/SimpleElectronGuide
Markdown配置步骤
创建index.html⽂件，内容如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Markdown</title>
<link href="index.css"rel="stylesheet">
<script src="cdn.bootcdn/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<!-- 最新版本的 Bootstrap 核⼼ CSS ⽂件 -->
<link rel="stylesheet"href="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg3 2OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="a
nonymous">
<!-- 可选的 Bootstrap 主题⽂件（⼀般不⽤引⼊） -->
<link rel="stylesheet"href="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGa slCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous">
<!-- 最新的 Bootstrap 核⼼ JavaScript ⽂件 -->
<script src="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mC WNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>
<!--markdwwn需要-->
<script src="cdn.bootcss/jquery/1.11.3/jquery.min.js"></script>
<script src="js/editor.md-master/editormd.min.js"></script>
<!--markdwwn需要-->
<!--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 name="mark">### 关于 Editor.md**Editor.md
** 是⼀款开源的、可嵌⼊的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。**
jquery在线教程交流> 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">
<span class="text-muted">Produced By <a href="perinter.info">emperinter</a>| <a href="github/emperinter/MessageBoard">Github</a> | <a 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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。