探索WebAssembly实现iOS热修复/第一篇/WebAssembly快速上手

Posted 2021-04-18 首先很有趣

由于牵扯WebAssembly这个背景知识，且绝大多数ios开发者对WebAssembly接触的很少，都听过这个词，但没有深入研究过。因此计划了这个系列的文章，一步一步来介绍WasmPatch。每一篇文档都会力求简短。本文是探索WebAssembly实现iOS热修复系列的第一篇《WebAssembly快速上手》。

1. 第零篇/前言
2. 第一篇/WebAssembly快速上手
3. 第二篇/移动端动态执行WebAssembly
4. 第三篇/动态调用ObjC方法
5. 第四篇/动态替换ObjC方法
6. 第五篇/WasmPatch设计思路
7. 第六篇/WasmPatch关键源码解析
8. 第七篇/WasmPatch使用方法
9. 第八篇/WasmPatch未来规划

WebAssembly 简介

先看官网 https://webassembly.org/ 介绍：

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

三点信息：

1. WebAssembly简称Wasm。
2. 是一个为“基于栈的虚拟机”设计的二进制指令格式。
3. 设计上是可移植的，可部署到Web。

此外，还有性能好，安全，可调试，兼容性好等。详细就去看官网哈。

官网的文档 https://webassembly.org/docs/high-level-goals/ 包含了很多信息，可以先快速浏览，以后有时间再细致看。

初步体验

有三个网站，可以快速上手体验Wasm。

• https://wasdk.github.io/WasmFiddle/
• https://webassembly.studio/
• https://mbebenita.github.io/WasmExplorer/

从入门角度来看，先看WasmFiddle，再看WebAssemblyStudio。WasmExplorer暂时可不看。

WasmFiddle

WasmFiddle可将C语言编译到wasm格式。编译完成后，下面是Wasm的文本格式（wat格式），还可以点击屏幕中央的Wasm，下载二进制格式。

WebAssemblyStudio

WebAssemblyStudio相对复杂，功能更全面。

进一步学习

好了，快速玩耍一番，可以继续学习基础了。这里的文章可以边学习边用上面提到的工具上手操作。（优先推荐WasmFiddle哈）

这里强烈推荐Mozilla的系列文档，看完后Wasm功力即可大增。（如果不熟悉Rust，Rust部分可以快速跳跃浏览）

https://developer.mozilla.org/en-US/docs/WebAssembly

右上角还可切换中文，但由于存在一些新名词，建议中英文对照看。

这个系列中，比较重要的两篇：

1、Understanding WebAssembly text format

https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format

2、Using the WebAssembly javascript API

https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API

另外，几乎所有文章提到WebAssembly，就必然要提 Emscripten ，这个工具可以把C++转换成Wasm，然后给Javascript调用。不过，对于后续文章讲的WasmPatch来说，没有用到 Emscripten。

关于 Emscripten，大家初步上手了解即可。

• https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm
• Emscripten官网：https://emscripten.org/

再进一步

为了能更灵活的玩耍WebAssembly，The WebAssembly Binary Toolkit 提供了一系列的工具。

https://github.com/WebAssembly/wabt

最常用的两个 wat2wasm 和 wasm2wat，可以用户wasm的二进制格式和文本格式的转换。

• wat2wasm: translate from WebAssembly text format to the WebAssembly binary format
• wasm2wat: the inverse of wat2wasm, translate from the binary format back to the text format (also known as a .wat)

另外，上面WasmFiddle、WebAssemblyStudio都是开源的。代码见 https://github.com/wasdk

愉快玩耍

WebAssembly 的包管理工具，很有意思，可以玩耍一下。

• WebAssembly Package Manager https://wapm.io/

• https://webassembly.sh/

wapm中的部分package可以在线运行，上图中的Run online。

例如这个 https://webassembly.sh/?run-command=wapm%20install%20badel2/slime_seed_finder@0.1.2

AssemblyScript 是专门为WebAssembly设计的语言

• https://www.assemblyscript.org/

Swift 也可以转换成Wasm，曾经想过这个可以实现Swift来热修复ObjC代码，但目前转换后的结果体积太大（大概5M左右），实际不可行。

• https://github.com/swiftwasm/swift

其他资料

• Awesome Wasm https://github.com/mbasso/awesome-wasm
• Rust and WebAssembly https://rustwasm.github.io/docs/book/introduction.html
• https://madewithwebassembly.com/
• Compiler infrastructure and toolchain library for WebAssembly https://github.com/WebAssembly/binaryen
• 基础为零？如何将 C++ 编译成 WebAssembly （淘宝的文章，链接太长，大家搜索哈）

总结

本文就这些了，对新手来说，可以学习一阵子了。下一篇文章我们就讲讲怎么让Wasm运行到我们的App中，也就是Wasm的虚拟机们。

写文章挺耗时的，眨眼30分钟又过去了，点击右下角「在看」鼓励一下俺哦～

广告时间到，抖音基础技术团队、抖音社交团队招iOS开发（北京、深圳、成都），如果想面试字节跳动其他岗位，都可以找我内推（wx: everettjf ）。

如需交流，可以先加 TG群 https://t.me/apple_internals 。微信交流群会在所有文章完成后开放。