【蓝牙小程序】微信小程序中 arraybuffer 数据类型是什么？

背景

在进行蓝牙功能的真机调试的时候，希望调试台(console)能打印出来传输的数据信息(console.log("..."))，但是发现一直显示是 ArrayBuffer(4) 这样的样子，里面是什么数据还要点开看，因此对 arraybuffer 这个数据类型产生了好奇心。

总体来说，arraybuffer  是微信小程序 javascript 中一种特殊的数据结构，其解读需要根据用户指定的字节数，大小端，才有实际的意义。

正文

在微信小程序中，ArrayBuffer 是一种用于表示二进制数据的对象。它是 JavaScript 中处理二进制数据的基础类型之一，通常用于处理文件、网络请求、图像数据等需要直接操作二进制数据的场景。

---

ArrayBuffer 的特点

1. 二进制数据容器:

   • ArrayBuffer 是一个固定长度的二进制数据缓冲区，不能直接操作其内容，需要通过 TypedArray 或 DataView 来读写数据。

2. 不可变长度:

   • 一旦创建，ArrayBuffer 的长度是固定的，无法动态调整。

3. 高效处理二进制数据:

   • 适合处理文件、音视频、网络协议等二进制数据。

4. 与微信小程序 API 结合:

   • 微信小程序的许多 API（如文件操作、网络请求等）都支持 ArrayBuffer 作为输入或输出。

---

ArrayBuffer 的常见用途

1. 文件操作:

   • 通过 wx.getFileSystemManager().readFile 读取文件时，可以指定返回 ArrayBuffer 格式的数据。

   • 示例：

     javascript

     复制

     wx.getFileSystemManager().readFile({
       filePath: 'path/to/file',
       encoding: 'binary', // 指定返回二进制数据
       success(res) {
         const arrayBuffer = res.data; // 获取 ArrayBuffer
         console.log(arrayBuffer);
       }
     });

2. 网络请求:

   • 在 wx.request 中，可以通过设置 responseType 为 arraybuffer 来接收二进制数据。

   • 示例：

     javascript

     复制

     wx.request({
       url: 'https://example.com/binary-data',
       responseType: 'arraybuffer',
       success(res) {
         const arrayBuffer = res.data; // 获取 ArrayBuffer
         console.log(arrayBuffer);
       }
     });

3. 图像处理:

   • 处理图片的二进制数据时，可以使用 ArrayBuffer 存储原始数据，再通过 TypedArray 或 DataView 进行操作。

4. WebSocket:

   • 在 WebSocket 通信中，可以发送和接收 ArrayBuffer 数据。

   • 示例：

     javascript

     复制

     const socket = wx.connectSocket({
       url: 'wss://example.com'
     });
     socket.onMessage(res => {
       const arrayBuffer = res.data; // 接收 ArrayBuffer
       console.log(arrayBuffer);
     });

---

如何操作 ArrayBuffer

ArrayBuffer 本身不能直接操作，需要通过以下两种方式读写数据：

1. TypedArray:

   • TypedArray 是一组视图类型（如 Uint8Array、Int16Array 等），用于以特定格式读写 ArrayBuffer。

   • 示例：

     javascript

     复制

     const buffer = new ArrayBuffer(16); // 创建一个 16 字节的 ArrayBuffer
     const uint8Array = new Uint8Array(buffer); // 创建一个 Uint8Array 视图
     uint8Array[0] = 255; // 写入数据
     console.log(uint8Array[0]); // 读取数据

2. DataView:

   • DataView 提供了更灵活的方式来读写 ArrayBuffer，支持不同的字节序（大端序或小端序）。

   • 示例：

     javascript

     复制

     const buffer = new ArrayBuffer(16);
     const dataView = new DataView(buffer);
     dataView.setUint8(0, 255); // 在偏移量 0 处写入一个 8 位无符号整数
     console.log(dataView.getUint8(0)); // 读取数据

---

ArrayBuffer 的示例

以下是一个完整的示例，展示如何创建、操作和使用 ArrayBuffer：

javascript

复制

// 创建一个 8 字节的 ArrayBuffer
const buffer = new ArrayBuffer(8);

// 使用 Uint8Array 视图操作数据
const uint8Array = new Uint8Array(buffer);
uint8Array[0] = 0x12; // 写入数据
uint8Array[1] = 0x34;

// 使用 DataView 操作数据
const dataView = new DataView(buffer);
dataView.setUint16(2, 0x5678, true); // 在偏移量 2 处写入一个 16 位无符号整数（小端序）

// 读取数据
console.log(uint8Array); // Uint8Array [ 18, 52, 120, 86, 0, 0, 0, 0 ]
console.log(dataView.getUint16(2, true)); // 22136 (0x5678)

---

总结

• ArrayBuffer 是微信小程序中处理二进制数据的基础类型。

• 通过 TypedArray 或 DataView 可以读写（读取或者操作） ArrayBuffer 中的数据。

• 在文件操作、网络请求、图像处理等场景中，ArrayBuffer 非常有用。

• 微信小程序的许多 API 都支持 ArrayBuffer，使其成为处理二进制数据的核心工具。