TidyView App 开发指南

187 阅读1分钟

TidyView App 开发指南

1.什么是TidyView App

回答这个问题,首先要回答什么是 TidyView (提取码Tidy) 。一言以蔽之, 微软 WebView2 的封装。

TidyView本质上就是一个浏览器,但它提供了TidyScript脚本运行的功能。而内置的WebView2可以用Html+JS进行页面设计。

UI设计用Html+JS,功能实现用C#

2.一个TidyView App实例

一个TidyView App 一般有4个文件

  1. C#写的dll,如Test.dll
namespace Test
{
    public class World
    {
        public static string Hello()
        {
            return "Hello World";
        }
        public static string Name()
        {
            return "TidyScript";
        }
    }
}
  1. 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()}\")");
}
  1. Html文件,如page.html
<html>
    <body>
        <div id="self">
            这是page.html
        </div>
        <div id="btn">
            Click Me
        </div>
    <body>
</html>
  1. JS文件,如page.js
document.getElementById("btn").onclick=()=>
{
    //call是预先注入的函数
    //call(函数名,参数...)
    call("SayName");
};
function setText(text)
{
    document.getElementById("self").innerText=text;
}

这是一个简单的实例,演示了C#写的dll和Html+JS融合的方案

结果.gif

3. 未完待续,下面来一个有实际意义的实例