纯 HTML 与纯 Python 小工具的一个尝试（附遇到的坑与解决办法）

会编程的人，总会想做些小工具。

通常，小工具如果有 GUI 界面会比较直观。

但是，用什么来做 GUI 是个问题，如果用 C#, 会局限于 win 系统，如果用 Java 则需要拖着一个 jvm, 如果用 Electron 又体积巨大占用内存多……

后来发现了 TiddlyWiki, 它的实现方式很另类，就单独一个 html 文件，我感觉这对于不太复杂的小工具来说, 是个极好的方式！因为：

免安装
天生跨平台
网页做 GUI 界面非常方便，生态好，有大量优秀的 UI 库
近年来前端技术发展非常良好，对于一个小工具来说，网页本身就能实现大部分需求，最大的缺点就是无法直接保存数据到本地而已。

作为一个尝试，最近做了一个小工具 ( https://github.com/ahui2016/small-plans 上周发布, 最近几天有几个重要改进 ), 采用类似 TiddlyWiki 的方式.

TiddlyWiki 把用户数据也保存到 html 文件里, 结果导致升级 TiddlyWiki 本身非常麻烦

当 TiddlyWiki 本身有变化时，它需要一个复杂的方式小心翼翼地把用户数据剥离出来，升级自身后, 再把用户数据填充回去。
我的解决方案是，以 json 形式导出用户数据。TiddlyWiki 点击保存按钮是下载一个包含自身程序与用户数据的 html 文件，我的方案则是点击按钮下载一个用户数据 json 文件。
我的方案的缺点是，TiddlyWiki 不需要导入数据，我的则需要。但由于平时用户数据会保存在浏览器里，因此不需要频繁导入数据，这个缺点不算太严重。
优点是升级方便，程序本身（即一个 html 文件）完全可以随时被覆盖，升级就是用新版直接覆盖旧版，用户数据完全不受影响！
由于数据与程序分离，后续可以非常方便地通过 api 与各种云盘、云储存或自建服务器收发数据。

浏览器没有权限获取本地文件夹地址

据我所知 TiddlyWiki 明显有一个麻烦的地方：点击保存，直接下载文件，但无法让程序帮忙自动选择目录, 每次都需要手动移动文件。
我想到的解决办法是，获取当前网址。由于是本地文件，因此网址就是本地目录地址。
然后我提供一个复制按钮给用户，然后在选择文件的窗口里粘贴按回车，即可快速定位到当前目录。

主要功能在 html 里做，但有时可能需要做一些周边的辅助工具

根据具体情况而定，有时一个 html 就足够了，有时增加一个或几个额外的工具会更方便
比如我需要这样一个功能：
- 让用户选中几个本地文件（旧版本）
- 自动从 GitHub 仓库里下载一个文件（最新版本）
- 把多个本地文件的内容替换为最新版本
显然，无法让 html 文件来完成，最后我找到一个 Python 的 GUI 库
- http://appjar.info (开源免费)

强烈推荐 appJar!

易用，非常易用，即学即用，极易上手（我考虑要不要帮他写个中文版的教程）
它的底层是 tkinter, 因此只要有 Python 环境就能运行，没有第三方依赖，不需要 pip install
缺点是界面超丑，但不拿来做主程序，只拿来做周边的辅助工具，考虑到它易学易用、无依赖、跨平台、快速产出等优点，丑一点也可以接受吧。

结论

鉴于前端技术的发展，现在做小工具，完全可以考虑这种方案：单个 HTML 文件
如果需要额外的辅助工具，推荐这个超级易学易用的 GUI 库: appJar

cmdOptionKana

2020-03-10 00:31:20 +08:00

@mokain nodejs 也很香，事实上我这个工具第一版就是用 Golang 做后端，用 Vue 做前端。

后来改成现在这种方式。从这个工具的使用情境来看，现在这种方式比 web 服务器好太多了。

现在可以跟着项目走，跟着项目一起 git push，使用时也不需要先启动本地服务器，各方面的心理负担都小了很多。

举个例子，多个项目同时使用这个程序时，如果用你说的 web 服务器的方式，“上传到 github” 这个部分怎样处理？（是集中上传到一个仓库，还是分别上传到各自的仓库，如果分开仓库，要怎样设置）

程序的启动方式怎样处理？（要在控制台输入命令吗，需要先切换文件夹吗，根据启动时的文件夹只显示当前项目的内容，还是不用切换文件夹启动后显示一个项目列表？）

总之，最后我发现现在这种方式有它的优点，一个 html 文件就是一个独立的程序，很多问题都得到了简化。