回到主页

Electron asar打包及webview标签应用

桌面应用

· 前端开发

之前用过很长一段时间的nw.js,市院的爬虫工具、裕民的串口监测程序等当时都是使用了nw.js。

当时选择nw.js的原因是最开始用它,有感情了,而且他支持XP系统,很多单位还是有XP系统存在,或是32位的Windows7,这块来说nw.js还是有他不能被Electron替代的地方的。

前两年知道Electron出来的时候,就在github上加了星,一直看着它的星星数量逐步变多,目前来看它的各方面已经很成熟了,所以最近的一个可视化大屏的项目就用它尝尝鲜。

asar打包

Electron分发应用有很多方式:分发应用,我们的原型产品给客户看时还是asar的打包方式最方便快捷,打包出app.asar 并替换一下资源文件夹下的同名文件即可。

npm install asar // 安装asar到项目目录   asar pack app app.asar // 指定某个目录进行打包

webview标签

Electron自带的webview标签是很好的一个功能,可以在一个独立进程中打开外部或本地的网页,对主体窗口没有渲染负担,在做切屏动画时,很多是原生iframe无法实现的。

使用 webview 标签在Electron 应用中嵌入 "外来" 内容 (如 网页)。外来"内容包含在 webview 容器中。 应用中的嵌入页面可以控制外来内容的布局和重绘。

iframe 不同, webview 在与应用程序不同的进程中运行。它与您的网页没有相同的权限, 应用程序和嵌入内容之间的所有交互都将是异步的。 这将保证你的应用对于嵌入的内容的安全性。 注意: 从宿主页上调用 webview 的方法大多数都需要对主进程进行同步调用。

 

使用file://打开本地网页,这对互相独立的多页内容来说非常直观,使用很自然

 

<webview>.loadURL(url[, options])
  • url URL
  • options Object (可选)

    • httpReferrer String (optional) - A HTTP Referrer url.
    • userAgent String (optional) - A user agent originating the request.
    • extraHeaders String (optional) - Extra headers separated by "\n"
    • postData (UploadRawData[] | UploadFile[] | UploadFileSystem[] | UploadBlob[]) - (optional)
    • baseURLForDataURL String (optional) - Base url (with trailing path separator) for files to be loaded by the data url. This is needed only if the specified url is a data url and needs to load other files.

webview 中加载目标 url,url 地址必须包含协议前缀,例如 http://file://

 

其他的高级API还没用到,大致过了一遍文档,和nw.js一样可以有很多的PC端的API(菜单,任务栏,剪切复制,原生node模块调用),确实提供了无限可能。

参考链接