《Electron + Vue 实战建站工具开发》读者圈开启

今年计划出一本书:《Electron + Vue 实战建站工具开发》。在 SF 开了读者圈,欢迎大家入圈,提前看全书,实时解答勘误,还有机会拿到实体书。

今年很努力的做视频培训,收效一般。不过在社区收获了一些声望,还得到一个写书的机会,跟编辑讨论再三,确定下内容:Electron + Vue 实战开发。

然后呢,也不是我有意拖延,因为很快就入职贵司,一直都很忙,将近两个月,渐渐熟悉了框架,也适应了节奏(希望如此),现在得抓紧时间补书稿了。

最开始想在知加边写边发,结果知加没挺到现在,所以只好退而求其次,在 SF 开了读者圈——倒不是说 SF 不好,而是他们家的“技术圈”从产品形态上来看,不是非常合适。

Anyway,欢迎大家加入圈子,您会得到:

  1. 读到这本书全文,并且更早读到
  2. 获得实时问题解答
  3. 得到实时勘误
  4. 得到实体书(具体看出版社给多少了……)

入圈链接

七牛 Node SDK 会导致 Electron 启动新实例

在 Electron 的 main process 里调用七牛云 SDK,会启动一个新实例,原本的上传会暂停。这个时候关掉新实例,上传会继续。当前文件上传完成后,下个文件又会启动一个新实例。如此反复。

如题,暂时不确定是哪里导致的。

总之,在 Electron 的 main process 里调用七牛云 SDK qiniu.io.putFile(),会启动一个新实例,原本的上传会暂停。这个时候关掉新实例,上传会继续。当前文件上传完成后,下个文件又会启动一个新实例。如此反复。

文档中的代码如下:

qiniu.io.putFile(uptoken, key, localFile, extra, function(err, ret) {
      if(!err) {
        // 上传成功, 处理返回值
        console.log(ret.hash, ret.key, ret.persistentId);       
      } else {
        // 上传失败, 处理返回代码
        console.log(err);
      }
});

已开 issue

估计要等春节后修复了。

暂时可以用社区版 SDK 先顶上。

Electron + Vuex 导致视图无法自动刷新的问题

Electron 中,使用 .getGlobal(‘data’) 取出来的对象,Vue 没法直接加上 getter/setter,会导致响应式失效。这个时候可以通过深度 Object.assign({}, source) 来解决。

前几天开发 Meart 的过程中,碰到一个棘手的问题:

  1. 修改数据,视图不变
  2. 切换视图,再回到原来的视图,数据刷新
  3. 通过 Vue devtool 查看 Vuex,有数据提交
  4. 点击最新提交点,或者 “commit all”,之后所有操作正常

因为我对 Electron 和 Vue 都不是很了解,所以这个问题困扰我很长时间。我尝试了各种办法,包括 .splice()let data = this.data; this.data = data;,但是都没有效果。后来实在没办法了跑到 Vue 论坛里发帖求助

没想到很快就得到回复,对方虽然没用过 Electron,但答案看起来方向是对的:remote.getGlobal('var') 得到的对象不是一般意义上的对象,Vue 没有办法给它加上 getter/setter,所以无法实现响应式。

我尝试了一下果然如此,用 require('data.json') 替换从主线程中取值,就一切问题都解决了。或者把 .getGlobal('data') 取出来的值,深度 Object.assign({}, source) 一下也可以。

看来有必要补一下 ES5 里面 Object 新增函数的知识了。

使用 Webstorm 调试 Electron 主进程

Webstorm 官方博客介绍的方法有问题,需要删掉 JavaScript file 的内容,再在 Node parameters 里填上 “.”(或者项目绝对路径),然后才可以。

图文无关,我什么时候拍了这条龙卷风的……

需要调试 Electron 主进程,按照 Webstorm 官方博客的设置,不行,报错。

错误信息

仔细看错误信息,因为我需要在工作目录下写文件,看起来在这样的执行语句下,会把工作目录定到 Electron 的安装目录里。

不过我直接在命令行里执行 electron . 是可以的,猜测可能跟入口 js 有关,所以把“JavaScript file”删掉,然后在“Node parameters”里填上 .(或者项目绝对路径),尽量贴近命令行里的状况,就可以了。

可行的配置

Electron 支持 .require()

记录一些 electron 的笔记

突然发现 Electron 支持浏览器里的 .requrie(),这样其实就不用 webpack 打包了,反正最后体积也不差那一丢丢。还好测试。

[2016-12-08]

我的环境里,Webpack + Vue + Vue-router,在 webpack.config.js 里设置:

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
}

打包出来的文件会报 “Unknown custom element: – did you register the component correctly” 错误,只好不用 webpack 了……

使用 Electron 开发桌面应用

先挖个坑,介绍 Electron 开发。目前只有打包部分的知识,也是我多日踩坑得来。

这个标题比较大,先挖个坑,日后再填。

忘记哪里看来的:nw(原 node-webkit)的作者从 Intel 离职后,无法继续维护 nw,此时 Github 向他抛来橄榄枝,请他去做 Electron(主要是为 Atom 做基础),于是便有了 Electron。

这两个东西虽然基础架构不一样,不过大体上都是 V8 + Chromium,实现使用 JavaScript 构建系统交互,使用 Web 提供 UI。简单对比了一下我觉得明显 Electron 好多了嘛,所以选择用它来开发桌面应用。

经过几天摸索,开发出来一个应用。不过太小,可分享的东西不多,所以先记几条 Tips。

封装 Electron 应用

打包工具

Electron 构建了一套完整的环境,只需要替换里面的 Web 部分就可以发布。这样最大的好处是每次发布的时候只需要简单压缩一下网页部分,放到包里,不用构建整套系统,对开发机的要求大大降低。

坏处就是,对于我们墙内用户而言,安装 Electron 必须用小水管拉一个将近 100M 的包回来,简直痛苦的要死。更别提后面如果享用 [electron-packager] 之类的工具封装的话还要再下一遍……每到这个时候,都要给病魔加油,愿他早日战胜方校长。

这里建议使用淘宝的 cnpm 镜像,速度会好很多。不过它似乎和 npm 有点冲突。

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install electron -g

至于 electron-packager,因为它使用 [electron-download] 下载 Electron 运行包,可以按照提示,修改下载的源,走淘宝镜像,这样也会快很多:

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

环境选择

至少在我这里,在 Mac 下只能打包 Mac 应用;在 Windows 下只能打包 Windows 应用。所以需要多平台的话,请准备多台开发机。