近日在开发一个本地音乐播放器(或许日后会加个某易云),技术栈是Vue+vue-cli-plugin-electron-builder 。开发过程中也遇到了一些问题,现在拿出来跟大家分享一下。
01
—
在Vue页面中正常引用Electron方法
其实之前没有这个问题的,这次出现了。经过我的测试以及多方查找,最终在Github找了解决办法,原因是nodeIntegration需要开启,以提供完整的node支持,当然这里又涉及安全性的问题。找到vue.config.js,写入:
module.exports = { pluginOptions: { electronBuilder: { nodeIntegration: true } } }
02
—
关于浮动和定位的问题
我们有时可能会同时使用float和position,这里要分几种情况。我们知道CSS有四种定位:position: absolute/relative/fixed/static,其中absolute和fixed是脱离普通文档流的。我们的float:right/left也是脱离普通文档流的。
当我们已经使用position:absolute/fixed时,元素已脱离文档流,再对元素应用float失效。我们应用position:absolute/fixed时候,由于元素已不占据空间,如果需要确定元素位置,可以使用top/bottom/left/right。
如果使用float来确定位置,此时元素占据空间,我们可以使用margin/padding。
另外,个人很推荐使用flex布局,因为比较方便。
03
—
读取本地音频
我们知道,chrome无法直接加载本地资源,所以读取音频文件的是时候会出现Not allowed to load local resource,然后我们可能会想到将主进程里面的
webSecurity设置为false,但是这样会出现新的问题:Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME,所以最好且最安全的方法是创建一个自定义协议,然后使用该协议来加载文件。我们找到app.on('ready', async () => {},然后进行修改:
const protocolName = 'ngsf' //自定义协议名 protocol.registerFileProtocol(protocolName, (request, callback) => { const url = request.url.replace(`${protocolName}://`, '') try { return callback(decodeURIComponent(url)) } catch (error) { console.error(error) } })
一番操作时候,就可以正常加载本地资源了
04
—
其实还踩了很多坑,咱们下回分解( ̄▽ ̄)"