用electron仿qq首頁

QQ首頁的彈窗和天氣效果都挺好，最近琢磨了一下用electron來仿造出這樣的效果，主要是彈窗控件這塊，也考慮了一下窗口的複用，下面展現一下作好後的效果，注：樣式只是隨便調了一下，畢竟沒有那麼多時間去弄樣式

分析思路

製做思路首先是左邊鼠標放到頭像上顯示出窗口而且帶有動畫效果，鼠標在兩個窗口之間來回移動窗口會跟隨移動而且切換內容，不難發現此時移動的時候是複用的一個窗口，這樣能夠減小建立窗口的開銷，天氣那裏窗口反轉用個路由動畫就能夠了

解決方案

解決方案直接寫代碼吧，這裏使用了electron-vue和electron-vue-windows兩個插件，若是不瞭解具體能夠看這裏electron-vue-windows，思路是經過reuse這個屬性就能夠直接讓窗口複用，當調用closeWin()的時候其實是吧窗口隱藏掉了，這樣就減小了建立窗口的開銷，窗口打開時的動畫一個效果就搞定了，可是窗口已經打開只能經過移動動畫來達到移動的效果，就是animation，因此咱們要加一個判斷若是窗口已經打開就移動沒有打開的話就建立，代碼以下：

openLeft (e, index) {
  clearTimeout(this.timeTap)
  let width = 300
  // 獲取當前窗口的寬高，用於定位子窗口位置
  let fatherBounds = this.$Win.win.getBounds()
  // 判斷右邊是否過界（計算出子窗口的座標點）
  let leftWidth = e.screenX - e.offsetX - width - 15
  let x = leftWidth < 0 ? leftWidth + width + fatherBounds.width : leftWidth
  let y = e.screenY - e.offsetY
  // 查詢子窗口是否存在
  let win = this.$Win.getWinByName('leftname')
  if (win) {
    // 若是存在跳轉路由，並從新發送數據
    this.$Win.routerPush({
      router: '/infoWindow/' + index,
      win: win,
      data: {name: index}
    })
    win.show()
    // 動畫過分到新位置
    this.$Win.animation({
      win: win,
      time: 200,
      to: {
        x: x,
        y: y
      }
    })
  } else {
    this.$store.dispatch('changeTransition', 'default')
    // 不存在子窗口就新建窗口
    win = this.$Win.createWin({
      width: 300,
      height: 200,
      windowConfig: {
        router: '/infoWindow/' + index,
        name: 'leftname',
        customAnimation: {
          fromPosition: {x: x, y: y - 50},
          time: 300 // 動畫時間
        },
        data: {name: index},
        reuse: true,
        reload: true,
        vibrancy: true
      },
      x: x,
      y: y,
      alwaysOnTop: true,
      skipTaskbar: true
    })
    win.show()
  }
}

另一個天氣窗口，注意qq的天氣窗口是能夠旋轉的，因此此時是不能用背景模糊的窗口來作，只能使用透明窗口，那麼反轉的效果也很容易，直接寫css就好了，代碼以下：

showwindow () {
  let fatherBounds = this.$Win.win.getBounds()
  // 判斷右邊是否過界
  let leftWidth = window.screen.width - fatherBounds.width - fatherBounds.x - 300
  let x = leftWidth >= 0 ? fatherBounds.width + fatherBounds.x : fatherBounds.x - 300
  let y = fatherBounds.y
  let win = this.$Win.createWin({
    width: 300,
    height: 200,
    x: x,
    y: y,
    windowConfig: {
      router: '/cloudWindow',
      vibrancy: false,
      name: 'cloud',
      animation: 'fromBottom'
    }
  })
  win.show()
}

窗口反轉的代碼若是不懂能夠看這裏