C#使用WebView2替代Electron

C#想要实现Electron那样混合桌面程序可以用以下几个库.
本文使用EdgeSharp

NanUI​github.com/NetDimension/NanUI

Photino​github.com/tryphotino

Electron.NET​github.com/ElectronNET/Electron.NET

EdgeSharp​github.com/webview2/EdgeSharp

Chromely​github.com/chromelyapps/Chromely

Sciter​sciter.com/developers/sciter-sdk-bindings/

开始

EdgeSharp可以直接使用HTML,

也可以配合Blazor、Razor 、SolidJs、Svelte、React、Vue、Angular等前端框架。

直接调用系统中Edge浏览器所配套的 WebView2,

无需像Electron那样打包整个浏览器内核，打包后的文件非常小。

 

更多强大的功能可以查看官方示例，本文只使用了最简单的HTML

EdgeSharp.Samples/angular-react-vue

EdgeSharp.Samples/winform

EdgeSharp.Samples/wpf

创建一个Winform程序

创建后,删除其他文件,只保留 Program.cs

Nuget安装相关依赖

    <PackageReference Include="EdgeSharp.Core" Version="0.9.0" />
    <PackageReference Include="EdgeSharp.WinForms" Version="0.9.0" />

将下面代码放入Program.cs中

using System.ComponentModel;
using System.Windows.Forms;

using EdgeSharp.Core;
using EdgeSharp.Core.Configuration;
using EdgeSharp.Core.Defaults;
using EdgeSharp.Core.Infrastructure;
using EdgeSharp.WinForms;

using HelloEdgeSharp.Controller;

using Microsoft.Extensions.DependencyInjection;

namespace HelloEdgeSharp
{
    internal static class Program
    {

        [STAThread]
        static void Main()
        {
            try
            {
                Application.SetHighDpiMode(System.Windows.Forms.HighDpiMode.SystemAware);
                Application.EnableVisualStyles();
                Application.SetCompatibleTextRenderingDefault(false);

                var appBuilder = new AppBuilder<Startup>();
                ServiceLocator.Bootstrap(appBuilder);
                var bowserForm = (BrowserForm)ServiceLocator.Current.GetInstance<IBrowserWindow>();
                Application.Run(bowserForm);
                appBuilder?.Stop();
            }
            catch (Exception e)
            {

                MessageBox.Show(e.Message);
            }

        }
    }

    public class Startup : WinFormsStartup
    {
        public override void ConfigureServices(IServiceCollection services)
        {
            base.ConfigureServices(services);

            services.AddSingleton<IConfiguration, SampleConfig>();

            services.AddSingleton<IBrowserWindow, SampleBrowserForm>();

            // 注入 控制器
            RegisterActionControllerAssembly(services, typeof(HelloController).Assembly);
        }

        public override void Initialize(IServiceProvider serviceProvider)
        {
            base.Initialize(serviceProvider);
        }
    }


    internal class SampleConfig : Configuration
    {
        public SampleConfig() : base()
        {
            // 拦截 api 并导航到 Controller (用RegisterActionControllerAssembly注册控制器)
            UrlSchemes.Add(new("http", "api", null, UrlSchemeType.ResourceRequest));
            // 静态文件资源 拦截 导航到 wwwroot
            UrlSchemes.Add(new("http", "app", "wwwroot", UrlSchemeType.HostToFolder));

            // 设置 首页地址
            StartUrl = "http://app/index.html"; ;

            // 去掉窗口标题栏
            //WindowOptions.Borderless = true;

        }
    }


    internal class SampleBrowserForm : BrowserForm
    {

        public SampleBrowserForm()
        {
            Width = 1200;
            Height = 900;

            var executable = System.Reflection.Assembly.GetExecutingAssembly();
            var iconStream = executable.GetManifestResourceStream("EdgeSharp.WinForms.Sample.edgesharp.ico");
            if (iconStream != null)
            {
                Icon = new Icon(iconStream);
            }
        }

        // 可以重写 各种生命周期      
        protected override void Bootstrap()
        {
            base.Bootstrap();
        }

        protected override void OnClosing(CancelEventArgs e)
        {
            base.OnClosing(e);
        }
    }
}

 

新建 Controller/HelloController.cs

继承 ActionController , 并添加 ActionController , ActionRoute 两个特性

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using EdgeSharp.Core.Network;

namespace HelloEdgeSharp.Controller
{
    [ActionController(Name = "HelloController", Description = "测试控制器")]
    public class HelloController : ActionController
    {

        public class UserInfo
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Version { get; set; }
            public string Url { get; set; }
        }
        public class Result<T>
        {
            public bool Succeeded { get; set; }

            public T Data { get; set; }
            public string Errors { get; set; }
        }


        [ActionRoute(Path = "/getFrameWorks")]
        public Result<object> GetFrameWorks(int index, int size)
        {
            var list = new List<UserInfo>
            {
                new UserInfo()
                {
                    Id = 1,

                    Name = "React",
                    Version = "v1",
                    Url = "http://www.react.com",
                },
                new UserInfo()
                {
                    Id = 2,
                    Name = "Vue",
                    Version="v2",
                    Url = "http://www.vue.com",
                }
            };


            return new Result<object>
            {
                Succeeded = true,
                Data = new
                {
                    Items = list,
                    TotalCount = 100,
                }
            };
        }

    }
}

 

新建 wwwroot/index.html

html代码省略
这里是Js发起请求与C#交互的关键代码

// 在C# SampleConfig 中配置了UrlSchemeType.ResourceRequest,
// 会拦截这个域名 http://api/ 的请求
let instance = axios.create({
    baseURL: "http://api/",
    timeout: 15000,
});
// 发起get请求
instance.get("/getFrameWorks?index=1&size=2")
 .then(r => {
    // 成功拿到controller中返回的数据
    console.log(r)
})

 

 

运行项目

这样我们就得到了一个使用HTML作为页面,C#作为后端的桌面程序

Github地址

全部源码

xxxxue/HelloEdgeSharp​github.com/xxxxue/HelloEdgeSharp