用electron+vue写一个悬浮窗天气挂件
electron介绍
基于node.js chrominum v8引擎的一项跨平台工具，使用Javascript语言来编写代码，让JS通吃桌面客户端，APP应用，Web端。码农界里大名鼎鼎的VS Code编辑器，就是基于这个开发的。它的同类工具还有NW.js，基于它开发的应用有，阿里钉钉客户端，微信开发者工具。自己开下脑洞，开发一个新浪博客客户端也不是不可以。
安装环境依赖
没有安装node.js环境的，需要先安装node.js，https://nodejs.org/
- 全局安装electron
npm install electron -g
2.全局安装vue-cli
npm install vue-cli
初始化工程
vue init simulatedgreg/electron-vue my-project
控制台出现downloading template，在等上几分钟之后，回答初始化要的配置就好了。
? Application Name my-project
? Application Id net.it577.weather
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? No
? Select which Vue plugins to install vue-electron
? Use linting with ESLint? No
? Set up unit testing with Karma + Mocha? No
? Set up end-to-end testing with Spectron + Mocha? No
? What build tool would you like to use? (Use arrow keys)
electron-builder (https://github.com/electron-userland/electron-builder)
electron-packager (https://github.com/electron-userland/electron-packager)
这时候去下载eletron包去了，又是要漫长等待
运行项目
npm run dev
编写页面代码
新建一个weather.vue文件
在文件位置src\renderer\components\Weather.vue建好文件
写路由
在文件src\renderer\router\index.js，加上一行
{
path: '/',
name: 'Weather',
component: require('@/components/Weather').default
}
安装request-promise网络请求库
npm install request-promise
不使用axios是因为我不熟，还有遇到了CORS跨域问题，而request-promise却没问题。
写代码逻辑
{{weather}}
查看结果
配置
制作悬浮窗
打开文件src\main\index.js，修改createWindow方法如下：
mainWindow = new BrowserWindow({
height: 120,
useContentSize: true,
frame: false, //要创建无边框窗口
resizable: false, //禁止窗口大小缩放
webPreferences: {
devTools: false //关闭调试工具
},
width: 160,
transparent: true, //设置透明
alwaysOnTop: true, //窗口是否总是显示在其他窗口之前
})
具体看上面的注释就可以，主要是frame这个参数设置为false
让悬浮窗可拖曳
在mounted方法里加上如下代码
let win = this.$electron.remote.getCurrentWindow()
let biasX = 0
let biasY = 0
let that = this;
document.addEventListener('mousedown', function (e) {
switch (e.button) {
case 0:
biasX = e.x
biasY = e.y
document.addEventListener('mousemove', moveEvent);
break
case 2:
that.$electron.ipcRenderer.send('createSuspensionMenu');
break
}
})
document.addEventListener('mouseup', function () {
biasX = 0
biasY = 0
document.removeEventListener('mousemove', moveEvent)
})
function moveEvent(e) {
win.setPosition(e.screenX - biasX, e.screenY - biasY)
}
修改窗口标题
修改src\index.ejs的title标签，
修改打包exe的应用名称
打开\package.json文件，修改如下
"build": {
"productName": "BTC",
}
修改图标
打开项目下build\icons文件夹，换成自己的图标，ico图标可以通过在线网站制作，https://cloudconvert.com/png-to-icns
打包exe安装
npm build
打包后的安装包在目录\build下
关注我
欢迎关注订阅号【黄秀杰】
