微信小程序--Ble蓝牙

有一段时间没有。没有写关于小程序的文章了。3月28日,微信的api又一次新的更新。期待已久的蓝牙api更新。就开始撸一番。

源码地址

1.简述

蓝牙适配器接口是基础库版本 1.1.0 开始支持。

iOS 微信客户端 6.5.6 版本开始支持,Android 客户端暂不支持

蓝牙总共增加了18个api接口。

2.Api分类

搜索类

连接类

通信类

3.API的具体使用

详细见官网:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/bluetooth.html#wxgetconnectedbluethoothdevicesobject

4. 案例实现

4.1 搜索蓝牙设备

/**
 * 搜索设备界面
 */
Page({
 data: {
 logs: [],
 list:[],
 },
 onLoad: function () {
 console.log('onLoad')
var that = this;
// const SDKVersion = wx.getSystemInfoSync().SDKVersion || '1.0.0'
// const [MAJOR, MINOR, PATCH] = SDKVersion.split('.').map(Number)
// console.log(SDKVersion);
// console.log(MAJOR);
// console.log(MINOR);
// console.log(PATCH);

// const canIUse = apiName => {
// if (apiName === 'showModal.cancel') {
//  return MAJOR >= 1 && MINOR >= 1
// }
// return true
// }

// wx.showModal({
// success: function(res) {
//  if (canIUse('showModal.cancel')) {
//  console.log(res.cancel)
//  }
// }
// })
  //获取适配器
  wx.openBluetoothAdapter({
  success: function(res){
  // success
  console.log("-----success----------");
   console.log(res);
   //开始搜索
  wx.startBluetoothDevicesDiscovery({
 services: [],
 success: function(res){
 // success
  console.log("-----startBluetoothDevicesDiscovery--success----------");
  console.log(res);
 },
 fail: function(res) {
 // fail
  console.log(res);
 },
 complete: function(res) {
 // complete
  console.log(res);
 }
})

  },
  fail: function(res) {
   console.log("-----fail----------");
  // fail
   console.log(res);
  },
  complete: function(res) {
  // complete
   console.log("-----complete----------");
   console.log(res);
  }
 })

  wx.getBluetoothDevices({
  success: function(res){
   // success
   //{devices: Array[11], errMsg: "getBluetoothDevices:ok"}
   console.log("getBluetoothDevices");
   console.log(res);
   that.setData({
   list:res.devices
   });
   console.log(that.data.list);
  },
  fail: function(res) {
   // fail
  },
  complete: function(res) {
   // complete
  }
  })

 },
 onShow:function(){

 },
 //点击事件处理
 bindViewTap: function(e) {
  console.log(e.currentTarget.dataset.title);
  console.log(e.currentTarget.dataset.name);
  console.log(e.currentTarget.dataset.advertisData);

 var title = e.currentTarget.dataset.title;
 var name = e.currentTarget.dataset.name;
  wx.redirectTo({
  url: '../conn/conn?deviceId='+title+'&name='+name,
  success: function(res){
   // success
  },
  fail: function(res) {
   // fail
  },
  complete: function(res) {
   // complete
  }
  })
 },
})

4.2连接 获取数据

/**
 * 连接设备。获取数据
 */
