转自: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>