上一篇文章中已经把所有准备工作做完了,包括:
xp系统,安装了.net framework4.0 和VC++2013运行库,用于测试运行效果
VS3013,安装了NuGet ,用于开发程序
万事可以说基本具备,现在上东风
1. 确认CefSharp版本
首先确认CefSharp的版本,在GitHub上有说明,CefSharp的GitHub。
因为XP上安装了. net version为4.0,对应的CefSharp最高版本为49。
所以我们在NuGet查看49对应的内容即可,NuGet上CefSharp地址:CefSharp的NuGet。
点击49版本后,可以看到PM指令为:
Install-Package CefSharp.WinForms -Version 49.0.1
2. 新建winform工程
使用VS2013新建一个winform工程:
然后点击工具-NuGet包管理器-程序包管理控制台,输入指令Install-Package CefSharp.WinForms -Version 49.0.1后回车。
该指令负责将CefSharp49.0.1添加到我们的项目中,待提示已成功添加信息后,可进行下一步操作。
3. 修改生成配置
点击生成-配置管理器,因为咱们的目标XP系统为32位x86平台,所以讲目标平台调整为x86:
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. 启动测试
启动后,外层窗体内部包含网页,没问题:
6. 部署至xp
将项目生成的x86目录下的debug目录拷贝到xp系统运行,依然正常:(看看XP系统那骚气的蓝色任务栏)
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");
1
重新编译后部署至XP系统,效果如下:
不得不说,Chromium内核确实牛X好用先进。
厉害了。