Uno Platform中Wasm环境下WebView2的替代方案咨询

方案1：直接使用 Uno 兼容的 WebView 控件 #

WASM 环境不支持 WebView2，但 Uno 提供了跨平台的 WebView 控件，在 WASM 上它会直接复用浏览器的原生网页渲染能力，完全适配 TradingView 的嵌入需求。

XAML 代码 #

<Page x:Class="UnoApp1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UnoApp1"
      xmlns:utu="using:Uno.Toolkit.UI">
  <WebView x:Name="webView" />
</Page>

C# 后台代码 #

public MainPage()
{
    this.InitializeComponent();
    InitializeTradingViewChart();
}

private void InitializeTradingViewChart()
{
    string htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- TradingView Widget BEGIN -->
    <div class='tradingview-widget-container' style='height:100%;width:100%'>
      <div class='tradingview-widget-container__widget' style='height:calc(100% - 32px);width:100%'></div>
      <div class='tradingview-widget-copyright'><a href='https://www.tradingview.com/' rel='noopener nofollow' target='_blank'><span class='blue-text'>Track all markets on TradingView</span></a></div>
      <script type='text/javascript' src='https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js' async>
      {
      'autosize': true,
      'symbol': 'NASDAQ:AAPL',
      'interval': 'D',
      'timezone': 'Etc/UTC',
      'theme': 'dark',
      'style': '1',
      'locale': 'en',
      'allow_symbol_change': true,
      'calendar': false,
      'support_host': 'https://www.tradingview.com'
      }
      </script>
    </div>
    <!-- TradingView Widget END -->
</body>
</html>";
    webView.NavigateToString(htmlContent);
}

说明：WASM 上的 WebView 无需调用 EnsureCoreWebView2Async，直接通过 NavigateToString 加载内嵌 HTML 即可，TradingView 的脚本会自动在浏览器环境中执行渲染。

方案2：封装可复用的 TradingViewChart 用户控件 #

如果需要在多个页面复用图表，可以封装成自定义 UserControl：

1. 创建 TradingViewChart.xaml #

<UserControl x:Class="UnoApp1.Controls.TradingViewChart"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <WebView x:Name="chartWebView" />
</UserControl>

2. 后台代码 TradingViewChart.xaml.cs #

namespace UnoApp1.Controls
{
    public sealed partial class TradingViewChart : UserControl
    {
        // 可绑定的依赖属性，用于动态修改股票代码
        public static readonly DependencyProperty SymbolProperty =
            DependencyProperty.Register(nameof(Symbol), typeof(string), typeof(TradingViewChart), 
                new PropertyMetadata("NASDAQ:AAPL", OnSymbolChanged));

        public string Symbol
        {
            get => (string)GetValue(SymbolProperty);
            set => SetValue(SymbolProperty, value);
        }

        public TradingViewChart()
        {
            this.InitializeComponent();
            LoadChart();
        }

        private void LoadChart()
        {
            string htmlContent = $@"
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <style>
        body, html {{ margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }}
    </style>
</head>
<body>
    <div class='tradingview-widget-container' style='height:100%;width:100%'>
      <div class='tradingview-widget-container__widget' style='height:calc(100% - 32px);width:100%'></div>
      <div class='tradingview-widget-copyright'><a href='https://www.tradingview.com/' rel='noopener nofollow' target='_blank'><span class='blue-text'>Track all markets on TradingView</span></a></div>
      <script type='text/javascript' src='https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js' async>
      {{
      'autosize': true,
      'symbol': '{Symbol}',
      'interval': 'D',
      'timezone': 'Etc/UTC',
      'theme': 'dark',
      'style': '1',
      'locale': 'en',
      'allow_symbol_change': true,
      'calendar': false,
      'support_host': 'https://www.tradingview.com'
      }}
      </script>
    </div>
</body>
</html>";
            chartWebView.NavigateToString(htmlContent);
        }

        private static void OnSymbolChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d is TradingViewChart chart)
            {
                chart.LoadChart();
            }
        }
    }
}

3. 在页面中使用该控件 #

<Page x:Class="UnoApp1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UnoApp1"
      xmlns:controls="using:UnoApp1.Controls">
  <controls:TradingViewChart Symbol="NYSE:MSFT" />
</Page>

关键注意事项 #

• 确保 WASM 项目的网络权限允许加载 TradingView 的外部脚本（默认 Uno WASM 项目已允许跨域加载这类资源）
• 可以通过修改 HTML 中的 TradingView 配置参数（如 theme、interval）来调整图表样式和显示周期
• 如果需要与图表交互（比如监听事件），可以通过 WebView 的 InvokeScriptAsync 和 ScriptNotify 机制实现 C# 与 JS 的双向通信

内容的提问来源于stack exchange，提问作者Maximus