Vite2+Electron仿抖音|vite2.x+electron12+vant3短視頻|直播|聊天

整合vite2+electron12跨平台仿抖音電腦版實戰Vite2-ElectronDouYin。

基於vite2.0+electron12+vant3+swiper6+v3popup等技術跨端仿制抖音短視頻+聊天+直播桌面版應用。實現短視頻上下拖拽滑動、評論/聊天、執行dll截圖、最小至托盤。支持鍵盤上下鍵切換、新開多窗口等功能。

一、使用技術

• 編輯器：VScode
• 框架技術：vite2.1.0+electron12.0.1+vuex4+vue-router@4
• 組件庫：vant^3.0.10 (有贊移動端vue3組件庫)
• 打包工具：vue-cli-plugin-electron-builder
• 輪播組件：swiper^6.5.0
• 彈層組件：v3popup（基於vue3自定義移動端彈出框）
• 字體圖標：阿里iconfont矢量圖標庫

二、項目結構

三、運行效果

 

 

◆ electron12實現頂部導航欄窗體拖拽+底部Tabbar

如上圖：自定義無邊框  frame: false  拖拽導航欄。支持標題、顏色/背景色、是否鏤空透明等功能。

<WinBar :bgcolor="headerBg" transparent>
    <template #wbtn>
        <a class="wbtn" title="二維碼名片" @click="isShowPersonalCard=true"><i class="iconfont icon-erweima"></i></a>
        <a class="wbtn" title="設置" @click="isShowSideMenu=true"><i class="iconfont icon-menu"></i></a>
    </template>
</WinBar>

<WinBar bgcolor="linear-gradient(to right, #36384a, #36384a)">
    <template #title>視頻預覽</template>
    <template #wbtn>
        <a class="wbtn" title="另存為" @click="handleDownLoad"><i class="iconfont icon-down"></i></a>
    </template>
</WinBar>

底部tabbar組件采用整屏鏤空設計，搭配播放進度條。

<tabbar 
    bgcolor="linear-gradient(to bottom, transparent, rgba(0,0,0,.75))"
    color="rgba(245,255,235,.75)"
    activeColor="#fa367a"
    fixed
/>

至於具體的實現方式，之前也有過一些相關的分享，感興趣的話可以去看看歷史文章。

https://www.cnblogs.com/xiaoyan2017/p/14449570.html

◆ electron12實現托盤圖標|閃爍效果

如上圖：關閉窗口會有提示是否最小到系統托盤。

createTray() {
    console.log('------開始創建托盤')
    console.log(__dirname)
    
    const trayMenu = Menu.buildFromTemplate([
        {
            label: '我在線上', icon: path.join(__dirname, '../resource/icon-online.png'),
            click: () => null
        },
        {
            label: '隱身', icon: path.join(__dirname, '../resource/icon-invisible.png'),
            click: () => null
        },
        {type: 'separator'},
        {
            label: '關閉消息閃動', click: () => {
                this.flashTray(false)
            }
        },
        {type: 'separator'},
        {
            label: '顯示窗口', click: () => {
                try {
                    for(let i in this.winLs) {
                        let win = this.getWin(i)
                        if(!win) return
                        if(win.isMinimized()) win.restore()
                        win.show()
                    }
                } catch (error) {
                    console.log(error)
                }
            }
        },
        {
            label: '退出', click: () => {
                try {
                    for(let i in this.winLs) {
                        let win = this.getWin(i)
                        if(win) win.webContents.send('win-logout')
                    }
                    app.quit()
                } catch (error) {
                    console.log(error)
                }
            }
        },
    ])
    this.tray = new Tray(this.trayIco1)
    this.tray.setContextMenu(trayMenu)
    this.tray.setToolTip(app.name)
}

調用  flashTray(true|false)  即可實現打開/關閉閃爍效果。需要注意的是ico圖標路徑，否則托盤圖標會不顯示。

可以通過  console.log(__dirname)  來查看輸出路徑，默認是dist_electron打包目錄。

◆ vue3+electron自定義彈出框

項目中使用到的彈窗分為vue3自定義彈窗組件和electron桌面版彈窗兩種模式。

<v3-popup v-model="isShowLogoutSys" anim="footer" type="actionsheet"
    content="<span><i class='iconfont icon-info c-46b6ef'></i> 確定要退出當前賬號嗎？</span>"
    :btns="[
        {text: '退出登錄', style: 'color:#fa367a;', click: logoutSys},
        {text: '取消', click: () => isShowLogoutSys=false},
    ]"
