创作登录
首页/课程/北京石油化工学院课程/滑动条设置
滑动条设置
教学目标及方法
1.掌握小程序页面跳转的方法，并使用滑动条（slider）组件来控制彩灯的亮度。 2.掌握小程序通过蓝牙向mCookie设备发送一位数字(0-255)， 然后mCookie蓝牙接收小程序发送的数字类型数据的方法。
主要内容
在小程序中设计两个页面，点击默认页面中的开始按钮跳转到第二个页面，然后进行蓝牙连接，蓝牙连接成功后可通过滑动条控件向mCookie设备发送数据，mCookie蓝牙模块收到数据后控制舵机、灯、电机。

模块清单

硬件搭建

将全彩LED灯连接在mCenter+的D6/D7管脚。
注意：传感器连接线要接到全彩LED的IN接口上，反过来看是下面一个接口。

程序开发

微信小程序开发

开发流程


新建项目创建两个空白页所需要的文件

在软件文件管理中建立如下文件。startPage文件夹里面存放小程序第一页所需文件，sliderCtrl文件夹里面存放小程序第一页所需文件。
注意：
新建时只需新建”xxx.js、xxx.wxml、xxx.wxss”这三个文件，在保存时会自动加上“xxx.json”文件。

在app.json文件中加入页面及窗口

在pages里加入新建的两个页面路径，pages中的第一个路径为默认显示页面。“disableScroll”为禁止页面内容滚动。
{
  "pages": [
    "startPage/startpage",
    "sliderCtrl/sliderctrl"
  ],
  "window": {
    "navigationBarBackgroundColor": "#4b0963",
    "navigationBarTitleText": "wasdylb",
    "navigationBarTextStyle": "white",
    "disableScroll": true
  },
  "sitemapLocation": "sitemap.json"
}

编辑第一页内容

1.1页面添加标题及分割线的样式

在startpage.wxss文件中添加代码来设置标题及分割线的样式。文字颜色，位置可以修改。
.title {
  color: #731496;    /*文本颜色*/
  text-align: center;/*文本居中*/
  margin-top: 20px;  /*内边距顶端距离*/
}

.line {
  margin-top: 20px;     /*内边距顶端距离*/
  width: 100%;          /*线宽*/
  height: 1rpx;         /*线高*/
  background: #731496; /*线的颜色*/
}

1.2添加标题及分割线的模板

在startpage.wxml文件中添加代码来显示标题及分割线。文本内容“滑动条控制mCookie设备”可以修改。
<view class='title'>
  <text>滑动条控制mCookie设备</text>
  <view class="line"></view>
</view>
编译
编译后调试区显示如下页面：

2.1添加文本内容的样式

在startpage.wxss文件中添加代码来设置文本内容样式。
<view class='objective'>
 <text>
  点击面中的开始按钮跳转到第二个页面，然后靠近进行蓝牙连接，蓝牙连接成功后可通过滑动条控件向mCookie设备发送数据，mCookie蓝牙模块收到数据后控制灯的亮度。
 </text>
</view>
编译
编译后调试区显示如下页面：

3.1添加按钮的样式

在startpage.wxss文件中添加代码来设置按钮的样式。
.weui-btn {
  margin-top:20px;    /*内边距顶端距离*/
  width: 90%;         /*宽*/
  height: 100rpx;     /*高*/
  border-radius: 20rpx;/*倒角*/
  text-align: center;  /*文本居中*/
  background-color: #674498;/*背景颜色*/
  color: #fff;      /*文本颜色*/
}

.other-button-hover {
  background-color: #731496; /*点击后的颜色*/
}

3.2添加按钮的摸板

在startpage.wxml文件中添加代码来显示按钮。按钮中文本内容可以修改。
<view>
  <button class='weui-btn' hover-class='other-button-hover' bindtap='sendData'>开始</button>
</view>
编译
编译后调试区显示如下页面：

4.点击按钮跳转到第二页

在startpage.js里加入按钮逻辑处理函数。使用wx.navigateTo()跳转页面。详细参考：
sendData: function () {
    wx.navigateTo({ url: "../sliderCtrl/sliderctrl" })
},
编译
编译后点击开始按钮，可以跳转到空白页面。

5.整体代码

startpage.js文件逻辑处理，这里只需要监听按钮按下事件，然后跳转到第二页。
Page({
  /**
   * 按钮点击函数-点击后跳转到第二个页面
   */
  sendData: function () {
    wx.navigateTo({ url: "../sliderCtrl/sliderctrl" })
  },

})
startpage.wxml文件，包括标题，分割线、文本、按钮的模板。
<view class='title'>
  <text>滑动条控制mCookie设备</text>
<view class='title'>
  <text>滑动条控制mCookie设备</text>
  <view class="line"></view>
