在Unity(WebGL)中从C#函数调用浏览器端JavaScript函数

如何在浏览器端与JavaScript链接

如果你了解过WebGL:Communicating with a browser script，好像主要有两种方法。

1. Application.External Call()/Send Message()---------不过第一个在unity2018某个版本后就被弃用了,
2. 使用插件(.jslib)编写要在浏览器端执行的代码。

在此文章中，我们使用第二个插件格式描述有关互相调用的方法。

插件(.jslib)不能使用ES2015(或更高的版本)编写

这个就有点蛋疼,如果你使用ES2015(或更高的版本)编写,会出现语法错误,你将无法构建.

它是Emscipten规范嘛?

创建.jslib文件

创建一个路径为Assets/Plugins/WebGl的文件夹,放置浏览器要执行的JavaScript代码,插件扩展名为.jslib,将代码文件保存在此路径,当你发布时,这段代码(具体来说)将在build JS中扩展.

----------.jslib------- 
var HogePlugin = { 
    Fuga: function(int x, int y) { 
        return x + y; 
    }, 
    Piyo: function(arg) {
     var str = Pointer_stringify(arg); 
    } 
} 
mergeInto(LibraryManager.library, HogePlugin);    

 

插件函数在build JS中扩展,在函数名的开头加了一个"_"

当您开始发布打包时,插件的功能将在构建JS中扩展,并在函数名称的开头添加一个"_"

因此,从JS端调用这些函数时,请在函数前加上"_"

----------.jslib------- 
var HogePlugin = { 
    Fuga: function(int x, int y) {
         return x + y; 
    }, 
    Piyo: function(arg) {
         var str = Pointer_stringify(arg); 
    } 
} 
mergeInto(LibraryManager.library, HogePlugin);

----------js------- 
// ... 
function _Fuga(int x, int y) { 
    return x + y; 
}, 
function _Piyo(arg) {
     var str = Pointer_stringify(arg); 
} 
// ...

 

从Unity 5.6开始,它将在块中扩展

虽然是部署目标,但由于扩展到了全局作用域,一直到5.5,所以很容易从外部JS代码访问,但从5.6开始,它在块中拓展,因此无法从外部JS代码访问.

因此,为了使其可以从外部JS代码访问,您可以编写代码设置在插件中的全局对象的属性中.

 

从C#调用一个JS函数

可以通过阅读WebGL: Communicating with a browser script 来学习,不过暂时可以通过调用一个有返回值的函数来获取返回值.

调用JS函数,使用DllImport属性定义和调用要使用的函数,类似于DLL函数调用.

using System.Runtime.InteropServices; 
class Hoge { 
　　[DllImport("__Internal")] 
　　public static extern int Fuga(int n); 

　　public void CallFuga(n) { 
　　　　var ret = Fuga(n); 
　　　　Debug.Log(ret); 
　　} 
　　// .... 
}

----------.jslib-------
var HogePlugin = {
　　Fuga: function(t) { 
　　return t + 10; 
　　}
} 
mergeInto(LibraryManager.library, HogePlugin);

 

不是DllImport的函数不会被扩展

如果你只为Fuga()编写DllImport并如下例所示构建它,她将正确检查并且Piyo()不会被扩展来构建JS.

----------.jslib------- 
var HogePlugin = { 
　　Fuga: function(int x, int y) {
　　　　return x + y; 
　　　　}, 
　　Piyo: function(arg) { 
　　　　var str = Pointer_stringify(arg); 
　　} 
} 
mergeInto(LibraryManager.library, HogePlugin);

using System.Runtime.InteropServices; 
class Hoge { 
　　[DllImport("__Internal")] 
　　public static extern string Fuga(string configuration); 
}

----------JS脚本中------- 
// ... 
function _Fuga(int x, int y) { 
　　return x + y; 
},
// ...

 

如果想要在JS端定义函数、数组或对象，需添加$并执行autoAddDeps()

如果你在C#端有一个不（直接）使用（不要DllImport）但想扩展为JS的函数，或者你想单独定义数组或对象，你可以使用'$'插件中如下代码所示，通过用成员名描述并执行autoAddDeps()，在JS端扩展为函数名或变量名带'$'的JS。 因此，作为警告，当在 JS 端使用这些时，如“_”的情况，使用带有“$”的名称。

但是，似乎无法使用诸如布尔、数字和字符串之类的原始事物。 具体而言，在布尔值或数值的情况下，不展开，在字符串的情况下，由于某种原因，字符串成为变量名，并作为适用的函数输出（null，arguments ) 到这个变量。

----------.jslib------- 
var HogePlugin = {
　　$hpFunc: function () {
　　return null; 
　　},

　　$hpBool: true, 
　　$hpNum: 100, 
　　$hpStr: "测试", 
　　$hpArr: [1, 2, 3], 
　　$hpObj: { 
　　　　hoge: 'fuga', 
　　　　piyo: 2
　　}, 
　　TestFunc: function () { 
　　　　return null; 
　　}, 
　　TestFuga: function () {
　　　　return null; 
　　} 
}; 
autoAddDeps(HogePlugin, '$hpFunc'); 
autoAddDeps(HogePlugin, '$hpBool'); 
autoAddDeps(HogePlugin, '$hpNum'); 
autoAddDeps(HogePlugin, '$hpStr'); 
autoAddDeps(HogePlugin, '$hpArr'); 
autoAddDeps(HogePlugin, '$hpObj');
mergeInto(LibraryManager.library, HogePlugin);

