electron迎来3.0之际,一些备受诟病的函数和特性,也获得了改善和提升。其中,最显著的莫过于每个electron的一个入口函数了,那就是loadUrl()函数。目前最新的electron3.x系列,支持一个新的函数叫做loadFile(),简直是比原来的loadUrl()加载本地页面不知道要好用多少倍。

electron 3.x 系统新增加的页面加载函数 loadFile - electron-loadfile
electron 3.x 系统新增加的页面加载函数 loadFile(图3-1)

低版本electron不支持loadFile

1.x2.xelectron中,如果要使用loadFile函数,就会报错unknown function

electron 3.x 系统新增加的页面加载函数 loadFile - loadfile_unknown
electron 3.x 系统新增加的页面加载函数 loadFile(图3-2)

Uncaught Exception:
TypeError: mainWindow.loadFile is not a function
    at App.createWindow (/Users/sunan/Downloads/electron-quick-start-master/main.js:13:14)
    at emitTwo (events.js:130:20)
    at App.emit (events.js:213:7)

loadFile 对比 loadUrl

main.js

mainWindow = new BrowserWindow({width: 800, height: 600})

都是加载本地的index.html页面,loadFileloadUrl对比如下:

electron3.x写法:

mainWindow.loadFile('index.html')

传统2.x1.x中的写法:

  // and load the index.html of the app.
  const path = require('path')
  const url = require('url')
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

特别提示

对于简写的loadFile('index.html'),因为是相对路径。所以,特殊情况下,会导致相对出别的首页的问题。所以,最好还是写绝对路径。苏南大叔个人建议,碰到显示默认首页,而不是你自己写的那个首页的时候,请想想苏南大叔的这段话。

const path = require('path')
mainWindow.loadFile(path.join(__dirname, 'index.html'))

下面的这个截图,其实是个错误的loadfile,并没有load到苏南大叔自己写的那个页面。就是因为没有写绝对地址,而是写的相对地址的缘故。这个截图来自:使用vscode调试主进程的时候。

electron 3.x 系统新增加的页面加载函数 loadFile - loadfile-wrong-page
electron 3.x 系统新增加的页面加载函数 loadFile(图3-3)

loadURL的另外两个例子

加载远程URL:

win.loadURL('https://github.com')

加载本地HTML文件:

win.loadURL(`file://${__dirname}/app/index.html`)

总结

经过对比,苏南大叔表示:这个新的loadFile函数,真心是好用到爆了。哈哈哈~

更多electron新鲜经验文章,请点击苏南大叔的文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: