Home
%3CLINGO-SUB%20id%3D%22lingo-sub-1106524%22%20slang%3D%22en-US%22%3EHow%20to%20use%20JavaScript%20libraries%20on%20Uno%20Platform(WebAssembly)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1106524%22%20slang%3D%22en-US%22%3E%3CP%3EUno%20Platform%20is%20one%20of%20the%20development%20platform%20tools%20for%20cross-platform%20apps%20such%20as%20UWP%2C%20Android%2C%20iOS%2C%20and%20WebAssembly.%3C%2FP%3E%0A%3CP%3EFor%20WebAssembly%2C%20there%20are%20JavaScript%20interop%20features.%20I'll%20explain%20how%20to%20call%20JS%20functions%20from%20C%23%20on%20this%20article.%3C%2FP%3E%0A%3CP%3EIf%20you%20would%20like%20to%20call%20C%23%20methods%20from%20JavaScript%2C%20then%20please%20check%20the%20following%20document%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fplatform.uno%2Fdocs%2Farticles%2Fwasm-custom-events.html%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fplatform.uno%2Fdocs%2Farticles%2Fwasm-custom-events.html%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--1416282764%22%20id%3D%22toc-hId--1416282764%22%3ELet's%20call%20a%20simple%20JS%20function%3C%2FH2%3E%0A%3CP%3EPreparation%20to%20call%20JavaScript%20functions%20is%20that%20copy%20.js%20file%20as%20Embedded%20resource%20under%20WasmScripts%20folder.%20If%20the%20library%20also%20has%20.css%20files%2C%20then%20copy%20those%20to%20WasmCSS%20folder%20too.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F165219i6083327BFD218D18%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_0.png%22%20title%3D%22clipboard_image_0.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EIn%20the%20case%20of%20the%20library%20provides%20simple%20JavaScript%20functions%20like%20below%2C%20you%20can%20call%20the%20functions%20using%20WebAssemblyRuntime.InvokeJS%20method.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-csharp%22%3E%3CCODE%3Eusing%20Windows.UI.Xaml%3B%0Ausing%20Windows.UI.Xaml.Controls%3B%0A%23if%20__WASM__%0Ausing%20Uno.Foundation%3B%0A%23endif%0A%0Anamespace%20JSInterop%0A%7B%0A%20%20%20%20public%20sealed%20partial%20class%20MainPage%20%3A%20Page%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20public%20MainPage()%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.InitializeComponent()%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20private%20void%20InvokeJSFunctionButton_Click(object%20sender%2C%20RoutedEventArgs%20e)%0A%20%20%20%20%20%20%20%20%7B%0A%23if%20__WASM__%0A%20%20%20%20%20%20%20%20%20%20%20%20WebAssemblyRuntime.InvokeJS(%22sayHello()%3B%22)%3B%0A%23endif%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHowever%2C%20almost%20all%20real%20libraries%20provide%20them%20functions%20as%20a%20module.%20For%20example%2C%20if%20you%20would%20like%20to%20show%20toast%20notifications%20on%20the%20web%20browser%2C%20suppose%20you%20use%20iziToast.%3CBR%20%2F%3EiziToast%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fizitoast.marcelodolza.com%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fizitoast.marcelodolza.com%2F%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou%20will%20download%20it%2C%20and%20copy%20.js%20files%20and%20.css%20files%20as%20Embedded%20resource%20to%20the%20WASM%20project%2C%20like%20below%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F165225iE766F83D2FBDAD0C%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_4.png%22%20title%3D%22clipboard_image_4.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EAnd%20you%20will%20update%20your%20JavaScript%20file%20to%20use%20it%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Efunction%20sayHello()%20%7B%0A%20%20%20%20iziToast.show(%7B%0A%20%20%20%20%20%20%20%20title%3A%20'Info'%2C%0A%20%20%20%20%20%20%20%20message%3A%20'Hello%20from%20the%20awesome%20library.'%0A%20%20%20%20%7D)%3B%0A%7D%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHowever%2C%20it%20doesn't%20work%20with%20the%20following%20error%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F165223iA8CC26128D0A930D%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_3.png%22%20title%3D%22clipboard_image_3.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EBecause%20a%20WASM%20app%20of%20Uno%20Platform%20includes%20require.js%2C%20so%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmarcelodolza%2FiziToast%2Fblob%2Fmaster%2Fsrc%2Fjs%2FiziToast.js%23L7-L13%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EiziToast%20detects%20it%20when%20loading%3C%2FA%3E%2C%20and%20all%20functions%20is%20provided%20as%20a%20module%20that%20name%20is%20'iziToast%2C'%20so%20you%20have%20to%20require%20it%20before%20using%20it.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20correct%20code%20to%20use%20iziToast%20from%20Uno%20Platform%20is%20as%20below%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Efunction%20sayHello()%20%7B%0A%20%20%20%20require(%5B'iziToast'%5D%2C%20(iziToast)%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20iziToast.show(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3A%20'Info'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20'Hello%20from%20the%20awesome%20library.'%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%7D%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIt%20works%20fine.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F165226iAF9E7DF93C625C6E%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_5.png%22%20title%3D%22clipboard_image_5.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-1071230069%22%20id%3D%22toc-hId-1071230069%22%3EConclusion%3C%2FH2%3E%0A%3CP%3EIf%20you%20would%20like%20to%20call%20JavaScript%20functions%20from%20Uno%20Platform%2C%20then%20you%20should%20check%20that%20the%20library%20is%20a%20module%20or%20just%20functions%20or%20others.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAnd%20if%20you%20feel%20Uno%20Platform%20is%20interesting%2C%20then%20please%20check%20the%20official%20site%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fplatform.uno%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fplatform.uno%2F%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Microsoft

