【C#】Winform NanUI 0.77版本 JS和C#相互调用

CrazyPanda发表于：2024-02-06 20:41:04浏览：393次TAG：

一、导入插件

二、常用方法

三、C#和JS相互调用

一、导入插件

用的NanUI版本0.77

参考官方地址：https://docs.formium.net/zh-hans/tutorial/first-app.html

二、常用方法

基础代码：

using NetDimension.NanUI;
using NetDimension.NanUI.Browser;
 
class MainWindow : Formium
{
    //网页的地址
    public override string StartUrl => "https://www.google.com";
    //边框模式
    public override HostWindowType WindowType => HostWindowType.Standard;
    //这里写null就好
    protected override Control LaunchScreen => null;
 
    public MainWindow()
    {
        Title = "第一个NanUI应用"
    }
 
    protected override void OnWindowReady(IWebBrowserHandler browserClient)
    {
 
    }
 
    protected override void OnRegisterGlobalObject(JSObject global)
    {
 
    }
 
    //网页的大小和布局
    protected override void OnStandardFormStyle(IStandardHostWindowStyle style)
    {
        base.OnStandardFormStyle(style);
 
        style.Width = 1280;
        style.Height = 720;
        style.Icon = System.Drawing.SystemIcons.WinLogo;
        style.StartPosition = FormStartPosition.CenterScreen;
    }
}

启动页面也需要修改一下：

using NetDimension.NanUI;
 
static class Program
{
    /// <summary>
    ///  The main entry point for the application.
    /// </summary>
    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.SetCompatibleTextRenderingDefault(false);
        //Application.Run(new Form1());
 
          Bootstrap
          .Initialize()
          .Run(() => new MainWindow());  
    }
}

三、C#和JS相互调用

1.C# 调用JS

假设页面中有如下Javascript的函数sayHello，它的作用是在DOM中创建一个包含有“Hello NanUI!”字样的p元素。

function sayHello() {
    var p = document.createElement("p");
    p.innerText = "Hello NanUI!";
 
    var container = document.getElementById("hello-container");
    container.appendChild(p);
}

示例中，该函数并没有在Javascript环境里调用，而是在页面加载完成后使用NanUI的ExecuteJavascript方法来调用它。ExecuteJavascript方法执行的返回结果为一个bool类型，它指示了这次有没有成功执行。

在窗体的构造函数中，通过注册 Formium 的 LoadHandler 中的 OnLoadEnd 事件来监测页面加载完成的情况，并在页面加载成功后调用JS环境中的函数 sayHello。

C#：

protected override void OnWindowReady(IWebBrowserHandler browserClient)
{
    browserClient.LoadHandler.OnLoadEnd += LoadHandler_OnLoadEnd;
}
 
private void LoadHandler_OnLoadEnd(object sender, Chromium.Event.CfxOnLoadEndEventArgs e)
{
    if (e.Frame.IsMain)
    {
        //C#调用网页中的JS脚本中sayHollo方法，这里，并没有返回参数，仅仅是让浏览器打印一个log而已
        WebBrowser.ExecuteJavascript("sayHollo()");
 
        //C#调用网页中JS脚本 带有返回参数的方法
        WebBrowser.EvaluateJavascript("returnValue('C#')", (value, exception) =>
        {
            if (value.IsString)
            {
                var jsValue = value.StringValue;
                MessageBox.Show(jsValue);
            }
        });
    }
}

这里调用了JS中的两个方法：sayHollo,returnValue

JS:

function sayHollo() {
    alert("网页alert: Hollo!");
}
 
function returnValue() {
    return "JS 返回 嘻嘻嘻！";
}

效果：

===============================

在需要获取返回值的情况下

上面的例子中通过ExecuteJavascript方法来成功调用了JS环境中的函数。但不难发现，这种调用方式C#是没有接收到任何返回值的。但实际的项目里，我们是需要从JS环境获取到返回值的，这时候使用ExecuteJavascript将不能满足需求，使用另外一个方法EvaluateJavascript可以帮助我们从JS环境中获得JS函数的返回值。

假如有另外一个Javascript函数sayHelloToSomeone，它能接收一个字符传参数，在函数体中拼接并返回拼接后的字符串。

function sayHelloToSomeone(who) {
    return "Hello " + who + "!";
}

同样的，在上面例子LoadHandler的OnLoadEnd事件中我们来执行sayHelloToSomeone，并通过C#传递参数并获取拼接后的返回值。EvaluateJavascript方法通过一个回调Action来获取JS环境中的返回值。这个Action有两个参数，第一个是返回值的集合，第二个是JS环境的异常对象，如果函数正确执行，那么第二个参数为null。

namespace CommunicateBetweenJsAndCSharp
{
    using NetDimension.NanUI;
    public partial class Form1 : Formium
    {
        public Form1()
            : base("http://res.app.local/www/index.html",false)
        {
            InitializeComponent();
 
            LoadHandler.OnLoadEnd += LoadHandler_OnLoadEnd;
        }
 
