集成Electron+Vue3+Vite2仿制抖音EXE软件|electron直播程序

Vite2_ElectronDouYin短视频 基于 vite.js+vue3+electron12.0.1+vant3+swiper 等技术跨平台仿制抖音exe应用。支持上下拖拽滑动、键盘上下按键滑屏切换效果。

上下左右滑动切换小视频效果。

技术栈

• 技术框架：vite.js+vue3.0+electron12.0.1+vuex4+vue-router@4
• UI组件库：vant3 (有赞移动端vue3组件库)
• 弹窗组件：v3popup（vue3自定义手机端弹窗组件）
• 轮播组件：swiper
• 打包工具：vue-cli-plugin-electron-builder

目录结构

electron+vue3.0自定义顶部条

项目去掉了顶部边框导航菜单，采用自定义组件模式。

<WinBar bgcolor="transparent" transparent>
    <template #wbtn>
        <a class="wbtn" @click="isShowPersonalCard=true"><i class="iconfont icon-erweima"></i></a>
        <a class="wbtn" @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" @click="handleDownLoad"><i class="iconfont icon-down"></i></a>
    </template>
</WinBar>

electron自定义顶部导航栏菜单

如下图：底部导航菜单采用全透明模式。

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

vue3 electron弹窗功能

项目中使用到的弹窗分为vue3自定义弹框和electron创建的弹窗两种。

const handleSendFlower = () => {
    let $el = v3popup({
        type: 'android',
        content: '<i class="iconfont icon-douzi c-00e077"></i> 确定送TA一颗微信豆吗？',
        btns: [
            {text: '取消', click: () => $el.close()},
            {text: '确定', style: 'color:#fa367a;', click: handleOk},
        ]
    })
}

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

electron配置打包参数

使用vite.js和vue-cli-plugin-electron-builder构建的项目，可以在根目录下新建一个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", //图标路径
    }
}

vue3.x+element-plus仿制微信网页版聊天实例