用electron仿qq首頁

Bmob 發布于2019-08-26 12:22 / 1171人閱讀

摘要：首頁的彈窗和天氣效果都挺好，最近琢磨了一下用來仿造出這樣的效果，主要是彈窗控件這塊，也考慮了一下窗口的復用，下面展示一下做好后的效果，注樣式只是隨便調了一下，畢竟沒有那么多時間去弄樣式分析思路制作思路首先是左邊鼠標放到頭像上顯示出窗口并且帶

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()
}

窗口反轉的代碼如果不懂可以看這里

GPU云服務器云服務器仿微軟首頁仿騰訊迷你首頁仿360首頁效果仿qq頭像截取

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108563.html

Vue.js全家桶低仿網易云音樂(MacOS版) 已新增electron打包pc平臺app

摘要：項目地址暫時只實現了基本功能加了一點微小的效果主要適配瀏覽器對和做了一點微小的適配現在已經包括了打包平臺的功能了源碼地址項目預覽項目描述前端部分整體加載進度懶加載模塊的加載中提示實現了滑塊增量分頁新曲等使用了做單頁應用使用了處理路由使用了管項目地址暫時只實現了基本功能加了一點微?小的效果主要適配pc瀏覽器對android 和ios 做了一點微?小的適配現在已經包括了ele...

leap_frog 2019-08-29 12:42 評論0 收藏0
Vue.js全家桶低仿網易云音樂(MacOS版) 已新增electron打包pc平臺app

摘要：項目地址暫時只實現了基本功能加了一點微小的效果主要適配瀏覽器對和做了一點微小的適配現在已經包括了打包平臺的功能了源碼地址項目預覽項目描述前端部分整體加載進度懶加載模塊的加載中提示實現了滑塊增量分頁新曲等使用了做單頁應用使用了處理路由使用了管項目地址暫時只實現了基本功能加了一點微?小的效果主要適配pc瀏覽器對android 和ios 做了一點微?小的適配現在已經包括了ele...

graf 2019-08-20 17:03 評論0 收藏0
Vue.js全家桶低仿網易云音樂(MacOS版) 已新增electron打包pc平臺app

摘要：項目地址暫時只實現了基本功能加了一點微小的效果主要適配瀏覽器對和做了一點微小的適配現在已經包括了打包平臺的功能了源碼地址項目預覽項目描述前端部分整體加載進度懶加載模塊的加載中提示實現了滑塊增量分頁新曲等使用了做單頁應用使用了處理路由使用了管項目地址暫時只實現了基本功能加了一點微?小的效果主要適配pc瀏覽器對android 和ios 做了一點微?小的適配現在已經包括了ele...

melody_lql 2019-08-01 16:57 評論0 收藏0