创作登录
首页/课程/北京石油化工学院课程/星星点灯
星星点灯
教学目标及方法
小程序控制一盏灯
主要内容

目标

从零开始开发一个小程序，并实现手机蓝牙微信向程序控制全彩LED灯的亮灭。
蓝牙连接成功后，点点击小程序界面“点灯”按钮，智能硬件的彩灯会点亮/熄灭。


模块清单



功能：
  • 核心电池盒（mCenter+）：集成有ATMEGA644PA单片机、蓝牙、传感器底座、USB接口（程序下载和通讯）和电源管理。
  • 全彩LED灯：可以通过程序控制灯的颜色。也可任意级联。

硬件搭建



将全彩LED灯通过传感器连接线接到核心电池盒的D6/D7接口上，
注意：
传感器连接线要接到全彩LED的IN接口上，反过来看是下面一个接口。

程序开发

程序开发分为微信小程序开发和智能硬件开发，微信小程序开发使用微信开发者工具（微信web开发者工具）软件；智能硬件开发工具使用Arduino IDE for Microduino软件。

微信小程序开发


1、新建空白项目

打开微信web开发者工具，新建小程序项目，选择项目目录、App ID和项目名称后新建项目。

2、创建文件

按照图中文件目录修改相应的文件及文件夹：点击“+”创建文件及文件夹；文件夹下的文件需要右键文件夹名，在弹出的菜单中选择相应的文件新建。



一个页面必须包含3个文件：WXML 模板、WXSS 样式、JS 交互逻辑。
注意：app.json必不可少，需要用它来配置页面。app.js也必不可少，程序预览时会调用。

3、配置页面app.json文件

在调试去提示错误信息，没找到文件。
更改app.json文件中WXML文件的路径。注意pages里的文件路径用“，”隔开，最后一个不需要“，”。
{
  "pages": [
    "bleLED/bleled"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#4b0963",
    "navigationBarTitleText": "星星点灯",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
点击编译可以看到显示效果：


同时注意到“Console”控制台输出错误信息：bleLED/bleled.js出现脚本错误或者未正确调用Page（）。


这是因为bleled.js文件里面是空的，回到微信开发工具打开bleled.js，在里面输入Page({})即可；也可以选择输入光标位置会出现提示菜单中的第二项Page，软件自动创建page框架：内含5个生命周期函数、3个页面操作函数，在此先不去管它。

保存后再次编译，就没有错误信息出现了。

4、在页面中添加文本和一条横线

在bleled.wxml中添加以下代码：
<view>
  <text>mCookie-BLE控制ColorLED</text>
</view>
View为视图容器，text为文本内容组件。
编译查看效果：

文字靠左，如果希望文字居中，换个位置颜色，就需要用到bleled.wxss文件。
这里首先改写bleled.wxml中的代码：
<view class='title'>
  <text>mCookie-BLE控制ColorLED</text>
  <view class="line"></view>
</view>
class='title'：使用view组件的class属性标记view组件的样式类，class='title'定义view组件标识为title，title可以在对应的wxss中定义view的样式；同时增加了一条横线view组件。
在bleled.wxss中添加一下代码：
.title {
  color: #731496;
  text-align: center;
  margin-top: 20px;
}

.line {
  margin-top: 20px;
  width: 100%;
  height: 1rpx;
  background: #731496;
}
在bleled.wxss文件中，设置文本内容的颜色为#731496、文本位居中和内边距顶端距离为20px；设置横线外边距顶端距离为20px、宽度为从左到右、高度为1px和背景颜色为#731496。

编译查看效果：


5、添加图片

首先，将一张图片拷贝到小程序代码文件夹里面，即项目目录文件夹/bleLED/下，可以在软件的编辑工具里看到。


接着，在bleled.wxml中添加一下代码
<view class='image-H'>
  <image class='userinfo-avatar' src='../bleLED/snm.jpg'></image>
</view>
src='../bleLED/snm.jpg：图片来源于项目目录bleLED文件夹下的snm.jpg。
编译查看结果

发现图片显示效果不是很理想，对图片的样式做一些设置。
在bleled.wxss中添加一下代码：
.image-H {
  text-align: center;
  margin-top: 110px;
}

.userinfo-avatar {
  width: 166rpx;
  height: 166rpx;
  margin: 20rpx;
  border-radius: 50%;
}
在bleled.wxss文件中，对图片做居中操作、设置外边距顶端的距离为128px；userinfo-avatar为微信头像设置：头像图片设置高度为156px、宽度为156px、外边距为20px、圆角边框为50%。
编译查看效果：

6、添加“点击”按钮

在bleled.wxml中添加以下代码：
<view>
  <button class='weui-btn' hover-class='other-button-hover' bindtap='sendData'>点灯</button>
</view>
hover-class='other-button-hover'：指定按钮按下去的样式类为other-button-hover，other-button-hover样式请查看bleled.wxss文件。当 hover-class="none" 时，没有点击态效果；
bindtap='sendData'：在组件中绑定一个事件处理函数'sendData'，当用户点击按钮时会在该页面对应的bleled.js文件中的Page中找到相应的事件处理函数。
编译查看效果:

点击按钮，效果并不是很好，按钮按下效果不明显，是因为设置的按下背景颜色同按钮背景颜色是一样的。
在bleled.wxss中添加一下代码：
.weui-btn {
  margin-top: 128px;
  width: 156rpx;
  height: 156rpx;
  border-radius: 50px;
  padding-top: 15px;
  text-align: center;
  background-color: #8d1cb7;
  color: #fff;
}

.other-button-hover {
  background-color: #731496;
}
文档中对按钮和按钮背景色做了设置，具体设置如下：
按下按钮，按钮颜色变为#731496
未按下效果：
按下效果：
在bleled.wxml中，绑定了事件处理函数（bindtap='sendData'），事件处理函数会在bleled.js文件中的Page中定义，参数是event。
添加按钮交互：
1、加载蓝牙API文件
附件里下载zip包，将utils文件夹拷贝到项目文件夹内。在编辑工具可以看见：utils里面包括两个蓝牙控制文件，使用的时候直接调用里面的功能函数，主要包括蓝牙连接、蓝牙发送接收数据、蓝牙断开连接。
2、在bleled.js文件内修改如下代码：
import bleComm from '../utils/bleComm.js';
var msg;

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

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

  sendData: function () {

    msg = !msg;
    console.log(msg);
    if (msg)
      bleComm.writeNumberValue(1);
    else
      bleComm.writeNumberValue(0);
  },
})
import bleComm from '../utils/bleComm.js';：通过import来加载蓝牙控制文件bleComm.js这个模块。'../utils/bleComm.js'为bleComm.js路径。
var msg;声明msg变量在页面卸载、隐藏时断开蓝牙连接执行“bleComm.disConnect();”函数即可。
页面载入时进行蓝牙连接。
当页面点击时，发送消息。
编译查看效果
注意：若在bleled.js中直接修改软件生成的page（{}）时要注意以下几点：
  • 直接在软件生成的page（{}）内部找到对应的函数，在函数内部编写函数体即可；
  • 多余没有用到的函数如data: function () {}、onReady: function () {}、onShow: function () {}、onShareAppMessage: function () {}等可以空着，不去理会；
  • 发送函数sendData: function (){}，软件没有生成，需要去添加去编写，若在page内末尾添加sendData: function (){}时，要注意在上一个函数的“}“后加一个“，”，否则编译报错不通过。
