TidyView App 开发指南
1.什么是TidyView App
回答这个问题,首先要回答什么是 TidyView (提取码Tidy) 。一言以蔽之, 微软 WebView2 的封装。
TidyView本质上就是一个浏览器,但它提供了TidyScript脚本运行的功能。而内置的WebView2可以用Html+JS进行页面设计。
UI设计用Html+JS,功能实现用C#
2.一个TidyView App实例
一个TidyView App 一般有4个文件
- C#写的dll,如Test.dll
namespace Test
{
public class World
{
public static string Hello()
{
return "Hello World";
}
public static string Name()
{
return "TidyScript";
}
}
}
- App文件,如App.edge
using "Test.dll";//加载指定dll
using Test;//引用命名空间
var Url="page.html";//指定打开的Html文件。可以是本地文件也可以是http协议
var JS="page.js";//指定注入的js文件
//当App启动时,会调用该函数
void OnLoad()
{
EvalJS($"setText(\"{World.Hello()}\")");
}
//当App退出时,会调用该函数
void OnRemove()
{
}
//自定义的一个函数,可以在js中如是调用call('SayName')
void SayName()
{
//运行JS代码,调用js函数setText
EvalJS($"setText(\"{World.Name()}\")");
}
- Html文件,如page.html
<html>
<body>
<div id="self">
这是page.html
</div>
<div id="btn">
Click Me
</div>
<body>
</html>
- JS文件,如page.js
document.getElementById("btn").onclick=()=>
{
//call是预先注入的函数
//call(函数名,参数...)
call("SayName");
};
function setText(text)
{
document.getElementById("self").innerText=text;
}
这是一个简单的实例,演示了C#写的dll和Html+JS融合的方案