aardio 范例: Edge 浏览器控件 - web.view

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

/*
网页开发文档教程
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/html
https://learnxinyminutes.com/docs/zh-cn/javascript-cn
https://learnxinyminutes.com/docs/zh-cn/html-cn
https://learnxinyminutes.com/docs/zh-cn/css-cn
https://quickref.me/javascript
https://quickref.me/es6 https://babeljs.io/docs/en/learn/#ecmascript-2015-features
https://quickref.me/css

web.view 入门教程：
https://mp.weixin.qq.com/s/iYXPJgagXax9VgiIYaRfRw
*/
if(!_WIN10_LATER) import web.view.7; //兼容 Win7 以及之后版本，不支持新版 WebView2 的功能。 
else import web.view;//支持 Win10 以及之后版本，导入这个就别导入前面的 web.view.7;  

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

/*
导出为Javascript中的 aardio 对象，
直接转换为 COM 对象，不需要经过 JSON 转换。
Javascript 使用 Promise 访问此对象的成员。

通过 external 接口调用 aardio 函数时参数中的 JS 对象会转换为 COM 对象，
而返回给 JS 的 aardio 对象会被转换为 Promise 对象。
*/
wb.external = {
    toString = function(){
        return owner.property; 
    };
    property = "这是 aardio 对象的属性值";
    methodWithParametersAndReturnValue = function(a,b){
        return a + b
    } 
    //aardio 函数如果抛出异常，网页 DevTools 调试工具可查看错误信息
}

/*
导出任意个 Javascript 全局函数, 使用 JSON 自动转换参数和返回值，
通过 JSON 双向自动转换 —— 可以更好的兼容只能支持纯 aardio 对象 / 纯 JavaScript 对象的代码。

在被网页回调的 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')");
    };
    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.asynHttpServer。

例如：
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 格式