WebView2越来越香了。
WebView2不仅仅是Win11自带的系统组件，Win10已经手动推送安装了。 即使少数系统没有安装WebView2 - 在aardio中使用web.view将手动安装它（无需编写任何代码）。
我用WebView2开发了很多项目。 不得不说，WebView2稳定可靠，性能强大，界面简洁，真是省心。
htmlx.js
这里是一个适合WebView2的极简后端组件htmx.js。 该组件最大的特点是简单，易于学习和理解。
我们浏览网页的正常流程是在浏览器中输入URL，并向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请求，例如：
hx-trigger="click" 表示点击事件发生时触发请求。
hx-trigger可以使用标准的网页事件名称，常见事件如下：
还可以在事件名称前面添加装饰器。 例如css图片不重复，装饰器once表示只允许一次触发：
hx-trigger="click once" 其他风暴修改器：
以下 HTML 使用多个 Storm 修饰符：
这意味着当松开键盘（keyup）并且文本框的内容发生改变（changed）时，就会触发，并在延迟500毫秒后发送请求。
hx-get指定请求哪个前端页面，例如：
hx-get="/api/index.aardio" 表示当风暴触发时，请求页面“/api/index.aardio”。 由于aardio在启动SPA应用时手动指定前端根目录为“/web”，所以实际请求为“/web/api/aardio”。
而hx-swap指定将返回的HTML写入哪里，“innerHTML”指定更新网页节点内部HTML，“outerHTML”指定替换目标网页节点的所有HTML，其他还有“afterbegin”、“beforebegin” 、“之前”、“之后”、“无”。 这些的作用从名字就可以知道，就不解释了。
hx-target 属性使用 CSS 选择器来指定要写入的网页节点，例如：
hx-target="#info-div" 指定将服务器返回的 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中打印函数的参数。
例如，服务器有以下aardio代码：
abc
运行后会手动转换为纯aardio代码如下：
print("abc");
response.write("123");在HTTP后端，print函数实际上指向向HTTP客户端输出数据的response.write()函数。
HTTP 后端有两个最常用的对象。 request对象包含所有HTTP请求信息，response对象是用于向客户端发送数据的HTTP响应对象。
打开aardio内置的“工具>库函数文档”，点击fastcgi.client文档，可以查看请求和响应对象的所有属性和技巧。 aardio 中的所有 HTTP 服务器实现都统一兼容 fastcgi.client 文档中指定的请求和响应用法。
也可以参考aardio起始页的《Aardio网站开发、FastCGI开发教程》。 关于aardio模板句型，请参考《aardio语法及使用指南>aardio语言>模板句型》
aardio的模板语法不仅可以用来编写HTTP后端，也不能用来输出HTMLcss图片不重复，事实上，它可以用来生成任何字符串。 aardio 中的许多函数都支持这些模板语句。 例如，运行时编译C#代码支持使用aardio模板语句生成C#代码。 另外，aardio提供了string.loadcode()函数来直接解析aardio模板并返回字符串。
htmx.js表示动画，aardio后端线程
这里需要注意的是，上面示例项目导出的默认HTTP服务器是：
wsock.tcp.simpleHttpServer;这是一个多线程的HTTP服务器，每次请求执行时，aardio代码都会在后台线程中执行。 Aardio多线程开发要注意每个线程运行在独立的环境中，全局变量相互隔离。 这个限制实际上让aardio的多线程开发更加简洁，陷阱也更少。 具体可以参考aardio自带的“例子”>“aardio语言>多线程”。
如果改为wsock.tcp.asynHttpServer，则是单线程异步HTTP服务器。
下面我们仍然使用默认的simpleHttpServer。 多线程的好处是耗时的操作不会卡在界面上。 当后端进行延时操作时，网页后端通常需要显示动画，htmx.js 做到这一点非常简单。
我们只需要把上面提到的网页代码简单修改一下即可：
主要是减少 hx-indicator 属性，该属性的值指定使用 CSS 选择器发送 HTTP 请求时要显示的 HTML 元素，这里指定了 id 为“indicator”的元素。
其实我们可以自定义这个请求动画的样式。 我们打开样式文件index.css并添加以下样式：
.htmx-indicator{
display:none;
}
.htmx-request.htmx-indicator{
display:inline;
}发送请求时，网页上设置的指示器元素会手动添加CSS类“htmx-request”，HTTP请求结束时会删除该类。
然后我们打开对应的aardio后端代码/web/api/index.aardio，输入以下代码：
上面代码的作用是：如果收到GET请求，线程会休眠2秒，模拟一个耗时的操作。 然后输出当前时间。
我们运行一下看看效果：
请求参数
如果htmx.js提交请求的节点是表单控件，只要指定name属性——请求参数就会手动带着name一起发送，参数值就是控件的值。
如果提交请求的节点是表单，则HTTP请求参数为表单中所有控件的值。
还可以使用JSON对象在节点的hx-vals属性中指定请求参数，例如网页中这样写：
aardio 后端已准备好使用：
request.get["myval"]
发表评论