这一小节，我们将我们的程序改造成通知栏程序。

安装依赖

其实通知栏的程序就是去掉窗口的边框，然后定位到通知栏小图标的下面，通知栏是可以获得它的位置坐标的，我们可以基于这个坐标进行计算来获得。这个我们可以使用electron-positioner通知栏程序 - 图1 来帮助我们进行计算，大家也可以参考 menubar通知栏程序 - 图2 项目进行改造。

  1. npm install electron-positioner --save

别忘记自己添加一下定义文件，electron-positioner.d.ts

  1. declare module 'electron-positioner'

修改 tray.ts

由于我们需要控制顺序，ready 里面的顺序分开来看不是特别明显，所以我们提取到 index.ts 中，我们需要自定义 Tray 小图标的一些单击，双击，右键的事件，当计算的距离是 tray 开头的时候，需要传入 tray.getBounds() 获取的小图标坐标点。

  1. import Positioner from 'electron-positioner'
  2. import { opensetting } from './tray'
  4. let tray: Tray
  5. let positioner: any
  7. function setPostion(win: BrowserWindow) {
  8.   // 得到位置
  9.   positioner = new Positioner(win)
  10.   positioner.move('trayCenter', tray.getBounds())
  11.   win.show()
  12. }
  14. function createTray() {
  15.   // 创建通知栏图标
  16.   tray = new Tray(resolve(__dirname, 'tray_w24h24.png'))
  17.   const contextMenu = Menu.buildFromTemplate([
  18.     { label: '设置', click: opensetting },
  19.     {
  20.       label: '退出',
  21.       role: 'quit'
  22.     }
  23.   ])
  24.   const toggle = () => {
  25.     // 显示隐藏
  26.     if (!mainWindow) {
  27.       return
  28.     }
  29.     if (mainWindow.isVisible()) {
  30.       return mainWindow.hide()
  31.     }
  32.     positioner.move('trayCenter', tray.getBounds())
  33.     mainWindow.show()
  34.   }
  35.   tray.on('click', toggle) // 单击
  36.   tray.on('double-click', toggle) // 双击
  37.   tray.on('right-click', () => {
  38.     // 右键菜单
  39.     tray.popUpContextMenu(contextMenu)
  40.   })
  41. }
  43. async function ready() {
  44.   mainWindow = createMainWindow({
  45.     width: 400,
  46.     height: 560,
  47.     frame: false,
  48.     transparent: true,
  49.     show: false
  50.   })
  51.   createTray()
  52.   setPostion(mainWindow)
  53.   pluginSetUp()
  54.   crawlSetUp()
  55. }

解决 a 标签的拖拽问题

这个时候有一个小 bug , 所有的跳转按钮是可拖动的，我们需要阻止一下默认事件。

  1. this.refs.link.addEventListener('dragstart', e => {
  2.   e.preventDefault()
  3. })

Tray

添加状态

我们需要一个状态来标记是否已经开始了队列。以及添加一个警告的方法。

  1. const store = new Store({
  2.   currentPage: Main,
  3.   msg: {
  4.     type: 'success',
  5.     content: ''
  6.   },
  7.   start: false // 开始队列否
  8. })
  10. function warring(content, timer = 1000) {
  11.   store.set({
  12.     msg: {
  13.       type: 'warring',
  14.       content
  15.     }
  16.   })
  17.   setTimeout(resetMsg, timer) // 自动关闭消息
  18. }
  20. store.warring = warring.bind(store)

修改 Download.svelte

添加模板逻辑，访问全局状态，以 $ 开头。需要一个 canvas 来画进度框。包裹一层是为了居中，一定要在属性上面给确定的大小，要不然会画出来的东西就看不到了。对于 canvas 我也有录制过视屏，在这里通知栏程序 - 图4，不过不是免费的内容。

