快速使用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
    {
        /// <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、運行示例

 

 

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