        private void LoadHandler_OnLoadEnd(object sender, Chromium.Event.CfxOnLoadEndEventArgs e)
        {
            // Check if it is the main frame when page has loaded.
            if(e.Frame.IsMain)
            {
                EvaluateJavascript("sayHelloToSomeone('C#')", (value, exception) =>
                {
                    if(value.IsString)
                    {
                        // Get value from Javascript.
                        var jsValue = value.StringValue;
 
                        MessageBox.Show(jsValue);
                    }
                });
            }
        }
    }
}

在上面的示例中，通过我们可以明确知道JS函数sayHelloToSomeone的返回值一定为String类型，因此在C#的回调中直接使用Value的StringValue属性来获取JS函数的字符传返回值。但在实际的应用中，有可能并不完全知道返回值的类型，因此需要使用Value中内置的各个判断属性来逐一筛选返回值。

需要注意的是，Value的类是是ChromiumFX中的CfrV8Value类型，它是一个非常重要的类型，基本上所有在C#与CEF间的通信都是由这个类型来完成的。

2.JS调用C#方法

上面演示了如何用 C# 来调用 Javascript 中的函数，那么下面的内容将介绍如何使用 Javascript 来调用C#中的对象、属性和各种方法。

在此之前，需要介绍NanUI窗体基类Formium中的重要属性GlobalObject，您可以把他理解成Javascript环境中的window对象。如果您需要在Javascript环境下使用C#中的各种对象、属性和方法，都需要将这些对象、属性、方法注册到GlobalObject里。

C#：

protected override void OnRegisterGlobalObject(JSObject global)
{
    var myObject = global.AddObject("my");
 
    #region 添加属性
    //添加一个属性:name
    var nameProp = myObject.AddDynamicProperty("name");
    //Get属性
    nameProp.PropertyGet += (prop, args) =>
    {
        //要返回的字符串
        args.Retval = "这是C#的一个Get属性：name";
        args.SetReturnValue(true);
    };
    //Set属性
    nameProp.PropertySet += (prop, args) =>
    {
        var value = args.Value;
        args.SetReturnValue(true);
    };
    #endregion
 
    #region 添加方法
    //添加一个方法 showCSharpMessageBox
    var showMessageBoxFunc = myObject.AddFunction("showCSharpMessageBox");
    showMessageBoxFunc.Execute += (func, args) =>
    {
        var stringArgument = args.Arguments.FirstOrDefault(p => p.IsString);
        if (stringArgument != null)
            MessageBox.Show(stringArgument.StringValue);
        else
            MessageBox.Show("Js传递的参数为空！");
    };
 
    //添加一个具有返回参数的方法
    var getArrayFromCSFunc = myObject.AddFunction("getArrayFromCSharp");
    getArrayFromCSFunc.Execute += (func, args) =>
    {
        var jsArray = args.Arguments.FirstOrDefault(p => p.IsArray);
        if (jsArray != null)
        {
            //获取数组的长度
            int len = jsArray.ArrayLength;
            //创建一个新的数组
            CfrV8Value arr = CfrV8Value.CreateArray(len);
            for (int i = 0; i < len; i++)
            {
                //获取JS传过来数组的值
                int v = jsArray.GetValue(i).IntValue;
                //+1后，放入新的数组
                arr.SetValue(i, CfrV8Value.CreateInt(v + 1));
            }
            //作为返回参数
            args.SetReturnValue(arr);
        }
    };
 
    //接收JS的回调，并将自己的参数传递过去
    var callbackTestFunc = myObject.AddFunction("callbackTest");
    callbackTestFunc.Execute += (func, args) =>
    {
        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("Message from C#"), CfxV8PropertyAttribute.ReadOnly);
            //用ExecuteFunction执行JS传递过来的回调，并将自己设置的变量callbackArgs传递给JS
            callback.ExecuteFunction(null, new CfrV8Value[] { callbackArgs });
        }
    };
 
    #endregion
}

JS添加一个按钮，用来调用C#注入的方法：

function on_Click() {
    // alert("点击了按钮");
    //调用C#中注入的属性
    alert(my.name);
    //调用C#中注入的方法(无返回值)
    my.showCSharpMessageBox("我是参数！");
    //调用C#中注入的方法(返回一个数组)
    var arr = [1, 2, 3];
 
    var retArr = my.getArrayFromCSharp(arr);
    if (retArr) {
        alert("网页alert：" + retArr);
    }
    
    //调用C#并传入一个JS的回调
    my.callbackTest(sayByeBye);
};
 
function sayByeBye(obj) {
    var str = "参数success:" + obj.success + "   参数text：" + obj.text
    alert("网页alert: " + str);
}

3.完整版C#代码

using Chromium;
using Chromium.Remote;
using NetDimension.NanUI;
using NetDimension.NanUI.Browser;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
 
namespace CSharpCallJS
{
    //参考：https://docs.formium.net/zh-hans/tutorial/js-context.html
    public class myform1 : Formium
    {
        //指定启动时访问的 Url 地址，这里用的是本地地址
        public override string StartUrl => @"E:\CSharp Project\NanUI_Test\CSharpCallJS\Viwe\index.html";
        //指定 WindowType 属性，选择窗体以原生样式显示还是使用无边框样式
        public override HostWindowType WindowType => HostWindowType.Standard;
 
