To test withW801Bluetooth communication,I found the Bluetooth routine of the WeChat applet to read,作为一个没有 JavaScript基础的人,Reading the source code of the applet is confusing.Then saw a freshman“前端小刘不怕牛牛”Write a small program introduction article,清晰易懂.微 信小程序（黑马）专栏
Now make a note to record it.
网友cwlgoodman作品 微信小程序源码这个仓库有4个工程,我们用的是第一个：

1.bluetooth_demo
2.bluetooth_lock
3.glucometer
4.wechat_api

Modified source code.
This article can be read in conjunction with another：《From the perspective of WeChat appletW801Bluetooth communication source code(indicate方式)》

1.Import the first interface of the applet（Development tool interface）

It is assumed that the reader has already installed it《微信开发者工具》,And will import the existing project instance.
直接上图：
The resource manager on the left is the project file structure,This project has2个界面,One is the search interface;The second is the device interface.The search interface contains a list of searched device information;After clicking Device Information,to enter the device interface.操作流程如下图：

小程序控制LED视频：

2.Code analysis of the search interface

Every page is inpages中以单独的子文件夹存在,A file in a folder consists of four parts

js类型文件,构建页面的逻辑
wxml类型文件,类似html文件,设计页面结构
json类型文件,设置该页面的配置
wxss类型文件,类型css文件,设置页面的样式

Here we only focus on two files：《search.wxml》《search.js》.
《search.wxml》:

<view class="container">
  <scroll-view scroll-y style="width:690rpx;height:{
        {
        list_height}}rpx">
    <block wx:for="{
     {devicesList}}" wx:key="deviceId">
<!-- Contents of the searched device list,Click a list item,绑定函数 “Connect” -->
      <view class="list-item" id="{
     {item.deviceId}}" bindtap="Connect">
        <view style="display:flex;flex-direction:column;width:80%">
          <text style="font-size:medium;word-break:break-all">设备名称: {
   {item.name}}</text>
          <text style="font-size:x-small;color:gray;word-break:break-all">设备ID: {
   {item.deviceId}}</text>
          <text style="font-size:x-small;color:gray;word-break:break-all">信号强度RSSI: {
   {item.RSSI}}</text>
        </view>
        <image style="width:36px;height:36px" mode="aspectFit" src="/images/bluetooth.png"></image>
      </view>
    </block>
  </scroll-view>
  <!-- 按键 绑定函数 “Search”,根据变量 searching value displays different content -->
  <button type="primary" class="button" loading="{
     {searching}}" bindtap="Search">{
   {searching?"搜索中...":"搜索蓝牙设备"}}</button>
</view>

《search.js》 内容过多,Do not release source code,Just look at the list of functions：

1. 打开小程序,首先加载 搜索页面,Call back at this time onLoad函数.
2. 点击 搜索蓝牙设备按键,调用search函数.
3. Bluetooth devices have been searched,At this point, the interface will display the relevant information of the device,点击设备信息,将调用Connect函数,开始连接设备;Only after connecting to bluetooth successfully,to navigate to设备页面.

3.Device page code analysis

The device page has the same file structure as the search page,由4个文件组成,Here we also only focus on two files：《device.wxml》《device.js》.
《device.wxml》：(The corresponding page effect is shown in the second picture-Right side of the operation flowchart)

<view class="container">
  <text style="font-size:medium;word-break:break-all">设备名称：{
   {name}}</text>
  <text style="font-size:x-small;color:gray;word-break:break-all">设备ID：{
   {connectedDeviceId}}</text>
  <text style="font-size:x-small;color:gray">状态：{
   {connected?"已连接":"已断开"}}</text>
  <text style="font-size:medium;margin-top:10px">发送内容：</text>
  <input class="input" value="{
     {inputText}}" bindinput="bindInput"/>
  <text style="font-size:medium;margin-top:10px">接收内容：</text>
  <input class="input" disabled value="{
     {receiveText}}"/>
  <button type="primary" class="button" bindtap="Send">发送</button>
<!-- 下面6A key is added by me,用于控制3个LED的亮灭 -->
<button type="primary" style="width: 193rpx; height: 108rpx; display: block; box-sizing: border-box; left: -249rpx; top: 19rpx; position: relative; color: crimson" class="button" bindtap="onLed1on">Led1on</button>
<button type="primary" style="width: 193rpx; height: 108rpx; display: block; box-sizing: border-box; left: -249rpx; top: 54rpx; position: relative" class="button" bindtap="onLed1off">Led1off</button>
<button type="primary" style="width: 193rpx; height: 108rpx; display: block; box-sizing: border-box; left: -12rpx; top: -199rpx; position: relative; color: crimson" class="button" bindtap="onLed2on">Led2on</button>
<button type="primary" style="width: 193rpx; height: 108rpx; display: block; box-sizing: border-box; left: -12rpx; top: -162rpx; position: relative" class="button" bindtap="onLed2off">Led2off</button>
<button type="primary" style="width: 193rpx; height: 108rpx; display: block; box-sizing: border-box; left: 235rpx; top: -415rpx; position: relative; color: crimson" class="button" bindtap="onLed3on">Led3on</button>
<button type="primary" style="width: 193rpx; height: 108rpx; display: block; box-sizing: border-box; left: 235rpx; top: -378rpx; position: relative" class="button" bindtap="onLed3off">Led3off</button>
</view>

《device.js》 函数列表：

The prerequisite for entering the device interface is that the device is successfully connected.从搜索界面进入设备界面,首先调用onLoead函数.

1. onLoad函数,To query eigenvalues（Characteristic）的属性,If yes has write（write）的属性,Then writing a binary value to this eigenvalue is sent to W801;if instructed（indicate）的属性,Then listen to the value change of this feature value and read itW801发过来的信息.
2. 读取W801The data sent over is through monitoringindicate自动完成.
3. The keys are bound to the corresponding functions respectively.

4.蓝牙API使用示意图