前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • Canvas 绘制动画时钟
    • Canvas 绘制粒子动画背景
    • DOM编程之API学习总结篇
    • JS 中的 call、apply、bind 方法
    • JS 中的事件绑定、事件监听、事件委托
    • JS常用的内置函数整理
    • JS继承的几种方法总结
    • JS计算字符串所占字节数
    • JavaScript-DOM事件
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript原生数组及高阶函数
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript启示录阅读笔录
    • JavaScript对象
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript常用的代码片段
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript继承的几种方式
    • JavaScript词法分析和作用域闭包
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript常用方法函数收集
    • Javascript数组详解
    • OOP之原型与原型链
    • OOP之类与对象
    • OOP之面向对象
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • arguments详解
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript 下常用的字符串操作
    • javascript常用积累
    • javascript笔记总结篇
    • parsetInt parsetFloat与eval isNaN用法
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS与jQuery操作DOM对比
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 梳理常用的正则表达式
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析JSON stringify
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 浅谈闭包
    • 深拷贝 vs 浅拷贝
    • 编写可维护的JavaScript
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 一、背景介绍

蓝牙是爱立信公司创立的一种无线技术标准,为短距离的硬件设备提供低成本的通信规范。蓝牙规范由蓝牙技术联盟(Bluetooth Special Interest Group,简称SIG)管理,在计算机,手机,传真机,耳机,汽车,家用电器等等很多场景广泛使用。蓝牙具有以下一些特点

  • 免费使用:使用的工作频段在2.4GHz的工科医(ISM)频段,无需申请许可证。
  • 功耗低:BLE4.0包含了一个低功耗标准(Bluetooth Low Energy),可以让蓝牙的功耗显著降低
  • 安全性高:蓝牙规范提供了一套安全加密机制和授权机制,可以有效防范数据被窃取
  • 传输率高:目前最新BLE4.0版本,理论传输速率可达3Mbit/s(实际肯定达不到),理论覆盖范围可达100米

# 二、小程序蓝牙介绍

# 2.1 介绍

小程序API提供了一套蓝牙操作接口,所以作为我们前端开发人员可以更加方便的进行蓝牙设备开发,而无需了解安卓和IOS的各种蓝牙底层概念。小程序的蓝牙操作大多都是通过异步调用来处理的,这里面就存在着一些坑,后面会详细介绍。在使用小程序蓝牙API之前有几个概念或者说术语需要预先了解

  • 蓝牙终端:我们常说的硬件设备,包括手机,电脑等等。
  • UUID:是由子母和数字组成的40个字符串的序号,根据硬件设备有关联的唯一ID
  • 设备地址:每个蓝牙设备都有一个设备地址deviceId,但是安卓和IOS差别很大,安卓下设备地址就是mac地址,但是IOS无法获取mac地址,所以设备地址是针对本机范围有效的UUID,所以这里需要注意
  • 设备服务列表:每个设备都存在一些服务列表,可以跟不同的设备进行通信,服务有一个serviceId来维护,每个服务包含了一组特征值
  • 服务特征值:包含一个单独的value值和0 –n个用来描述characteristic 值(value)的descriptors。一个characteristics可以被认为是一种类型的,类似于一个类
  • ArrayBuffer:小程序中对蓝牙数据的传递是使用ArrayBuffer的二进制类型来的,所以在我们的使用过程中需要进行转码

# 2.2 API总览

小程序对蓝牙设备的操作有18个API

API名称 说明
openBluetoothAdapter 初始化蓝牙适配器,在此可用判断蓝牙是否可用
closeBluetoothAdapter 关闭蓝牙连接,释放资源
getBluetoothAdapterState 获取蓝牙适配器状态,如果蓝牙未开或不可用,这里可用检测到
onBluetoothAdapterStateChange 蓝牙适配器状态发生变化事件,这里可用监控蓝牙的关闭和打开动作
startBluetoothDevicesDiscovery 开始搜索设备,蓝牙初始化成功后就可以搜索设备
stopBluetoothDevicesDiscovery 当找到目标设备以后需要停止搜索,因为搜索设备是比较消耗资源的操作
getBluetoothDevices 获取已经搜索到的设备列表
onBluetoothDeviceFound 当搜索到一个设备时的事件,在此可用过滤目标设备
getConnectedBluetoothDevices 获取已连接的设备
createBLEConnection 创建BLE连接
closeBLEConnection 关闭BLE连接
getBLEDeviceServices 获取设备的服务列表,每个蓝牙设备都有一些服务
getBLEDeviceCharacteristics 获取蓝牙设备某个服务的特征值列表
readBLECharacteristicValue 读取低功耗蓝牙设备的特征值的二进制数据值
writeBLECharacteristicValue 向蓝牙设备写入数据
notifyBLECharacteristicValueChange 开启蓝牙设备notify提醒功能,只有开启这个功能才能接受到蓝牙推送的数据
onBLEConnectionStateChange 监听蓝牙设备错误事件,包括异常断开等等
onBLECharacteristicValueChange 监听蓝牙推送的数据,也就是notify数据

# 2.3 主要流程

蓝牙通信的一个正常流程是下面的图示

  1. 开启蓝牙:调用openBluetoothAdapter来开启和初始化蓝牙,这个时候可以根据状态判断用户设备是否支持蓝牙
  2. 检查蓝牙状态:调用getBluetoothAdapterState来检查蓝牙是否开启,如果没有开启可以在这里提醒用户开启蓝牙,并且能在开启后自动启动下面的步骤

这里有一个坑:IOS里面蓝牙状态变化以后不能马上开始搜索,否则会搜索不到设备,必须要等待2秒以上。

function connect(){
  wx.openBluetoothAdapter({
    success: function (res) {
    },
    fail(res){
    },
    complete(res){
      wx.onBluetoothAdapterStateChange(function(res) {
        if(res.available){
          setTimeout(function(){
            connect();
          },2000);
        }
      })
   //开始搜索  
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • Canvas 绘制动画时钟
    • Canvas 绘制粒子动画背景
    • DOM编程之API学习总结篇
    • JS 中的 call、apply、bind 方法
    • JS 中的事件绑定、事件监听、事件委托
    • JS常用的内置函数整理
    • JS继承的几种方法总结
    • JS计算字符串所占字节数
    • JavaScript-DOM事件
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript原生数组及高阶函数
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript启示录阅读笔录
    • JavaScript对象
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript常用的代码片段
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript继承的几种方式
    • JavaScript词法分析和作用域闭包
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript常用方法函数收集
    • Javascript数组详解
    • OOP之原型与原型链
    • OOP之类与对象
    • OOP之面向对象
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • arguments详解
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript 下常用的字符串操作
    • javascript常用积累
    • javascript笔记总结篇
    • parsetInt parsetFloat与eval isNaN用法
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS与jQuery操作DOM对比
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 梳理常用的正则表达式
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析JSON stringify
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 浅谈闭包
    • 深拷贝 vs 浅拷贝
    • 编写可维护的JavaScript
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合