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, // 是否启用远程模块
}