Page({
 data: {
  motto: 'Hello World',
  userInfo: {},
  deviceId: '',
  name: '',
  serviceId: '',
  services: [],
  cd20: '',
  cd01: '',
  cd02: '',
  cd03: '',
  cd04: '',
  characteristics20: null,
  characteristics01: null,
  characteristics02: null,
  characteristics03: null,
  characteristics04: null,
  result,

 },
 onLoad: function (opt) {
  var that = this;
  console.log("onLoad");
  console.log('deviceId=' + opt.deviceId);
  console.log('name=' + opt.name);
  that.setData({ deviceId: opt.deviceId });
  /**
   * 监听设备的连接状态
   */
  wx.onBLEConnectionStateChanged(function (res) {
   console.log(`device ${res.deviceId} state has changed, connected: ${res.connected}`)
  })
  /**
   * 连接设备
   */
  wx.createBLEConnection({
   deviceId: that.data.deviceId,
   success: function (res) {
    // success
    console.log(res);
    /**
     * 连接成功,后开始获取设备的服务列表
     */
    wx.getBLEDeviceServices({
     // 这里的 deviceId 需要在上面的 getBluetoothDevices中获取
     deviceId: that.data.deviceId,
     success: function (res) {
      console.log('device services:', res.services)
      that.setData({ services: res.services });
      console.log('device services:', that.data.services[1].uuid);
      that.setData({ serviceId: that.data.services[1].uuid });
      console.log('--------------------------------------');
      console.log('device设备的id:', that.data.deviceId);
      console.log('device设备的服务id:', that.data.serviceId);
      /**
       * 延迟3秒,根据服务获取特征
       */
      setTimeout(function () {
       wx.getBLEDeviceCharacteristics({
        // 这里的 deviceId 需要在上面的 getBluetoothDevices
        deviceId: that.data.deviceId,
        // 这里的 serviceId 需要在上面的 getBLEDeviceServices 接口中获取
        serviceId: that.data.serviceId,
        success: function (res) {
         console.log('000000000000' + that.data.serviceId);
         console.log('device getBLEDeviceCharacteristics:', res.characteristics)
         for (var i = 0; i < 5; i++) {
          if (res.characteristics[i].uuid.indexOf("cd20") != -1) {
           that.setData({
            cd20: res.characteristics[i].uuid,
            characteristics20: res.characteristics[i]
           });
          }
          if (res.characteristics[i].uuid.indexOf("cd01") != -1) {
           that.setData({
            cd01: res.characteristics[i].uuid,
            characteristics01: res.characteristics[i]
           });
          }
          if (res.characteristics[i].uuid.indexOf("cd02") != -1) {
           that.setData({
            cd02: res.characteristics[i].uuid,
            characteristics02: res.characteristics[i]
           });
          } if (res.characteristics[i].uuid.indexOf("cd03") != -1) {
           that.setData({
            cd03: res.characteristics[i].uuid,
            characteristics03: res.characteristics[i]
           });
          }
          if (res.characteristics[i].uuid.indexOf("cd04") != -1) {
           that.setData({
            cd04: res.characteristics[i].uuid,
            characteristics04: res.characteristics[i]
           });
          }
         }
         console.log('cd01= ' + that.data.cd01 + 'cd02= ' + that.data.cd02 + 'cd03= ' + that.data.cd03 + 'cd04= ' + that.data.cd04 + 'cd20= ' + that.data.cd20);
         /**
          * 回调获取 设备发过来的数据
          */
         wx.onBLECharacteristicValueChange(function (characteristic) {
          console.log('characteristic value comed:', characteristic.value)
          //{value: ArrayBuffer, deviceId: "D8:00:D2:4F:24:17", serviceId: "ba11f08c-5f14-0b0d-1080-007cbe238851-0x600000460240", characteristicId: "0000cd04-0000-1000-8000-00805f9b34fb-0x60800069fb80"}
          /**
           * 监听cd04cd04中的结果
           */
          if (characteristic.characteristicId.indexOf("cd01") != -1) {
           const result = characteristic.value;
           const hex = that.buf2hex(result);
           console.log(hex);
          }
          if (characteristic.characteristicId.indexOf("cd04") != -1) {
           const result = characteristic.value;
           const hex = that.buf2hex(result);
           console.log(hex);
           that.setData({ result: hex });
          }

         })
         /**
          * 顺序开发设备特征notifiy
          */
         wx.notifyBLECharacteristicValueChanged({
          deviceId: that.data.deviceId,
          serviceId: that.data.serviceId,
          characteristicId: that.data.cd01,
          state: true,
          success: function (res) {
           // success
           console.log('notifyBLECharacteristicValueChanged success', res);
          },
          fail: function (res) {
           // fail
          },
          complete: function (res) {
           // complete
          }
         })
         wx.notifyBLECharacteristicValueChanged({
          deviceId: that.data.deviceId,
          serviceId: that.data.serviceId,
          characteristicId: that.data.cd02,
          state: true,
          success: function (res) {
           // success
           console.log('notifyBLECharacteristicValueChanged success', res);
          },
          fail: function (res) {
           // fail
          },
          complete: function (res) {
           // complete
          }
         })
         wx.notifyBLECharacteristicValueChanged({
          deviceId: that.data.deviceId,
          serviceId: that.data.serviceId,
          characteristicId: that.data.cd03,
          state: true,
          success: function (res) {
           // success
           console.log('notifyBLECharacteristicValueChanged success', res);
          },
          fail: function (res) {
           // fail
          },
          complete: function (res) {
           // complete
          }
         })

         wx.notifyBLECharacteristicValueChanged({
          // 启用 notify 功能
          // 这里的 deviceId 需要在上面的 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获取
          deviceId: that.data.deviceId,
          serviceId: that.data.serviceId,
          characteristicId: that.data.cd04,
          state: true,
          success: function (res) {
           console.log('notifyBLECharacteristicValueChanged success', res)
          }
         })

        }, fail: function (res) {
         console.log(res);
        }
       })
      }
       , 1500);
     }
    })
   },
   fail: function (res) {
    // fail
   },
   complete: function (res) {
    // complete
   }
  })
 },

 /**
  * 发送 数据到设备中
  */
 bindViewTap: function () {
  var that = this;
  var hex = 'AA5504B10000B5'
  var typedArray = new Uint8Array(hex.match(/[\da-f]{2}/gi).map(function (h) {
   return parseInt(h, 16)
  }))
  console.log(typedArray)
  console.log([0xAA, 0x55, 0x04, 0xB1, 0x00, 0x00, 0xB5])
  var buffer1 = typedArray.buffer
  console.log(buffer1)
  wx.writeBLECharacteristicValue({
   deviceId: that.data.deviceId,
   serviceId: that.data.serviceId,
   characteristicId: that.data.cd20,
   value: buffer1,
   success: function (res) {
    // success
    console.log("success 指令发送成功");
    console.log(res);
   },
   fail: function (res) {
    // fail
    console.log(res);
   },
   complete: function (res) {
    // complete
   }
  })

 },
 /**
  * ArrayBuffer 转换为 Hex
  */
 buf2hex: function (buffer) { // buffer is an ArrayBuffer
  return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
 }
})

