Electron #15

xiaotiandada · 2021-01-19T05:01:27Z

本地存储

import storage from 'electron-json-storage';

/**
 * storage Get
 * @returns {Promise<unknown>}
 */
export const storageGet = key => new Promise((resolve, reject) => {
  storage.get(key, (error, data) => {
    if (error) {
      reject(error);
    }

    console.log(data);
    resolve(data);
  });
});

/**
 * storage Set
 * @param data
 * @returns {Promise<unknown>}
 */
export const storageSet = (key, data) => new Promise((resolve, reject) => {
  storage.set(key, data, (error) => {
    if (error) {
      reject(error);
    }
    resolve('success');
  });
});

下载图片

/**
 * download image
 */
export const downloadImage = async ({
  name,
  url,
}) => {
  // path
  const imagePath = await 'path';
  const outputLocationPath = path.join(
    imagePath,
    name,
  );

  console.log('outputLocationPath', outputLocationPath);

  // download
  const response = await axios.get(url, {
    responseType: 'arraybuffer',
  });

  const base64Image = new Buffer.from(
    response.data,
    'binary',
  ).toString('base64');
  await util.promisify(fs.writeFile)(outputLocationPath, base64Image, 'base64');

  return outputLocationPath;
};

设置壁纸

import wallpaper from 'wallpaper';

/**
 * set wallpaper
 */
export const setWallpaper = async ({
  name,
  url,
}) => {
  const imagePath = await downloadImage({ name, url });
  await wallpaper.set(imagePath, { scale: 'auto' });
  console.log('set wallpaper success');
  new remote.Notification({
    title: 'Notification',
    body: 'Set Wallpaper Success',
  }).show();
};

自定义状态栏

因为win自带的状态栏太丑了，所以自己模拟了一个，electron-vue 通过 ipcMain 发送消息

ipcMain - 从主进程到渲染进程的异步通信。

ipcMain模块是EventEmitter类的一个实例。当在主进程中使用时，它处理从渲染器进程（网页）发送出来的异步和同步信息。从渲染器进程发送的消息将被发送到该模块。

参考文章

在 index.js 修改窗口大小.

BrowserWindow - 创建和控制浏览器窗口。

里面的参数自己可以看文档哦~

 mainWindow = new BrowserWindow({
    height: 710,
    width: 1200,
    useContentSize: true,
    frame: false
  })

设置之后，有一个细节需要了解一下.

可拖拽区 - 默认情况下, 无框窗口是 non-draggable 的..... (总之就是，你需要设置一下)

要使整个窗口可拖拽, 您可以添加 -webkit-app-region: drag 作为 body 的样式:

<body style="-webkit-app-region: drag"></body>

请注意, 如果您已使整个窗口draggable, 则必须将按钮标记为 non-draggable, 否则用户将无法单击它们:

button {
  -webkit-app-region: no-drag;
}

如果你设置自定义标题栏为 draggable, 你也需要标题栏中所有的按钮都设为 non-draggable。

模拟事件

参考文章里面有介绍到，流程大概就是这样。

// 引入
const {ipcRenderer: ipc} = require('electron')

// 自定义事件
winMin () {
    ipc.send('window-min')
},
winEnlargeOrNarrow () {
    ipc.send('win-enlarge-or-narrow')
},
winClose () {
    ipc.send('window-close')
}

/**
 * 模拟 最小 放大 还原 关闭 事件
 * index.js 修改
 */
ipcMain.on('window-min', () => {
  mainWindow.minimize()
})
ipcMain.on('win-enlarge-or-narrow', () => {
  if (mainWindow.isMaximized()) {
    mainWindow.unmaximize()
  } else {
    mainWindow.maximize()
  }
})
ipcMain.on('window-close', () => {
  mainWindow.close()
})

弹幕

播放器提供了相应的接口，只需要获取评论转换相应的数据就可以了。

transformComments (commentsArr) {}

dp.danmaku.draw({
   text: 'DIYgod is amazing',
   color: '#fff',
   type: 'top'
});

https://github.com/xiaotiandada/E-video/blob/master/src/renderer/view/index.vue

import axios from 'axios'

export default () => {
  return axios.create({
    baseURL: 'xxx',
    timeout: 1000
  })
}

-----------------

import Api from './Api'

export default {
  /**
   * 默认30条数据，可以自定义
   * @param limit
   * @returns {*}
   */
  getTopMv (limit = 30, offset = 0) {
    return Api().get(`/top/mv?limit=${limit}&offset=${offset}`)
  },
  getMvId (id) {
    return Api().get(`/mv?mvid=${id}`)
  },
  getMvComments (id) {
    return Api().get(`/comment/mv?id=${id}`)
  }
}

xiaotiandada changed the title ~~electron-vu打造低配版网易云(Mv版)~~ electron-vue打造低配版网易云(Mv版) Jan 19, 2021

xiaotiandada changed the title ~~electron-vue打造低配版网易云(Mv版)~~ Electron Jan 17, 2022

xiaotiandada added the electron label Jan 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Electron #15

Electron #15

xiaotiandada commented Jan 19, 2021 •

edited

Loading

Electron #15

Electron #15

Comments

xiaotiandada commented Jan 19, 2021 • edited Loading

本地存储

下载图片

设置壁纸

自定义状态栏

弹幕

xiaotiandada commented Jan 19, 2021 •

edited

Loading