使用Vue和Electron构建本地应用

Electron提供了一种方式,将 WebApp 构建成本地应用。

另一个类似的方案是NW.js

没有做细致的比较,项目时间很紧,简单的做下对比:

  • Star, Electron 有 7 万多,NW.js 是 3 万 5 千多
  • github/Atom 和 microsoft/VS Code 使用的是 Electron

粗浅的看,区别还是有的:

  • NW.js 的chromium版本很新,目前是73,Electron 当前用的是69,这是由于不同的实现架构造成的,前者更容易更新版本
  • NW.js 启动入口是 html 文件,Electron 是运行 js 程序

Read More

多页面WebApp项目脚手架方案

传统的 web 网站,是多页面的,不借助新出的框架,比如 react 或者 vue 等。

这里给出一个脚手架项目,可以 clone 后,具备:

  • 使用 webpack/babel 将 es 语法编译为兼容低版本浏览器语法
  • 开发模式下,web 页面随着程序改动自动更新
  • 生产模式下
    • 压缩 JavaScript 和 CSS 文件,自动引用到 html 页面
    • 编译输出可发布的所有静态文件
    • html 文件配置强制不缓存
    • js/css 文件名带 hash 值,每次发布的文件名称不同,方便做 cdn
    • 多个页面需要的公共库,比如 jQuery,单独编译,在多页面共享

本文参考了 Static website, multiple html pages, using Webpack + example on Github

Read More

Flutter widget, rendering和dart.ui的基本使用

Flutter渲染界面的架构,分三个层次:

其中:

  • dart.ui
    • 提供了最底层的渲染界面的封装
    • 主要包括一个Canvas类,以及围绕它的各种基本图形API,包括:点、线、矩形、路径、文本等等
    • dart.ui封装了和渲染引擎的交互
    • dart:ui library
  • rendering
    • 使用dart.ui的API,提供更高级更简便的渲染功能
    • 将界面抽象为一个RenderObject的树,渲染整个树将显示界面的内容
    • 树中的RenderObject是可变更的,变更后将触发新的渲染
    • 可以近似看作Web开发中的DOM
    • 见:rendering library
  • widget
    • 使用rendering API,提供更高级的抽象,便于开发可复用图形组件和界面
    • 可以创建一个Widget树生成界面,树中的Widget实例都是不可变的,更新Widget实质上是创建新的Widget,取代旧的
    • 一般情况下,开发Flutter主要是使用Widget,从这个层面上看,一切Flutter界面都是Widget
    • widgets library

下面我们用具体示例展示各个API的基本使用。

Read More

在macOS 10.14.1下使用DVD刻录机

先锋蓝光DVD刻录机,之前使用没有问题,这次在新版本macOS 10.14.1下出现问题。

在Finder(访达)中找不到光驱。

这是一个Bug,见:

其实也不影响刻录,将需要刻录的文件,都汇集到一个目录下,然后选择目录,鼠标右键:

就可以刻录了。刻录完成后,在Finder(访达)中就能看到该光驱了,可以选择光驱正常推出。

Read More