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