C# WebView2 在你的应用中使用Chromium内核

什么是WebView2?

1. Win10上对标Edge浏览器
2. Chromium内核
3. 简单的可视为WebBrowser组件的升级版

如何使用WebView2?

1. 官网下载 WebView2 RunTime
2. VS2019 NuGet搜索 WebView2，安装最新版即可

WebView2 具体使用技巧

1. 引入 using Microsoft.Web.WebView2.WinForms;
2. 声明 WebView2，如 var edge=new WebView2();
3. 将窗体 Load 事件声明为 async，如 private async void ViewForm_Load(object sender, EventArgs e)
4. 将edge添加到Controls中，如Controls.Add(edge);edge.Dock = DockStyle.Fill;
5. 在窗体 Load 事件中 增加 await edge.EnsureCoreWebView2Async();//这步是必须的
6. 设置网址，edge.Source = new Uri("https://www.cnblogs.com");

我想怎么玩？

1. WebView2 提供 UI 👉 TidyView
2. TidyScriptCore 提供 C# 脚本运行

TidyView

1. 把 WebView2 封装成 TidyWebView

public class TidyWebView:WebView2
{
  public TidyWebView();
  public List<Typing.FuncSender> Main;
  public Runner ViewRunner;
  private void CoreWebView2_DOMContentLoaded(object sender, Microsoft.Web.WebView2.Core.CoreWebView2DOMContentLoadedEventArgs e);
  private void TidyWebView_CoreWebView2InitializationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs e);
  public string Url{get;set;}
  public void Navigate(string Url)
  public delegate void CallNone();
  public void EvalJS(string Script);
  public void EvalTidy(string Script);
  private EventCollection EventList;
  public int AddFunc(Typing.FuncSender func);
  public int AddFunc(string Name,Typing.FuncSender func);
  public void CallIndex(int Index,params object[] args);
  public void Call(string Name, params object[] args);
}

2. 将 TidyWebView 放到窗体

using System;
using System.Windows.Forms;
using System.IO;
using TidyScriptCore;

namespace TidyView
{
    public partial class ViewForm : Form
    {
        public ViewForm()
        {
            InitializeComponent();
            edge.NavigationCompleted += Edge_NavigationCompleted;
            Inner.console.host = edge;
        }

        private void Edge_NavigationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NavigationCompletedEventArgs e)
        {
            Text = edge.CoreWebView2.DocumentTitle;
        }

        TidyWebView edge = new TidyWebView();

        public string CodePath = string.Empty;

        private async void ViewForm_Load(object sender, EventArgs e)
        {
            Tidy.Using(typeof(Inner));
            p_web.Controls.Add(edge);
            edge.Dock = DockStyle.Fill;
            Icon = Properties.Resources.browser;
            await edge.EnsureCoreWebView2Async();
            edge.ViewRunner.Space.Create("MainForm",this);
            if (File.Exists(CodePath))
            {
                Log.Path = TidyScriptCore.API.GetDir(CodePath) + "\\Logs.txt";
                edge.ViewRunner.Environment["ScriptPath"] = CodePath;
                edge.ViewRunner.Environment["ScriptDir"] = TidyScriptCore.API.GetDir(CodePath);
                Tidy.EvalFile(CodePath,edge.ViewRunner);
            }
        }
    }
}

3. 写 TidyScript 脚本 个人门户(密码:Tidy)，基本和C#代码风格保持一致

using "Baidu.csc";
using "News.csc";
using "Weather.csc";
edge.AddFunc("search",(kw,filter_str,limit_str,page_str)=>
{
  var filter=json.obj(filter_str);
  var limit=json.obj(limit_str);
  var page=json.obj(page_str);
  var filter_lamda;
  var bd=new Baidu();
  //...
  int index=page.start_index;
  bd.search(kw,(info)=>
  {
    //...
    if(filter.on){/*...*/}
    else
    {
      edge.EvalJS($"_add({index++},{info});");
    }
    return true;
  },()=>{/*...*/},page.first,page.last);
  edge.EvalJS("_show_sufooter()");
});
//...
//...
edge.Main.Add(()=>
{
  if(file.exists(locate("filter_code.txt")))
  {
    var default_code=transfer(file.read(locate("filter_code.txt")));
    edge.EvalJS($"document.getElementById('filter_code').value='{default_code}'");
  }
});
edge.Url="file:///"+locate("page.html");

4. 右键你写的脚本，用TidyView.exe打开，点击BiliBili
   

5. 先下载 WebView2 RunTime 然后👉 打包好的示例（TidyView+示例脚本）

下一个玩具 FFMPEG Visual ，我打算这么做

1. 将功能封装在FfmpegEx.dll中
2. TidyView用来 UI
3. 写C#脚本，来桥接 FfmpegEx.dll 和 JS