【C#】Winform NanUI 相关功能整合

CrazyPanda发表于：2024-02-09 00:00:50浏览：382次TAG：

NanUI 0.88版本去掉启动界面（遮罩）

NanUI 0.88版本读取本地资源和嵌入式资源

NanUI 0.77版本打开控制台

NanUI 0.77版本 C#调用多个参数的JS方法

NanUI 0.77版本传递数组参数

NanUI 0.77版本设置窗体全屏显示（类似Kiosk模式）

NanUI 0.77版本 Bootstrap类 API

NanUI 0.88版本去掉启动界面（遮罩）

启动界面是作者给我们显示公司产品的Logo用的，如果用不着可以去掉，但必须要更改源码，如果不想改源码，直接将启动界面背景设置为白色即可：

Mask.BackColor = Color.White;

当然也可以随意的设置颜色：

var mainColor = ColorTranslator.FromHtml("#E83B90");
Mask.BackColor = mainColor;

下面是官方设置启动界面的demo代码：

private void CustomizeMaskPanel()
{
    var label = new Label
    {
        Text = "WinFormium\nExample Application\nPowered by NanUI",
        AutoSize = false,
        TextAlign = ContentAlignment.MiddleCenter,
        Anchor = AnchorStyles.None,
        ForeColor = Color.White,
        Font = new Font("Segoe UI Light", 24.0f, GraphicsUnit.Point)
    };
 
    label.Width = Width;
    label.Height = Height / 2;
    label.Location = new Point(0, (Height - label.Height) / 2);
 
    var loaderGif = new PictureBox
    {
        Anchor = AnchorStyles.Right | AnchorStyles.Bottom,
        Size = new Size(40, 40),
        Image = Properties.Resources.Indicator,
        SizeMode = PictureBoxSizeMode.CenterImage
    };
 
    loaderGif.Location = new Point(Width - (int)(loaderGif.Width * 2.0f), Height - (int)(loaderGif.Height * 1.5f));
 
    //遮罩
    Mask.Content.Add(label);
    //图片遮罩
    Mask.Content.Add(loaderGif);
    Mask.Image = null;
}

怎么搭建0.88版本源码看我帖子：Winform NanUI 0.88版本用官方源码搭建原生态开发环境地址：Winform NanUI 0.88版本用官方源码搭建原生态开发环境_熊思雨的博客-CSDN博客

打开NetDimension.NanUI程序集中Resources.Designer.cs，可以看到读取启动界面的本地资源

/// <summary>
///   查找 System.Drawing.Bitmap 类型的本地化资源。
/// </summary>
internal static System.Drawing.Bitmap Powered {
    get {
        object obj = ResourceManager.GetObject("Powered", resourceCulture);
        return ((System.Drawing.Bitmap)(obj));
    }
}

去掉方法也很简单，在Formium.cs 中找到这个字段：

internal protected ViewMask Mask { get; private set; }

将其所有相关的引用，全部注释。

点击运行，一切正常，去掉启动界面，打开网页的速度反而更快了！

NanUI 0.88版本读取本地资源和嵌入式资源

一、导入插件

在使用前，安装NanUI 相关插件，否则项目会报错

二、读取嵌入式资源

启动类中加入下面代码，这里你可以选择读取本地资源，还是嵌入式的资源，

作为示例，我这里用的是嵌入式资源

下面代码部分功能我并没有贴出完整代码，你如果直接复制过去，会有部分报错，自己删除或更改报错部分就是

using NetDimension.NanUI;
using NetDimension.NanUI.EmbeddedFileResource;
using NetDimension.NanUI.LocalFileResource;
using NetDimension.NanUI.ZippedResource;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;
using Utils;
using Xilium.CefGlue;
 
namespace NanUIFramework
{
    static class Program
    {
        public static MainIndex MainIndexs = null;
        public static NetDimension.NanUI.HostWindow.HostWindowType HostWindowType = NetDimension.NanUI.HostWindow.HostWindowType.System;
 