最终bleled.js代码如下:
import bleComm from '../utils/bleComm.js';
var msg;

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.showLoading({
      title: '靠近连接',
      mask: true
    })
    bleComm.connectDevice().then(res => {
      wx.showToast({
        title: '蓝牙连接成功',
        icon: 'success',
        duration: 300
      })
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    bleComm.disConnect();
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    bleComm.disConnect();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  sendData: function () {

    msg = !msg;
    console.log(msg);
    if (msg)
      bleComm.writeNumberValue(1);
    else
      bleComm.writeNumberValue(0);
  }
})
注意：以上bleled.js文件与前边的bleled.js文件，选择使用其中一个就可以。

智能硬件开发

确定蓝牙模块型号

如果使用其他蓝牙模块，可选型号。
蓝牙模块共有三种型号：old-mCookie_Bluetooth、new-mCookie_Bluetooth和BleUpload，其中使用的引脚和传输波特率有差别。
  • old-mCookie_Bluetooth 【引脚：D0/D1，波特率：9600；】
  • new-mCookie_Bluetooth 【引脚：D4/D5，波特率：9600；】
  • BleUpload 【引脚：D0/D1，波特率：57600；】

我们使用的是核心电池盒，核心电池盒内部集成有BLE Upload蓝牙模组，故我们选择使用第三条宏定义，同时注释掉前两条宏定义。“//”为程序中的单行注释，方便开发人员理解程序内容。“//”后的文字在程序编译时不会编译。
//#define BLEMODULE_01_9600  //old-mCookie_Bluetooth
//#define BLEMODULE_45_9600  //Microduino_BLE new-mCookie_Bluetooth
#define BLEMODULE_01_57600  //mCenter+、BleUpload

蓝牙接收数据

通过read()来读取一位数据。将数据存放在一个uint8_t的变量中。
uint8_t light = my_Serial.read(); //接收一位数字

控制灯的开关

