本系列文章詳細介紹使用 .net core 和 WPF 開發 升訊威在線客服與營銷系統 的過程。本產品已經成熟穩定并投入商用。

免費使用 & 私有化部署免費下載：https://docs.shengxunwei.com/Post/f7bc8496-14ee-4a53-07b4-08d8e3da6269

視頻實拍：演示升訊威在線客服系統在網絡中斷，直接禁用網卡，拔掉網線的情況下，也不丟消息，不出異常。
https://blog.shengxunwei.com/Home/Post/fe432a51-337c-4558-b9e8-347b58cbcd53

---

對于在線客服與營銷系統，客服端指的是后臺提供服務的客服或營銷人員，他們使用客服程序在后臺觀察網站的被訪情況，開展營銷活動或提供客戶服務。在本篇文章中，我將詳細介紹如何通過 WPF + Chrome 內核的方式實現復合客服端應用程序。

在 1.3 版本之前，客服端程序使用的是 WebBrowser 組件，也就是 IE 內核，隨時系統用戶的持續增加，我偶爾會收到一些細節問題的反饋，比如在部分版本（蘿卜版番茄版毛桃版之類）的 Windows 7 上，客服必須先點擊輸入框上面的加粗或斜體等按鈕，才能激活輸入框。經過調查發現是這部分 Windows 7 上 WebBrowser 組件所加載的 IE 內核存在問題，表現出了一些行為的不一致。

為了解決這個問題，從 1.5 版本開始客服程序中的 Web 容器我升級到了最新的 Chrome 內核，除了獲得了更好的性能之外，得以使程序在不同版本的 Windows 系統上的表現一致。

1.5 版本之前的用戶可以考慮盡快升級。

先看下效果，客服程序界面中的 聊天記錄部分、文字輸入框部分 使用的是基于 Chrome 內核的 WebView2 進行呈現的。

而訪客端，則反之向下兼容，在 PC 端兼容到 IE8 ：

---

要實現這樣的效果只需三個步驟

• 嵌入組件

• 響應事件

• 調用 JavaScript 函數

1. 嵌入組件

首先使用 NuGet 將 WebView2 SDK 添加到項目中，然后將 WebView 添加窗口界面。

<Window x:Class="WPF_Getting_Started.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:{YOUR PROJECT NAME}"xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"mc:Ignorable="d"Title="MainWindow"Height="450"Width="800" ><Grid><DockPanel><wv2:WebView2 Name="webView"Source="https://www.microsoft.com"/></DockPanel></Grid> </Window>

2. 響應事件

在網頁導航期間，WebView2 控件將引發事件。 承載 WebView2 控件的應用偵聽以下事件。

• NavigationStarting

• SourceChanged

• ContentLoading

• HistoryChanged

• NavigationCompleted

例：修改構造函數以匹配以下代碼段并添加 EnsureHttps 函數。

public MainWindow() {InitializeComponent();webView.NavigationStarting += EnsureHttps; }void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args) {String uri = args.Uri;if (!uri.StartsWith("https://")){args.Cancel = true;} }

3. 調用 JavaScript 函數

可以在運行時使用主機應用將 JavaScript 代碼注入控件。 可以運行任意 JavaScript 或添加初始化腳本。 在刪除 JavaScript 之前，注入的 JavaScript 適用于所有新的頂級文檔和任何子框架。

例如，添加在用戶導航到非 HTTPS 網站時發送警報的腳本。 修改 EnsureHttps 函數以將腳本注入到使用 ExecuteScriptAsync 方法的 Web 內容中。

void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args) {String uri = args.Uri;if (!uri.StartsWith("https://")){webView.CoreWebView2.ExecuteScriptAsync($"alert('{uri} is not safe, try an https link')");args.Cancel = true;} }

完成

只需要以上簡單三個步驟，嵌入組件、響應事件、調用 JavaScript 函數。就可以完成 WPF + Chrome 內核 的復合式應用程序！

總結

以上是生活随笔為你收集整理的使用 WPF + Chrome 内核实现 在线客服系统 的复合客服端程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。