第06章-interact-with-js / js-without-glue，在Learn WebAssembly by Mike Rourke
它不起作用。错误消息为Uncaught (in promise) TypeError: m._init is not a function。
首先，错误消息为Uncaught (in promise) LinkError: WebAssembly.instantiate(): Import #0 module="env" function="__memory_base" error: global import must be a number or WebAssembly.Global object。
我用common / load-wasm.js中的__memory_base和__table_base替换了memoryBase和tableBase。解决了。
但是我又收到一条错误消息Uncaught (in promise) TypeError: m._init is not a function。
/*
* This file interacts with the canvas through imported functions.
* It moves a circle diagonally across the canvas.
*/
#define BOUNDS 255
#define CIRCLE_RADIUS 50
#define BOUNCE_POINT (BOUNDS - CIRCLE_RADIUS)
bool isRunning = true;
typedef struct Circle {
int x;
int y;
char direction;
} Circle;
struct Circle circle;
/*
* Updates the circle location by 1px in the x and y in a
* direction based on its current position.
*/
void updateCircleLocation() {
// Since we want the circle to "bump" into the edge of the canvas,
// we need to determine when the right edge of the circle
// encounters the bounds of the canvas, which is why we're using
// the canvas width - circle width:
if (circle.x == BOUNCE_POINT) circle.direction = 'L';
// As soon as the circle "bumps" into the left side of the
// canvas, it should change direction again.
if (circle.x == CIRCLE_RADIUS) circle.direction = 'R';
// If the direction has changed based on the x and y
// coordinates, ensure the x and y points update accordingly:
int incrementer = 1;
if (circle.direction == 'L') incrementer = -1;
circle.x = circle.x + incrementer;
circle.y = circle.y - incrementer;
}
// We need to wrap any imported or exported functions in an
// extern block, otherwise the function names will be mangled.
extern "C" {
// These functions are passed in through the importObj.env object
// and update the circle on the <canvas>:
extern int jsClearCircle();
extern int jsFillCircle(int x, int y, int radius);
/*
* Clear the existing circle element from the canvas and draw a
* new one in the updated location.
*/
void moveCircle() {
jsClearCircle();
updateCircleLocation();
jsFillCircle(circle.x, circle.y, CIRCLE_RADIUS);
}
bool getIsRunning() {
return isRunning;
}
void setIsRunning(bool newIsRunning) {
isRunning = newIsRunning;
}
void init() {
circle.x = 0;
circle.y = 255;
circle.direction = 'R';
setIsRunning(true);
}
}
<!doctype html>
<html lang="en-us">
<head>
<title>Interact with JS without Glue Code</title>
<script
type="application/javascript"
src="../common/load-wasm.js">
</script>
<style>
#myCanvas {
border: 2px solid black;
}
#actionButtonWrapper {
margin-top: 16px;
}
#actionButton {
width: 100px;
height: 24px;
}
</style>
</head>
<body>
<h1>Interact with JS without Glue Code</h1>
<canvas id="myCanvas" width="255" height="255"></canvas>
<div id="actionButtonWrapper">
<button id="actionButton">Pause</button>
</div>
<script type="application/javascript">
const canvas = document.querySelector('#myCanvas');
const ctx = canvas.getContext('2d');
const fillCircle = (x, y, radius) => {
ctx.fillStyle = '#fed530';
// Face outline:
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
ctx.closePath();
// Eyes:
ctx.fillStyle = '#000000';
ctx.beginPath();
ctx.arc(x - 15, y - 15, 6, 0, 2 * Math.PI);
ctx.arc(x + 15, y - 15, 6, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
// Mouth:
ctx.beginPath();
ctx.moveTo(x - 20, y + 10);
ctx.quadraticCurveTo(x, y + 30, x + 20, y + 10);
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();
};
const env = {
table: new WebAssembly.Table({ initial: 8, element: 'anyfunc' }),
_jsFillCircle: fillCircle,
_jsClearCircle: function() {
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 255, 255);
},
};
loadWasm('js-without-glue.wasm', { env }).then(({ instance }) => {
const m = instance.exports;
m._init();
// Move the circle by 1px in the x and y every 20 milliseconds:
const loopCircleMotion = () => {
setTimeout(() => {
m._moveCircle();
if (m._getIsRunning()) loopCircleMotion();
}, 20)
};
// Enable you to pause and resume the circle movement:
document.querySelector('#actionButton')
.addEventListener('click', event => {
const newIsRunning = !m._getIsRunning();
m._setIsRunning(newIsRunning);
event.target.innerHTML = newIsRunning ? 'Pause' : 'Start';
if (newIsRunning) loopCircleMotion();
});
loopCircleMotion();
});
</script>
</body>
</html>
/**
* Returns a valid importObj.env object with default values to pass
* into the WebAssembly.Instance constructor for Emscripten's
* Wasm module.
*/
const getDefaultEnv = () => ({
__memory_base: 0,
__table_base: 0,
memory: new WebAssembly.Memory({ initial: 256 }),
table: new WebAssembly.Table({ initial: 2, element: 'anyfunc' }),
abort: console.log
});
/**
* Returns a WebAssembly.Instance instance compiled from the specified
* .wasm file.
*/
function loadWasm(fileName, importObj = { env: {} }) {
// Override any default env values with the passed in importObj.env
// values:
const allEnv = Object.assign({}, getDefaultEnv(), importObj.env);
// Ensure the importObj object includes the valid env value:
const allImports = Object.assign({}, importObj, { env: allEnv });
// Return the result of instantiating the module (instance and module):
return fetch(fileName)
.then(response => {
if (response.ok) return response.arrayBuffer();
throw new Error(`Unable to fetch WebAssembly file ${fileName}`);
})
.then(bytes => WebAssembly.instantiate(bytes, allImports));
}
以下示例相同。
-Chapter-05-create-load-module / without-glue
-Chapter-06-interact-with-js / js-with-glue
我该如何解决？
答案 0 :(得分：1)
将此行添加到vscode默认构建任务中的args列表中
“-s”，“ EXPORT_ALL = 1”
如果您查看wat表示形式，将会发现没有_init ...使用上面添加的arg进行编译之后，它将与所有其他函数一起出现在其中。快速而肮脏的解决方案。
Emscripten常见问题解答如下
Emscripten可以消除未调用功能的死代码 从编译的代码。尽管这样做确实可以最大程度地减少代码大小，但它可以 删除您计划自称的功能（ 编译代码）。
确保C函数仍然可以正常调用 JavaScript，必须使用emcc将其添加到EXPORTED_FUNCTIONS 命令行。例如，为防止函数my_func（）和main（） 要删除/重命名，请使用以下命令运行emcc：
emcc -s“ EXPORTED_FUNCTIONS = ['_ main'，'_my_func']” ...
main默认情况下包含在导出函数列表中，但init不包含。
答案 1 :(得分：0)
将.c文件编译为js输出时，请使用以下命令：emcc js-with-glue.c -O3 -s WASM=1 -s MODULARIZE=1 -o js-with-glue.js -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"
然后在您的html文件中，您引用m ._（）调用的任何位置，我们的.c文件将其公开，用result.ccall（，,,）代替。结果就是承诺的回报。
以下是来源：
<script type="application/javascript">
Module()
.then(result => {
const m = result.asm;
console.log('asm', result.asm);
var initFunc = result.ccall('init', null, null, null );
// Move the rectangle by 1px in the x and y every 20 milliseconds:
const loopRectMotion = () => {
setTimeout(() => {
result.ccall('moveRect',null,null,null);
if (result.ccall('getIsRunning',null,null,null)) loopRectMotion();
}, 20)
};
// Enable you to pause and resume the rectangle movement:
document.querySelector('#actionButton')
.addEventListener('click', event => {
const newIsRunning = !result.ccall('getIsRunning',null,null,null);
result.ccall('setIsRunning',null,bool,newIsRunning);
event.target.innerHTML = newIsRunning ? 'Pause' : 'Start';
if (newIsRunning) loopRectMotion();
});
loopRectMotion();
});
</script>