NanUI文檔 - 開始使用NanUI

NanUI文檔目錄

• NanUI簡介
• 開始使用NanUI
• 打包並使用內嵌式的HTML/CSS/JS資源
• 使用網頁來設計整個窗口
• 如何實現C#與Javascript的相互通信
• 如何處理NanUI中的下載過程 - DonwloadHandler的使用(待更新。。。)
• 如何處理NanUI中的彈窗過程 - LifeSpanHandler的使用(待更新。。。)
• 如何控制Javascript對話框 - JsDialogHandler的使用(待更新。。。)
• 自定義資源處理程序 (待更新。。。)

開始使用NanUI

第一步 創建項目

本文將介紹如何使用NanUI來創建一個簡單的網頁應用程序。首先，在Visual Studio中新建一個Window 窗體應用項目。.NET Framework版本可以選擇從4.0或者更高的版本。

第二步 添加引用

從Nuget包管理器添加NetDimension.NanUI.dll的引用和CEF依賴項，或者您也可以在程序包管理器控制台中輸入指令Install-Package NetDimension.NanUI來安裝引用和依賴項。
在此步驟中Nuget將自動在項目中添加對NanUI的引用以及對應版本的CEF包。當前默認的CEF支持包的版本為CEF 3.2987.1601.gf035232 / Chromium 57.0.2987.133。您無需手動適配CEF版本（手動適配其他版本CEF可能將導致程序運行不正常）。

第三步 初始化環境

使用NanUI之前，需要初始化CEF運行環境，在此步驟中，可以針對CEF進行一些設置，例如關閉CEF跨域檢測（這樣就可以直接通過JS請求非域名中的數據）、設置CEF語言等。
NanUI使用靜態類Bootstrap的Load方法來進行CEF的初始化和加載操作。如果需要修改CEF的相關啟動參數，需要在Load方法之前使用BeforeCefCommandLineProcessing或者BeforeCefInitialize代理屬性來完成相應的操作。
需要注意的是，Load方法中需要手動指定CEF依賴項的架構和目錄結構，如果使用默認的CEF目錄結構，需要顯式的指定CEF根目錄，Resources文件夾目錄和locales目錄。使用Load方法的第一個參數來指定當前應用程序是運行在32位環境還是64位環境中，默認情況下，使用Auto方式來讓NanUI自動檢測應用程序運行的環境。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace FirstNanUIApplication
{
	using NetDimension.NanUI;

	static class Program
	{
		/// <summary>
		/// 應用程序的主入口點。
		/// </summary>
		[STAThread]
		static void Main()
		{
			Application.EnableVisualStyles();
			Application.SetCompatibleTextRenderingDefault(false);

			//指定CEF架構和文件目錄結構，並初始化CEF
			if(Bootstrap.Load(settings=> {
				//禁用日志
				settings.LogSeverity = Chromium.CfxLogSeverity.Disable;

				//指定中文為當前CEF環境的默認語言
				settings.AcceptLanguageList = "zh-CN";
				settings.Locale = "zh-CN";
			}, commandLine=> {
				//在啟動參數中添加disable-web-security開關，禁用跨域安全檢測
				commandLine.AppendSwitch("disable-web-security");

			}))
			{
				Application.Run(new Form1());
			}

			
		}
	}
}

按照上面代碼修改Program.cs文件后編譯並運行項目，Visual Studio將自動將CEF包拷貝到應用程序所在目錄，目錄結構如圖所示。

如果需要指定NanUI在特定的系統架構中運行，那么在指定Load的第一項參數時，可以按照需要來指定x64（64位環境）或者x86（32位環境），同樣的，如果使用上圖中的目錄結構，您任然需要手動指定CEF各個文件夾的路徑。

NanUI提供了省略指定CEF目錄結構參數快捷方法，但是您需要手動調整CEF的目錄結構。例如，您的應用只需運行於32位架構的系統，那么修改Load的參數為：

