Electron + Vue.js

不管是招聘时,或是认识新朋友时,我都常常能遇到射手的老用户。

我每碰到一个射手影音(SPlayer)的用户,就会先说抱歉。

因为关站和断更,让我一直感到非常对不起当年支持射手的朋友,特别是在Mac App Store付过费的使用者。

这些年里,我也有多次动过恢复开发和更新的念头。可是如今的自己,已对当时的混乱不堪的代码不忍直视。几次计划修改代码包括支持新格式等等,最终都在打开IDE的一瞬间精神崩溃,没能顶下去。

尽管精神力不能容忍小修小补,但欠的债总是要还。所以2018的头一件事,就是决定推倒重来,开发一个新的射手。

在新项目的 Github Repo 中,我正在做一个稍有大胆的尝试,基于 Electron + Vue.js 框架来构建下一代射手影音的代码。

WechatIMG38.png

Electron 基于 Chrome ,可以使用网页技术进行跨平台软件项目的开发。而 Vue.js 框架也是非常整洁易读易维护,开发过程令人愉悦。我认为,将这两个框架相结合来制作桌面软件,有着非常高的投入产出比。

项目使用 Webpack 管理。 使用 eslint 控制代码质量,采用 Airbnb JavaScript Style Guide 。 每次版本提交会同时使用 travis-ci 和 appveyor 自动编译 Mac、Win 和 Linux 版本。使用 Karma 进行单元测试。 使用 vue-router 和 vuex 用于跨组件数据交互。使用 Global Event Bus 做消息通讯。

<template>
<div id="wrapper">
  <main>
    <div>
      <img id="logo" src="~@/assets/logo.png" alt="electron-vue">
    </div>

    <div class="welcome">
      <div class="title">SPlayerX</div>
      <p> {{ version }} </p>
    </div>

    <div class="controller">
      <div class="playlist">
        <a class="item" v-if="hasRecentPlaylist" href="#" @click="openFile(lastPlayedFile)">
        </a>
      </div>
      
      <button @click="open('./')">
        <img src="~@/assets/icon-open.svg" type="image/svg+xml">
      </button>
    </div>
  </main>
</div>
</template>

我相信写代码应该是一件心情舒畅的事。愉快的创造改变生活的产品是我们的信念。未来的射手影音(SPlayer)开发也应该如此。

而且,射手影音(SPlayer)一如既往仍是一个开源项目,所以项目随时欢迎更多对技术有兴趣的同好参与和指导。我们还有更多想法和理想,期待更多人的加入一起来实现。在此,我欢迎关注我们的新官网 sagittarius.ai 和 招聘信息 。

最近播放预览界面.png