项目前期准备（1）——基于微信小程序与STM32知识准备阶段

前言

正所谓做一个大项目一般都需要软硬件的知识结合，当然了这也不一定，有些项目只是需要做一个系统，APP开发等这些。不过对于我想一般人都会遇到这种问题——用什么方法来解决用软件来实现控制硬件，实施数据传输。一般有人都会选择使用APP来控制硬件方面的研究。不过今天的话我就先抛弃APP，先来讲一下根据我网上查找了好久找到的另一种方法 —— 一种基于微信小程序和单片机BLE透传的简要解决方法。

因为根据微信小程序发展的形势来说还是挺火的，再者目前关于微信小程序在控制硬件方面的研究还非常少, 所以说这个方面研究还是挺不错的。那么何为BLE透传？

BLE透传

BLE透传即低功耗蓝牙透明传输, 单片机发送数据给低功耗蓝牙时, 不需要其他协议, 低功耗蓝牙就可以将数据发送给其他蓝牙接收设备, 实现单片机与微信小程序之间的通信，使用方便。

BLE透传模块选择

目前的话，我觉得可以推荐一下HC-05/06蓝牙模块。因为采用HC-05/06蓝牙模块进行数据透传, 具有成本低、体积小、功耗低和收发灵敏度高等优点。使用时，BLE透传模块RXD引脚与单片机TXD引脚连接, TXD引脚与单片机RXD引脚连接, 实现系统的通信功能。下面是HC-05模块与单片机配对方式。

**具体使用方法也可以在淘宝搜索HC-05模块，有些商家也提供了资料。
资料下载
提取码：9g8a

软件部分

下面就简单地说一下微信小程序与单片机的通信原理：
微信小程序内置了18个BLEBLE蓝牙API接口, 通调用BLE蓝牙API接口成功连接蓝牙设备后, 可以通过Bluetoothsocket实现微信小程序与BLE蓝牙的数据接收和发送。
在设计过程中中, 会使用到以下的接口:
1.openBluetoothAdapt 用于开启和初始化蓝牙;
2.getBluetoothAdaptState 用于检查蓝牙是否开启;
3.startBluetoothDevicesDiscover 用于开始设备搜索并当发现一个设备后会触发 4.onBlueDeviceFound 事件;
5. creatBLEConnection 用于搜索到设备后连接设备;
6.getBLEDeviceService 用于连接成功后根据目标服务ID找到指定的服务ID, 每一个服务都包含一组特征值用来描述服务特性, 如是否可读, 是否可写, 是否开启notify等,。
7. 利用 getBLEDeviceCharacteristics 获取该特征值值。
8.最终 onBLECharacteristicValueChange 用于监听数据变化[4]。

微信小程序BLE蓝牙API调用方法框图如图：

注意

iOS 微信客户端 6.5.6 版本开始支持，Android 6.5.7 版本开始支持
蓝牙适配器模块生效周期为调用 wx.openBluetoothAdapter 至调用 wx.closeBluetoothAdapter 或小程序被销毁为止。
在小程序蓝牙适配器模块生效期间，开发者才能够正常调用蓝牙相关的小程序 API，并收到蓝牙模块相关的事件回调。
注意
由于系统限制，Android 上获取到的 deviceId 为设备 MAC 地址，iOS 上则为设备 uuid。因此 deviceId 不能硬编码到代码中。
目前不支持在开发者工具上进行蓝牙功能的调试，需要使用真机才能正常调用小程序蓝牙接口。
低功耗蓝牙（BLE）注意事项
iOS 上对特征值的 read、write、notify操作，由于系统需要获取特征值实例，传入的 serviceId 与 characteristicId 必须由 wx.getBLEDeviceServices 与 wx.getBLEDeviceCharacteristics 中获取到后才能使用。建议双平台统一在建立连接后先执行 wx.getBLEDeviceServices 与 wx.getBLEDeviceCharacteristics 后再进行与蓝牙设备的数据交互。

方案结果

目前，已经满足于项目上的功能实现。具体美化还需要继续操作写代码。因为本人已经从事于算法学习，因此呢，我就没有再次更新了。效果如下：
登录界面如下：

蓝牙扫描连接界面：

功能选择界面如下：

二、手把手教制作蓝牙微信小程序

时过很久，项目软件界面、功能已经更新，所以这次我想跟大家一起制作一下无后端下的蓝牙微信小程序（需要后端版本处理的请看这篇文章微信小程序websocket服务器）
1、小程序登录界面设计
因为考虑到功能的实现上没有后端云服务处理，因此登录界面里只绑定了一个页面跳转事件，无账号、密码登录设计。当然了你也可以自己在.js界面设置添加账号密码功能设计。下面开始：
welcome.wxml:

<!--页面根标签-->
<view class="content">
	<!--pics文件夹下的background.jpg文件-->
     <image class='background' src="../image/wx_backgroud.jpg" mode="aspectFill"></image>
     <button class="login" bindtap="login">开启</button>
	<!--页面其它部分-->
</view>

这里要注意一点的是：wxml里面加载图片作为背景图片时，使用image组件，图片路径要放在跟welcome.wxml跟目录下，要不然会失效。
welcome.wxcc:

