快速使用NanUI


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

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

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

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

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

using System;
using System.Windows.Forms;
using NetDimension.NanUI;
using NetDimension.NanUI.EmbeddedFileResource;
    
static class Program
    {
        /// 
        /// 应用程序的主入口点。
        /// 
        [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、运行示例

 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作为程序包。。。。