Uno Platform is one of the development platform tools for cross-platform apps such as UWP, Android, iOS, and WebAssembly.

For WebAssembly, there are JavaScript interop features. I'll explain how to call JS functions from C# on this article.

If you would like to call C# methods from JavaScript, then please check the following document:

https://platform.uno/docs/articles/wasm-custom-events.html

 

Let's call a simple JS function

Preparation to call JavaScript functions is that copy .js file as Embedded resource under WasmScripts folder. If the library also has .css files, then copy those to WasmCSS folder too.

clipboard_image_0.png

In the case of the library provides simple JavaScript functions like below, you can call the functions using WebAssemblyRuntime.InvokeJS method.

 

 

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
#if __WASM__
using Uno.Foundation;
#endif

namespace JSInterop
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void InvokeJSFunctionButton_Click(object sender, RoutedEventArgs e)
        {
#if __WASM__
            WebAssemblyRuntime.InvokeJS("sayHello();");
#endif
        }
    }
}

 

 

 

However, almost all real libraries provide them functions as a module. For example, if you would like to show toast notifications on the web browser, suppose you use iziToast.
iziToast: https://izitoast.marcelodolza.com/

 

You will download it, and copy .js files and .css files as Embedded resource to the WASM project, like below:

clipboard_image_4.png

And you will update your JavaScript file to use it:

 

 

function sayHello() {
    iziToast.show({
        title: 'Info',
        message: 'Hello from the awesome library.'
    });
}

 

 

However, it doesn't work with the following error:

clipboard_image_3.png

Because a WASM app of Uno Platform includes require.js, so iziToast detects it when loading, and all functions is provided as a module that name is 'iziToast,' so you have to require it before using it.

 

The correct code to use iziToast from Uno Platform is as below:

 

 

function sayHello() {
    require(['iziToast'], (iziToast) => {
        iziToast.show({
            title: 'Info',
            message: 'Hello from the awesome library.'
        });
    });
}

 

 

It works fine.

clipboard_image_5.png

Conclusion

If you would like to call JavaScript functions from Uno Platform, then you should check that the library is a module or just functions or others.

 

And if you feel Uno Platform is interesting, then please check the official site:

https://platform.uno/