Electron 客户端程序在开发时不同于一般网页开发,程序的生命周期也是不一样的,一般需要经历开发、测试、打包构建、分发程序、收集反馈等。

这里介绍一些技巧, 可以方便在开发、测试及发布后更好地调试。

阻止ErrorDialog显示

在程序出现Bug情况下,用户可能会收到错误提示框,影响用户体验,可能我们希望隐藏提示框,由程序统一做一些处理。

Electron没有提供明确的mute方式,但是我们可以通过覆盖方法方式:

日志记录上报

在用户运行程序时出现的各种问题,最好的方式是可以记录到文件,然后通过其它方式上报分析,如用户主动发送、或者自动上传。

推荐一款比较好用的插件electron-log。默认的日志记录位置是:

  • on Linux: ~/.config/<app name>/log.log
  • on OS X: ~/Library/Logs/<app name>/log.log
  • on Windows: %USERPROFILE%\AppData\Roaming\<app name>\log.log

程序可以自动读取上报。

另外,我们也可以同步页面(renderer process)中的console日志:

这样便可以统一日志输出,方便搜集。

埋入调试快捷键

通常情况下,发布的程序包在用户端是不提供调试功能的,一般我们不希望用户打开devtool。但为了方便调试,我们可以默默埋入一个调试快捷键,在需要的时候调出devtool进行页面调试。

我们可以使用Electron提供的Accelerator,设置一个较复杂,用户不容易按的组合快捷键:

另外一种添加更复杂快捷键的方式是通过Mousetrap 这个模块。

在main中接收ipc消息,打开devtool即可。

找回复制粘贴功能

默认情况下,在不开启Edit菜单的情况下,页面中是不能够复杂粘贴的,网上很多方法都是添加回Edit菜单。但也可以不通过这种方式:

推荐两个插件:

  • [electron-input-menu](https://github.com/parro-it/electron-input-menu)
  • [electron-contextmenu-middleware](https://github.com/parro-it/electron-contextmenu-middleware)

用法也很简单,在renderer中执行:

有关打包和自动更新

见另一篇博文:https://ijser.cn/about-electron-builder/

获取用户设备唯一ID

推荐插件:node-machine-id

用法很简单:

在程序第一次启动时获取,然后把它缓存起来。

保存用户配置

推荐插件:electorn-config

配置会以文件形式保存在程序目录中,可以通过app.getPath('userData')获得目录路径。

 

最近半年加入了一个新团队,并从头开始规划一个团队和 WebApp 项目。一切都是新的,新的团队成员,新的领导,新的环境。

我想,可以避免一些弯路,可以做出一些尝试。

继续阅读

Rime 是一款Hacker级的输入法,有非常强大的定制性及不错的性能,输入法家族的神一般的存在。
Rime 支持不同Win, Mac, Linux三大操作平台,并且分别有不一样的名字:中州韵,小狼毫,鼠须管。
之前主要用Ubuntu时,Rime是相比iBus, Fcitx 更好用的输入法,现在用Mac之后,也试过其它一些五笔输入法,都有一些不太方便的地方。

继续阅读

六个要素 和 五个误区

SPLSCM六个要素:

  • 战略性 Strategic
    • 站在行业和业务需求角度思考,我们的技术战略是跨平台例如
      • 我们选择ES6而非CoffeeScript, 因为ES6是前端行业内的标准;
      • 我们的产品是需要跨终端的,所以选择Web这种技术实现
  • 先进性 Progressiveness
    • 要符合当前主流的技术标准
      • 例如我们选择ES6, Vue 2.0(尽管目前还是RC版本)
  • 易学性 Learnability
    • 简单易学且适用的技术和工具 远比 功能强大且不能在项目中灵活运用的工具更有效
    • 不要用整体解决方案,因为那些通常是局部最优
      • 我们应该选择最优组合,选择多个成功案例验证的结果
  • 扩展性 Scalability
    • 意味着一旦需求发生变化 ,系统能够尽快得到扩充
  • 兼容性 Compatibility
    • 可以有效地节约投资,方便数据 和信息共享
  • 成熟性 Maturity
    • 技术和工具被使用得越广泛说明其越成熟
    • stackshare.io 参考其它团队的技术和工具栈

五个误区:

  1. 决策时考虑沉没成本
  2. 追求完美
  3. 迷信整体解决方案
  4. 把试验田进行商业推广
  5. 不自知团队的学习曲线

团队的三种管理工具:

  1. 项目管理工具(Trello)
    1. 任务分配:任务拆解结果,计划和分配
    2. 任务状态跟踪:团队及时更新Trello任务状态,记录必要信息
    3. 项目进度展示:Trello看板要能够始终呈现当前的团队任务完成情况
    4. 基本问题/风险管理:重要问题要显著标注、受到关注
  2. 沟通管理工具(Slack, Email)
    1. Slack做信息的汇总呈现
    2. 团队成员间的即时交流
    3. 重要决定、事项通过Email备忘
  3. 知识管理工具(Quip)
    1. 团队要不断学习和总结,这样才能持续保持高效
    2. 不注重积累的团队往往知识就存在某几个人的手中,无法使团队进步

HTTPS(Hypertext Transfer Protocol Secure),即超文本传输安全协议,是HTTP与SSL/TLS的组合,用以提供加密通讯及对网络服务器身份的鉴定。

由于http是明文传输的,所以在互联风上传输隐私信息非常不安全,目前国外大多数网站都已经全面支持https, 但国内情况很差,不仅很少有大型网站全站支持https,甚至有些网站使用https不规范,安全协议过时,留下了一些安全隐患。继续阅读

ECMAScript 6, 新名称是ECMAScript 2015, 是新版本的JavaScript标准,目前除Chrome等浏览器都基本支持外,node.js稳定版本0.12通过--harmony参数也已经支持; iojs甚至无需添加任何参数即可支持。

下面是整理的脑图大纲,可以用来复习。

继续阅读