通过setPixelColor()函数来设置灯的颜色，设置紫色开灯、设置黑色关灯。
if (sta) 
    strip.setPixelColor(0, 0XFF00FF);     //设置紫色 
else 
    strip.setPixelColor(0, 0X000000);     //设置黑色（关灯） 
strip.show();                            //控制彩灯

完整代码

//#define BLEMODULE_01_9600  //old-mCookie_Bluetooth 
//#define BLEMODULE_45_9600  //Microduino_BLE new-mCookie_Bluetooth 
#define BLEMODULE_01_57600  //mCenter+、BleUpload 
 
/*定义串口0接口，波特率9600的蓝牙*/ 
#ifdef  BLEMODULE_01_9600 
#define my_Serial Serial 
#define UARTSPEED  9600 
#endif 
 
/*定义串口0接口，波特率57600的蓝牙*/ 
#ifdef BLEMODULE_01_57600 
#define my_Serial Serial 
#define UARTSPEED  57600 
#endif 
 
/*定义软串口（4，5）接口，波特率9600的蓝牙*/ 
#ifdef BLEMODULE_45_9600 
#include <SoftwareSerial.h> 
SoftwareSerial mySerial(4, 5); 
#define my_Serial mySerial 
#define UARTSPEED  9600 
#endif 
 
#include <Microduino_ColorLED.h>   //引用彩灯库 
ColorLED strip = ColorLED(1, 6);  //彩灯名字叫strip，共接了1个灯，接口6 
 
void setup(void) 
{ 
    my_Serial.begin(UARTSPEED);     //定义蓝牙接收的速度 
    strip.begin();                 //彩灯开始 
} 
 
void loop(void) 
{ 
    //每收到一次信号，向通信另一端反馈一次 
    if (my_Serial.available() > 0)             //如果串口有数据输入 
    { 
        uint8_t sta = my_Serial.read();          //将收到的数据赋给变量sta 
        if (sta) 
            strip.setPixelColor(0, 0XFF00FF);     //设置紫色 
        else 
            strip.setPixelColor(0, 0X000000);     //设置黑色（关灯） 
        strip.show();                            //控制彩灯 
    } 
}

综合调试

准备

下载Arduino IDE编程软件：
Arduino初学教程：

步骤

1.核心电池盒通过USB数据线接到PC机USB接口上；
2.打开Arduino IDE for Microduino软件，配置好“开发板”“处理器”和“端口”后，上传程序；
3.程序上传成功后，断开核心电池盒与USB数据线，并重启核心电池盒；
4.点击微信开发工具工具栏的“预览”按钮，生成二维码；
5.打开手机蓝牙，用微信“扫一扫”扫生成的二维码；
6.将手机靠近核心电池盒，等待蓝牙配对完成；
7.配对完成后，点击“点灯”按钮，看彩灯是否点亮，再点一下按钮，彩灯会熄灭。

注意：只有首次扫描二维码时才会出现蓝牙配对操作，第二次进入小程序时没有蓝牙配对操作，也就没法控制彩灯亮灭。若想再次控制彩灯，需要先删掉小程序，再次重新扫描二维码。

拓展

1、调节彩灯颜色

在bleled页面创建多个按钮，每个按钮控制彩灯显示不同的颜色。
指导：
1．点击不同的按钮发送不同的颜色对应的值；
bleComm.writeNumberValue(value);
2．在智能硬件编程中，对接受的值作相应的解析;
Switch-case语句：
switch(表达式) 
{ 
case 值1: 
    表达式的值和 值1匹配上了，需要执行的代码; 
    break; 
case 值2: 
    表达式的值和 值2匹配上了，需要执行的代码; 
    break; 
case 值3: 
    表达式的值和 值3匹配上了，需要执行的代码; 
    break; 
default: 
    如果表达式的值和以上的case后面的值都没有匹配上，那么就执行这里的代码。 
    break; 
}

2、控制多个彩灯

控制逻辑与调节彩灯颜色一致。
指导：
1.增加彩灯控制个数
ColorLED strip = ColorLED(1, 6);中灯个数参数需要修改。
2.根据指令控制对应灯的开关。strip.setPixelColor(num, color); num表示第几个灯，从0开始算第一个。color为颜色。
3.多个彩灯连接方法：下一个彩灯的IN接上一个彩灯的OUT。

END
所需硬件
暂无数据！
代码展示
暂无数据！
附件下载
  • 资料展示
  • ArduinoColorLED_ONOFF.zip
  • ButtonBleLED.zip
授课教师

  • 杨立斌

    美科

问答专区
暂无数据！
杨立斌高级工程师

解惑

课时信息

创建时间:2017/12/22

课程表
佳作推荐
暂无数据！