        /// <summary>
        /// 应用程序的主入口点。
        /// </summary>
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
 
            Init();
 
            WinFormium.CreateRuntimeBuilder(env =>
            {
                env.CustomCefSettings(settings =>
                {
                    // 在此处设置 CEF 的相关参数                
                });
                env.CustomCefCommandLineArguments(commandLine =>
                {
                    // 在此处指定 CEF 命令行参数
                    commandLine.AppendSwitch("disable-pinch");
                });
            }, app =>
            {
                //如果您希望只运行一个实例，请使用此设置
                app.UseSingleInstance(() =>
                {
                    MessageBox.Show("实例已经运行，只能运行一个实例", "Single Instance", MessageBoxButtons.OK, MessageBoxIcon.Warning);
                });
 
                //清除所有缓存文件，如cookie，历史，本地存储等。
                app.ClearCacheFile();
 
                //嵌入式资源
                app.UseEmbeddedFileResource("http", "Load.Resource.Html", "View");
 
                //读取本地资源  注册LocalFileResource处理程序，它可以处理本地文件夹中的文件资源。
                //app.UseLocalFileResource("http", "Load.Local.Html", System.IO.Path.Combine(Application.StartupPath, "View"));
 
                //读取ZIP资源
                //app.UseZippedResource("http", "archive.app.local", Application.StartupPath + "\\View\\index.zip");
 
                //实例化界面
                MainIndexs = new MainIndex();
 
                // 指定启动窗体
                app.UseMainWindow(context => MainIndexs);
            })
            .Build()
            .Run();
        }
 
        private static void Init()
        {
            //初始化配置文件
            ConfigManager.Instance.Init();
 
            //从配置文件读取是否设置全屏
            string s_isFullScreen = ConfigManager.Instance.GetShowConfig("isFullScreen");
            bool b_isFullScreen = false;
            if (bool.TryParse(s_isFullScreen, out b_isFullScreen))
            {
                if (b_isFullScreen)
                    HostWindowType = NetDimension.NanUI.HostWindow.HostWindowType.Kiosk;
                else
                    HostWindowType = NetDimension.NanUI.HostWindow.HostWindowType.System;
            }
        }
    }
}

三、主界面

MainIndex代码，注意这里的 StartUrl 的 URL 和上面代码中的 URL 要保持一致

using NetDimension.NanUI;
using NetDimension.NanUI.HostWindow;
using NetDimension.NanUI.JavaScript;
using System.Drawing;
using Utils;
 
namespace NanUIFramework
{
    public class MainIndex : Formium, WebConsoleLog
    {
        public override HostWindowType WindowType => Program.HostWindowType;
        public override string StartUrl => "Load.Resource.Html/index.html";
 
        //界面是否初始化完毕
        private bool WindowsIsReady = false;
 
 
        #region 浏览器函数
        protected override void OnReady()
        {
            //显示控制台
            string isShow = ConfigManager.Instance.GetShowConfig("isShowConsole");
            if (isShow.Equals("True")) ShowDevTools();
 
            WindowsIsReady = true;
            //注册JS方法
            MapClrObjectToJavaScript();
        }
 
        private void MainIndex_BeforeClose(object sender, NetDimension.NanUI.Browser.FormiumCloseEventArgs e)
        {
            Log.Print("[MainIndex]当浏览器关闭时");
        }
 
        private void MainIndex_LoadEnd(object sender, NetDimension.NanUI.Browser.LoadEndEventArgs e)
        {
            Log.Print("[MainIndex]当网页加载完成时");
 
            InvokeIfRequired(async () =>
            {
                var result = await EvaluateJavaScriptAsync("js的方法");
                if (result.Success)
                {
                    JavaScriptValue retval = result.ResultValue;
                    string type = retval.GetBool() ? "0" : "1";
                    string script = string.Format("console.log('{1}')", "传入的值");
                    ExecuteJavaScript(script);
                }
            });
        }
        #endregion
 
