WPF如何实现加载h5界面以及数据交互(WebBrowser)

前言

由于h5可维护性高，在完成某些效果会比wpf快,编写时间短，所以在目前项目上使用到了h5,个人感觉在完成一些复杂的界面效果上,h5的优势大于直接在wpf的上写一些样式

---

一：加载h5界面wpf需要使用的控件

使用WebBrowser控件（写h5界面时发现需要适配ie9的浏览器，猜测可能是基于ie9的浏览器内核），还有另一个方法cefsharp是基于谷歌浏览器内核，这个需要下载依赖

<WebBrowser x:Name="wbrExam" Width="Auto" Height="Auto"></WebBrowser>

二：加载h5界面需要写的后台代码

 public Login()
        {
            InitializeComponent();
            wbrExam.Source = new Uri("http://192.168.1.16:8080/#/pages/index/index");
            //用于给h5调用使用的内部类 this：代表当前窗体
            wbrExam.ObjectForScripting = new LoginHtml(this);
        }

可能会涉及到加载js时报错，可使用如下代码：

this.wbrExam.SuppressScriptErrors(true);

三：h5界面如何访问WPF的方法

在加载完成h5界面时可能会涉及到需要在进行界面跳转的数据交互，h5如何去把参数传给wpf呢？
1.在cs里需要编写用于给h5调用的方法

// 1.创建内部类  this:代表当前窗体
wbrExam.ObjectForScripting = new LoginHtml(this);
//2.在内部类里编写用于给h5调用的方法
[ComVisible(true)] // 将该类设置为com可访问
       public class LoginHtml
       {
           public Login login;
           public LoginHtml(Login login)
           {
               this.login = login;
           }
           public void Login(string msg)
           {
               if (!string.IsNullOrWhiteSpace(msg))
               {
                   login.deviceId = msg;
                   login.RealPlay();
                   MainWindow main = new MainWindow(msg);
                   main.Show();   //打开新窗口
                   login.Close();
               }
           }
       }

注释：this：代表当前窗体 当前窗体是Login.cs
LoginHtml是创建给h5调用的内部类,Login(string msg)是用于给h5调用的方法 string msg是h5传入的参数，写构造方法的原因是：LoginHtml是内部类，在内部类里接收的msg在需要给Login窗体的变量赋值时或者调用Login窗体的方法时可以使用在new LoginHtml(this)时传入的this，this代表当前窗体，login.deviceId = msg;给当前窗体的deviceId详细代码如上。

2.h5界面如何调用

window.external.sendDeviceId($("#txtInput").val());

四：WPF如何给h5传参

1.在加载url时加入?userId=12334，需要在h5界面去获取参数

wbrExam.Source = new Uri("http://192.168.1.16:8081/#/pages/index/index?userId=12334", UriKind.RelativeOrAbsolute);

2.在h5里写 wpf需要调用的方法，这个方法是看其他博主看的，当时有报错没有使用成功，就是忘记了记录报的错，还是得及时记录自己遇到得问题，最后使用的是第一种方法传参。

1.cs里需要写的代码，JsObj是H5的方法
this.wbrExam.RegisterJsObject("JsObj", new CallbackObjectForJs());

//h5里写的代码  提供给CS调用
function JsObj(args) {
            alert(args);
}