>
</v3-popup>

const handleAboutWin = () => {
    data.isShowSideMenu= false
    
    createWin({
        title: '關於',
        route: '/about',
        width: 420,
        height: 320,
        resize: false,
        parent: winCfg.window.id,
        modal: true,
    })
}

詳細的實現方式，大家可以去看看下面的兩篇分享文章，這里就不詳細介紹了。

https://www.cnblogs.com/xiaoyan2017/p/14210820.html

https://www.cnblogs.com/xiaoyan2017/p/14403820.html

◆ vite2項目配置文件

非常簡單的一個vite2項目基礎配置文件，詳細的配置大家可以去查閱官方文檔。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

  // base: '/',
  // mode: 'development' //production
  build: {
    /**
     * 輸出文件目錄
     * @default dist（默認）
     */
    // outDir: 'target',
  },

  // 環境配置
  server: {
    // 端口
    port: 3000,

    // 是否瀏覽器自動打開
    open: false,

    // 開啟https
    https: false,

    // 代理配置
    proxy: {
      // ...
    }
  },

  resolve: {
    // 設置路徑別名
    alias: {
      '@': path.resolve(__dirname, '../src'),
    }
  }
})

◆ vite2+electron打包配置文件

如果使用@vue/cli + electron構建的項目，可以直接在vue.config.js中配置打包參數。使用vite.js + electron構建的項目，則需要在根項目新建一個electron-builder.json打包配置文件。

{
    "productName": "electron-douyin", //項目名稱 打包生成exe的前綴名
    "appId": "com.example.electrondouyin", //包名
    "compression": "maximum", //store|normal|maximum 打包壓縮情況(store速度較快)
    "artifactName": "${productName}-${version}-${platform}-${arch}.${ext}", //打包后安裝包名稱
    // "directories": {
    //     "output": "build", //輸出文件夾（默認dist_electron）
    // },
    "asar": false, //asar打包
    // 拷貝靜態資源目錄到指定位置（如根目錄下的static文件夾會拷貝至打包后的dist_electron/win-unpacked/resources/static目錄）
    "extraResources": [
        {
            "from": "/static",
            "to": "static"
        },
    ],
    "nsis": {
        "oneClick": false, //一鍵安裝
        "allowToChangeInstallationDirectory": true, //允許修改安裝目錄
        "perMachine": true, //是否開啟安裝時權限設置（此電腦或當前用戶）
        "artifactName": "${productName}-${version}-${platform}-${arch}-setup.${ext}", //打包后安裝包名稱
        "deleteAppDataOnUninstall": true, //卸載時刪除數據
        "createDesktopShortcut": true, //創建桌面圖標
        "createStartMenuShortcut": true, //創建開始菜單圖標
        "shortcutName": "ElectronDouYin", //桌面快捷鍵圖標名稱
    },
    "win": {
        "icon": "/static/shortcut.ico", //圖標路徑
    }
}

為了避免打包后，資源文件丟失。大家可以配置  extraResources  用於配置拷貝一些靜態資源文件到指定目錄位置。

"extraResources": [
    {
        "from": "/static",
        "to": "static"
    },
]

from原資源目錄，to打包后資源目錄。打包之后會在resources目錄下多出static目錄。

最后需注意：

1、項目路徑最好不要有中文，否則打包可能會報錯。

2、最好不要使用getCurrentInstance來操作router或store，打包會報錯。

3、vite.js+electron構建的項目，在渲染進程中.vue頁面，調用ipcRenderer或remote會報如下錯誤

 Uncaught TypeError: fs.existsSync is not a function 

可在webPreferences中配置preload來解決。

webPreferences: {
    contextIsolation: false,
    nodeIntegration: false, // 啟用Node集成
    preload: path.join(__dirname, '../resource/preload.js'),
    webSecurity: false,
    enableRemoteModule: true, // 是否啟用遠程模塊
}

好了，基於vite2+electron整合跨端開發模仿抖音exe桌面應用就分享到這里，希望對大家有些幫助哈！😊

最后附上一個Vue3+Electron跨平台仿QQ聊天實例

https://www.cnblogs.com/xiaoyan2017/p/14454624.html