        #region 注册JS方法
        private void MapClrObjectToJavaScript()
        {
            var obj = JavaScriptValue.CreateObject();
 
            //示例
            obj.SetValue("JsCallCSharp", JavaScriptValue.CreateFunction(args =>
            {
                return null;
            }));
            RegisterExternalObjectValue("CSharpProject", obj);
        } 
        #endregion
 
        #region 在浏览器中显示日志
        /// <summary>
        /// 控制台输出日志
        /// </summary>
        /// <param name="value"></param>
        public void ShowConsoleLog(string value)
        {
            if (!WindowsIsReady) return;
 
            string script = string.Format("console.log('[C#日志]{0}')", value);
            ExecuteJavaScript(script);
        }
        #endregion
 
        #region 构造函数
        public MainIndex()
        {
            BeforeClose += MainIndex_BeforeClose;
            LoadEnd += MainIndex_LoadEnd;
 
            if (Program.HostWindowType == HostWindowType.System)
            {
                //界面的大小
                string s_width = ConfigManager.Instance.GetShowConfig("Width");
                string s_heigth = ConfigManager.Instance.GetShowConfig("Height");
                int width = 0;
                int height = 0;
                bool b_width = int.TryParse(s_width, out width);
                bool b_height = int.TryParse(s_heigth, out height);
                if (!b_width || !b_height)
                    Size = new Size(1280, 800);
                else
                    Size = new Size(width, height);
 
                StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;
                Title = "终端";
                Icon = System.Drawing.Icon.ExtractAssociatedIcon("NanUIFramework.exe");
                CanMaximize = false;//不允许使用最大化界面按钮
                Resizable = false;//窗体是否能够改变大小
            }
            Mask.BackColor = Color.White;
        } 
        #endregion
    }
}

完成了上面的步骤之外，还是不够的，View文件夹中所有的文件（除文件夹之外）都要改为嵌入式的资源

NanUI 0.77版本打开控制台

在界面的重写方法OnWindowReady中，调用ShowDevTools方法即可

 
protected override void OnWindowReady(IWebBrowserHandler browserClient)
{
    //显示控制台
    WebBrowser.ShowDevTools();
}

NanUI 0.77版本 C#调用多个参数的JS方法

NanUI 版本：0.77

JS代码：

 
function TwoParameter(n1,n2) {
    console.log("n1:" + n1);
    console.log("n2:" + n2);
}

C#代码：

WebBrowser.ExecuteJavascript("TwoParameter(2,4)");

执行：

NanUI 0.77版本传递数组参数

NanUI 版本：0.77

经过询问NanUI的作者，无论是0.77还是0.88版本，都无法通过ExecuteJavaScript("console.log('Hello NanUI')"); 这种方式进行数组传递，但可以用ExecuteJavaScript("console.log([1,2,3])");这种方式传递数组，如果想传递C#对象，可以将C#对象转为JSON，然后使用JSON字符串进行传输。

案例1：JS传递一个数组和一个回调到C#

JS代码：

function on_Click() {
    var arr = new Array();
    arr.push("巴豆");
    arr.push(40);
    arr.push("2077/5/23");
    //调用C#并传入一个数组，一个JS的回调
    try {
        my.callbackTest(arr, sayByeBye);
    } catch (e) {
        console.log("调用C# callbackTest方法失败");
    }
}
 
//给C#回调
function sayByeBye(obj) {
    var str = "参数success:" + obj.success + "   参数text：" + obj.text
    console.log(str);
}

C#代码：