5.效果展示

发送校验指令。获取结果

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

时间: 2017-03-29

微信小程序之蓝牙的链接

微信小程序之蓝牙的链接 微信小程序蓝牙连接2.0说明: 1.本版本区分了ANDROID和IOS系统下蓝牙连接的不同方式. 2.兼容了更多情况下的链接包括: (1)未开启设备蓝牙,当监听到开启了蓝牙后自动开始连接. (2)初始化蓝牙失败后每3000ms自动重新初始化蓝牙适配器. (3)安卓端开启蓝牙适配器扫描失败,每3000ms自动重新开启. (4)IOS端获取已连接蓝牙设备为空,每3000ms自动重新获取. (5)安卓端蓝牙开始链接后中断扫描,连接失败了,重新开始扫描. (6)IOS端开始连接设

微信小程序 蓝牙的实现实例代码

微信小程序 蓝牙的实现实例代码 1.简述 蓝牙适配器接口是基础库版本 1.1.0 开始支持. iOS 微信客户端 6.5.6 版本开始支持,Android 客户端暂不支持 蓝牙总共增加了18个api接口. 2.Api分类 搜索类 连接类 通信类 3.API的具体使用 详细见官网: https://mp.weixin.qq.com/debug/wxadoc/dev/api/bluetooth.html#wxgetconnectedbluethoothdevicesobject 4. 案例实现 4.

微信小程序上传图片到服务器实例代码

上传图片到服务器: 1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来. -wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> <

微信小程序新闻网站详情页实例代码

准备工作: 1.在微信公众号平台,申请小程序账号,获取appid 2.下载并安装微信开发者工具 3.做不同分辨率设备的自适应:单位使用rpx IPhone6下 1px=1rpx=0.5pt 使用rpx,小程序会自动在不同分辨率下进行转换 首先是项目的入口页面 welcome.wxml <view class="container"> <image class="avatar" src="/images/avatar/1.png"

微信小程序图表插件(wx-charts)实例代码

微信小程序图表工具,charts for WeChat small app 基于canvas绘制,体积小巧 支持图表类型 饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 area 代码分析 Here 参数说明 opts Object opts.canvasId String required 微信小程序canvas-id opts.width Number required canvas宽度,单位为px opts.height Number required can

微信小程序 下拉列表的实现实例代码

微信小程序 下拉列表 wxml代码: <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png" class="personal_image {{selectArea ? 'r

微信小程序 仿猫眼实现实例代码

微信小程序仿猫眼 实现效果图: movie.js Page({ data: { movies:null, scrollTop : 0, scrollHeight:0 }, onLoad: function (options) { // 生命周期函数--监听页面加载 // 这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值 var that = this; wx.getSystemInfo({ succ

微信小程序自定义导航栏实例代码

背景 在做快狗打车小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更丰富的title效果 左上角的事件无法监听.定制 路由导航单一,只能够返回上一页,深层级页面的返回不够友好 我们希望的是:在各个机型页面上title一致性 & 个性化展示.取得左上角点击事件控制权及深层级页面的一键返回 实现 step1 自定义 第一步 取得导航栏的控制权 小程序支持自定义导

微信小程序蓝牙连接小票打印机实例代码详解

1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapter({ success: function(res) { wx.getBluetoothAdapterState({ success: function(res) { if (res.available) { if (res.discovering) { wx.stopBluetoothDevic

微信小程序左滑删除实现代码实例

这篇文章主要介绍了微信小程序左滑删除实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" wx:for="{{list}}" wx:key> <view class="co

微信小程序左右滚动公告栏效果代码实例

这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text class="tongzhi-text">{{notice}}</text> </view> &l