UWP 开发:Hybird 式开发的一些要点
禁用滚动、隐藏滚动条等
为原 HTML 加入如下 CSS
即可实现:
html{
-ms-overflow-style:none;
overflow:hidden;
-ms-content-zooming:none;
}
其中:
-
-ms-overflow-style 表示滚动条的行为,取值可以参考这里
-
overflow:表示超出区域是否显示,可以参考这里
-
-ms-content-zooming:表示是否启用 pinch and zoom
注意的是,对于其他 Webkit 内核(比如 Chrome)的浏览器,可以这样直接禁止缩放:
<meta name="viewport" content="width=device-width,initial- scale=1,user-scalable=0,maximum-scale=1,minimum-scale=1.0">
c# 跟 JS 的交互
可以通过几种方式实现。
调用 eval 函数
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码(来自这里的解释)
也就是说,你可以这样做:
var title = await webView.InvokeScriptAsync("eval",new []{"document.title;"});
来得到 Title
。
调用 JS 的方法
WebView
的 InvokeScriptAsync
方法(注意,同步版本已经是 Deprecated
了,应该使用异步版本)的第一个参数就是函数名,第二个则是参数列表,因此可以这样用:
假如你知道 JS 里有这样的一个方法(或者你是自己写方法注入到 JS 里)
getDocumentBodyHeight()
那么你可以通过这样直接得到返回值:
var title = await webView.InvokeScriptAsync("eval",new []{"getDocumentBodyHeight();"});
或者这样:
var title = await webView.InvokeScriptAsync("getDocumentBodyHeight",null);
使用 window.external.notify
以上说的都是客户端主动调用 JS 的方法来获得一些值,而如果 JS 是主动方,在客户端这边也是可以接收到来自 JS 的消息的。
JS 里面可以调用这个方法:
window.external.notify(str);
来向客户端传递字符串,注意必须是字符串。
然后注册对 WebView
的 ScriptNotify
事件:
webView.ScriptNotify += WebView_ScriptNotify;
接着就可以在 WebView_ScriptNotify 得到来自 JS 的消息并处理了:
private void WebView_ScriptNotify(object sender, NotifyEventArgs e)
{
//Do something.
}
但是此方法有缺点:只有本地的 Web 页面(ms-appdata、ms-local-stream或ms-appx-web),或者受信任的 HTTPS 才能触发事件;普通 HTTP 无法触发(参考 这里)。
使用 Uri scheme
你可以为你的 App 注册一些你特有的 Uri scheme,这样导航到这些以这个 Scheme 开头的 Uri 的时候,就能调起你的 App 了。
-
首先,在 Package.appxmanifest 的 Declarations 里添加 Protocol,并且填写 Name 属性;
-
重载 App.xaml.cs 里的
void OnActivated(IActivatedEventArgs args)
方法:
protected async override void OnActivated(IActivatedEventArgs args)
{
base.OnActivated(args);
if (args.Kind == ActivationKind.Protocol)
{
var protocalArgs = (ProtocolActivatedEventArgs)args;
}
}
protocalArgs
里就包含了 Uri ,可以进一步解析处理。
现在,如果你的浏览器打开了一个网页,并点击了其中一个导航到你定义的 Scheme 开头的 Uri,就会弹出一个 Dialog 来告知是否使用这个应用打开(注意,多个应用可以注册同一个 Scheme,因此如果不幸多个应用都用了同一个 Scheme,那么将会弹出一个询问对话框让你选择使用哪个应用打开);
如果你是在 WebView 里加载网页,然后点击一个使用你应用注册的 Scheme 链接,同样会触发上述的对话框,为了避免这情况,需要手动处理:注册 WebView 的 UnsupportedUriSchemeIdentified 事件,并设置 e.Handled = true,接着你就可以拿到 Uri 并进一步处理了。
Subscribe to JuniperPhoton's Blog
Get the latest posts delivered right to your inbox