        protected override Control LaunchScreen => null;
 
        public myform1()
        {
            Title = "第一个NanUI应用";
        }
 
        protected override void OnWindowReady(IWebBrowserHandler browserClient)
        {
            browserClient.LoadHandler.OnLoadEnd += LoadHandler_OnLoadEnd;
        }
 
        protected override void OnRegisterGlobalObject(JSObject global)
        {
            var myObject = global.AddObject("my");
 
            #region 添加属性
            //添加一个属性:name
            var nameProp = myObject.AddDynamicProperty("name");
            //Get属性
            nameProp.PropertyGet += (prop, args) =>
            {
                //要返回的字符串
                args.Retval = "这是C#的一个Get属性：name";
                args.SetReturnValue(true);
            };
            //Set属性
            nameProp.PropertySet += (prop, args) =>
            {
                var value = args.Value;
                args.SetReturnValue(true);
            };
            #endregion
 
            #region 添加方法
            //添加一个方法 showCSharpMessageBox
            var showMessageBoxFunc = myObject.AddFunction("showCSharpMessageBox");
            showMessageBoxFunc.Execute += (func, args) =>
            {
                var stringArgument = args.Arguments.FirstOrDefault(p => p.IsString);
                if (stringArgument != null)
                    MessageBox.Show(stringArgument.StringValue);
                else
                    MessageBox.Show("Js传递的参数为空！");
            };
 
            //添加一个具有返回参数的方法
            var getArrayFromCSFunc = myObject.AddFunction("getArrayFromCSharp");
            getArrayFromCSFunc.Execute += (func, args) =>
            {
                var jsArray = args.Arguments.FirstOrDefault(p => p.IsArray);
                if (jsArray != null)
                {
                    //获取数组的长度
                    int len = jsArray.ArrayLength;
                    //创建一个新的数组
                    CfrV8Value arr = CfrV8Value.CreateArray(len);
                    for (int i = 0; i < len; i++)
                    {
                        //获取JS传过来数组的值
                        int v = jsArray.GetValue(i).IntValue;
                        //+1后，放入新的数组
                        arr.SetValue(i, CfrV8Value.CreateInt(v + 1));
                    }
                    //作为返回参数
                    args.SetReturnValue(arr);
                }
            };
 
            //接收JS的回调，并将自己的参数传递过去
            var callbackTestFunc = myObject.AddFunction("callbackTest");
            callbackTestFunc.Execute += (func, args) =>
            {
                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("Message from C#"), CfxV8PropertyAttribute.ReadOnly);
                    //用ExecuteFunction执行JS传递过来的回调，并将自己设置的变量callbackArgs传递给JS
                    callback.ExecuteFunction(null, new CfrV8Value[] { callbackArgs });
                }
            };
 
            #endregion
        }
 
        protected override void OnStandardFormStyle(IStandardHostWindowStyle style)
        {
            base.OnStandardFormStyle(style);
 
            style.Width = 800;
            style.Height = 600;
            style.Icon = System.Drawing.SystemIcons.WinLogo;
            style.StartPosition = FormStartPosition.CenterScreen;
        }
 
        private void LoadHandler_OnLoadEnd(object sender, Chromium.Event.CfxOnLoadEndEventArgs e)
        {
            if (e.Frame.IsMain)
            {
                //C#调用网页中的JS脚本中sayHollo方法，这里，并没有返回参数，仅仅是让浏览器打印一个log而已
                WebBrowser.ExecuteJavascript("sayHollo()");
 
                //C#调用网页中JS脚本 带有返回参数的方法
                WebBrowser.EvaluateJavascript("returnValue('C#')", (value, exception) =>
                {
                    if (value.IsString)
                    {
                        var jsValue = value.StringValue;
                        MessageBox.Show(jsValue);
                    }
                });
            }
        }
    }
}

4.完整版JS代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function on_Click() {
            // alert("点击了按钮");
            //调用C#中注入的属性
            alert(my.name);
            //调用C#中注入的方法(无返回值)
            my.showCSharpMessageBox("我是参数！");
            //调用C#中注入的方法(返回一个数组)
            var arr = [1, 2, 3];
 
            var retArr = my.getArrayFromCSharp(arr);
            if (retArr) {
                alert("网页alert：" + retArr);
            }
            
            //调用C#并传入一个JS的回调
            my.callbackTest(sayByeBye);  
        };
 
        function sayHollo() {
            alert("网页alert: Hollo!");
        }
 
        function sayByeBye(obj) {
            var str = "参数success:" + obj.success + "   参数text：" + obj.text
            alert("网页alert: " + str);
        }
 
        function returnValue() {
            return "JS 返回 嘻嘻嘻！";
        }
    </script>
</head>
 
<body>
    <div>我的网页</div>
    <div>
        <button onclick="on_Click()">按钮</button>
    </div>
</body>
 
</html>