//接收JS的回调，并将自己的参数传递过去
var callbackTestFunc = myObject.AddFunction("callbackTest");
callbackTestFunc.Execute += (func, args) =>
{
    //获取数组参数
    var myArr = args.Arguments.FirstOrDefault(p => p.IsArray);
    if(myArr != null)
    {
        //获取药名
        string drugName = myArr.GetValue(0).StringValue;
        //获取数量
        int num = myArr.GetValue(1).IntValue;
        //获取有效期
        string validity = myArr.GetValue(2).StringValue;
 
        string ret = string.Format("药名：{0}，数量：{1}，有效期：{2}",drugName,num,validity);
        MessageBox.Show(ret);
    }
    
    //获取回调参数
    var callback = args.Arguments.FirstOrDefault(p => p.IsFunction);
    if (callback != null)
    {
        //创建一个Object类型的变量
        var callbackArgs = CfrV8Value.CreateObject(new CfrV8Accessor());
        //添加一个Bool类型的值：success
        callbackArgs.SetValue("success", CfrV8Value.CreateBool(true), CfxV8PropertyAttribute.ReadOnly);
        //添加一个string类型的值：text
        callbackArgs.SetValue("text", CfrV8Value.CreateString("我是C#参数"), CfxV8PropertyAttribute.ReadOnly);
        //用ExecuteFunction执行JS传递过来的回调，并将自己设置的变量callbackArgs传递给JS
        callback.ExecuteFunction(null, new CfrV8Value[] { callbackArgs });
    }
};

运行：

1. C#获取到JS的数组：

2. C#返回给JS的对象

案例2：JS调用C#，从C#获取一个数组

JS代码：

try {
    var arr = my.TestCSharpToJSArr();
    if (arr) {
        console.log("参数1：" + arr[0]);
        console.log("参数2：" + arr[1]);
    }
} catch (e) {
    console.error("调用TestCSharpToJSArr方法失败");
}

C#代码：

//传递一个数组到JS
var TestCSharpToJSArr = myObject.AddFunction("TestCSharpToJSArr");
TestCSharpToJSArr.Execute += (func, args) =>
{
    CfrV8Value arr = CfrV8Value.CreateArray(2);
    arr.SetValue(0, CfrV8Value.CreateString("茄子"));
    arr.SetValue(1, CfrV8Value.CreateString("黄瓜"));
    args.SetReturnValue(arr);
};

运行：

NanUI 0.77版本设置窗体全屏显示（类似Kiosk模式）

对于显示控制台，和窗体的一些配置，比如，宽和高，是否全屏显示等参数，我都写在一个xml配置文件里。

具体怎么去读取xml文件的参数，我这里不贴代码了，度娘帖子多的是。

在Program.cs中，我定义了HostWindowType的一个默认值，并且读取xml文件中isFullScreen节点的值，来设置窗体的显示方式

using NetDimension.NanUI;
using System;
using System.Windows.Forms;
using Utils;
 
namespace NanUI077_SourceCode
{
    static class Program
    {
        public static MainIndex MainIndexs = null;
        public static HostWindowType HostWindowType = HostWindowType.Standard;
 
        /// <summary>
        /// 应用程序的主入口点。
        /// </summary>
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
 
            Init();
 
            Bootstrap
            .Initialize()
            .WithChromiumCommandLineArguments((procesName, cmd) =>
            {
                // 在此处处理CEF的命令行参数
            })
            .WithChromiumSettings(settings =>
            {
                // 在此处处理CEF的设置
            })
            .WhenLibCefNotFound(args =>
            {
                // 如果NanUI启动器没有检测到正确的CEF以及ChromiumFX运行环境，将执行此处理过程。
                MessageBox.Show("没有检测到Chromium Embedded运行环境，请确认libcef环境配置正确。", "libcef.dll is not found", MessageBoxButtons.OK, MessageBoxIcon.Error);
            })
            .Run(() =>
            {
                MainIndexs = new MainIndex();
                return MainIndexs;
            });
        }
 
        private static void Init()
        {
            //初始化配置文件
            ConfigManager.Instance.Init();
 
            //从配置文件读取是否设置全屏
            string s_isFullScreen = ConfigManager.Instance.GetShowConfig("isFullScreen");
            if (string.IsNullOrEmpty(s_isFullScreen)) return;
            bool b_isFullScreen = false;
            if (bool.TryParse(s_isFullScreen, out b_isFullScreen))
            {
                if (b_isFullScreen)
                    HostWindowType = HostWindowType.UserCustom;
                else
                    HostWindowType = HostWindowType.Standard;
            }
        }
    }
}

