嘿，马卡尔斯，

这篇文章是 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的文件并粘贴以下代码，

      add  
      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 文件，

            add    
                  // 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 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() {    static char color[8]; // store the color as a string (e.g., "#a3b2c7")    srand(time(null));    color[0] = '#';    char* r = inttohex(rand() % 256);    color[1] = r[0];    color[2] = r[1];    char* g = inttohex(rand() % 256);    color[3] = g[0];    color[4] = g[1];    char* b = inttohex(rand() % 256);    color[5] = b[0];    color[6] = b[1];    color[7] = ''; // null terminator to make it a valid string    return color;}

登录后复制

现在让我们将其编译为 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
  Generate Random 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 项目的详细内容，更多请关注【创想鸟】其它相关文章！