WebView2 不但是 Win11 自带的系统组件，Win10 也已经自动推送安装。纵然是少量没有安装 WebView2 的系统 —— 利用 aardio 中的 web.view 也会自动安装（ 不须要写任何代码 ）。
我用 WebView2 开拓了很多项目，不得不说 WebView2 稳定可靠、性能刁悍，接口简洁，是真的让人省心。
这里先容一个适宜用于 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 示例：
<button hx-get="/api/index.aardio" hx-swap="innerHTML" hx-trigger="click" hx-target="#info-div" > 点这里发送 GET 要求</button><br><div id="info-div"></div>
把稳看凡是 "hx-" 前缀的属性都是用于 htmx.js 。
hx-trigger 用于指定在什么事宜发生时触发 HTTP 要求，例如：
hx-trigger="click"
表示在 click 单击事宜发生时触发要求。
hx-trigger 可利用标准网页事宜名，常用事宜如下：
load - 网页元素首次加载时触发要求。click - 单击时触发要求。这是除表单，表单控件之外所有元素的默认事宜。change - 控件值改变时触发要求。input，textarea，select 等控件的默认事宜。submit - 提交表单时触发要求。表单的默认事宜。keydown - 按键时触发要求。keyup - 放开按键时触发要求。mouseenter - 鼠标进入时触发要求。mouseleave - 鼠标离开时触发要求。every 韶光 - 定时触发要求，例如 hx-trgger = "every 1s" 指定每隔 1 秒发送一次要求。事宜名后面还可以添加润色器，例如润色器 once 表示只许可触发一次 ：
hx-trigger="click once"
其他事宜润色器：
changed - 只有在元素的值变动时发出要求delay:延时 - 在指定的延时后发出要求，例如 hx-trgger = "load delay:1s" 指定元素加载后延迟 1 秒发送要求。如果做事端不断地返回相同 HTML 并更换节点自身，也可以实现轮询的效果（ aardio 后端可以掌握何时停滞轮询 ）。throttle:延时 - 节流，避免在指定时间内重复要求from:CSS选择器 - 监听指定元素上的事宜。下面的 HTML 利用了多个事宜润色器：
<input type="text" hx-trigger="keyup changed delay:500ms" hx-post="/api/index.aardio" >
这表示在按键放开（ 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" , "beforeend" , "afterend" , "none" 。这些看名字就知道是什么浸染，就不阐明了。
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 中 print 函数的参数。
例如做事端有下面的 aardio 代码：
<span>abc</span><? response.write("123")?>
运行后会自动转换为纯 aardio 代码如下：
print("<span>abc</span>");response.write("123");
在 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 做事器是：
wsock.tcp.simpleHttpServer;
这是一个多线程的 HTTP 做事端，每次被要求实行的 aardio 代码都是在后台线程中运行。aardio 多线程开拓要把稳的是每个线程都运行在独立的环境，全局变量是相互隔离的，这个限定实际上让 aardio 的多线程开拓更简洁，坑更少，详细请参考 aardio 自带「范例程序 > aardio 措辞 > 多线程」。
如果改为 wsock.tcp.asynHttpServer 则是单线程异步的 HTTP 做事器。
下面我们仍旧利用默认的 simpleHttpServer 。多线程的好处是耗时操作不会卡界面。后端在进行耗时操作时，网页前端常日须要显示一个动画，htmx.js 做这事就很大略。
我们只要大略的修正一下前面讲过的网页代码如下：
<button hx-get="/api/index.aardio" hx-indicator="#indicator" > 点这里发送 GET 要求</button><br><img id="indicator" class="htmx-indicator" src="/images/loading.gif"/>
紧张是增加了 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 ，输入以下代码：
<span><?if( request.method == "GET"){ / 这是多线程后端， 这里等 2 秒，网页会显示加载动画 / sleep(2000); response.write( time() ) } ?></span>
上面的代码的浸染是：如果收到 GET 要求，线程就休眠 2 秒以仿照耗时操作。然后输出当前韶光。
我们运行一下看看效果：
要求参数
htmx.js 提交要求的节点如果是一个表单控件，只要指定 name 属性 —— 就会自动以该名字发送要求参数，参数值便是控件的值。
如果提交要求的节点是表单，则 HTTP 要求参数为表单内所有控件的值。
也可以在节点的 hx-vals 属性中用一个 JSON 工具指定要求参数，例如网页这样写：
<button hx-get="/api/index.aardio" hx-vals='{"myVal": "值"}'> 点这里发送 GET 要求</button><br>
aardio 后端就可以利用：
request.get["myval"]
取到 HTTP 要求参数 myval 的值。
如果利用 POST 发送要求，例如：
<button hx-post="/api/index.aardio" hx-vals='{"myVal": "值"}'> 点这里发送 GET 要求</button><br>
那么 aardio 后端可以利用
request.post["myval"]
取到 HTTP 要求参数 myval 的值。
在 aardio 后端利用：
request.query("myval")
可以取到 GET 或 POST 发送的 myval 参数值。
hx-vals 还可以通过加上 javascript: 或者 js: 前缀后利用 JS 工具返回要求参数，例如：
<button hx-get="/api/index.aardio" hx-vals='javascript:{myVal: "值"}' > 点这里发送 GET 要求</button> web.form 也玩 htmx.js
有趣的是 web.form 也可以支持 htmx.js 。
web.form 是基于系统自带的 IE 内核控件，把稳系统虽然删除了 IE 浏览器，但 IE 控件属于系统组件，Windows 有解释该控件不会被移除。IE 控件的好处是从 XP 到 Win11 所有操作系统都自带。
而且 IE 控件很轻量，与本地程序交互的接口也非常方便。Win10 ,Win11 自带的是 IE11 内核，写写一样平常的网页还是很好用的。至于 Win7 —— 由于只有极低的份额，一样平常软件不用考虑。
htmx.js 末了一个支持 IE 11 的版本是 1.6.1 ，这个足够用了。前面说过我们须要的只是局部要求刷新的功能，其他功能我们用不上，以是追新无意义。
首先我们打开 aardio 工程引导，选择「 Web 界面 > Web Form 」然后创建工程即可，新版工程模板默认便是利用 htmx.js 。
其他 HTML 代码写法与前面先容的 WebView2 基本一样。不过 web.form 本就支持 EXE 内嵌资源文件，以是默认并不会启动 HTTP 做事器，须要多写几句代码。
打开工程的 webPage.aardio 源码：
可以看到源码中是如下启动 HTTP 做事器的：
import web.form;var wb = web.form(winform); //多线程后端import wsock.tcp.simpleHttpServer;wsock.tcp.simpleHttpServer.documentBase = "\web"var indexUrl = wsock.tcp.simpleHttpServer.startUrl("\index.html") wb.go(indexUrl);
我并没有把这几句代码封装到 wb.go() 函数中。
有些新手总以为代码越少越好，实在并非如此，有时候多写几句更随意马虎看清楚代码的思路，更随意马虎理解我们正在利用的技能。
下面我们看下 web.form + htmx.js 范例的运行效果：
上面示例程序的主窗口是利用 win.ui.tabs 做的，只有个中一个标签页用到了网页。
实在一样平常桌面软件的界面并不是一定要全部利用网页实现。有时候我们将界面中适宜用网页呈现的部分用网页做，可能会更好。
我们在利用任何技能时，都要考虑一下适不适宜。没有一样技能能适宜做所有的事，多个选择总是好事。
