UWP C#与JavaScript交互笔记

UWP / 作者：

参考文献

https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.WebView

https://code.msdn.microsoft.com/windowsapps/Universal-Windows-App-bf423aee

https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.webview#Windows_UI_Xaml_Controls_WebView_AddWebAllowedObject_System_String_System_Object_

–

需要些一个小工具，设计到UWP与JavaScript交互问题。经过测试，我选择了UWP的Webview组件。

一、交互方式

1、JS调用UWP C#函数

核心代码：

JavaScript:

                try{
                    $("#text1").text(obj2string(objectTest)); //objectTest是C#类
                    var result = objectTest.getStr("C#"); //objectTest是C#类
                    $("#text2").text(result);
                }catch (err)
                {
                    $("#text2").text(err.message);
                }

C#：

using Windows.Foundation.Metadata;
namespace RuntimeComponent1
{
    //this class must be sealed, and must have attribuite [Windows.Foundation.Metadata.AllowForWeb]
    [AllowForWeb]
    public sealed class AllowFromWebExample
    {
        public string GetStr(string str)
        {
            return "Hello " + str;
        }
    }
}
private void mainWeb_NavigationStarting(WebView sender, WebViewNavigationStartingEventArgs args)
{
      this.mainWeb.AddWebAllowedObject("objectTest", new RuntimeComponent1.AllowFromWebExample());
}

 

注意要点：

  • WebView一定要在NavigationStarting时间，使用AddWebAllowedObject绑定交互对象
  • 被JS调用的类，必须使用[AllowForWeb]装饰，且必须是sealed类型。
  • 被JS调用的类必须是一个运行时组件，不能再主项目内，不然不会有用。

2、JS给UWP C#发送消息

比较简单，看上面微软官网链接。

3、UWP C#调用JavaScript函数

核心代码：

C#：

public async System.Threading.Tasks.Task  call()
{
     List<string> arguments = new List<string> { "C# " };
     String result = await mainWeb.InvokeScriptAsync("getJSDate", arguments);
     // bodyHTML.
     TestTest.Text = result.ToString();
}

 

JavaScript:

function getJSDate(obj)
{
      return obj + Date();
}