分类
作品

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

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

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

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

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

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

入圈链接

分类
js

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

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

总之,在 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 先顶上。

分类
vue

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

前几天开发 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 主进程

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

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

错误信息

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

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

可行的配置

分类
桌面开发

Electron 支持 .require()

突然发现 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 开发桌面应用

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

忘记哪里看来的: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 应用。所以需要多平台的话,请准备多台开发机。