如何使用 Xamarin.Forms 创建纯代码 web 视图答案

【问题标题】：How to create a code-only webview with Xamarin.Forms如何使用 Xamarin.Forms 创建纯代码 web 视图
【发布时间】：2017-08-05 12:00:42
【问题描述】：

我正在尝试使用一个没有 .Net SDK 的库，但由于我只想使用它来返回一个字符串，我想我可以通过创建一个返回字符串的自定义 WebView 来使用它的 JS SDK (https://xamarinhelp.com/xamarin-forms-webview-executing-javascript/)。

我遇到的第一个问题是，在将视图添加到页面之前，Xamarin.Forms 中不会调用 CustomRenderer（或者至少我无法调用它）。为了解决这个问题，我在每个平台中添加了对 Platform.CreateRenderer 的调用。

它成功了，CustomRenderer 被执行了。但是当我尝试调用一个 JS 函数来检索一个字符串时，应用程序只是挂起并保持这种状态。

我没有尝试在页面中插入 WebView，因为我希望它独立于应用当前所在的页面，并且因为我想要一个“纯代码”html，所以我看不到点在某处添加它。

我的课：

JSE评估器

namespace MyNamespace.Views
{
    public class JSEvaluator : WebView
    {
        public static BindableProperty EvaluateJavascriptProperty = BindableProperty.Create(nameof(EvaluateJavascript), typeof(Func<string, Task<string>>), typeof(JSEvaluator), null, BindingMode.OneWayToSource);

        public Func<string, Task<string>> EvaluateJavascript
        {
            get { return (Func<string, Task<string>>)GetValue(EvaluateJavascriptProperty); }
            set { SetValue(EvaluateJavascriptProperty, value); }
        }

        public JSEvaluator()
        {

        }
    }
}

UWP 渲染器

[assembly: ExportRenderer(typeof(JSEvaluator), typeof(JSEvaluatorRenderer))]
namespace MyNamespace.UWP.Renderers
{
    public class JSEvaluatorRenderer : WebViewRenderer
    {
        public JSEvaluatorRenderer() { }

        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            var webView = e.NewElement as JSEvaluator;
            if (webView != null)
                webView.EvaluateJavascript = async (js) =>
                {
                    return await Control.InvokeScriptAsync("eval", new[] { js });
                };
        }
    }
}

创造和使用

if (jsEvaluator == null)
{
    jsEvaluator = new JSEvaluator { Source = new HtmlWebViewSource { Html = HTML.html } };

#if __ANDROID__
    Xamarin.Forms.Platform.Android.Platform.CreateRenderer(jsEvaluator);
#elif __IOS__
    Xamarin.Forms.Platform.iOS.Platform.CreateRenderer(jsEvaluator);
#elif WINDOWS_UWP
    Xamarin.Forms.Platform.UWP.Platform.CreateRenderer(jsEvaluator);
#endif
}

感谢您的帮助:)

【问题讨论】：

在iOS 上，您可以使用JavaScriptCore 在没有可视控件的情况下执行JavaScript。在 Android 上，您将不得不显示 WebView，因为它的内部结构在分配到表面之前不会创建（即它必须是可见的）。
感谢您提供的信息！我试图搜索 UWP 是否有这个功能，但我找不到。但由于我必须在所有平台上执行相同的实现，Android 已经受到限制。再次感谢！

标签： xamarin xamarin.forms

【解决方案1】：

正如@SushiHangover 在评论中所说，我必须将 WebView 添加到页面中。完成后，它按预期工作。

【讨论】：