天天看點

C#窗體内嵌Chromium核心浏覽器實戰 (2)2. 建立winform工程4. 編寫窗體代碼5. 啟動測試6. 部署至xp7. 測試Vue是否可用

上一篇文章中已經把所有準備工作做完了,包括:

xp系統,安裝了.net framework4.0 和VC++2013運作庫,用于測試運作效果

VS3013,安裝了NuGet ,用于開發程式

萬事可以說基本具備,現在上東風

1. 确認CefSharp版本

首先确認CefSharp的版本,在GitHub上有說明,CefSharp的GitHub。

C#窗體内嵌Chromium核心浏覽器實戰 (2)2. 建立winform工程4. 編寫窗體代碼5. 啟動測試6. 部署至xp7. 測試Vue是否可用

因為XP上安裝了. net version為4.0,對應的CefSharp最高版本為49。

是以我們在NuGet檢視49對應的内容即可,NuGet上CefSharp位址:CefSharp的NuGet。

點選49版本後,可以看到PM指令為:

Install-Package CefSharp.WinForms -Version 49.0.1

C#窗體内嵌Chromium核心浏覽器實戰 (2)2. 建立winform工程4. 編寫窗體代碼5. 啟動測試6. 部署至xp7. 測試Vue是否可用

2. 建立winform工程

使用VS2013建立一個winform工程:

C#窗體内嵌Chromium核心浏覽器實戰 (2)2. 建立winform工程4. 編寫窗體代碼5. 啟動測試6. 部署至xp7. 測試Vue是否可用

然後點選工具-NuGet包管理器-程式包管理控制台,輸入指令Install-Package CefSharp.WinForms -Version 49.0.1後回車。

該指令負責将CefSharp49.0.1添加到我們的項目中,待提示已成功添加資訊後,可進行下一步操作。

3. 修改生成配置

點選生成-配置管理器,因為咱們的目标XP系統為32位x86平台,是以講目标平台調整為x86:

C#窗體内嵌Chromium核心浏覽器實戰 (2)2. 建立winform工程4. 編寫窗體代碼5. 啟動測試6. 部署至xp7. 測試Vue是否可用

4. 編寫窗體代碼

将自動生成的Form1類代碼修改如下,實際上就是建立一個chrome浏覽器控件後添加到目前窗體。

using CefSharp.WinForms;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace CefSharpDemo
{
    public partial class Form1 : Form
    {
        public ChromiumWebBrowser browser;
        public Form1()
        {
            InitializeComponent();
            InitBrowser();
        }
        public void InitBrowser()
        {
            browser = new ChromiumWebBrowser("http://www.baidu.com");
            this.Controls.Add(browser);
            browser.Dock = DockStyle.Fill;
        }
        private void Form1_Load(object sender, EventArgs e)
        {
            WindowState = FormWindowState.Maximized;
        }
    }
}
      

5. 啟動測試

啟動後,外層窗體内部包含網頁,沒問題:

C#窗體内嵌Chromium核心浏覽器實戰 (2)2. 建立winform工程4. 編寫窗體代碼5. 啟動測試6. 部署至xp7. 測試Vue是否可用

6. 部署至xp

将項目生成的x86目錄下的debug目錄拷貝到xp系統運作,依然正常:(看看XP系統那騷氣的藍色工作列)

C#窗體内嵌Chromium核心浏覽器實戰 (2)2. 建立winform工程4. 編寫窗體代碼5. 啟動測試6. 部署至xp7. 測試Vue是否可用

7. 測試 Vue 是否可用

既然CefSharp是Chromium核心,那支援Vue自然不在話下。

簡單的寫一個Vue頁面:

<html>
<head>
<title>hello vue</title>
</head>
<body>
<div id="app">
    {{str}}
</div>
<script src="vue.min.js"></script>
<script>
var app=new Vue({
    el:'#app',
    data:{
        str:'hello my vue for win form'
    }
});
</script>
</body>
</html>
      

将頁面部署至tomcat伺服器,位址如下,其中192.168.0.14是伺服器區域網路IP位址。

http://192.168.0.14:8080/EasyDemo/index.html

1

将.net程式指定位址代碼修改為:

browser = new ChromiumWebBrowser("http://192.168.0.14:8080/EasyDemo/index.html");

重新編譯後部署至XP系統,效果如下:

C#窗體内嵌Chromium核心浏覽器實戰 (2)2. 建立winform工程4. 編寫窗體代碼5. 啟動測試6. 部署至xp7. 測試Vue是否可用

不得不說,Chromium核心确實牛X好用先進。

厲害了。

繼續閱讀