课程详情

首页/课程/北京石油化工学院课程/串口调试工具

串口调试工具

教学目标及方法

调试设备，收发数据

主要内容

拷贝【抬起唤醒】课程的项目到另一个位置，在小程序开发工具项目->查看所有项目中引用新项目。选择项目目录及更改项目名称。

修改js代码

页面不太一样，我们先删了wxml和wxss文件代码，js逻辑代码保留生命周期函数。

import bleComm from '../utils/bleComm.js';
import common from '../utils/common.js';

Page({

  onUnload: function () {
    bleComm.disConnect();
  },
  onHide: function () {
    bleComm.disConnect();
  },

  onLoad: function () {
    // wx.showLoading({
    //   title: '靠近连接',
    //   mask: true
    // })
    // bleComm.connectDevice().then(res => {
    //   wx.showToast({
    //     title: '蓝牙连接成功',
    //     icon: 'success',
    //     duration: 300
    //   })
    // });
  },
})

修改页面样式

如下界面包括背景灰色，居中大号文本，居左小号字体，一个输入框，一个显示框，一个按钮。

在wxss样式文件设置页面背景颜色。

page{
    background-color:#F0F0F0;
}

在wxss样式文件设置字体样式。

居中大号字体样式在wxss中编写。

.wx_h{
  padding-top: 10px;
  margin-left: 4px;
  font-size:19px; 
  text-align: center;
}

居左小号字体样式在wxss中编写。

.wx_title{
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 4px;
  font-size:16px; 
}

输入框样式在wxss中编写

.wx_sendtext{
  margin-left: 4px;
  margin-right: 4px;
  margin-bottom: 15px;
  font-size:14px; 
  height: 50px;
  background-color:#FFFFFF;
  color: #a050a1;
}

按钮样式在wxss中编写。

.weui-btn{
  margin-left:2px;
  margin-right:2px;
  text-align: center;
  text-decoration: none;
  background-color: #8D1CB7;
  color: #FFFFFF;
}

.other-button-hover{
 background-color: #731496; 
}

显示框样式在wxss中编写。

.wx_rectext{
  margin-left: 4px;
  margin-right: 4px;
  font-size:14px; 
  background-color:#FFFFFF;
  color: #a050a1;
}

完整WXSS代码

page{
    background-color:#F0F0F0;
}

.wx_h{
  padding-top: 10px;
  margin-left: 4px;
  font-size:19px; 
  text-align: center;
}

.wx_title{
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 4px;
  font-size:16px; 
}

.wx_sendtext{
  margin-left: 4px;
  margin-right: 4px;
  margin-bottom: 15px;
  font-size:14px; 
  height: 50px;
  background-color:#FFFFFF;
  color: #a050a1;
}

.weui-btn{
  margin-left:2px;
  margin-right:2px;
  text-align: center;
  text-decoration: none;
  background-color: #8D1CB7;
  color: #FFFFFF;
}

.other-button-hover{
 background-color: #731496; 
}

.wx_rectext{
  margin-left: 4px;
  margin-right: 4px;
  font-size:14px; 
  background-color:#FFFFFF;
  color: #a050a1;
}

修改页面内容

居中大号字体在wxml模板中编写

<view class="wx_h">
  <text>串口调试工具</text>
</view>

居左小号字体在wxml模板中编写

<view class="section wx_title">
  <text>发送数据</text>
</view>

输入框在wxml模板中编写，输入框加入默认显示字体，通过”bindinput”加入事件标签。

<view class="btn-area">
  <input class="wx_sendtext" placeholder="请输入..." bindinput="bindKeyInput" />
  <button class="weui-btn" hover-class="other-button-hover" bindtap="sendData">数据发送</button>
</view>

数据显示框需要滚动，选择可滚动视图：scroll-view。使用竖向滚动时需要给一个固定高度。

<view class="section wx_title">
  <text>接收数据</text>
</view>
<view class="btn-area">
  <view class="wx_rectext">
    <scroll-view scroll-y style="height: 350px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
      <text>{{motto}}</text>
    </scroll-view>
  </view>
</view>

scroll-y：允许纵向滚动。

bindscrolltoupper：滚动到顶部/左边，会触发 scrolltoupper 事件

bindscrolltolower：滚动到底部/右边，会触发 scrolltolower 事件

bindscroll：滚动时触发

scroll-into-view：设置哪个方向可滚动，则在哪个方向滚动到该元素

scroll-top：设置竖向滚动条位置

文本内容通过变量motto引用。

<text>{{motto}}</text>

js逻辑代码

定义变量。在全局中定义变量extraLine存储接收的所以蓝牙数据。

var extraLine = [];

在Page中定义输入框数据和当下蓝牙接收的数据。

data: {
  motto: '',
  msg: '',
},

数据存入news，通过extraLine.push()把消息推送到text文本框。

onShow: function () {
  wx.onBLECharacteristicValueChange((characteristic) => {
    var news = common.arrayBufferToString(characteristic.value);
    extraLine.push(news)
    console.log(news);
    this.setData({
      motto: extraLine.join('\n'),
      scrollTop: this.data.scrollTop + 30
    })
  })
},

获取并设置输入框数据。

bindKeyInput: function (result) {
  this.setData({
    msg: result.detail.value
  });
},

蓝牙发送输入框数据。

sendData: function () {
  bleComm.writeValue(this.data.msg);
}

完整js代码

import bleComm from '../utils/bleComm.js';
import common from '../utils/common.js';

var extraLine = [];

Page({
  data: {
    motto: '',
    msg: '',
  },

  onUnload: function () {
    bleComm.disConnect();
    extraLine = [];
  },
  onHide: function () {
    bleComm.disConnect();
    extraLine = [];
  },

  onLoad: function () {
    wx.showLoading({
      title: '靠近连接',
      mask: true
    })
    bleComm.connectDevice().then(res => {
      wx.showToast({
        title: '蓝牙连接成功',
        icon: 'success',
        duration: 300
      })
    });
  },

  onShow: function () {
    wx.onBLECharacteristicValueChange((characteristic) => {
      var news = common.arrayBufferToString(characteristic.value);
      extraLine.push(news)
      console.log(news);
      this.setData({
        motto: extraLine.join('\n'),
        scrollTop: this.data.scrollTop + 30
      })
    })
  },

  bindKeyInput: function (result) {
    this.setData({
      msg: result.detail.value
    });
  },

  sendData: function () {
    bleComm.writeValue(this.data.msg);
  }
})

Arduino代码,将收到的数据发送出去。

#define my_Serial Serial //定义串口通讯为Serial

String msg = "";         //定义一个字符串

void setup(void) {
  my_Serial.begin(57600);
}

void loop(void) {
  /*---每收到一次信号，向通信另一端反馈一次---*/
  if (my_Serial.available() > 0)  //如果串口有数据输入
  {
    msg = my_Serial.readStringUntil('\n'); //获取换行符前所有的内容
    my_Serial.println(msg);  //向蓝牙通信的另一端发送数据
  }
  delay(1);
}

测试

打开小程序,蓝牙连接成功后手机发送数据给设备，设备就返回同样数据。