是否能編譯一個exe , 又能啟動 Asp.Net Core , 又能自帶最新版的Chromium瀏覽器 , 自己瀏覽自己? 這裡給出了一個最簡單的C#/C++整合CEF框架的方式和詳細步驟. ...
前言
大家用過微信PC端吧? 這是用瀏覽器做的.
用過Visual Studio Code吧? 也是用瀏覽器做的.
聽說, 暴雪客戶端也包含瀏覽器核心??
在客戶端啟動一個瀏覽器, 並不是什麼難事了.
現在既然用開了Blazor server side技術 ,
那麼當然是也想用Blazor server side來做客戶端軟體了.
沒錯, 的確是Blazor server side技術. 客戶端也可以使用這技術的.
雖然現在有很多各種各樣用於 DotNet 的 CEF 框架, 但是大部分還沒有一步到位.
這次要做的是, 打算弄一個開源項目, 做成 DotNet 的 dll , 生成項目模板, 讓開發者直接用上.
(本教程包含 C++部分, 但後續的開源項目, 會去掉C++部分, 只剩下一個CppInterop.dll 和項目模板)
開發者難度:
當這個模板做好之後, 對於初步用途來說, 沒有難度. 開發者可以直接複製模板, 然後在模板上加入自己的代碼便可.
和一般的CEF C#框架不一樣, 這邊不是針對瀏覽器技術, 而是針對開發者最常用的幾個功能去考慮, 直接做好簡單易用的API
目標與好處
- 開發者下載到項目模板之後, 用VS2019打開, 直接編譯直接運行. 不要再搞那些複雜的玩意了.
- 在用戶的電腦上運行 Asp.Net Core 網站, 並且自啟瀏覽器去顯示.
- 又或者, 向客戶提供一個特殊的瀏覽器, 滿足網站的擴展許可權功能.
- 開發者可以像做網站一樣做客戶端程式.
- 不限定 Blazor , 可以是 Mvc, 甚至是ReactJS/ArgularJS/VueJS/jQuery等都OK的.
- 能保證瀏覽器的版本, 不用考慮瀏覽器相容性問題
- Asp.Net Core在客戶端運行, 擁有客戶端PC的許可權, 可以隨意操作用戶電腦的文檔,
- 方便地與客戶端的各種程式進行操作, 例如按需啟動客戶端程式編輯內容, 編輯完再繼續處理.
- 鍵盤給大家, 大家自己寫...
概念思考
- 由於是客戶端程式, 所以所有的資源已經打包好了. 除非要訪問伺服器進行交互下載, 否則正常的功能是無延遲無網路中斷問題的.
- 理論上整合了C++的部分, 是可以整合各種C++玩意, 例如把ActiveX整合進程式的.(非整合進瀏覽器)
- .....
以下整合步驟只給有C++經驗的人士觀看. 其他人等這個項目的成品出來便可.
整合步驟
CEF項目地址 : https://github.com/chromiumembedded/cef
CEF下載地址 http://opensource.spotify.com/cefbuilds/index.html , 找到 Windows 32位的版本, 這樣可以相容性更好
下載後, 解壓到更短的路徑, 因為後面要使用 .
進入 https://cmake.org/ , 下載 : CMake , 然後運行, 輸入目錄, 與輸出目錄(生成 VS2019 Solution).
配置:
提示有錯嗎? 不管. 直接點多一次 Generate 便可.
註意, VISUAL STUDIO 2019 必須安裝 C++ 和 C++ CLI
打開工程, 配置編譯. 我們只需編譯這些玩意: (或者把那幾個不用的工程刪掉算了)
先編譯一次, 應該會通過.
在下載的文件裡面, 找到這4個文件 , C++不好寫, 但是我們可以在樣板工程上直接改.
複製到 libcef_dll_wrapper 工程目錄下, 並且添加現有項 :
修改 simple_app.cc , 在16行插入
std::string _surl; std::string GetStartupUrl() { return _surl; } void SetStartupUrl(LPTSTR url) { char chars[2048]; int cch = WideCharToMultiByte(936, 0, url, -1, 0, 0, NULL, NULL); WideCharToMultiByte(936, 0, url, -1, chars, cch, NULL, NULL); _surl = chars; } int RunCefApp(LPTSTR cmdline) { HINSTANCE hinst = (HINSTANCE)GetModuleHandle(NULL); wWinMain(hinst, NULL, cmdline, 0); return 0; }
找到 command_line->GetSwitchValue("url") 這一行, 把啟動Url 換掉 , 這樣後面 SetUrl 就有效果啦.
編譯, 通過.
CppInterop工程
新增一個C++ CLI工程 (註意, CLI沒打錯字, CLI和CLR概念不一樣, 請自行搜索)
項目名稱 CppInterop 好了.
添加引用
添加 libcef.lib , Debug的用 cef32\Debug\libcef.lib , Release的用 cef32\Release\libcef.lib
修改 CppInterop.cpp
#include "pch.h"
#include <Windows.h>
using namespace System;
void SetStartupUrl(LPTSTR url);
int RunCefApp(LPTSTR cmdline);
WCHAR cscmd[4096];
WCHAR csurl[4096];
namespace CppInterop {
public ref class Cpp
{
public:
static void SetUrl(String^ url)
{
for (int i = 0; i < url->Length; i++)
csurl[i] = url[i];
csurl[url->Length] = '\0';
SetStartupUrl(csurl);
}
static int Run(String^ cmdline)
{
for (int i = 0; i < cmdline->Length; i++)
cscmd[i] = cmdline[i];
cscmd[cmdline->Length] = '\0';
return RunCefApp(cscmd);
}
};
}
編譯 CppInterop工程. 通過.
自此, C++部分已經完結.
BlazorApp1
新建dotnetcore Blazor Server 工程 , 添加對 CppInterop 的引用,
無論是 Debug或Release , 都修改為 x86架構
程式入口改為:
[STAThread] public static void Main(string[] args) { string cmdargs = string.Join(" ", args); if (cmdargs.Contains("--type=")) { CppInterop.Cpp.Run(cmdargs); return; } System.Threading.CancellationTokenSource cts = new System.Threading.CancellationTokenSource(); var tsk = CreateHostBuilder(args).Build().RunAsync(cts.Token); CppInterop.Cpp.SetUrl("https://localhost:5001"); CppInterop.Cpp.Run(cmdargs); cts.Cancel(); tsk.Wait(3000); }
不要用IIS啟動了, 必須用exe方式啟動:
把 D:\Temp\cef32\Resources 和 D:\Temp\cef32\Debug 複製到輸出文件夾
啟動項目:
Edge瀏覽器正常, 但是自己啟動的瀏覽器無法啟動子進程渲染器, 原因是 COM thread model 有問題. 估計是Debug模式的問題.
解決方法有兩種, 一種是使用參數 --single-process 啟動 :
這種模式好啊. 只有1個進程.
另外一種模式是 , 編譯為Release 再執行 :
去掉 --single-process的效果:
這個和一般的瀏覽器的行為一致了.
顯示控制台, 有助於查看調試信息.
如果不想控制台彈出來, 可以把工程的屬性改掉. 從 '控制台應用程式' 改成 'Windows應用程式'
結尾
目前先記錄到這裡.
後面還有一大堆要和瀏覽器進行交互的事情.
對於開發者來說, 目前考慮有以下需求需要解決:
1 - C# 代碼能控制視窗的大小 , 最大化, 最小化等等. 例如啟動時固定大小, 登錄後, 自動最大化.
2 - C# 代碼可以自己實現一些下載的功能,
3 - 可以自定義方式彈出DevTools,
4 - 如何另外彈出WinForms, WPF界面.
5 - 如何與真正的伺服器進行通信, 如何下載伺服器的dll執行.
...
