.NET 6上的WebView2體驗

来源:https://www.cnblogs.com/podolski/archive/2022/04/27/16199151.html
-Advertisement-
Play Games

上次說為了不想在web端登錄博客園,我想著還是繼續使用MarkWord編寫博客,不過在使用的過程中,如果markdown文件的目錄中有中文的話,Markdown預覽就不能夠顯示粘貼的圖片了,原因是之前.NET Framework的WeBrowser庫太老了,應該升級一下。 替換WebBrowser的 ...


上次說為了不想在web端登錄博客園,我想著還是繼續使用MarkWord編寫博客,不過在使用的過程中,如果markdown文件的目錄中有中文的話,Markdown預覽就不能夠顯示粘貼的圖片了,原因是之前.NET Framework的WeBrowser庫太老了,應該升級一下。

替換WebBrowser的方案很多,在Stackoverflow上有人推薦使用WebView2,我就直接用了,也沒有多想,實際上使用的問題還是不少的,簡單記錄一下。

WebView2

這個東西是微軟推出基於Edge或者說是基於chromium內核的瀏覽器組件,可以提供現代的瀏覽器體驗,用於集成到.NET程式中,實現.NET對web的訪問與調用,或者反過來也行。這個東西感覺是CefSharp的有利競爭者呀,雖然我也沒咋用過CefSharp

WebBrowser->WebView2

遷移的第一步是引用的替換,WebBrowser在System.Windows.Forms.WebBrowser命名空間,如果使用WPF的話,需要使用WindowsFormsHost,這個就體驗不是那麼好了,WPF下,有Microsoft.Web.WebView2.Wpf,可以提供給WPF原生的訪問,贊一個。

訪問DOM

然後就是出現的錯誤了,最難受的是,WebView2不提供對DOM的訪問許可權!,WebBrowser可以直接通過Document來訪問DOM節點,而WebView2只能設置訪問的Uri信息,然後控制導航與調用js。

為了實現動態的控制預覽框的內容,訪問DOM是必須的,如果我動態的渲染一個文件,然後隨時再構造Uri,再傳遞到WebView2中,那太啰嗦了。由於這個東西可以直接調用JS,那麼我們換一個思路:通過WebView2調用JS,然後使用Js操作DOM,曲線實現控制DOM的目標。廢話不多說,直接上代碼。

if (winWebDoc.CoreWebView2 == null)
    return;
var script = "document.body.innerHTML = '" + Markdown.ToHtml(MarkValue, pipeline).Trim() + "'";
winWebDoc.ExecuteScriptAsync(script);

之前我也嘗試過document.write的方法,發現有點問題,還是不能正常識別。

WebView2除了直接在傳遞js的函數體以外,還可以調用頁面中的頂級JS函數,具體使用方法參見後面的參考文獻或者園子裡面的這篇文章,反正我這麼使用之後中文目錄的問題就解決了,不過右側渲染如果有回車換行的話,就經常會卡死,好像是引擎就崩潰了。

替換預設換行

經過debug,發現WebView2在運行的過程中,需要渲染的html內,標簽之間不能有\r\n之類的東西,如果有就寄了。而使用CommonMark.CommonMarkConverter.Convert方法轉換的markdown文件都會有這個東西...

這個庫時間也比較久遠了,經過簡單研究,我換成了Markdig這個庫,二者相容,而且Markdig還提供了更多定製的地方,我這裡將所有的換行,替換為空字元。

 private MarkdownPipeline pipeline = new MarkdownPipelineBuilder()
                .ConfigureNewLine("")
                .Build();

這樣,換行就沒啥問題了,但是在初次使用時,會出現WebView2無法正常渲染的問題。

WebView2初始化

WebView2的初始化和其他的庫有點不同,它提供了一個EnsureCoreWebView2Async的方法,對它的操作,請一定等這個方法返回。可以使用await,也可以和我一樣,使用TPL。

 winWebDoc.EnsureCoreWebView2Async()
                    .ContinueWith(t =>
                {
                    Dispatcher.Invoke(() =>
                    {
                        winWebDoc.Source = new Uri(System.IO.Path.Combine(Environment.CurrentDirectory, "index.html"));
                    });
                });

註意我這裡使用載入了一個本地的模板HTML文件,訪問本地文件的時候,需要使用Uri的方式訪問。

結語

經過了一番折騰,終於是能夠繼續使用MarkWord寫博客了,雖然我更換了主題之後,滾動不是很利索了,另外渲染代碼換行好像還有點問題,不過好歹能用了,以後再折騰吧。

參考資料

非常詳細:https://weblog.west-wind.com/posts/2021/Jan/26/Chromium-WebView2-Control-and-NET-to-JavaScript-Interop-Part-2

除非特殊說明,本作品由podolski創作,採用知識共用署名 4.0 國際許可協議進行許可。歡迎轉載,轉載請保留原文鏈接~喜歡的觀眾老爺們可以點下關註或者推薦~
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一個工作了7年的Java程式員,私信我關於分散式鎖的問題。 一上來就兩個靈魂拷問: Redis鎖超時怎麼辦? Redis主從切換導致鎖失效怎麼辦? 我說,彆著急,這些都是小問題。 那麼,關於“分散式鎖的理解和實現”這個問題,我們看看普通人高手的回答。 普通人: 嗯,分散式鎖,就是可以用來實現鎖的分佈 ...
  • spring一切都可以基於註解來實例,像緩存,校驗,欄位映射,動態代理等等,今天主要說一下自定義的校驗及校驗的組關聯。 自定義註解,判斷name需要以"管理員"結尾 @Target(ElementType.FIELD) @Retention(RetentionPolicy.RUNTIME) @Con ...
  • 今天給大家分享簡單的圖片人臉識別技術,其實在實際應用中,很多是通過視頻流的方式進行識別,比如人臉識別通道 門禁考勤系統、人臉動態跟蹤識別系統等等。 案例展示 這裡我們還是使用 opencv 中自帶了 haar人臉特征分類器,通過讀取一段視頻來識別其中的人臉。 代碼實現: Python學習交流Q群:9 ...
  • 前幾天分享了Java 18 新特性:簡單Web伺服器的jwebserver命令行功能。 今天換一種方式,使用Java代碼來實現一個靜態資源伺服器。 詳細步驟我錄了個視頻放到B站了,感興趣的小伙伴可以點擊查看Java 18 新特性:Simple Web Server(2) 代碼比較簡單,直接貼出來了: ...
  • 在 K 歌場景中,經常需要拉多路流並顯示其中正在講話的用戶,我們需要甄別用戶是否說話、說話音量大小(音浪),併在 UI 上展示。 ...
  • 為什麼需要參數校驗 在日常的介面開發中,為了防止非法參數對業務造成影響,經常需要對介面的參數進行校驗,例如登錄的時候需要校驗用戶名和密碼是否為空,添加用戶的時候校驗用戶郵箱地址、手機號碼格式是否正確。 靠代碼對介面參數一個個校驗的話就太繁瑣了,代碼可讀性極差。 Validator框架就是為瞭解決開發 ...
  • 提供了在不同區域性下對字元範圍做批量大小寫轉換的方法,避免遍歷字元範圍中的每個字元。 ...
  • 原文鏈接:https://www.cnblogs.com/ysmc/p/16201153.html Bootstrap Blazor 官網地址:https://www.blazor.zone 有瞭解過 Bootstrap Blazor 組件庫的,都應該知道 Table 組件是多麼的強大,我在之前的文 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...