var electron = require(‘electron’);
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
app.on(‘ready’, function () {
var mainWindow = new BrowserWindow({
width: 800,
height: 600
});
});
很明显 electron 为开发者提供了方便好用的 API 可供调用。app 控制整个程序的生命周期,BrowserWindow 可以打开一个浏览器窗口。
Electron 引入了两个新的概念 Main Process 和 Renderer Process 。以目前浅显的理解,Main Process 指的就是浏览器窗口,Renderer Process 指的就是网页。
在 main.js 中添加好上面的代码后保存,在命令行运行 npm start
,应该就会打开一个 800*600 像素的空白窗口。从而也证明程序可以正常跑起来了。
=======================================================================
既然打开了一个浏览器窗口,第一个想法自然就是,咱们开个网页吧。在 main.js 里面使用一个简单的方法,就可以达到目的啦。
app.on('ready', function () { var mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL('https://github.com/Neveryu') })
重新执行 npm start
启动程序之后就可以见到效果。
可是我们在建一个桌面程序呢,肯定是要加载自己写的文件吧。loadURL 同样可以为我们做到。把传入的参数改为本地文件路径就可以啦。
首先在 index.html 里面加点简单的内容,好让渲染成功之后能看到点东西。
<html> <head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main">hello world</div> </body> </html>
main.js 里面修改成加载本地文件:
app.on('ready', function () { var mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL('file://' + __dirname + '/index.html') })
重启程序应该就可以看见页面渲染出 hello world 字符串了。
=========================================================================
打开 html 文件成功的话,下一步自然就是引入一下 jquery 和其它的 js 吧。下面在文件夹根目录放入 jquery-2.0.2.js ,再创建一张 app.js。并在 index.html 里面引入:
<html> <head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main"></div> </body> <script>require('./jquery-2.0.2.js')</script> <script>require('./app.js')</script> </html>
有了 jquery,下面的步骤自然就是操作一下 dom 了。我们在 app.js 里面简单地搞一下:
$('.main').text('helloworld')
重启程序。OK,很棒。
如果我们引入的是 jquery-2.1.4.js 及其以上的版本。
重启程序,可能就看不到 hello world 。
=====================================================================
好了,这应该是哪里出错了吧。是不是开始怀念 chrome dev tool 了?
既然我们是打开了一个浏览器窗口,那应该也能打开 dev tool 才是。Bingo!Electron 可以为你做到!
app.on('ready', function () { var mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL('file://' + __dirname + '/index.html') /* 不加任何参数,可以在本窗口内打开dev tool */ /* mainWindow.webContents.openDevTools() */ /* 加上参数,可以在新窗口中打开dev tool */ mainWindow.webContents.openDevTools({detach: true}) })
重启程序就可以在 dev tool 中看到报错了。
Uncaught ReferenceError: $ is not defined
查到正确的引入方法应该是:
<html> <head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main"></div> </body> <script>var $ = require('./jquery-2.1.4.min.js')</script> <script>require('./app.js')</script> </html>
原因:
看一下 jquery 源码:
if ( typeof module === "object" && typeof module.exports === "object" ) { /* 把jQuery挂到`module`对象下 */ } else { /* 把jQuery挂到`window`对象下 */ }
在 app.js 里面简单 console.log 一下可以知道,module 和module.exports 都已经定义,所以 jQuery 挂到了 module 对象下,而不是全局的 window.$ 或 window.jQuery 。
======================================================================
之前 loadURL 方法可以帮我们直接在浏览器中打开本地 html 文件。由于有 nodeJS 的加持,我们还能直接读取本地文件的内容。
html 中加一个 fileContent 。
<html> <head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main"></div> <div class="fileContent"></div> </body> <script>var $ = require('./jquery-2.1.4.min.js')</script> <script>require('./app.js')</script> </html>
app.js 中使用 nodeJS 的 API,读取 package.json 文件内容:
var fs = require('fs') var pckJson = fs.readFileSync('./package.json', 'utf8') $('.fileContent').text(pckJson)
能做到这一点,就代表我们可以在 app 本地写一些数据来使用了。
---------------------------(正文完)------------------------------------
一个前端的学习交流群,想进来面基的,可以点击这个logo,或者手动search群号:685486827
写在最后: 约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------
我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu
更多学习资源请关注我的新浪微博…
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/1e4d42cfbb2214f98ff7fae8309bea78.jpeg)
前端面试题是我面试过程中遇到的面试题,每一次面试后我都会复盘总结。我做了一个整理,并且在技术博客找到了专业的解答,大家可以参考下:
由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~
感悟
sdnimg.cn/img_convert/0432b8e539325b94948089383d0bfa8c.png)
由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~
感悟
春招面试的后期,运气和实力都很重要,自己也是运气比较好,为了回馈粉丝朋友们(毕竟自己也玩了这么久哈哈哈),整理个人感悟和总结以上。最后祝愿大家能够收获理想offer!!