//指定對應系統架構，如果省略指定CEF目錄結構的參數，那么需要手動調整CEF目錄結構。
if(Bootstrap.Load(PlatformArch.x86))
{
	Application.Run(new Form1());
}

這時，需要將生成目錄中的文件結構調整為：

上圖調整CEF文件的操作可以簡單的總結為：

• 拷貝fx\Resources文件夾中的所有文件到應用程序同級目錄
• 拷貝fx文件夾中對應架構文件夾（此處為x86文件夾）中的所有文件到應用程序同級目錄
• 刪除fx文件夾和其中剩余的項目

同時，在VS的配置管理器中添加平台設置，將項目的目標平台指定為所需要的平台。

指定平台架構的好處是您可以極大的縮減您軟件包的大小，如上述例子中所示的，將項目指定為x86架構后，發布軟件時只需要包括32位的CEF運行文件，這將減少近40M的體積。

至此，您已經完成了全部初始化CEF運行環境的操作。

第三步 使用NanUI來加載網頁

完成了上述各項初始化的操作后，您就可以來驗證一下NanUI是否能正常運行了。修改Form1.cs文件中的基類Form為Formium，並且繼承Formium的構造函數來指定初始化當前窗體的網址和如何呈現當前窗體的樣式。

Formium的構造方法需要兩個參數，初始的網頁地址以及是否使用NanUI的無邊框窗體引擎來呈現窗體（使用無邊框引擎，您可以完全按照您的意願來設計窗體樣式，這是一件非常酷的事情，后面的教程中將詳細介紹如何使用這項功能）。

在下面的例子中，我們使用微軟必應作為初始的網址，因此構造方法的第一個參數使用微軟必應的網址。因為例子中我們暫時不需要使用NanUI的無邊框窗體引擎，所以第二個參數傳入false來強制NanUI使用原生的窗體樣式。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace FirstNanUIApplication
{
	using NetDimension.NanUI;

	public partial class Form1 : Formium
	{
		public Form1()
			: base("http://cn.bing.com")
			// 第一個參數使用Bing來作為初始的網址，
			// 第二個參數強制NanUI使用原生的窗體樣式來呈現界面
		{
			InitializeComponent();
		}
	}
}

至此，一個最簡單的NanUI應用程序就完成了，運行項目將得到如下結果：

可能會遇到的問題

運行項目后窗體中沒有內容（白屏）

出現這種情況極有可能是因為您使用了VS2015或者更低版本的Visual Studio，如果是，那么您需要在項目屬性中的調試選項卡里禁用啟用 Visual Studio 承載進程選項。

網頁中所有帶title屬性的html標記都不現實工具提示

如果出現這個問題，那么您需要在您的項目中添加一個應用程序清單文件:app.manifest：

並且取消**啟用 Windows 公共控件和對話框的主題(Windows XP 和更高版本) **段中的注釋：

 <!-- 啟用 Windows 公共控件和對話框的主題(Windows XP 和更高版本) -->
 <dependency>
   <dependentAssembly>
     <assemblyIdentity
         type="win32"
         name="Microsoft.Windows.Common-Controls"
         version="6.0.0.0"
         processorArchitecture="*"
         publicKeyToken="6595b64144ccf1df"
         language="*"
       />
   </dependentAssembly>
 </dependency>

然后在項目屬性的應用程序選項卡中找到清單項目，並指定其中內容為剛才的app.manifest，重新運行項目，這時網頁中的所有帶title屬性的標簽就能正常顯示工具提示了。

示例源碼

git clone https://github.com/NetDimension/NanUI-Examples-01-Start-Using-NanUI.git

社群和幫助

GitHub
https://github.com/NetDimension/NanUI/

交流群QQ群
521854872

贊助作者

如果你喜歡我的工作，並且希望NanUI持續的發展，請對NanUI項目進行捐助以此來鼓勵和支持我繼續NanUI的開發工作。你可以使用微信或者支付寶來掃描下面的二維碼進行捐助。