微信小程序蓝牙温度数据采集Word下载.docx

1、json文件不是必须的 一般情况下我们只需要用全局配置的 app.json文件配置就可以了。在图中还有一个utils的目录：可以看出utils和pages文件是并列的，所以他就不代表页面的信息了，里面只有一个js文件。这个js文件其实就是把代码模块化了，已经有的代码是将日期的转换封装好了，直接引入使用就可以了。最后剩下一系列app的文件，app.js app.wxss app.json代表的信息和上面的pages里面的页面文件夹中的其实差不多，只是pages里面的代表的仅仅是某个界面的配置，而app的代表的是这个项目的配置。找一个官方DEMO测试wx.getBLEDeviceServices（

2、Object object）滚动到最后面：点击“在开发工具中预览效果”，导入代码片段：因为涉及到蓝牙硬件，所以不能用模拟器调试，下面我们把这个代码片段添加到前面创建的项目中。图片位置在pages下面建一个文件夹images，把图片集中放在这里。添加页面下面我们添加一个目录scanble和一组4个页面文件scan，我们不用去创建scan页面相关的文件scan.js、scan.wxss和scan.wxml，点击打开app.json文件就可以自动创建一个小程序空白页面。app.json是一个数组，由pages和window组成。找到pages数组，它里面所存放的就是一个个页面的名称了，如图：我们只需

3、要在Pages中加上“pages/scanble/scan”，并在前面用一个逗号隔开数组元素：pages数组里面，哪个路径在第一个，就先显示那个路径对应的界面。保存（Ctrl+s）之后开发工具会自动帮我们创建文件夹和其中的4个scan页面文件：app.json文件中的windows用于设置小程序的状态栏、导航条、标题、窗口背景色。修改导航栏标题将“WeChat”改为“传感器数据采集”，保存（trl+s），模拟器界面自动刷新。修改scan页面代码把导入的代码片段index页面的4个文件内容复制到相应的scan页面代码中。页面跳转前面我们说过了，pages数组里面，哪个路径在第一个就先显示那个路径

4、对应的界面，index在第一个，所以小程序先显示页面index.wxml，我们再转到scan.wxml。为了实现点击跳转，我们把“Hello World”改造成“开始”按钮。修改index.wxml：修改index.wxss：效果：添加事件bindtap，它网站开发中的click事件一样，都是点击时触发的事件，我们把它写在矩形框的那个view标签里面：bindtap将事件绑定到组件上面，绑定了之后点击组件可以触发这个函数。bindtap=“go”的意思就是，当点击绑定的view时触发一个事件，这个事件名称叫做go，我们需要去index.js文件中去编写go事件。进入index.js文件中，找到

5、page，在“/事件处理函数”的最后添加go函数：与前后的函数用逗号分隔。真机调试（iPhone、安卓手机都可以）因为涉及到蓝牙硬件，所以不能用模拟器调试。点击“真机调试”，或者“预览”。如果不需要调试，只是测试，用“预览”要快一些。用微信扫码，验证通过后还需要登录“小程序账号”补充一些信息，按提示做就行。在“小程序账号”中可以设置和修改小程序图标和名称等信息：我已经设置好了，点击“查看详情”：开始真机调试后小程序会下载到你的微信中，可以反复测试：点击我们的小程序：点击“开始”，显示scan.wxml页面，点击“开始扫描”：左边是苹果手机，右边是安卓手机。扫描到3个蓝牙外围设备，第一个设备bl

6、e-temp就是我们的树莓派蓝牙设备。当然要看到这个设备先要按照我的文章树莓派蓝牙温度传感器，将树莓派温度传感器运行起来：4.扫描控制，获取数据为避免占用过多篇幅，下面只说明要修改的代码，源代码请看官方DEMO。3.1 在scan.wxss中添加.scan_btn width: 100%; position: fixed; bottom: 30rpx;.btn margin-top: 450rpx; background: #14a1fd; color: #fff; border-radius: 70rpx;3.2 修改scan.wxmlview class=devices_summary已发

7、现 devices.length 个外围设备：/viewscroll-view class=device_list scroll-y scroll-with-animation item.nametext style=10px;#14a1fd;item.deviceIditem.RSSIdBmview style=14pxitem.dateitem.tempCview class=scan_btnbutton class=btn bindtap=scanCtrlscaningStr单引号，双引号双引号会搜索引号内的内容是不是有变量，有则输出其值，没有则输出原有内容。所以输出纯字符串的时候用单引

8、号比双引号效率高，因为省去检索的过程。3.2 扫描控制在scan.wxml中bindtap=在scan.js中添加点击事件响应函数 / 开始/停止扫描 scanCtrl（e） if （this.data.scaningStr = 停止扫描） this.stopBluetoothDevicesDiscovery（） / 停止扫描 else this.openBluetoothAdapter（） ,停止扫描 stopBluetoothDevicesDiscovery（） this._discoveryStarted = false wx.stopBluetoothDevicesDiscovery（

9、） this.data.scaningStr = 开始扫描 this.setData（ scaningStr: this.data.scaningStr ）开始蓝牙设备扫描 startBluetoothDevicesDiscovery（） if （this._discoveryStarted） return this._discoveryStarted = true wx.startBluetoothDevicesDiscovery（ allowDuplicatesKey: true, success: （res） = /console.log（startBluetoothDevicesDis

