Vaatimukset: Miten WebView2 voi renderöidä ja näyttää verkkoresursseja käyttäjän toimia varten, miten verkkokäyttöliittymä voi kommunikoida WinForm-sovelluksen kanssa? Esimerkiksi verkko lukee laitteistotietoja sovelluksen kautta, ja sovellus päivittää aktiivisesti verkkosivun sisältöä.
Arvostelu:
Ensiksi tarkastele verkon ja WinForm-sovelluksen välisen viestinnän renderöintiä, verkko lähettää viestin sovellukselle,Käynnistä laskurin, joka avaa Windows-järjestelmänSamaan aikaan sovellus voi myös vastaanottaa onnistuneesti viestejä verkkopuolelle, kuten alla olevassa kuvassa näkyy:
Viestintä isännän ja verkkosisällön välillä
Isännät ja verkkosisältö voivat kommunikoida keskenään postMessages-muodossa seuraavasti:
- WebView2-ohjaimen verkkosisältöä voidaan käyttää viestin julkaisemiseen isännälle osoitteessa window.chrome.webview.postMessage. Isäntä käsittelee viestin minkä tahansa viestin kanssa, joka rekisteröi WebMessageReceiveedin isännässä.
- Isäntä julkaisee viestejä verkkosisältöön WebView2-ohjauksella CoreWebView2.PostWebMessageAsString käyttäen tai CoreWebView2.PostWebMessageAsJSON. Nämä viestit tallennetaan windows.chrome.webview.addEventListener -sivustolle lisätty käsittelijä.
Luo uusi Angular SPA -projekti
Tässä artikkelissa käytetään Angular 8.2.14:ää luodakseen uuden verkkoprojektin, joka havainnollistaa viestintää verkon ja WinForm-sovelluksen välillä.
Koodi on seuraava:
Samaan aikaan muokkaa app.component.html- ja app.component.ts-tiedostoja niin, että viestien lähettämisen ja vastaanottamisen toiminnot toteutuvat.
app.component.html koodi on seuraava:
app.component.ts koodi on seuraava:
Johda projekti alla esitetyllä tavalla:
WinForm-sovellus
Isäntäsovelluksen tulee muokata koodia seuraavasti:
Muokkaa WebView2-ohjaustaLähdeattribuutti on: http://localhost:4200/Sovelluksen käynnistämiseksi, kuten alla on esitetty:
Lopuksi kokeile lähettää viestejä toisilleen Web- ja WinForm-sovelluksilla, ja näet, että molemmat osapuolet voivat vastaanottaa viestit onnistuneesti, kuten seuraavassa kuvassa näkyy:
(Loppu)
|