page{
  height:100%;
  width: 100%;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
}
.login{
  position: absolute;
  top: 400px;
  left: 180rpx;
  width: 50%;
  color: white;
  background-color: green;
  border-radius: 100rpx;
  font-size: 18px;
}

welcome.js: 只需要添加这个函数就行了

  login:function(){
    // 关闭当前页面，跳转到应用内的某个页面。

    wx.redirectTo({
       url: '../choice/choice'
      })
  }

其中，wx.redirectTo为表示跳转页面不保存当前页面，也就是说不能直接返回原来的页面。
效果如图所示：

2、功能界面设计
因为设计项目的需要，这里的功能采用了项目里门禁的功能，大家可以按照自己的需求修改自己所需的就行了。
一共有四个功能，分别为模式选择、直接开锁、定时开锁和查询记录。
其中，用户选择功能界面设计代码如下：
<choice.wxml>

<!--pages/choice/choice.wxml-->
<view class="content"bindtap="color">
	  <button class='btn1' bindtap="clocklogin"><image class='img' src="../image/clock.jpg"mode='widthFix' ></image></button>
		<button class='btn2' bindtap="found"><image class='img' src="../image/found.jpg"mode='widthFix' ></image></button>
		<button class='btn3'bindtap='logic_right'><image class='img' src="../image/suot.jpg"mode='widthFix' ></image></button>
		<button class='btn4'bindtap='modes_change'><image class='img' src="../image/models.jpg"mode='widthFix' ></image></button>
		 <view class='countDown'><text style='color:red'>定时开锁</text></view>
		 <view class='countDown2'><text style='color:red'>开锁</text></view>
		 <view class='countDown3'><text style='color:red'>模式选择</text></view>
		 <view class='countDown4'><text style='color:red'>查询</text></view>
	<image class='background2' src="../image/bg1.jpg" mode="aspectFill"></image>
</view>

<choice.wxss>

/* pages/choice/choice.wxss */
page{
  height:100%;
  width: 100%;
}

.img{
  height: 200rpx;
  width: 200rpx;
}    
.btn1{
  position: absolute;
  top: 100px;
  left:50rpx ;
  height: 200rpx;
  width: 300rpx;
  padding: 0;
  border: none;
  border-radius: 20rpx;
  background-color: skyblue;
}
  
.btn2{
  position: absolute;
  top: 280px;
  right:50rpx ;
  height: 200rpx;
  width: 300rpx;
  padding: 0;
  border: none;
  border-radius: 20rpx;
  background-color: lightgreen;
}
.btn3{
  position: absolute;
  top: 100px;
  right:50rpx ;
  height: 200rpx;
  width: 300rpx;
  padding: 0;
  border: none;
  border-radius: 20rpx;
  background-color: lightgoldenrodyellow;
}

.btn4{
  position: absolute;
  top: 280px;
  left: 50rpx;
  height: 200rpx;
  width: 300rpx;
  padding: 0;
  border: none;
  border-radius: 20rpx;
  background-color: slategrey;
}

.countDown{
  position: absolute;
  top: 60px;
  left: 100rpx;
  height: 100rpx;
  width: 200rpx;
  padding: 0;
  border: none;
  font-size: 50rpx;

}
.countDown2{
  position: absolute;
  top: 60px;
  right: 100rpx;
  height: 100rpx;
  width: 150rpx;
  padding: 0;
  border: none;
  font-size: 50rpx;
}

.countDown3{
  position: absolute;
  top: 240px;
  left: 100rpx;
  height: 100rpx;
  width: 300rpx;
  padding: 0;
  border: none;
  font-size: 50rpx;

}
.countDown4{
  position: absolute;
  top: 240px;
  right: 100rpx;
  height: 100rpx;
  width: 150rpx;
  padding: 0;
  border: none;
  font-size: 50rpx;
}
.background2 {
  position: absolute;
  top: 42px;
  left: 20rpx;
  width: 95%;
  height: 75%;
  position:fixed; 
  background-size:80% 80%;
  z-index: -1;
}

3、蓝牙绑定、发送、接受功能设计
为了简化、美观，本次设计未采用查询附近蓝牙、按钮点击触发事件连接蓝牙，而是加载功能界面后自动连接所指蓝牙模块。后续会讲解怎么样查看自己买的蓝牙的ID等信息，当然本程序里也给出了搜索蓝牙功能的程序。
4、STM32蓝牙通信测试
为了保证微信小程序蓝牙通讯是否成功，首先要试验32是否可以进行蓝牙通讯。因此，我们需要下载一个Android环境蓝牙调试助手软件测试32的蓝牙通信，也包括了通信的协议。
5、小程序与32通信测试
若第四步骤实现成功，则开始测试。

结束导语

**因为项目中我还负责了神经网络的人脸识别，所以这里我就简单地描述了实现方案和结果。最后还推荐大家一个蓝牙模块调试软件：Android的APP——BLE调试

蓝牙模块本人使用的是点击这里

emm，对于这个方案的话，你们要是还是不太懂BLE数据传送这个的话，我可以推荐你们去看一下这个：

手把手教你开发BLE数据透传应用程序

当然了，如果大家对微信小程序开发不太懂得话，可以点击下面链接了解了解一下：

**微信小程序开发指南教程**

如果有什么问题的话，可以在评论区发表意见，大家共同学习一下。