使用 WPF + Chrome 内核实现 在线客服系统 的复合客服端程序
本系列文章詳細(xì)介紹使用 .net core 和 WPF 開發(fā) 升訊威在線客服與營銷系統(tǒng) 的過程。本產(chǎn)品已經(jīng)成熟穩(wěn)定并投入商用。
免費(fèi)使用 & 私有化部署免費(fèi)下載:https://docs.shengxunwei.com/Post/f7bc8496-14ee-4a53-07b4-08d8e3da6269
視頻實拍:演示升訊威在線客服系統(tǒng)在網(wǎng)絡(luò)中斷,直接禁用網(wǎng)卡,拔掉網(wǎng)線的情況下,也不丟消息,不出異常。
https://blog.shengxunwei.com/Home/Post/fe432a51-337c-4558-b9e8-347b58cbcd53
對于在線客服與營銷系統(tǒng),客服端指的是后臺提供服務(wù)的客服或營銷人員,他們使用客服程序在后臺觀察網(wǎng)站的被訪情況,開展?fàn)I銷活動或提供客戶服務(wù)。在本篇文章中,我將詳細(xì)介紹如何通過 WPF + Chrome 內(nèi)核的方式實現(xiàn)復(fù)合客服端應(yīng)用程序。
在 1.3 版本之前,客服端程序使用的是 WebBrowser 組件,也就是 IE 內(nèi)核,隨時系統(tǒng)用戶的持續(xù)增加,我偶爾會收到一些細(xì)節(jié)問題的反饋,比如在部分版本(蘿卜版番茄版毛桃版之類)的 Windows 7 上,客服必須先點(diǎn)擊輸入框上面的加粗或斜體等按鈕,才能激活輸入框。經(jīng)過調(diào)查發(fā)現(xiàn)是這部分 Windows 7 上 WebBrowser 組件所加載的 IE 內(nèi)核存在問題,表現(xiàn)出了一些行為的不一致。
為了解決這個問題,從 1.5 版本開始客服程序中的 Web 容器我升級到了最新的 Chrome 內(nèi)核,除了獲得了更好的性能之外,得以使程序在不同版本的 Windows 系統(tǒng)上的表現(xiàn)一致。
1.5 版本之前的用戶可以考慮盡快升級。
先看下效果,客服程序界面中的 聊天記錄部分、文字輸入框部分 使用的是基于 Chrome 內(nèi)核的 WebView2 進(jìn)行呈現(xiàn)的。
而訪客端,則反之向下兼容,在 PC 端兼容到 IE8 :
要實現(xiàn)這樣的效果只需三個步驟
嵌入組件
響應(yīng)事件
調(diào)用 JavaScript 函數(shù)
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. 響應(yīng)事件
在網(wǎng)頁導(dǎo)航期間,WebView2 控件將引發(fā)事件。 承載 WebView2 控件的應(yīng)用偵聽以下事件。
NavigationStarting
SourceChanged
ContentLoading
HistoryChanged
NavigationCompleted
例:修改構(gòu)造函數(shù)以匹配以下代碼段并添加 EnsureHttps 函數(shù)。
public MainWindow() {InitializeComponent();webView.NavigationStarting += EnsureHttps; }void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args) {String uri = args.Uri;if (!uri.StartsWith("https://")){args.Cancel = true;} }3. 調(diào)用 JavaScript 函數(shù)
可以在運(yùn)行時使用主機(jī)應(yīng)用將 JavaScript 代碼注入控件。 可以運(yùn)行任意 JavaScript 或添加初始化腳本。 在刪除 JavaScript 之前,注入的 JavaScript 適用于所有新的頂級文檔和任何子框架。
例如,添加在用戶導(dǎo)航到非 HTTPS 網(wǎng)站時發(fā)送警報的腳本。 修改 EnsureHttps 函數(shù)以將腳本注入到使用 ExecuteScriptAsync 方法的 Web 內(nèi)容中。
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;} }完成
只需要以上簡單三個步驟,嵌入組件、響應(yīng)事件、調(diào)用 JavaScript 函數(shù)。就可以完成 WPF + Chrome 內(nèi)核 的復(fù)合式應(yīng)用程序!
總結(jié)
以上是生活随笔為你收集整理的使用 WPF + Chrome 内核实现 在线客服系统 的复合客服端程序的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 使用C#快速生成顺序GUID
- 下一篇: 前端开发的盛宴