在笔者开发的小程序项目中用到了protobuf(protocal buffer)，它是谷歌推出的一种数据标准，可以将结构化的数据进行序列化。是一种被用于通讯协议、数据存储等领域数据格式。具有语言无关、平台无关、以及可扩展的特点。今天笔者就详细介绍一下如何在微信小程序项目中使用的protobuf。

在笔者之前的文章《微信小程序使用mqtt之详细的避坑指南》中曾介绍在使用mqtt的时候，用npm包的方式有问题，所以就使用了压缩文件的方式。对于protobuf，经笔者测试发现npm包的方式和压缩文件的方式都没有问题，本文以使用压缩文件的方式来介绍其使用。

下载protobuf.js的压缩文件

可以去github下载protobuf的压缩文件（文末参考资料【2】），如下图：

点击Light版本对应的地址，跳转到protobuf的CDN文件列表页面，选择相应的版本（笔者使用的是6.11），如下图：

选择protobuf.min.js，点击打开，如下图：

然后右键“另存为”，如下图：

将下载下来的压缩文件可以放到小程序项目的相关目录下（笔者的是utils）

使用pbjs命令编译.proto文件

然后我们可以使用pbjs直接生成proto协议文件对应的js protobuf描述文件，这样就可以在普通页面中直接使用了。使用命令npm -g install protobufjs全局安装protobufjs，然后使用命令pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto 将src/proto目录下所有的.proto结尾的文件编译成proto.js文件。如下图所示（注意：此图来自笔者的一个vue项目，也可以在小程序项目中加上这个文件夹和以及.proto结尾的协议文件，但是协议不会轻易变动，所以笔者就用生成好的文件）：

其中引入protobuf/light的代码换成这句：

var $protobuf = require("./protobuf.min");

使用protobuf

引用之后就可以在代码中使用了：

const protoRoot = require('../../utils/proto')
console.log(protoRoot.lookup)
// 某方法中
const PushMessage = protoRoot.lookup('PushMessage')
console.log(PushMessage)
const pushMessage = PushMessage.decode(msg)

打印出的protoRoot上确实存在lookup方法，但是运行到PushMessage.decode的时候就会报错。如下图所示：

经一番搜索后，笔者参照文末参考资料【3】修改了一下proto.js的生成方式，将json-module改成static-module是可以解决问题的，命令如下：

pbjs -t static-module -w commonjs -o src/proto/proto.js  src/proto/*.proto

则生成的proto.js如下图所示：

在使用的时候也发生改变，不再需要使用lookup，如下图所示：

const PushMessage = protoRoot['PushMessage']
const pushMessage = PushMessage.decode(msg)

总结

本文详细介绍了如何在微信小程序中使用protobuf。首先介绍了如何下载protobuf.js的压缩文件，然后介绍了如何使用pbjs为proto协议文件生成对应的js文件，最后介绍了如何在代码中使用protobuf。

参考资料

【1】npm protobuf

【2】github protobuf

【3】uniapp 微信小程序使用protobuf（http请求）

【4】protobuf详解