10、covery success, res） this.onBluetoothDeviceFound（）发现了蓝牙设备 onBluetoothDeviceFound（） wx.onBluetoothDeviceFound（res） = res.devices.forEach（device = if （!device.name & !device.localName） if （device.name != ble-temp & device.localName ! return / 过滤名字不是 ble-temp 的设备 const objDevice = / 重新构造一个device，添加温度 o

11、bjDevice.deviceId = device.deviceId objDevice.localName = device.localName objDevice.name = device.name objDevice.RSSI = device.RSSI let dateSec = Date.now（） / 取手机系统时间秒 let date = new Date（dateSec） / 取手机系统时间 objDevice.date = util.formatTime（date） objDevice.advertisData = device.advertisData let adDa

12、taStr = ab2hex（device.advertisData） console.log（广播包数据： + adDataStr） objDevice.temp = getTemp（adDataStr）温度： + objDevice.temp） let foundDevices = this.data.devices let idx = inArray（foundDevices, deviceId, device.deviceId） / 找到当前deviceId对应的i if （idx = -1） tempData = tempData + objDevice.deviceId + dat

13、eSec + objDevice.temp this.data.devices.push（objDevice） / 如果this.data.devices没有找当前的deviceId，就添加一个新的 if （this.data.devicesidx.temp != objDevice.temp） / 不记录重复的数据 this.data.devicesidx = objDevice / 如果在inArray函数中找到了当前的deviceId，就更新 console.log（温度数据： + tempData） devices: this.data.devices添加函数和变量注意，根据Page（

14、来判断下面的函数和变量应该写在什么位置。/ 从广播包中取温度数据function getTemp（adDataStr） var temp = adDataStr.substring（4, adDataStr.length） var temperature = temp1 + temp3 + . + temp5 + temp7 / 去掉前导0，加小数点 return temperature/ 声明变量var tempData = const util = require（././utils/util.js）Page（ data: , connected: false, chs: ,请对照官网DE

15、MO源代码看。3.3 真机调试为了看到程序运行时的中间结果，我们用真机调试一下：对于简单的修改，如果不需要看中间结果，可以用预览进行测试，比真机调试节省时间。“真机调试”窗口：console.log（tempData:这3条调试语句将程序运行的中间结果显示出来。手机显示：注意，苹果手机显示的是设备ID，安卓手机显示MAC。5.历史数据展示我们已经将数据缓存到了变量tempData中，为了便于观察数据的变化，下面我们将tempData中的数据用列表和曲线显示。4.1 创建一个新的页面display这个操作我们已经很熟悉了，在app.json中添加一行 pages/displays/display

16、4.2 写页面代码display.wxss.back-img 10%; none; margin-left: 5px;.canvas height: 250px;.device_list margin: 5rpx 5rpx; 0; border: 1rpx solid #EEE; 5rpx; 500rpx;/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/:-webkit-scrollbarwidth: 10px;height:background-color: #ffffff;/*定义滚动条轨道 内阴影+圆角*/-webkit-scrollbar-track-webkit-box-s

17、hadow: inset 0 0 10px rgba（0,0,0,0.3）;border-radius: yellow;/*定义滑块 内阴影+圆角*/-webkit-scrollbar-thumb inset 0 0 10px rgba（0,0,0,.3）; #ff5500;display.wxml100rpx;#eee;#38B0DE;image class=back-img mode=widthFix src=./images/backs.jpgback/imagefont-weight:bold;margin-right:deviceIdcanvas canvas-id=lineCanv

18、as disable-scroll=truecanvas bindtouchstart=touchstart bindtouchmove=touchmove bindtouchend=touchend/canvas50rpx;共 amount 条记录 scroll-y=true scroll-into-view=100idatacontent14px;item.samplingTime微信小程序wx-charts图表插件显示曲线需要下载wx-charts，网址解压后，把dist里面的wxcharts.js或者wxcharts-min.js放在小程序的文件夹里，在当前页面引用文件：const w

19、xCharts = require（././utils/wxcharts-min.js在网址上看README.md，有详细的使用说明。带参数可返回页面跳转点击扫描到的一个设备，scan.wxml发送点击事件：bindtap=在scan.js中写响应代码：前面我们用： wx.redirectTo（ url:./scanble/scan进行页面跳转。跳转还有一个方法叫做wx.navigateTo，与wx.redirectTo的区别是：wx.navigateTo跳转到一个应用内的某个页面，还保留着当前页面，可以用wx.navigateBack 返回，wx.navigateTo还可以带参数。wx.re

20、directTo关闭当前页面,跳转到另外一个页面。在scan.js中我们用wx.navigateTo： / 数据展示 displayData（e） const deviceId = e.currentTarget.dataset.deviceId / 传递的参数可返回跳转 wx.navigateTo（./displays/display?ideviceId= + deviceId + tempData= + tempData用wx.redirectTo跳转会关闭当前页面，跳转页面后不能返回上一页，这样我们就看不到其他设备的数据了。所以我们改用wx.navigateTo函数，它在跳转时保留当前页面，使用wx.navigateBack可以返回原页面。下面的语句传递了2个参数deviceId和tempData。url: + de