electron介绍

安装环境依赖

没有安装node.js环境的，需要先安装node.js，

1. 全局安装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 enderercomponentsWeather.vue建好文件

写路由

在文件src enderer outerindex.js，加上一行

{
      path: /,
      name: Weather,
      component: require(@/components/Weather).default
    }

安装request-promise网络请求库

npm install request-promise

不使用axios是因为我不熟，还有遇到了CORS跨域问题，而request-promise却没问题。

写代码逻辑

<template>
  <el-tag type="success">{
         
  {weather}}</el-tag>
</template>
<script>
import request from request-promise
export default {
  data() {
    return {
      weather: 
    }
  },
  mounted() {
    const city = encodeURIComponent(温州)
    request({
      uri: `http://apis.juhe.cn/simpleWeather/query?city=${city}&key=bb888175aa5ed3bac588aa34d1eec123`,
      method: GET,
      json: true
    }).then(res => {
      this.weather = `${res.result.realtime.info} ${res.result.realtime.temperature}℃`
     })
  }
}
</script>

查看结果

配置

制作悬浮窗

打开文件srcmainindex.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)
    }

修改窗口标题

修改srcindex.ejs的title标签，<title>我的天气</title>

修改打包exe的应用名称

打开package.json文件，修改如下

"build": {
    "productName": "BTC",
}

修改图标

打开项目下buildicons文件夹，换成自己的图标，ico图标可以通过在线网站制作，

打包exe安装

npm build

打包后的安装包在目录uild下

关注我