在mainIndex中OnStandardFormStyle方法里，将UserCustorm 模式改为全屏就好了，这里主要代码的顺序，无边框模式一定要写在第一句，否则就无法全屏了

//如果您还想进一步定制您的窗口样式，请重载 OnStandardFormStyle 方法，
//并使用 style 参数来设置窗口启动位置、大小、图标、边框样式等信息。
protected override void OnStandardFormStyle(IStandardHostWindowStyle style)
{
    base.OnStandardFormStyle(style);
 
    Title = "第一个NanUI应用";
    if (Program.HostWindowType == HostWindowType.Standard)
    {
        style.Width = 1280;
        style.Height = 720;
        style.Icon = System.Drawing.SystemIcons.WinLogo;
        style.StartPosition = FormStartPosition.CenterScreen;
        style.MaximizeBox = false;//禁止最大化
        style.FormBorderStyle = FormBorderStyle.FixedSingle;//禁止边框拖拽放大
    }
    else if(Program.HostWindowType == HostWindowType.UserCustom)
    {
        style.FormBorderStyle = FormBorderStyle.None;//无边框模式
        style.WindowState = FormWindowState.Maximized;//最大化窗口
        style.TopMost = true;//设置最顶层窗口（显示在最前面）
    }
}

NanUI 0.77版本 Bootstrap类 API

下面是Bootstrap类的一部分接口：

静态成员
CEF_VERSION type:const string 指示当前框架的 Cef 版本
CommandLineArgs type：string[] 当前进程的命令行参数

静态属性
ApplicationDataDirectory { get; } type:string
获取应用程序的数据目录，应用数据目录用于存放 NanUI 相关的数据。通常该目录位于%appdata%Net Dimension Studio中。

CacheDirectory { get; } type:string
获取应用程序 Chromium 的缓存目录，缓存目录用于存放 Chromium 的零时数据，包含了浏览记录、Cookies 数据、LocalStorage 数据等。通常该目录位于应用程序数据目录中。

CurrentContext { get; } type:Bootstrap 实例
获取当前 Bootstrap 的单例实例。应用程序初始化开始后才具备返回值；否则，返回 null。

DefaultBrowserSetting { get; } type:CfxBrowserSettings
Chromium 浏览器的默认设置，关于浏览器设置 CefBrowserSettings 的相关设置信息以及功能，请参考此文档。

LibCefDirPath { get; } type:string
获取 libcef.dll 的路径。当 NanUI 自动搜索到 Cef 以及 ChromiumFX 的二进制依赖项时，此属性才具有返回值；否则返回 null，也代表 NanUI 没能找到正确的依赖项路径，启动应用程序后将抛出异常。

PlatformArchitecture { get; } type:enum[x86|x64]
获取当前应用程序运行的系统架构

ResourceDirPath { get; } type:string
获取 Cef 的 Resources 目录。Resources 目录包含了 Chromium 运行的必要文件，这些文件不可缺少。NanUI 会根据 LibCefDirPath 的值自动查找该目录并且验证目录文件，验证通过后此属性才具有返回值；否则返回 null，同样的启动应用程序后将抛出异常。

SubprocessPath { get; } type:string
返回 NanUI 子进程可执行文件的路径。如果在 Bootstrap 初始化时指定了 UseDefaultBrowserSubpress() 特性，那么 NanUI 会自动搜索到 NanUI 子进程可执行文件时，此属性才具有返回值；否则返回 null，启动应用程序后将抛出异常。

静态方法
void Announce()
在控制台中打印 NanUI 的相关信息。这些信息在 NanUI 主进程启动时已自动打印。

int ExecuteProcess()
执行应用程序子进程。如果单独没有指定子进程或者没有指定UseDefaultBrowserSubpress() 特性，那么应用程序执行自己作为 Chromium 的子进程，否则将使用 Subprocess.exe 作为子进程。

