强大 WebView2 + 不用写 JavaScript 的 htmx.js 「小轻快」开发桌面程序

风声之家 2022-10-28 发布于江苏

展开全文

WebView2 是越来越香了。

WebView2 不但是 Win11 自带的系统组件，Win10 也已经自动推送安装。即使是少量没有安装 WebView2 的系统 —— 使用 aardio 中的 web.view 也会自动安装（不需要写任何代码）。

我用 WebView2 开发了很多项目，不得不说 WebView2 稳定可靠、性能强悍，接口简洁，是真的让人省心。

▶ htmx.js

这里介绍一个适合用于 WebView2 的极简前端组件 htmx.js ，这个组件最大的特色就是简单，一学就会，也很容易理解。

我们正常浏览一个网页的过程是在浏览器里输入网址，向 HTTP 服务器发送请求。然后服务器返回 HTML 代码，浏览器显示页面。

但是 htmx.js 脑洞大开，让网页上的每一个 HTML 节点都可以向服务器发送请求并获取 HTML，并实时更新页面上指定的节点。而且不需要写任何 JavaScript 代码。

▶ 起步

首先我们打开 aardio ，创建 WebView2 工程并选择 htmx.js 模板：

生成的工程如下：

点『运行』可直接测试效果，点『发布』可生成独立 EXE 文件。

在工程管理器中右键点『网页』弹出菜单，然后点『用外部编辑器打开』，如果安装了 VS Code 会使用 VS Code 打开网页目录。

在 VS Code 中点击并打开 index.html 源码：

▶ htmx.js 基础

打开 index.html ，先看最简单的 htmx.js 示例：

注意看凡是 "hx-" 前缀的属性都是用于 htmx.js 。

hx-trigger 用于指定在什么事件发生时触发 HTTP 请求，例如：

表示在 click 单击事件发生时触发请求。这里使用的是标准的事件名，例如按键 keydown ，放开按键 keyup，鼠标进入 mouseenter 鼠标离开 mouseleave 等等。

而事件名后还可以指定修饰符，例如只允许触发一次的 once ：

其他修饰器：

下面的 HTML 使用了多个事件修饰器：

这表示在按键放开（ keyup ），文本框的内容发生改变（ changed ）时触发，并且延时 500 毫秒再发送请求。

hx-get 则指定要请求的是哪个后端页面，例如：

表示事件触发时，请求 "/api/index.aardio" 这个页面。因为 aardio 在启动 SPA 应用时自动指定了后端根目录为 "/web"，所以实际请求的是 "/web/api/aardio" 。

而 hx-swap 则指定要将返回的 HTML 写入到哪里，"innerHTML" 指定是更新网页节点内部 HTML，"outerHTML" 指定替换目标网页节点的全部 HTML ，其他还有 "afterbegin" , "beforebegin" , "beforeend" , "afterend" , "none" 。这些看名字就知道是什么作用，就不解释了。

hx-target 属性用 CSS 选择器指定要写入的网页节点，例如：

指定服务器返回的 HTML 写入 id 为 "info-div" 的节点。如果省略 hx-target 属性表示写入目标是当前节点自身。

hxmx.js 在更新 HTML 时，如果发现新旧 html 中有 id 相同的元素会进行优化并平滑显示。

看到这里，htmx.js 您已经会用了。

虽然 htmx.js 文档里有更多花式用法，但一般可能用不上。有些事搞太复杂了也不一定是好事。

▶ htmx.js + aardio 后端

aardio 提供了嵌入式 HTTP 服务器，可以直接使用 aardio 代码写网页，支持与 PHP 类似的模板语法。

aardio 的模板语法很简单，aardio 代码写在 <? ?> 内部，而 HTML 代码写在 <? ?> 外部就可以了。实际上 <? ?>外部的代码被转换为了 aardio 中 print 函数的参数。

例如服务端有下面的 aardio 代码：

运行后会自动转换为纯 aardio 代码如下：

在 HTTP 后端中，print 函数实际上就是指向用于向 HTTP 客户端输出数据的 response.write() 函数。

在 HTTP 后端有两个最常用的对象，request 对象包含了所有 HTTP 请求信息，而 response 对象为 HTTP 响应对象，用于向客户端发送数据。

打开 aardio 自带「工具 > 库函数文档」，点击 fastcgi.client 的文档可以查看 request, response 对象的所有属性与方法。aardio 中的所有 HTTP 服务端实现都统一兼容 fastcgi.client 文档规定的 request, response 用法。

也可以参考 aardio 开始页的《 aardio 网站开发、FastCGI开发入门教程》。至于 aardio 模板语法，请参考《 aardio 语法与使用手册 > aardio 语言 > 模板语法》

aardio 的模板语法不仅仅可以用于写 HTTP 后端，也不仅仅是可以用于输出 HTML，实际上可以用于生成任何字符串。aardio 中的很多功能都支持这种模板语法，例如运行时编译 C# 代码就支持用 aardio 模板语法生成 C# 代码。另外 aardio 提供 string.loadcode() 函数可以直接解析 aardio 模板并返回字符串。

▶ htmx.js 指示动画，aardio 后端线程

这里要注意，上面范例工程默认导入的 HTTP 服务器是：

这是一个多线程的 HTTP 服务端，每次被请求执行的 aardio 代码都是在后台线程中运行。aardio 多线程开发要注意的是每个线程都运行在独立的环境，全局变量是相互隔离的，这个限制实际上让 aardio 的多线程开发更简洁，坑更少，具体请参考 aardio 自带「范例程序 > aardio 语言 > 多线程」。

如果改为 wsock.tcp.asynHttpServer 则是单线程异步的 HTTP 服务器。

下面我们仍然使用默认的 simpleHttpServer 。多线程的好处是耗时操作不会卡界面。后端在进行耗时操作时，网页前端通常需要显示一个动画，htmx.js 做这事就很简单。

我们只要简单的修改一下前面讲过的网页代码如下：