UWP開發之控件：用WebView做聊天框

目錄

說明

WebView存在的價值

使用WebView的幾個重要技巧

使用WebView做的聊天框

 

說明

大家都知道，無論是之前的Winform、WPF還是現在的IOS、Android開發中，都存在一個極其牛茶但是被很多人用錯了的控件：Web瀏覽控件。各個平台中的叫法不同，但是作用類似：能夠加載顯示HTML。UWP開發中同樣存在這樣的一個控件：WebView。往大了說，用它可以做一個簡單瀏覽器，但是這篇博客並不打算教大家怎樣用它開發一款UWP瀏覽器，因為我認為它存在的價值並不在此。當然了，你要是非要這樣去做，也是可以的，看微軟官方的Demo：https://microsoftedge.github.io/JSBrowser/（用WebView，Js語言開發的UWP瀏覽器）。

源碼先上來：https://github.com/sherlockchou86/Blogs/tree/master/ChatBoxbyWebView

需要先看效果圖的猛戳這里。

 

WebView存在的價值

（1）.前面說過，WebView可以加載顯示HTML。這里的HTML包括Internet上的資源（比如直接定位到http://www.cnblogs.com），當然也包括本地資源，比如我在APP中使用代碼現場生成一串HTML，然后讓WebView去渲染呈現。大家知道HTML在界面表現方面非常出眾，並且擴展性強，那么使用WebView+HTML（CSS、JS）做出來的UI肯定非常不錯，我認為這是WebView被忽略的價值之一。

（2）.另外，現在流行的Hybrid APP（Native代碼+Web），其基礎便是WebView這種能夠呈現HTML的控件，不管是IOS還是Android中都有類似功能的控件作為HTML的容器，它們主要的功能就是加載並顯示APP中的Web頁面。與前（1）中講的不同的是，這里的HTML頁面是你自己開發並且部署到服務器上的，有關更多的介紹大家可以網上搜索Hybrid APP。由於這不是本文的重點，所以不多講了。

不管是（1）中加載本地HTML還是（2）中加載自己服務器上的HTML頁面，都會涉及到一個問題，那就是Native代碼（C#）怎樣與WebView中的JS進行通信，很明顯，Native代碼掌握整個APP的控制權，它應該可以控制WebView中HTML的顯示方式，當用戶操作WebView時（比如點擊按鈕），Native代碼也應該知道。所以，在使用WebView時，通信是關鍵。

 

使用WebView的幾個重要技巧

（1）明白WebView的作用，前面已經說過了，不要把它當做是一個普通的瀏覽器；

（2）C#與WebView中的JS通信

其實很簡單，WebView控件有WebView.InvokeScriptAsync(...)方法，使用它可以調用JS中的任何方法，比如我要設置博客園登錄頁面中用戶名、密碼輸入框的的值，我們可以這樣做：

LoginWebView.Navigate(new Uri("http://www.cnblogs.com/"));  //加載博客園登錄頁面

string js="";  //構建腳本

js += "document.getElementById('input1').setAttribute('value','" + UserName.Text + "');"; //設置用戶名
js += "document.getElementById('input2').setAttribute('value','" + PassWord.Password + "');";  //設置密碼
js += "document.getElementById('signin').click();";  //點擊登錄

await LogintWebView.InvokeScriptAsync("eval", new string[] { js });   //eval函數大家都知道，就是執行一段字符串

如上所示，使用InvokeScriptAsync方法調用eval這個JS函數。

（3）WebView中的JS和C#通信

這個有個前提：WebView中HTML（JS）必須是你自己寫的，換句話說，WebView加載的內容必須是你能控制的，否則很難監聽到WebView中的代碼動向，如果你加載博客園的登錄頁面，你想在用戶點擊登錄的時候干點啥，呵呵，很難，因為博客園的登錄頁面不是你寫的。那么如果加載的頁面是你自己寫的，那么怎樣與C#通信呢？其實這個也簡單，在需要通信的地方，我們使用這個JS代碼：window.external.notify("...");然后我們C#中注冊WebView的ScriptNotify事件，那么就可以在C#中收到JS傳過來的字符串了（注意只能是string類型，因為兩者數據類型不一樣）。具體的代碼請看我后面給出的示例。

（4）插入腳本

當你通過WebView訪問一個外部網站，想要在頁面中注入自己寫的腳本，做不到。只能現將頁面HTML下載下來保存成本地資源，然后再插入腳本，然后再使用WebView.NavigateToString("html")方法加載本地資源。做不到的原因很簡單，大家都懂。

 

使用WebView做的聊天框

光說不練假把式，要證明我說的是真的，可以一信，那么接下來我給大家看一個使用WebView做的聊天框。只加載本地HTML（CSS、JS），涉及到了C#與JS之間的相互通信。代碼已上傳到github，有需要的同學可以下下來看一下，下面是界面：

 

細節地方還需要完善，如果有要用的機會，下下來一定要自己完善一下。另外，上個禮拜寫的博客園UWP版 PC版馬上就做完了，等做完源碼馬上傳上來，感興趣的可以關注一下。開源有益。：）