嘿，马卡尔斯，
这篇文章是 webassembly 多部分系列的一部分。在这里查看该系列的其他部分
您是否听说过 webassembly 并认为“这听起来很酷，但对我来说可能太复杂了”？
好吧，今天您将从头开始构建一个简单的 webassembly 项目。让我设定正确的期望。我们将构建一个非常简单的项目，它生成随机的十六进制颜色代码。
将其视为“你好，世界！” webassembly 的颜色飞溅。最后，您将学习如何编写简单的 webassembly 代码，对其进行编译，并将其与 javascript 一起使用以在浏览器中生成随机颜色。
设置 webassembly
在本博客文章系列中，我们将使用 c 和 c 作为示例。因此，我们将使用一个名为 emscripten 的工具将 c / c 代码编译为 wasm。但是，您可以通过相应的编译工具使用任何支持的语言。
设置 emscripten 非常简单。只需关注此页面 – https://emscripten.org/docs/getting_started/downloads.html
如果您使用的是 macos，则只需使用 homebrew 即可安装它，
brew install emscripten
如果您使用的是 linux，请关注此帖子 – https://marcoselvatici.github.io/wasm_tutorial/#install_emscripten
设置 emscripten 后，您应该能够在终端中运行以下命令，
emcc -v
简单加法
在实现随机十六进制代码生成器之前，让我们先构建一些简单的东西来了解 wasm 工作流程。让我们构建一个仅添加 2 个数字的应用程序。
我们将首先使用 javascript 构建应用程序，然后将其构建到 wasm 中。创建一个名为index.html的文件并粘贴以下代码，
function addnumbers() { const num1 = parseint(document.getelementbyid('num1').value); const num2 = parseint(document.getelementbyid('num2').value); const result = addtwonumbers(num1, num2); document.getelementbyid('result').textcontent = `result: ${result}`; } function addtwonumbers(num1, num2) { const result = num1 + num2; return result; }
代码是不言自明的。单击按钮后，我们从输入字段中获取 2 个数字并将其传递给 addtwonumbers 函数。该函数返回一个我们在段落中显示的数字。
现在让我们将 addtwonumbers 函数移至 c 语言。创建一个名为 add.c 的文件并写入以下内容，
// add.cint addtwonumbers(int num1, int num2) { return num1 + num2;}
现在，让我们将 c 代码编译为 wasm，
emcc add.c -o add.js -s exported_functions="['_addtwonumbers']" -s "extra_exported_runtime_methods=['ccall', 'cwrap']"
让我们来分析一下这个命令的作用，
emcc add.c -o add.js – 告诉 emscripten 编译器将 c 代码从 add.c 编译为名为 add.js 的文件中的 javascript-s exported_functions=”[‘_addtwonumbers’]” – 告诉编译器导出 addtwonumbers 函数，以便可以在 javascript 中使用它。下划线 (_) 是命令的一部分，而不是函数名称的一部分。-s “extra_exported_runtime_methods=[‘ccall’, ‘cwrap’]” – 告诉编译器导出额外的运行时函数 – cwrap 和 ccall 是我们用来包装 c 函数并分别从 javascript 调用它的函数。
编译成功后，会生成2个新文件——add.wasm和add.js。在这里，
add.wasm 是浏览器将运行的实际 wasm 二进制文件。add.js 只是一个胶水代码，让我们可以无缝地使用 c 语言中定义的函数。
并按如下方式更改 html 文件，
// wrap the function provided by c const addtwonumbers = module.cwrap("addtwonumbers", "number", ["number", "number"]); function addnumbers() { const num1 = parseint(document.getelementbyid('num1').value); const num2 = parseint(document.getelementbyid('num2').value); // calling the wrapped function const result = addtwonumbers(num1, num2); document.getelementbyid('result').textcontent = `result: ${result}`; }
这里，module.cwrap 用于包装 c 函数，以便我们可以将其用作普通 javascript 函数。
cwrap 需要三个参数，
函数名称 – addtwonumbers返回类型 – 数字参数类型 – [数字，数字]
从本地服务器运行应用程序。如果您的计算机上没有安装本地服务器，请尝试以下任一操作。
如果您安装了 python 3，请尝试这些，
python -m http.server
python3 -m http.server
或者，如果您安装了 nodejs，请尝试以下操作，
npm i -g live-server
并在包含我们现在创建的所有文件的目录中运行以下命令，
live-server
如果一切顺利，您将能够看到 2 个输入字段。尝试输入 2 个数字，然后单击按钮查看结果。
这里，所有 dom 操作（例如事件侦听器、从输入获取值、显示结果）都是由 javascript 完成的。而加法是由 c 语言编写的 wasm 完成的。
您可以在此处找到该项目的完整代码
现在让我们开始我们的实际项目 – 随机十六进制颜色生成器
什么是十六进制？
在构建我们的项目之前，让我们了解什么是十六进制以及它如何表示为颜色。
十六进制是以16为基数的数字系统。这意味着该数字系统包含16个符号来表示值。可能的十六进制符号为 0, 1, 2, 3, 4, 5, 6, 7, 8, 9，后跟 a, b, c, d, e, f。
这里，a = 10，b = 11 等等..
我们可以使用十六进制代码来表示六位数字的颜色。例如，#ff5733 或#42a5f5
要了解有关颜色及其表示的更多信息，请阅读 – 了解十六进制颜色。
随机颜色生成器
让我们先编写 c 代码。创建一个名为 random_color.c
的文件
我们需要使用两个库：stdlib.h 和 time.h，
// random_color.c#include #include
我们定义了generaterandomhexcolor函数，它返回一个字符指针。
char* generaterandomhexcolor() { // ...}
让我们定义我们需要的必要变量，并启动随机种子
char* generaterandomhexcolor() { static char color[8]; // store the color as a string (e.g., "#a3b2c7") srand(time(null)); color[0] = '#';}
我们可以使用 rand 函数生成 0 到 255 之间的随机数。然后我们需要将其转换为十六进制数字（即 0 – 9 和 a – f）。
我们首先编写一个 util 函数，将整数转换为有效的十六进制值，
char* inttohex(int num) { static char hexstr[3]; // store the hex string (2 characters + null terminator) const char hexdigits[] = "0123456789abcdef"; hexstr[0] = hexdigits[(num >> 4) & 0xf]; // high nibble hexstr[1] = hexdigits[num & 0xf]; // low nibble hexstr[2] = ' '; // null terminator return hexstr;}char* generaterandomhexcolor() { // ...}
现在我们可以使用这个 inttohex 函数将随机数转换为十六进制代码。最终的代码是，
// random_color.c#include #include
现在让我们将其编译为 wasm，
emcc random_color.c -o random_color.js -s exported_functions="['_generaterandomhexcolor']" -s "extra_exported_runtime_methods=['ccall', 'cwrap', 'utf8tostring']"
让我们准备一个 html 文件来使用这个函数，
Random Background Color
function changeBackgroundColor() { // Wrapping the function written in C const generateRandomHexColor = Module.cwrap("generateRandomHexColor", "number", []); const colorPtr = generateRandomHexColor(); const color = Module.UTF8ToString(colorPtr); document.body.style.backgroundColor = color; }
如果一切顺利，您应该能够单击一个按钮来更改页面的背景颜色。
如果不理解如何从指针获取颜色以及如何通过 javascript 访问 c 的指针，那也完全没问题。我们将在接下来的帖子中看到更多有关 webassembly 架构和内存的信息。
您可以在此处找到该项目的完整代码
结论
在这篇文章中，我们在 webassembly 中迈出了第一步，编写简单的 c 代码，使用 emscripten 将其编译为 wasm，并将其与 javascript 集成以构建功能随机颜色生成器。虽然这个项目只是一个开始，但它展示了 webassembly 在将高性能代码引入网络方面的强大功能和灵活性。
借助 webassembly，您可以解锁构建更快、更高效的 web 应用程序的新可能性。在以后的文章中，我们将探索更高级的用例，例如图像处理，以进一步了解 webassembly 如何增强性能并扩展 javascript 的功能。
请继续关注更多实践示例并深入了解 webassembly
以上就是构建您的第一个 WebAssembly 项目的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500883.html
微信扫一扫 
支付宝扫一扫 
