如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

苏南大叔在本篇文章中,将讲述一个非常非常简单的electron的例子,但是确实很多人的实际需求,那就是:如何把一个网站装到electron里面去。在这里,并不是要把网站的所有源码放到electron里面,而是一个网站的网址,把这个网址包装到electron里面。双击electron图标的时候,可以打开一个窗口,窗口里面显示对应的网站。别看这个很简单,但是很多很多初级选手的需求,就是这个极其简单的需求。大家来跟着学习苏南大叔带来的这个electron入门的教程吧。

下载基础代码

苏南大叔建议大家:下载electron的入门范例,最简单清爽。下载地址是:https://github.com/electron/electron-quick-start

以electron-quick-start为基础,如何利用electron装载网站 - 001_quick_start

我们拿到这个最简单的demo后,解压到本地硬盘备用即可。

npm或者yarn安装

当然,全世界都在推荐使用yarn安装npm的依赖包,苏南大叔这里也推荐大家使用yarn进行安装。不会安装yarn的同学,可以到这里查看文档:https://yarn.org.cn/ 。进入到我们的工作目录,然后执行 yarn 命令即可。

yarn

以electron-quick-start为基础,如何利用electron装载网站 - 002_yarn

当然,npm是更好更通常更小白的选择。

npm install

以electron-quick-start为基础,如何利用electron装载网站 - npm_install

试运行demo

npm run start

以electron-quick-start为基础,如何利用electron装载网站 - 003_run_start

那么,如果你能得到截图中的electron界面,那么恭喜你,前进了一大步。

修改main.js

如果您看过了electron中文网(https://electron.org.cn/)的中文文档的话,那么您应该知道,这个package.json里面定义的main参数所定义的js,就是主进程所在的脚本了。

以electron-quick-start为基础,如何利用electron装载网站 - package-json-main

那么接下来,我们需要修改这个main.js,来实现用主进程打开一个网站,也就是我们的需求点了。非常简单,我们保持现有的main.js里面的所有代码不变,然后找到createwindow函数,我们就只需要修改这个函数就可以了。

以electron-quick-start为基础,如何利用electron装载网站 - 004_main

我们假如想打开 https://electron.org.cn 的话,那么,我们就可以修改这段js为下面的js。

function createWindow(){
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadURL("https://electron.org.cn/")
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

注意:请修改上面的网址为你的目标网址。

以electron-quick-start为基础,如何利用electron装载网站 - code

试运行一下,看看效果

这次,我们可以使用yarn来运行一下。

yarn run start

window下效果图如下:

以electron-quick-start为基础,如何利用electron装载网站 - final

看起来还不错,对吧。

小的结论

当然,上述代码中,你可能发现了宽度和高度的设置方法。实际上还有很多设置的参数。具体可以参见这里的文档。https://electron.org.cn/doc/api/browser-window.html

在具体实战中,我们可能会用到的常见参数,苏南大叔会在以后的文章里面进行讲述。欢迎继续关注苏南大叔的electron相关文章: https://newsn.net/tag/electron/

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。