创作登录
首页/课程/北京石油化工学院课程/指纹密码
指纹密码
教学目标及方法
手机指纹控制一盏灯
主要内容

建立项目

建立一个新的文件夹，项目目录选择该文件。将上堂课文件拷贝到现在的文件夹，项目配置文件project.config.json除外。

改变按钮-Switch

因为灯有开、关两个状态，希望通过switch来直观显示。因此需要改wxml、wxss两个文件。

模板

包含3个模版。1.边框 2.文本 3.switch 
<view class='wx_frame'>
  <text class='wx_text'>指纹开\关灯</text>
  <switch class='weui-swt' color='#8D1CB7'></switch>
</view>

样式

样式编辑完毕可以预览到手机上看看
.wx_frame {
  margin-top: 156px;
  height: 44px;
  width: 100%;
  background: #fff;
  border: 1px solid #dAdAdA;
}

.wx_text {
  font-size: 17px;
  padding-left: 15px;
}

.weui-swt {
  padding-top: 7.5px;
  padding-left: 190px;
}
编译后结果
此时开关不能被点击，因为逻辑中蓝牙没连接不让点击屏幕。修改belled.js代码。
wx.showLoading({
  title: '靠近连接',
  mask: false 
})
将mask设为false就可以点击屏幕了。

逻辑实现

监听switch点击动作，与上堂课button类似，加入bindchange来监听。
<view class='wx_frame'>
  <text class='wx_text'>指纹开\关灯</text>
  <switch class='weui-swt' color='#8D1CB7' bindchange='switchLED'></switch>
</view>
为了方便调试，先关闭蓝牙连接功能。
把onLoad函数蓝牙连接消息注释，电脑端无法调用蓝牙，方便调试。注释选中代码通过快捷键
  • mac：“command+／” windows：“ctrl+／”。
  onLoad: function (options) {
    // wx.showLoading({
    //   title: '靠近连接',
    //   mask: false
    // })
    // bleComm.connectDevice().then(res => {
    //   wx.showToast({
    //     title: '蓝牙连接成功',
    //     icon: 'success',
    //     duration: 300
    //   })
    // });
  },

switch监听函数

将sendData: function ()更改为：
switchLED: function (e) {
  console.log('switch点击后的值：', e.detail.value)
}
通过console.log来监视调试结果。
调试窗口可以看到信息：
根据switch的值蓝牙发送控制指令。把onLoad里的蓝牙函数取消注释预览到手机上就可以控制
灯的开关了。
switchLED: function (e) {
  console.log('switch点击后的值：', e.detail.value)
  if (e.detail.value)
    bleComm.writeValue('ON');
  else
   bleComm.writeValue('OFF');
}

加入指纹

现在可以通过switch控制led，希望加上一层密码，点击switch调用指纹，用指纹控制开关。
小程序正好提供指纹认证接口。详细参考：

指纹识别代码：
switchLED: function (e) {
    console.log('switch点击后的值：', e.detail.value)
    var msg;
    if (e.detail.value)
      msg = '1';
    else
      msg = '0';
    wx.checkIsSupportSoterAuthentication({
      success(res) {
        wx.startSoterAuthentication({
          requestAuthModes: ['fingerPrint'],
          challenge: '123456',
          authContent: 'Hello LiBin',
          success(res) {
            console.log('finger is ok', msg);
            bleComm.writeValue(msg);
          }
        })
      },
      fail(res) {
        console.log("不支持指纹");
        wx.showModal({
          title: '抱歉',
          content: '设备不支持指纹',
          cancelText: '取消',
          confirmText: '确认',
          success: function (res) {
          }
        })
      }
    })
  },

完整逻辑代码：
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 () {

  },
  switchLED: function (e) {
    console.log('switch点击后的值：', e.detail.value)
    var msg;
    if (e.detail.value)
      msg = '1';
    else
      msg = '0';
    wx.checkIsSupportSoterAuthentication({
      success(res) {
        wx.startSoterAuthentication({
          requestAuthModes: ['fingerPrint'],
          challenge: '123456',
          authContent: 'Hello LiBin',
          success(res) {
            console.log('finger is ok', msg);
            bleComm.writeValue(msg);
          }
        })
      },
      fail(res) {
        console.log("不支持指纹");
        wx.showModal({
          title: '抱歉',
          content: '设备不支持指纹',
          cancelText: '取消',
          confirmText: '确认',
          success: function (res) {
          }
        })
      }
    })
  },
})

测试

硬件与上堂课。预览小程序即可通过指纹开关灯。

所需硬件
核心模块 MC
x 1
电池盒 MC
x 1
传感器接口板 MC
x 1
蓝牙通信模块 MC
x 1
多彩LED MS
x 1
代码展示
暂无数据！
附件下载
  • 资料展示
  • ArduinoColorLED_ONOFF.zip
  • fingerBleLED.zip
授课教师

  • 杨立斌

    美科

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

解惑

课时信息

创建时间:2017/12/22

课程表