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