LayaBox上使用自定义WebAssembly初体验

跟着官方实例写的时候,发现fetch在本地无法使用,于是想到了使用XMLHttpRequest,他们两个都是用来请求资源的,差异也不大。

以下是官方MDN对于Fetch与XMLHttpRequest区别:

Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展。

一、首先定义一个test.ts

export function add(a:i32,b:i32):i32{
    return a+b;
}

 test中包含一个add方法,返回a + b的结果。

二、通过AssemblyScript编译成test.wasm文件

三、将编译后的.wasm文件拷贝到对应文件夹,以下为加载解析调用test.wasm中的代码片

Laya.loader.load("libs/test.wasm", Laya.Handler.create(this, () => {			
			var buffer = Laya.loader.getRes("libs/test.wasm");
			var valid:boolean = WebAssembly.validate(buffer);
			if(valid){				
				try {
					var importObject = {					
						  env: {
							abort: () => {},
						  }
					};
					var mod = WebAssembly.instantiate(buffer,importObject);
					mod.then(result=>console.log(result.instance.exports.add(1,1)));					
				} catch (error) {
					console.log(error);
				}
			}			
		}), null, Laya.Loader.BUFFER);

1.首先使用Loder加载,注意资源类型一定是Laya.Loader.BUFFER类型,不然Laya默认为txt文本类型

2.获取资源并校验buffer的合法性

3.实例化buffer,返回一个异步状态

4.调用.then接收一个result,我们写到add方法就存储在exports属性中。

你可能感兴趣的:(前端经验,LayaBox,WebAssembly)