Wasm实例开发001-斐波那契数列-逐梦个人博客

欢迎来到wasm实例开发系列文章，在这个系列中，我们将探索如何使用C语言编写WebAssembly应用程序，并使用JavaScript在浏览器中加载和运行wasm应用。

一、环境准备

在开始之前，请确保你的机器已经安装了C编译器和Emscripten工具链，如果你还没有安装这些工具，你可以按照以下指南进行安装：

1、C编译器：Linux环境可以直接通过sudo apt install gcc安装，Windows环境gcc的安装方式可参考：https://blog.csdn.net/qq_45601448/article/details/109158588

2、Emscripten工具链：可以参考之前的文章《前端展望-初识Wasm(WebAssembly)》

环境准备完成后，我们开始构建wasm实例开发系列的第一个应用程序：斐波那契数列，该例比较简单，但是别着急，我们会逐步深入，在本系列的后续文章中我们将介绍如何构建更复杂的wasm应用。

二、什么是斐波那契数列

斐波纳契数列（Fibonacci Sequence），又称黄金分割数列。斐波那契数列指的是这样一个数列：1、1、2、3、5、8、13、21、…… 这个数列从第三项开始，每一项都等于前两项之和。

三、C程序编写

首先我们创建一个名为fibonacci.c的文件，用于编写我们的C程序代码，在本例中，我们将创建一个简单的函数，用于计算斐波那契数列执行位的数值，代码如下：

int fibonacci(int n) {
    if (n == 1 || n == 2) {
        return 1;
    }
    return fibonacci(n-1) + fibonacci(n-2);
}

四、WebAssembly应用编译

通过Emscripten工具链，我们可以使用以下命令将fibonacci.c编译为Wasm应用，命令如下：

emcc -Oz -o fibonacci.js -s EXPORTED_FUNCTIONS='["_fibonacci"]' fibonacci.c

编译成功后，我们会得到两个文件fibonacci.js和fibonacci.wasm,其中fibonacci.wasm是我们编译后的wasm应用，而fibonacci.js是自动生成的调用wasm应用的胶水代码。

五、使用js调用wasm应用

我们新建一个fibonacci.html文件用于编写调用wasm应用的代码，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斐波那契数列Wasm应用</title>
</head>
<body>
    <p>第几位：<input type="number" id="num"></p>
    <p>结果：<span id="result"></span></p>
    <script src="fibonacci.js"></script>
    <script>
        num.onchange = () => {
            const ret = _fibonacci(num.value);
            result.innerText = ret;
        }
</script>
</body>
</html>

我们引用了胶水代码，胶水代码会加载wasm应用并将我们导出的_fibonacci方法挂载到window和Module空间下，如果页面加载需要立即执行发出的方法需要等待Module.onRuntimeInitialized事件触发后再执行，等到用户输入要计算的斐波那契数列位数我们调用导出的方法并将结果回显即可，关于导出方法的调用方式，可以参考之前的文章《彻底弄懂Js和Wasm间各种数据类型的传递》。

六、结语

在本例中，我们并没有用到ccall，cwrap等方法，简单数据类型我们只需要直接调用导出方法拿结果即可，使用ccall，cwrap等方法反而有点画蛇添足的感觉。后期我们用到更为复杂的数据的时候就会用到ccall，cwrap方法来简化我们的代码。

系列文章导航：

第2节： Wasm实例开发002-最长回文字符串

第3节： wasm实例开发003-简单数据的加密解密

第4节： wasm实例开发004-矩阵乘法

第5节： wasm实例开发005-图像高斯模糊

第6节： wasm实例开发006-证件照换底色

第7节： wasm实例开发007-图片菱形渐变