从零开发Electron-Vue (二)

╰半夏微凉° 2022-10-29 01:47 297阅读 0赞

下面举例解决实际中碰到的问题

> electron程序无默认的编辑框，修改应用程序框的大小

mainWindow = new BrowserWindow({ 
        width: 1200,
        height: 768,
        useContentSize: true,
        frame: false,
        webPreferences: {
          nativeWindowOpen: true
        }
      })

>  如何打开电脑的默认浏览器，打开自带的浏览器

电脑的默认浏览器：

const shell = require('electron').shell;
    shell.openExternal('http://www.baidu.com');

自带的浏览器

window.open('https://github.com', '_blank', 'nodeIntegration=no')

> 打开程序默认关闭开发者模式

mainWindow.loadURL(winURL)
    mainWindow.webContents.closeDevTools();

> electron使用axios请求网络后台跨域

使用electron-vue，安装的时候会提示是否安装axios库，如果选择了是的话，会在main.js里面找到下面的代码

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
    Vue.http = Vue.prototype.$http = axios

那么使用它

this.$http.get('http://www.baidu.com')
            .catch(function (error) {
              console.log(error);
            })
            .then(function (response) {
                console.log(response);
            });

如果跨域，添加如下代码

new BrowserWindow({
        webPreferences: {
          webSecurity : false, //禁用同源策略
        }
      })

> [electron下使用axios网络请求错误的问题][electron_axios]Requests are immediately canceled when ran in Electron

最终通过在请求之前加上一行

axios.defaults.adapter = require('axios/lib/adapters/http');或axios.defaults.adapter = require('axios/lib/adapters/xhr');

后来通过看axios的源码之后了解了原理，原来axios是可以使用node的http.js或者xhr.js作为请求的依赖库的，默认使用的是xhr.js，但是在electron中，最开始的时候是不能访问网络的，使用http.js却可以，同样的网络环境同样的配置什么什么全都一样，就是有这个问题也不知道是为什么，后来就莫名其妙的自己好了，什么也没改……但是其实这里还有一个问题，就是axios有一个下载进度的功能，也就是配置项里的onDownloadProgress项，这在使用http.js库的时候是无效的，因为http.js库本身也没有实现下载进度，但是xhr.js实现了，所以在默认的xhr.js中是可以实现下载进度的，可以使用onDownloadProgress项配置下载进度的回调函数。

[electron_axios]: http://www.okadwin.com/?post=163