</view>
<view class='objective'>
 <text>
  点击面中的开始按钮跳转到第二个页面，然后靠近进行蓝牙连接，蓝牙连接成功后可通过滑动条控件向mCookie设备发送数据，mCookie蓝牙模块收到数据后控制灯的亮度。
 </text>
</view>
<view>
  <button class='weui-btn' hover-class='other-button-hover' bindtap='sendData'>开始</button>
</view>
startpage.wxss文件，包括标题，分割线、文本、按钮的样式。
.title {
  color: #731496;  /*文本颜色*/
  text-align: center;/*文本居中*/
  margin-top: 20px;  /*内边距顶端距离*/
}

.line {
  margin-top: 20px;      /*内边距顶端距离*/
  width: 100%;           /*线宽*/
  height: 1rpx;          /*线高*/
  background: #731496; /*线的颜色*/
}

.objective {
  padding-left: 25rpx; /*外边距距左边距离*/
  padding-right: 25rpx;/*外边距距右边距离*/
  padding-bottom: 300px;/*外边距距底边距离*/
  font-size:30rpx;     /*文字大小*/
}

.weui-btn {
  margin-top:20px;    /*内边距顶端距离*/
  width: 90%;         /*宽*/
  height: 100rpx;     /*高*/
  border-radius: 20rpx;/*倒角*/
  text-align: center;  /*文本居中*/
  background-color: #674498;/*背景颜色*/
  color: #fff;      /*文本颜色*/
}

.other-button-hover {
  background-color: #731496; /*点击后的颜色*/
}

编辑第二页内容

1.页面模板、样式编写

页面每步实现不详细展开了，与第一页方法一致。sliderctrl.wxml文件，包括标题，分割线、图片、滑动条的模板。需要放一张图片在项目路径得目录中。
<view class='title'>
  <text>滑动条控制mCookie设备</text>
  <view class="line"></view>
</view>
<view class='image-H'>
  <image class='userinfo-avatar' src='../ylb.jpg'></image>
</view>
<view class='wx_frame'>
<slider class='wx_text' activeColor="#8D1CB7" step="1" bindchange="slider" min="0" max="255" show-value/>
</view>
slider参数。
  • lactiveColor：已选择的颜色
  • lstep：步长，取值必须大于 0，并且可被(max - min)整除
  • lmin：最小值
  • lmax：最大值
Slider还有很多参数可以设置，详细参考：
根据参数可拓展不一样的滑动条。
sliderctrl.wxss文件，包括标题，分割线、图片、滑动条的模板。
.title {
  color: #731496;
  text-align: center;
  margin-top: 20px;
}

.line {
  margin-top: 20px;
  width: 100%;
  height: 1rpx;
  background: #731496;
}

.image-H {
  text-align: center;
  margin-top: 110px;
}