Bootstrap Initialize()
通知 NanUI 开始初始化运行时环境，并返回 Bootstrap 类的实例。

void Log(params ColorToken[] tokens);
在控制台中打印日志，NanUI 的控制台打印模块使用了ColoredConsole库来实现控制台内容着色，有关信息请参考 ColoredConsole 项目。

void RegisterCustomResourceHandler(Func<CustomResource> resourceHandler);
注册自定义资源处理器。使用该方法可以注册任何 CustomResource 的派生类。资源处理器主要原理是通过拦截 Http 请求，当 Url 命中资源处理器中预设的 Url 时，返回指定的文件或信息。

void Text(string text)
在控制台中打印非重要信息。通常这些信息以黑底白字呈现。

实例方法
BeforeApplicaitonRun(Func<Bootstrap, bool> beforeRun);
设置一个在主窗体加载前的处理程序，参数传入当前 Bootstrap 实例，返回一个 Boolean 类型指示是否继续执行 Run()方法。

DisableHighDpiSupported()
禁用 Chromium 的 HighDPI 支持。默认情况下，NanUI 启用了 Chromium 的 HighDPI 支持，如果您的应用程序不是为新版 Windows 系统（例如 Windows 7）开发的，那么您需要显式地指定这一特性来避免 Chromium 跟随系统 DPI 缩放。

RegisterChromiumExtension(string name, Func<ChromiumExtensionBase> register)
为 Chromium 的 Javascript 环境注册扩展内容。参数name为该扩展的唯一名称，参数register是指定了返回值为ChromiumExtensionBase类型的代理，ChromiumExtensionBase是任何自定义扩展的基类。

UseDefaultBrowserSubpress()
指定使用 NanUI 默认的子进程应用程序。要使用此特性，您需要提前为您的应用程序安装 NanUI 子进程应用程序。

WhenLibCefNotFound(Action<LibCefNotFoundArgs> action)
设置 NanUI 没能自动找到 libcef.dll 依赖是的处理程序。参数LibCefNotFoundArgs包含了几个只读属性：Architecture - 只是当前应用运行的系统架构；ApplicationStartupPath - 应用程序的启动路径；DataPath - 应用程序的数据路径。在此代理中，您可以实现自己的路径查找逻辑，或者实现 Cef 依赖项目的远程下载等操作，最后，把您自定义的 Cef 依赖项存放地址反写到 LibCefDir 属性中，系统将再次检测您指定的路径，如果符合 NanUI 的运行要求，那么应用程序继续初始化工作；否则，将抛出异常。

WithApplicationDataDirectroty(string dataDir)
设置自定义的应用程序数据目录路径。

WithCustomLibCefDirPath(string libCefDirPath)
设置自定义的 Cef 依赖项存放目录路径。

WithDebugModeEnabled()
开启调试模式。默认情况下 NanUI 的调试模式是关闭的，非调试模式下 NanUI 禁用了某些非必要日志的输出，处了编辑菜单项外，移除了 Chromium 的其他上下文菜单。

WithChromiumCommandLineArguments(Action<string, CfxCommandLine> buildAction);
自定义 Chromium 的命令行参数，代理方法的第一个参数是 processType，第二个参数是命令行参数的快捷设置器。有关于 Chromium 的命令行参数，请参考此文档。

WithChromiumSettings(Action<CfxSettings> buildAction)
自定义 Chromium 的各项参数。代理方法的第一个参数为 Chromium 设置的快捷设置器。有关于 Chromium 设置的相关参数，请参考此文档。

void Run(Func<Formium|Form|ApplicationContext> runAction)
初始化 NanUI 并运行应用程序主窗体。执行本方法意味着 NanUI 运行环境初始化完成。您只能执行本方法一次，多次执行本方法将抛出异常。

end

原文链接Winform NanUI 相关功能整合-CSDN博客