好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

为自己搭建一个鹊桥NativePage与WebView之间的JSBridge实现方式_html/cs

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

在win10之前,如果需要实现JSBridge,我们大概有两种方法:

1. window.external.notify

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

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

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

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

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

 1     public sealed partial class MainPage : Page 2     { 3         BridgeObject.Bridge _bridge = new BridgeObject.Bridge(); 4  5         public MainPage() 6         { 7             this.InitializeComponent(); 8  9             this.wv.ScriptNotify += Wv_ScriptNotify;10 11             this.Loaded += MainPage_Loaded;12         }13 14         private async void Wv_ScriptNotify(object sender, NotifyEventArgs e)15         {16             await (new MessageDialog(e.Value)).ShowAsync();17 18             //返回结果给html页面19             await this.wv.InvokeScriptAsync("recieve", new[] { "hehe, 我是个结果"});20         }21 22         private void MainPage_Loaded(object sender, RoutedEventArgs e)23         {24             //我们事先写好了一个本地html页面用来做测试25             this.wv.Navigate(new Uri("ms-appx-web:///assets/html/index.html", UriKind.RelativeOrAbsolute));26         }27     }View Code 

html代码:

 1   2  3   4   5       6        7  8       9 10         //通知后台11         function func1()12         {13     14                 window.external.notify("this is a message");15             16         }17 18         //这个方法用来接收后台的结果19         function recieve(value)20         {21             output.textContent = value;22         }23 24      25  26  27     

28 Call method 1 29

查看更多关于为自己搭建一个鹊桥NativePage与WebView之间的JSBridge实现方式_html/cs的详细内容...

  阅读:37次