Electron12+Vite2整合vue3.0直播/聊天/小視訊|vue3+vant3+electron跨平臺應用

一、專案介紹

基於vite.js構建工具和electron12跨端技術整合開發vue3仿抖音桌面端專案。使用了vite2+electron12+vant3+swiper+v3popup等技術開發實現短視訊+聊天+直播程式。

二、技術棧

• 編碼器：vscode
• 構建工具：vite.js
• Vue3全家桶：vue3.0+vuex4+vue-router@4
• 跨端框架：electron12.0.1
• 打包工具：vue-cli-plugin-electron-builder
• UI 元件庫：vant3.0.10 (有贊vue3移動端元件庫)
• 彈框元件：v3popup (vue3 移動端彈窗元件)
• 環境配置：nodejs + npm/yarn

三、專案結構

四、效果預覽

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

之前有過一些相關的技術分享文章，感興趣的可以去看看。
vue3.0封裝移動端彈窗元件v3popup
electron新建多視窗模式|父子Modal窗體

electron12自定義頂部導航器+Tabbar

專案整體採用了無邊框風格frame:false，通過-webkit-app-region:drag即可實現任意區域拖拽功能。

呼叫非常簡單，只需通過如下方式，即可快速生成一個帶最大/最小/關閉按鈕組的可拖拽導航選單。

<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>

vue3+electron實現自定義頂部導航選單

底部tabbar元件，則是採用了沉浸式透明風格，加上視訊播放進度條。

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

vite.js配置檔案

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打包配置檔案

在專案根目錄新建一個electron-builder.json打包配置檔案。

/**
 * @Desc     vite2+electron打包配置
 * @Time     andy by 2021-03
 * @About    Q：282310962  wx：xy190310
 */

{
    "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", //圖示路徑
    }
}

okey，基於vite2/vue3+electron12跨平臺仿抖音短視訊應用例項就分享到這裡。
electron+vue3.x聊天室|electron跨端仿QQ聊天例項

本作品採用《CC 協議》，轉載必須註明作者和本文連結