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 的方法

WebViewInvokeScriptAsync 方法(注意,同步版本已经是 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);

来向客户端传递字符串,注意必须是字符串。

然后注册对 WebViewScriptNotify 事件:

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 了。

  1. 首先,在 Package.appxmanifest 的 Declarations 里添加 Protocol,并且填写 Name 属性;

  2. 重载 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 并进一步处理了。