canvas 一定要通过 css 控制显隐，要不然会很难操作，动态挂载生命周期极其难控制。

  1. <Back/>
  2. <div class="wrap">
  3.     {#if !$start}
  4.         <label>文件名</label>
  5.         <input bind:value=folderName />
  6.         <label>爬取网址</label>
  7.         <input bind:value=url />
  8.     {/if}
  9.     <div class="oprator">
  10.         {#if !$start}
  11.             <button on:click="download()">下载</button>
  12.         {:else}
  13.             <button on:click="stop()">中断</button>
  14.         {/if}
  15.     </div>
  17.         {#if status.type }
  18.             <div class="type">
  19.                 {status.type == 'crawl' && status.step == 'chapter' ?  '爬取章节': ''}
  20.                 {status.type == 'crawl' && status.step == 'text'? '爬取内容': ''}
  21.                 {status.type == 'audio'? '转换音频': ''}
  22.             </div>
  23.         {/if}
  25.         {#if status.title}
  26.             <div class="title">
  27.                 {status.title}
  28.             </div>
  29.         {/if}
  31.         <div class="box {$start?'show':''}">
  32.             <canvas ref:canvas id="canvas" width="250" height="250"></canvas>
  33.         </div>
  34. </div>

定义了颜色 color 它代表每一阶段进度条的颜色，然后在 oncreate 的时候，绘制 canvas。  这里我对所有的错误相关的进行了重构，错误消息都是 type: 'error' 的结构。当中止队列的时候不要忘记清空状态。once 是用来控制消息提示只调用一次，调用多次会出现 Bug，暂时无法找到何处出了问题，猜测是内置动画的原因。

对于绘制进度条，使用了两个圆，通过 arc API通知栏程序 - 图5 进行了绘制，然后通过 requestAnimationFrame 逐帧绘制。每次绘制都会去状态里面取最新的值。

对于百分比其实很简单，2 * PI / 100 就是百分之一 ，乘以百分比即可。为了保证画布的干净每次都需要 clearRect

  1. <script>
  2.   import { ipcRenderer } from "electron";
  4.   const color = {
  5.     text: "#00CC99",
  6.     audio: "#3399CC",
  7.     stop: "#FF3333"
  8.   };
  10.   export default {
  11.     data() {
  12.       return {
  13.         url: "https://www.ybdu.com/xiaoshuo/0/910/",
  14.         folderName: "123",
  15.         status: {
  16.           type: " ",
  17.           title: " ",
  18.           percent: 0
  19.         }
  20.       };
  21.     },
  22.     components: {
  23.       Back: "../components/Back.svelte"
  24.     },
  25.     oncreate() {
  26.       let once = false;
  27.       ipcRenderer.on("download-status", (event, args) => { // 接受下载状态，并渲染到 canvas
  28.         if (
  29.           (args.typw == "audio" && args.percent == 100) ||
  30.           args.type == "stop"
  31.         ) {
  32.           this.set({
  33.             status: {
  34.               type: "",
  35.               percent: 0
  36.             }
  37.           });
  38.           this.store.set({ start: false });
  40.           if (once) {
  41.             once = false;
  42.             return;
  43.           }
  44.           this.store.success(args.message);
  45.           once = true;
  46.           return;
  47.         }
  49.         if (args.type == "error") {
  50.           this.store.warring(args.message);
  51.           this.store.set({ start: false });
  52.           return;
  53.         }
  55.         this.set({
  56.           status: args
  57.         });
  58.         this.store.set({
  59.           start: true
  60.         });
  61.       });
  63.       this.draw();
  64.       const drawFrame = () => {
  65.         if (!this) {
  66.           return;
  67.         }
  68.         this.context.clearRect(0, 0, this.centerX * 2, this.centerY * 2);
  69.         this.text();
  70.         this.whiteCircle();
  71.         this.blueCircle();
  72.         this && window.requestAnimationFrame(drawFrame); // 每帧自动渲染
  73.       };
  74.       drawFrame();
  75.     },
  76.     ondestroy() {
  77.       ipcRenderer.removeAllListeners("download-status");
  78.     },
  79.     methods: {
  80.       download() {
  81.         const { url, folderName } = this.get();
  82.         if (url.length && folderName.length) {
  83.           ipcRenderer.send("download", {
  84.             url,
  85.             folderName
  86.           });
  87.           this.store.set({ start: true });
  88.         }
  89.       },
  90.       stop() {
  91.         ipcRenderer.send("stop");
  92.       },
  93.       draw() {
  94.         let canvas = document.querySelector("#canvas");
  95.         this.context = canvas.getContext("2d");
  96.         this.centerX = canvas.width / 2;
  97.         this.centerY = canvas.height / 2;
  98.         this.rad = Math.PI * 2 / 100;
  99.       },
  100.       text() {
  101.         const { status } = this.get();
  102.         if (!status) {
  103.           return;
  104.         }
  105.         this.context.save(); // 保存之前的转态。
  106.         this.context.fillStyle = "#888";
  107.         this.context.font = "40px Arial";
  108.         this.context.textAlign = "center";
  109.         this.context.textBaseline = "middle";
  110.         this.context.fillText(status.percent + "%", this.centerX, this.centerY);
  111.         this.context.restore(); // 恢复之前的转态。
  112.       },
  113.       blueCircle() { // 上层进度全
  114.         const { status } = this.get();
  115.         if (!status) {
  116.           return;
  117.         }
  118.         this.context.save();
  119.         this.context.beginPath();
  120.         this.context.strokeStyle = color[status.step] || "#9900FF"; // 绘制颜色
  121.         this.context.lineWidth = 12;
  122.         this.context.arc( // 绘制圆
  123.           this.centerX,
  124.           this.centerY,
  125.           100,
  126.           -Math.PI / 2,
  127.           -Math.PI / 2 + status.percent * this.rad,
  128.           false
  129.         );
  130.         this.context.stroke();
  131.         this.context.restore();
  132.       },
  133.       whiteCircle() { // 底层白圈
  134.         this.context.save();
  135.         this.context.beginPath();
  136.         this.context.strokeStyle = "#383a41";
  137.         this.context.lineWidth = 12;
  138.         this.context.arc(this.centerX, this.centerY, 100, 0, Math.PI * 2, false);
  139.         this.context.stroke();
  140.         this.context.closePath();
  141.         this.context.restore();
  142.       }
  143.     }
  144.   };
  145. </script>

添加重试与等待机制

有的时候会报 getaddrinfo ENOTFOUND 错误，我们添加一个重试的机制。

  1. const getMp3Data: any = async (text: string, opts: any = {}) => {
  2.   const textArr = splitText(text)
  3.   return Promise.all(
  4.     textArr.map(async chunk => {
  5.       const { data } = await client.text2audio(chunk, opts)
  6.       return data
  7.     })
  8.   ).catch(() => getMp3Data(text, opts))
  9. }

再添加一个等待机制，自行到 tray.ts 里面添加配置哦，这样可以减小网络出错的概率。

  1. await timer(TTS_WAIT).toPromise()

忽略错误

在测试的时候，发现  总是有的时候会遇见 mp3-concat 有错误，会弹出选项框，这就很不友好，但是实际内容是没有丢失的，我们可以直接忽略掉它，修改 index.ts

  1. process.on('unhandledRejection', console.log)
  2. process.on('uncaughtException', console.log)

download