快速使用NanUI_IT分享知识网

大家好，欢迎来到IT知识分享网。

NanUI：将HTML作为winform窗体呈现的组件，开源，协议为MIT。官网：http://www.formium.net；官方文档：https://docs.formium.net/zh-cn/；作者专栏：https://www.zhihu.com/column/nanui

1、使用vs2019较高版本创建项目，这里是创建一个winform程序。框架为.net framework 4.7.2

快速使用NanUI

2、在引用里点击管理NuGet程序包，搜索NanUI,将下面的都安装了。前两个必须安装，后面的资源使用组件本例只用到了EmbeddedFileResource,可以只安装这个。

快速使用NanUI

3、删除自动创建的窗体文件，新建一个类文件，命名为MainWindow.cs。这个文件就作为启动窗体了。

4、新建文件夹，命名为EmbeddeRes，将你做好的网页文件拷贝到此文件夹下。将里面的每个文件都设置为嵌入的资源。。。

快速使用NanUI

5、修改Program.cs文件,复制粘贴就行了

using System;
using System.Windows.Forms;
using NetDimension.NanUI;
using NetDimension.NanUI.EmbeddedFileResource;
    
static class Program
    {
        /// <summary>
        /// 应用程序的主入口点。
        /// </summary>
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);

            WinFormium.CreateRuntimeBuilder(env => {

                env.CustomCefSettings(settings =>
                {
                    // 在此处设置 CEF 的相关参数
                });

                env.CustomCefCommandLineArguments(commandLine =>
                {
                    // 在此处指定 CEF 命令行参数
                });

            }, app =>
            {
                app.UseEmbeddedFileResource("http", "res.app.local", "EmbeddedRes");
                // 指定启动窗体
                app.UseMainWindow(context => new MainWindow());
            })
            .Build()
            .Run();
        }
    }

6、编辑MainWindow.cs。StartUrl设置与Program.cs文件中的app.UseEmbeddedFileResource设置的一致，默认就是启动EmbeddedRes下的index.html。这个URL可以改成任意网址，启动后打开的就是相应网站。

using NetDimension.NanUI;
using NetDimension.NanUI.HostWindow;
using NetDimension.NanUI.JavaScript;
using System.Drawing;
using System.Windows.Forms;

    class MainWindow : Formium
    {
        public override HostWindowType WindowType => HostWindowType.Kiosk;//选择窗体样式这里Kiosk是无边框

        public override string StartUrl => "http://res.app.local";

        public MainWindow() 
        {
            // 在此处设置窗口样式
            Size = new System.Drawing.Size(1280,800);
        }
    }

7、运行示例

快速使用NanUI

8、将C#对象注册为javascript对象，这样就可以在网页js中直接调用C#对象了。例如，点击上图网页中的退出，实现退出程序。

using NetDimension.NanUI;
using NetDimension.NanUI.HostWindow;
using NetDimension.NanUI.JavaScript;
using System.Drawing;
using System.Windows.Forms;
    class MainWindow : Formium
    {
        public override HostWindowType WindowType => HostWindowType.Kiosk;//选择窗体样式这里Kiosk是无边框

        public override string StartUrl => "http://res.app.local";

        public MainWindow() 
        {
            // 在此处设置窗口样式
            Size = new System.Drawing.Size(1280,800);
        }
        protected override void OnReady()
        {
            // 在此处进行浏览器相关操作
            RegisterWindowObject();//执行注册函数
            BeforeClose += MainForm_BeforeClose;//关闭窗体前提示信息
        }
        private void RegisterWindowObject() 
        {
            var myWindow = JavaScriptValue.CreateObject();
            //注册openDevTools
            myWindow.SetValue("openDevTools", JavaScriptValue.CreateFunction(args =>
            {
                InvokeIfRequired(() =>
                {
                    ShowDevTools();//打开网页调试工具
                });

                return null;
            }));
            //注册closeWindow
            myWindow.SetValue("closeWindow", JavaScriptValue.CreateFunction(args =>
            {
                InvokeIfRequired(() =>
                {
                    Close();//关闭窗体，
                });

                return null;
            }));

            RegisterExternalObjectValue("demo", myWindow);
        }

        private void MainForm_BeforeClose(object sender, NetDimension.NanUI.Browser.FormiumCloseEventArgs e)
        {
            if (MessageBox.Show(this.HostWindow, "Are your sure to quit?", "Quit this App", MessageBoxButtons.YesNo, MessageBoxIcon.Question, MessageBoxDefaultButton.Button2) == DialogResult.No)
            {
                e.Canceled = true;
            }
        }
    }

这个RegisterExternalObjectValue(“demo”, myWindow)就是将对象注册到JS的Formium.external中，即Formium.external.demo

网页里调用示例：

<div class="div_close" onclick="Formium.external.demo.closeWindow()">
退出
</div>

9、其他，Flex快速布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

10、项目如何打包发布，暂不清楚。因为使用资源文件依赖路径，可以将EmbeddedRes等资源文件夹拷贝到debug目录下，然后将debug作为程序包。。。。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/30807.html

快速使用NanUI

相关推荐

发表回复