.userinfo-avatar {
  width: 166rpx;
  height: 166rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.wx_frame {
  margin-top: 156px;
  height: 44px;
  width: 100%;
  background: #fff;
  border: 1px solid #dadada;
}

.wx_text {
  margin-top:12px;
  padding-left: 20px;
}

2.加入蓝牙API

将utils文件夹拷贝到项目路径下。

3. JS 交互逻辑

在sliderctrl.js文件中添加代码，导入蓝牙通信API文件
import bleComm from '../utils/bleComm.js';
在sliderctrl.js文件中添加代码，当页面卸载或隐藏时，关闭蓝牙连接及蓝牙服务。
import bleComm from '../utils/bleComm.js';

Page({
  onUnload: function () {
    bleComm.disConnect();//断开蓝牙连接
    bleComm.closeBLE();  //关闭蓝牙服务
  },
  onHide: function () {
    bleComm.disConnect();//断开蓝牙连接
    bleComm.closeBLE();  //关闭蓝牙服务
  },

})
在sliderctrl.js文件中Page里添加代码，当页面载入时连接蓝牙。
onLoad: function (options) {
    wx.showLoading({
      title: '靠近连接',
      mask: true
    })

    bleComm.connectDevice().then(res => {
      wx.showToast({
        title: '蓝牙连接成功',
        icon: 'success',
        duration: 300
      })
    });
},
在sliderctrl.js文件中Page里添加代码，监听slider滑动，把数据通过蓝牙发送出去。
writeNumberValue(x)函数用来发送一个0-255数字，x即要发送的数。
e.detail.value获取滑动条的值。
slider: function (e) {
  var msg = e.detail.value;//获取滑动条的值
  console.log('msg:', msg);//打印滑动条值
  bleComm.writeNumberValue(msg);//蓝牙发送数据
}
sliderctrl.js的完整代码。
import bleComm from '../utils/bleComm.js';

Page({
  onUnload: function () {
    bleComm.disConnect();//断开蓝牙连接
    bleComm.closeBLE();  //关闭蓝牙服务
  },
  onHide: function () {
    bleComm.disConnect();//断开蓝牙连接
    bleComm.closeBLE();  //关闭蓝牙服务
  },

  onLoad: function (options) {
    wx.showLoading({
      title: '靠近连接',
      mask: true
    })

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

  slider: function (e) {
    var msg = e.detail.value;//获取滑动条的值
    console.log('msg:', msg);//打印滑动条值
    bleComm.writeNumberValue(msg);//蓝牙发送数据
  }

})

4.小程序调试

点击开始，跳转到蓝牙连接界面，弹框提示靠近蓝牙进行连接。

智能硬件开发


确定蓝牙模块类型

根据蓝牙模块选择合适程序。
//#define BLEMODULE_01_9600  //old-mCookie_Bluetooth
//#define BLEMODULE_45_9600  //Microduino_BLE new-mCookie_Bluetooth
#define BLEMODULE_01_57600  //mCenter+、BleUpload

控制灯的亮度

通过setPixelColor()函数来设置灯的颜色，颜色值越高灯越亮。
strip.setPixelColor(0, light, 0, light); //设置灯的亮度
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);//接了1个灯，接D6/D7引脚 
 
void setup() 
{ 
    my_Serial.begin(UARTSPEED);//设置蓝牙通信波特率 
    strip.begin(); 
} 
 
void loop() 
{ 
    if (my_Serial.available() > 0)   //有数据 
    { 
        uint8_t light = my_Serial.read(); //接收一位数字 
        strip.setPixelColor(0, light, 0, light); //设置灯的亮度 
        strip.show();//显示 
    } 
}
注意：
程序上传完毕，使用mCenter+得把USB数据线拔掉。

综合调试

点击预览，上传到手机后点击开始按钮，可以跳转到连接页面，提示靠近连接，连接到蓝牙模块后提示蓝牙连接成功，然后可以通过滑动条来控制灯的亮度了。

拓展

1.如何使用滑动条控制舵机

mCookie接收小程序蓝牙数据。根据数据控制舵机角度。
指导：
1、舵机硬件连接
舵机没法直接和扩展模块（Hub）连接，需要借助舵机转接板。舵机转接板上下各有3个插针，可以同时转接两个舵机。

拓展

1.如何使用滑动条控制舵机

mCookie接收小程序蓝牙数据。根据数据控制舵机角度。
指导：
1、舵机硬件连接
舵机没法直接和扩展模块（Hub）连接，需要借助舵机转接板。舵机转接板上下各有3个插针，可以同时转接两个舵机。
舵机和舵机转接板连接时注意“正反”，确保GND、VCC、1/2三根线连接正确。上一排针对应Hub的单数管脚，下一排针对应Hub的双数管脚。如舵机转接板接到Hub的6/7管脚，若舵机接在下一排排针，则控制管脚为6，接上一排控制管脚为7。
最后通过传感器连接线接到mCenter+。
2、舵机控制方法
舵机控制角度为0-180度。使用attach(pin)来初始化舵机并设置引脚。使用write()函数来控制舵机转到多少度。
#include <Servo.h>//调用舵机库 
 
Servo myservo;//定义一个舵机 
 
void setup() 
{ 
    myservo.attach(6);//初始化舵机，并定义舵机使用D6引脚 
} 
 
void loop() 
{ 
    myservo.write(90);//控制舵机转到90度位置 
}
3.可以使用map()函数将滑动条0-255数据映射到0-180。
angle = map(angle, 0, 255, 0, 180);
map（）函数详细参考：

如何使用滑动条控制电机

控制方式与舵机一致，只需要在mCookie端更改成控制电机的代码。
1.电机连接方式
需要借助电机驱动模块Motor来驱动电机。Motor模块可以驱动两个电机。


2.电机控制程序
通过begin()函数初始化电机，setSpeed()函数来设置电机速度。注意负数表示反转，正数正转。
#include <Microduino_Motor.h> 
 
Motor MotorLeft(MOTOR0_PINA, MOTOR0_PINB); 
Motor MotorRight(MOTOR1_PINA, MOTOR1_PINB); 
 
void setup() 
{ 
    Serial.begin(115200); //串口初始化 
 
    MotorLeft.begin();   //电机MotorLeft初始化 
    MotorRight.begin();  //电机MotorLeft初始化 
} 
 
void loop() 
{ 
    MotorLeft.setSpeed(100);   //设置电机MotorLeft速度为100 
    MotorRight.setSpeed(100);  //设置电机MotorRight速度为100 
}

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

  • 杨立斌

    美科

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

解惑

课时信息

创建时间:2017/12/22

课程表