----------JS脚本中------- 
// ... 
var hpObj = { 
　　hoge: "fuga", 
　　piyo: 2 
}; 
var hpArr = [ 1, 2, 3 ]; 

function hpStr() {
　　return _\u30c6\u30b9\u30c8.apply(null, arguments); 
} 
// ...

 

将参数传递给JS函数时,将原样传递数字类型,但如果传递非数字字符串类型或数组,则传递指针.

bool类型作为0和1传递.

string使用Pointer_stringify()从指针中获取字符串.

传递数值类型(int,float等)数组时,除了数组本身,还需要传递数组的元素个数.

从指针获取数值数组是从HEAP8、HEAPU8、HEAP16、HEAPU16、HEAP32、HEAPU32、HEAPF32、HEAPF64执行的.

----------.jslib------- 
var HogePlugin = {
    // 准备一个从指针返回各种数值类型数组（子数组）的函数 
    $arrFromPtr: function(ptr, size, heap) {
    // 返回不生成数组的 HEAP 子数组（值复制） 
    var startIndex = ptr / heap.BYTES_PER_ELEMENT; 
    // 通过除以类型中的字节数来计算起始索引 
    return heap.subarray(startIndex, startIndex + size); 
　　}, 
　　Fuga: function(n, f, pStr, pShortArr, shortArrLen, pFloatArr, floatArrLen) {
    console.log(n, f);  // 可以按原样获取数值类型 
    str = Pointer_stringify(pStr);  // 对于字符串类型，使用 Pointer_stringify() 从指针中获取字符串。 
    // 从 HEAPnn 获得的数值数组 
    var shortArr = arrFromPtr(pShortArr, shortArrLen, HEAP16);
    var floatArr = arrFromPtr(pFloatArr, floatArrLen, HEAPF32); 
　　} 
} 
autoAddDeps(HogePlugin, '$arrFromPtr');
mergeInto(LibraryManager.library, HogePlugin);

 

当使用字符串类型作为参数时,传递 null 将导致""(空字符串)

如果将JS函数的参数类型设置为string并调用它(具体来说Pointer_stringify()的返回值会是)"".

using System.Runtime.InteropServices; 

class Hoge : MonoBehaviour {
    [DllImport("__Internal")] 
    public static extern void Fuga(string str); 

    void Start() {
        Fuga(null); 
    } 
}    

----------sample3.jslib------- 

var HogePlugin = {
    Fuga: function(arg) {
       var str = Pinter_stringify(arg); 
　　　　console.log('isNull:' + (str === null), 'isEmpty:' + (str === '')); // isNull:false isEmpty:true 
    } 
} 

mergeInto(LibraryManager.library, HogePlugin);    

 

字符串数组、对象数组、对象类型不能传递(JSON等序列化)

不难想象，除了对象或数值类型之外，您还不能传递数组。 因此，如果要传递这样的值，则应在JS端传递序列化为JSON和反序列化之类的方法。

 

重载不可用

C#可以重载函数,但是JS没有函数重载.

所以,正如下面示例一样,我用重载写了C#的代码,JS代码写了一个函数,试了试.

构建工作正常，但没有产生预期的结果。

具体来说，当我运行以下代码时，JS console.log() 的结果是

 >1,undefined 2 >2,undefined 

似乎只是调用了第一个DllImport.

using System.Runtime.InteropServices;

class Hoge : MonoBehaviour { 
    [DllImport("__Internal")] 
    public static extern void Fuga(int arg1); 
    [DllImport("__Internal")] 
    public static extern void Fuga(int arg1, int arg2); 

    void Start() {
        Fuga(1);
        Fuga(2, 3); 
    } 
}    

----------sample3.jslib------- 
var HogePlugin = {
    Fuga: function(arg1, arg2) {
        console.log(arg1, arg2); // 1, undefined 
                                            // 2, undefined 
    } 
}
mergeInto(LibraryManager.library, HogePlugin);    

 

不能将Object或Nullable类型指定为返回类型

构建是可以通过的，但在运行时会出现错误。

由于 Emscripten 的规范，我认为这是不可避免的。

当Object被指定为返回值时

using System.Runtime.InteropServices; 

class Hoge : MonoBehaviour { 
    [DllImport("__Internal")] 
    public static extern object Fuga(int n); 

    void Start() {
        var ret = Fuga(n); 
        Debug.Log(ret); 
    } 
}    

----------.jslib------- 
var HogePlugin = {
    Fuga: function(t) {
        return t + 10; 
    } 
} 
mergeInto(LibraryManager.library, HogePlugin);

 ----------JS控制台打印信息------- 2 MarshalDirectiveException: Cannot marshal type 'System.Object' 

 

当int?被指定为返回值

using System.Runtime.InteropServices; 

class Hoge : MonoBehaviour {
    [DllImport("__Internal")] 
    public static extern int? Fuga(int n); 

    void Start() {
        var ret = Fuga(n);
        Debug.Log(ret); 
    } 
}

----------.jslib------- 
var HogePlugin = {
    Fuga: function(t) {
        return t + 10; 
    } 
} 

mergeInto(LibraryManager.library, HogePlugin);

 ----------JS控制台打印信息------- 2 MarshalDirectiveException: Cannot marshal type 'System.Nullable`1<System.Int32>' 

 

未完....待续....