为自己搭建一个鹊桥 -- Native Page与Web View之间的JSBridge实现方式

转自：https://www.cnblogs.com/ms-uap/p/5306309.html

说起JSBridge，大家最熟悉的应该就是微信的WeixinJSBridge，通过它各个公众页面可以调用后台方法和微信进行交互，为用户提供相关功能。我们就来说说UWP下怎么样实现我们自己的JSBridge。

window.external.notify

做过webview的小伙伴肯定都熟悉，html页面可以通过window.external.notify将消息发送出去，然后客户端使用WebView.ScriptNotify事件接收，但是两边都只能用字符串来交流，所以通常我们都会定义好消息格式（比如json）。现在在UWP中使用这种方法有个限制，就是你需要在.appxmanifest里把站点加到Content URIs中，告诉系统那些域名的js脚本是可以调用windows.external.notify方法的，当然如果是本地js就没有这个限制的，添加方法如下图。

假如我们的访问的URL是https://xglz.com/login/test.html

此处可设置为https://xglz.com/login/*

但是我们总会有些特殊需求，比如微信/淘宝应用怎么办？域名随时可能增加，总不能每次都更新manifest，然后更新商店吧！在8.1的时候我们还可以使用WebView.AllowedScriptNotifyUris在应用中动态添加信任站点，但是win10中这个接口已经废弃了，如果你的应用并不需要频繁/动态更改信任站点，这个方法还是可用的。

后台处理完结果之后，可以通过WebView.InvokeScript/InvokeScriptAsync方法调用当前页面中的js方法：

第一个参数是js方法名，第二个参数是调用这个方法需要的参数。

需要注意的是这个方法很容易出错，一定要注意异常捕获:(，而且生成的异常基本都是一些0xXXXXX的code。

public sealed partial class MainPage : Page
{
    BridgeObject.Bridge _bridge = new BridgeObject.Bridge();

    public MainPage()
    {
        this.InitializeComponent();

        this.wv.ScriptNotify += Wv_ScriptNotify;

        this.Loaded += MainPage_Loaded;
    }

    private async void Wv_ScriptNotify(object sender, NotifyEventArgs e)
    {
        await (new MessageDialog(e.Value)).ShowAsync();

        //返回结果给html页面
        await this.wv.InvokeScriptAsync("recieve", new[] { "hehe, 我是个结果"});
    }

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        //我们事先写好了一个本地html页面用来做测试
        this.wv.Navigate(new Uri("ms-appx-web:///assets/html/index.html", UriKind.RelativeOrAbsolute));
    }
}

html代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        //通知后台
        function func1()
        {
             window.external.notify("this is a message");
        }

        //这个方法用来接收后台的结果
        function recieve(value)
        {
            output.textContent = value;
        }
    </script>
</head>
<body>
    <div style="margin-top:100px">
        <button id="fun1Btn" onclick="func1();">Call method 1</button>
        <div id="output"></div>
    </div>
</body>
</html>

为自己搭建一个鹊桥 -- Native Page与Web View之间的JSBridge实现方式

猜你喜欢