aardio 范例: web.view( WebView2 浏览器控件) - 入门

web.view 入门教程
//web.view( WebView2 浏览器控件) - 入门
import win.ui;
/*DSG{{*/
var winform = win.form(text="Edge 浏览器控件 - web.view";right=800;bottom=469;bgcolor=0xFFFFFF)
winform.add()
/*}}*/

/*
web.view 入门教程：
https://mp.weixin.qq.com/s/iYXPJgagXax9VgiIYaRfRw
*/
import web.view; 

/*
参数 @1 指定嵌入窗口（可以是 winform 或 static,custom 等控件对象）。
可选用参数 @2 指定浏览器用户数据目录，可选用参数 @3 指定浏览器启动参数。
*/
var wb = web.view(winform);

/*
在 Javascript 中可通过全局变量 `aardio` 访问 wb.external 对象。
在 JavaScript 中所有的 aardio 对象以及 aardio 对象的方法与属性都被包装为 Promise 对象

在 JavaScript 中调用 wb.external 导出的函数时，参数与返回值都不需要经过 JSON 转换。
除字符串、数值、布尔值、可兼容的数组、buffer 等基础值类型可以直接传值以外，
其他对象类型（JavaScript 中的 object 或 aardio 中的表对象 ）自动转换为 COM 代理对象，
让我们可以通过 COM 接口间接操作跨语言的对象。

要注意不能将这种 COM 代理对象作为原生 JavaScript 对象使用，
例如不能用于 JavaScript 图表或表格的数据源对象，而 wb.export 导出的 aardio 函数则无此限制。

一般优先用 wb.external，速度更快并且可以避免 JS 全局名字污染。
*/
wb.external = {
    toString = function(){
        return owner.property; 
    };
    property = "这是 aardio 对象的属性值";
    methodWithParametersAndReturnValue = function(a,b){
        return a + b
    } 
    //aardio 函数如果抛出异常，网页 DevTools 调试工具可查看错误信息
}

/*
wb.export 导出 aardio 函数为 Javascript 全局对象（ Promise 对象 ）, 
JavaScript 调用这些 aardio 函数时将会使用 JSON 自动转换跨编程语言的参数和返回值。
这种经由 JSON 转换的对象与 JavaScript 完全兼容，而 wb.external 导出的函数则只能返回 COM 代理对象。
wb.export 更适合传递复杂的集合对象（JS 的 object ，aardio 的表），例如图表数据、配置表等。

在被网页回调的 aardio 函数内部调用 wb.eval, wb.xcall 可能阻塞后续调用。
应改用非阻塞的 wb.invoke, wb.doScript 。或者通过 winform.setTimeout 异步调用 wb.invoke, wb.doScript。
*/
wb.export({
    alert = function(msg){
        winform.msgbox(msg) 

        //要避免重入，例如：不能在 alert 回调中再次调用 alert 函数
        //wb.invoke("alet('test')");

        /*
        wb.export 导出的函数务必返回非 null 值，否则 JS 可能一直等待。
        wb.external 无此要求。 
        */
        return  true;
    };
    nativeAdd = function(a,b){ 
        return a + b; 
    }
})

/*
如果通过 wb.html 直接写入 HTML，则不能引用其他本地文件路径。
如果需要引用 JS,CSS 等本地资源文件，请改为：

import wsock.tcp.simpleHttpServer;
wb.go("/res/index.html") 
*/
wb.html = /**
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    html,body{ height:100%; } 
    </style>
    <script type="text/javascript"> 
    (async ()=>{
        var v = await aardio.property;
        var n = await aardio.methodWithParametersAndReturnValue(21,12);

        /*
        aardio 作为一个 JavaScript 对象也有一些成员是 Javascript 函数（或属性）。
        例如 aardio.toString() 调用的就是 Javascript 函数。

        如果要调用同名的 aardio 函数按微软的文档要写为 aardio.applyHostFunction("toString") ，
        但实际测试正确写法应该是 aardio.getHostProperty("toString").applyHostFunction([])。
        applyHostFunction 其实可以省略，所以可以这样写：
        */
        var str = await aardio.getHostProperty("toString")() ;//没必要取这种函数名，也没必要这样写。

        alert(str);
    })()
    </script>
</head>
<body style="margin:50px">
web.view 基于微软 WebView2（Edge/Chromium内核），<br>
WebView2 稳定可靠、性能强悍、接口简洁，可生成体积很小的独立 EXE 程序。<br>
<br>
WebView2 支持 Win10 以及之后的系统。<br>
Win11 已自带 WebView2，Win10 1803 以及之后的系统早已自动推送 WebView2。<br>
<br>
实际上现在 WebView2 已经是无法卸载的系统级组件。<br>
没有自带 WebView2 的旧系统已经非常罕见，可以忽略不记。<br>
<br>

只要简洁，不求完美！<br>
Win7 在市场上已经接近消失，现在开发软件再处处考虑 Win7 兼容是不必要的。<br>
web.view 支持库不再支持 Win7，可通过 web.view.7 扩展库导入兼容 Win7 的旧版 web.view 。 
<br>
在网页上点右键菜单项<b>（Inspect / 检查）</b>或按 F12 键可以打开网页开发工具（ DevTools ），<br>
在开发工具的「设置 / 语言」<b>（Settings / Language」）</b>界面可切换开发工具的界面语言。<br>
在 DevTools <b>控制台（Console）</b>可查看程序错误信息。<br>
</body>
</html>
**/

/*
//打开远程网址可以这样写
wb.go("https://aardio.com")

如果需要打开嵌入资源目录下的网页，
需要事先导入 wsock.tcp.simpleHttpServer 或 wsock.tcp.asyncHttpServer。

例如：
import wsock.tcp.simpleHttpServer; 
wb.go("\res\index.html"); 

这时候 aardio 会自动创建嵌入 HTTP 服务端，
并将单个斜杠或反斜杠开头的路径转换为嵌入 HTTP 服务端地址（支持 SPA 单页应用）。
如果打开路径的文件名为 "index.html", 则上级目录自动设为根目录。
也就是说前端工程里不用再配置非根目录，网页可以直接使用  "/index.html" 这样的路径。

上面的代码等价于下面的代码：
import wsock.tcp.simpleHttpServer; 
var indexUrl = wsock.tcp.simpleHttpServer.startSpaUrl("\res\index.html","\res\");
wb.go(indexUrl); 
*/

//执行 JS 并获取返回值。
wb.doScript("window.location.href",function(result,err){
    winform.msgbox(result,"doScript")
})

winform.show();
win.loopMessage();
Markdown 格式