无论你工作了三年，还是五年，如果你没有接触过像蓝牙，NFC这样的外设。那么这篇文章将带你打开新世界的大门。
在平时的工作中，我们都是通过调接口的方式和后端进行数据交互的，那如果没有后端，前端是如何直接和硬件进行数据交互的呢？
在想清楚这个问题时，就要用到我们大学学的一门课《计算机网络基础》，很多人对它不以为然， 前端需要学计算机网络吗？ 答案是肯定的，至少需要了解。这个问题其实就好像高考的时候，有一堆人在质疑“以后买菜需要用到数学吗？”
我记得之前看到过一句话，大学学的知识，至少要等你工作七八年了，才能领悟到到它存在的意义。
大家都知道，现在是前后端分离时代，无论是前端还是后端，我们每天面对的工作就是调接口。但是你有没有想过，我们这些接口他是如何建立连接的呢？他们相互通信的本质是什么？
这就有了我们面试常见的面试题，而且无论是前端还是后端，都会经常问到。
①http请求有多少种？有什么区别？
②三次挥手，四次握手你能说清楚吗？
第一点：你不会以为只有get、post两种请求吧，http请求其实一共有8种哦，而我在工作中也仅仅只用到了get、post、put、delete四种而已。
第二点：你可能会觉得面试官怎么会问这么无聊的问题，平时又用不到，可是面试官又不是要让你手写一个http协议，他只是想知道你对http协议是否有深入了解。
你可能又在想，这就是一些面试题，背背就好了，工作中还是用不到呀。那我再问你，你是否有过接触过类似蓝牙这样的外设？没有后端，前端如何去直接和硬件去进行数据交互呢？你是否做过网络安全相关的需求呢？
工作中用不到，是因为你一直呆着http协议的象牙塔里。大学的《计算机网络基础》里面有一个OSI七层模型和TCP/IP四层模型，想必大家都还有点印象吧。
这里面涉及到很多协议，而我们平时前后端调接口用到的http协议，仅仅是其中的一种协议哦。OSI里面有很多协议，每个协议的分工不同。所以对于《计算机网络基础》这门课，在我们工作中是涉及到了的，只是它被弱化了，弱化到没有人注意到它的存在，但是你不能完全不去了解它呀，这也就是面试官为啥会问，可工作中又几乎没有实际用不到的原因。它更多的是给了我们一个全局观，随着我们工作的深入，更加理解了这个互联网的世界，这个只有0和1的世界。
步入正题：
小程序蓝牙开锁总结起来可以分成下面五问题:
一：如何连接蓝牙?
二：如何传输数据?
三：如何分包？
四：如何做CRC8校验？
五：如何接收数据?
六：如何拼包？
一：如何连接蓝牙？
如何连接蓝牙，这个其实在微信的官方文档有一个demo，大家可以直接下载下来查看。 developers.weixin.qq.com/miniprogram…
大致就是初始化蓝牙设备，相当于蓝牙的生命周期，连接蓝牙。然后会有两个api。一个用来发送数据，一个用来接收数据。细节我就不讲了，大家自己拉代码下来对照微信文档相关api看，自己花半天时间理一理思路，就能搞明白了。微信提供的demo是原生。如何你们的项目用的其他框架，api也就是换个名字而已，其他框架api也是和微信一样的，只是少数api处理数据不太一样。哪报错，就处理哪，我这里用的uni-pp框架。
下面是我连接蓝牙的一些效果图：
①：搜索到附近的蓝牙。
②点击要选择的蓝牙。就能进行如图所示的一些系列操作。
二：如何传输数据？
我们前后端是通过接口，也就是http协议，那前端和后端也是通过协议，不过这里的协议不是http协议，而是ble协议。微信小程序也给了我们对应的api。
这样附上一份ble通信协议：
这份协议对于搞硬件的来说肯定简单，但是对于我们前端来说，真的看不懂，哈哈哈，我最初看见这个协议的时候也懵逼了。后来经过和硬件工程师沟通，终于明白了。
传的时候就是要拼接数据包，是用的new一个ArrayBuffer，然后用DataView往里面添加数据，这里一定要注意。这里的用DataView往ArrayBuffer里面添加数据写法很奇妙，你不要以为是我写错了，就是这样写。
你可以先尝试传一个字符，然后看硬件工程师是否能接收到。保证你们能够通信。
但是一个协议往往不是一两个字符，100-200个字符是很正常的，你直接这样传是会失败的。因为数据传输大于20字节就会丢包，所有需要分包。
三、如何分包？
这是我封装的分包方法，简单了说就是分割数据，然后间隔时间发送给硬件，让硬件分批接收数据包。
真机模式实际，控制台查询传输的数据。
你会发现，其实所谓的协议就是字符串，哈哈哈。不过，没有人给你点破的话，你自己要研究很久的，因为这和我平时的http协议差别很大，协议这东西就是双方约定而成。
四：如何做CRC8校验？
我这里是用的查表法：
收好表，看整体方法：
调用生成CRC8：
这个推荐大家用一个在线网站来检验自己生成的CRC8是否正确，类似在线时间搓用来检验我们生成的时间搓是否正确。 1024tools.com/hmac
在线网站生成CRC8用法示例：
附上CRC方法代码，需要的同学复制即可使用， CRC8校验（查表法）： gh_crc8(buffer) { const CHECKSUM_TABLE = [ 0x00, 0x07, 0x0e, 0x09, 0x1c, 0x1b, 0x12, 0x15, 0x38, 0x3f, 0x36, 0x31, 0x24, 0x23, 0x2a, 0x2d, 0x70, 0x77, 0x7e, 0x79, 0x6c, 0x6b, 0x62, 0x65, 0x48, 0x4f, 0x46, 0x41, 0x54, 0x53, 0x5a, 0x5d, 0xe0, 0xe7, 0xee, 0xe9, 0xfc, 0xfb, 0xf2, 0xf5, 0xd8, 0xdf, 0xd6, 0xd1, 0xc4, 0xc3, 0xca, 0xcd, 0x90, 0x97, 0x9e, 0x99, 0x8c, 0x8b, 0x82, 0x85, 0xa8, 0xaf, 0xa6, 0xa1, 0xb4, 0xb3, 0xba, 0xbd, 0xc7, 0xc0, 0xc9, 0xce, 0xdb, 0xdc, 0xd5, 0xd2, 0xff, 0xf8, 0xf1, 0xf6, 0xe3, 0xe4, 0xed, 0xea, 0xb7, 0xb0, 0xb9, 0xbe, 0xab, 0xac, 0xa5, 0xa2, 0x8f, 0x88, 0x81, 0x86, 0x93, 0x94, 0x9d, 0x9a, 0x27, 0x20, 0x29, 0x2e, 0x3b, 0x3c, 0x35, 0x32, 0x1f, 0x18, 0x11, 0x16, 0x03, 0x04, 0x0d, 0x0a, 0x57, 0x50, 0x59, 0x5e, 0x4b, 0x4c, 0x45, 0x42, 0x6f, 0x68, 0x61, 0x66, 0x73, 0x74, 0x7d, 0x7a, 0x89, 0x8e, 0x87, 0x80, 0x95, 0x92, 0x9b, 0x9c, 0xb1, 0xb6, 0xbf, 0xb8, 0xad, 0xaa, 0xa3, 0xa4, 0xf9, 0xfe, 0xf7, 0xf0, 0xe5, 0xe2, 0xeb, 0xec, 0xc1, 0xc6, 0xcf, 0xc8, 0xdd, 0xda, 0xd3, 0xd4, 0x69, 0x6e, 0x67, 0x60, 0x75, 0x72, 0x7b, 0x7c, 0x51, 0x56, 0x5f, 0x58, 0x4d, 0x4a, 0x43, 0x44, 0x19, 0x1e, 0x17, 0x10, 0x05, 0x02, 0x0b, 0x0c, 0x21, 0x26, 0x2f, 0x28, 0x3d, 0x3a, 0x33, 0x34, 0x4e, 0x49, 0x40, 0x47, 0x52, 0x55, 0x5c, 0x5b, 0x76, 0x71, 0x78, 0x7f, 0x6a, 0x6d, 0x64, 0x63, 0x3e, 0x39, 0x30, 0x37, 0x22, 0x25, 0x2c, 0x2b, 0x06, 0x01, 0x08, 0x0f, 0x1a, 0x1d, 0x14, 0x13, 0xae, 0xa9, 0xa0, 0xa7, 0xb2, 0xb5, 0xbc, 0xbb, 0x96, 0x91, 0x98, 0x9f, 0x8a, 0x8d, 0x84, 0x83, 0xde, 0xd9, 0xd0, 0xd7, 0xc2, 0xc5, 0xcc, 0xcb, 0xe6, 0xe1, 0xe8, 0xef, 0xfa, 0xfd, 0xf4, 0xf3, ]; let crc = new Uint8Array(1); crc = 0; for (let i = 0; i < buffer.length; i++) { crc = CHECKSUM_TABLE[(crc ^ (buffer[i] & 0xff)) & 0xff]; } console.log("crc:", crc); return crc & 0xff; },
五、如何接收数据？
微信也提供了api。
六、如何拼包？
为什么要拼包，你传给硬件都分包了，他传给你，也会被分包，所有你需要把这些数据包拼接起来，再处理相关业务逻辑。
最后：本文只是为了给各位打开思路，了解前端和硬件如何通信的大概过程，等你们真正遇到了，希望这篇文章能对你们有帮助，在企业中，还会在协议中加入校验和加密，并不是本文这样简单哦，而且这块处理数据特别麻烦。
