微信小程序蓝牙温度数据采集Word下载.docx
《微信小程序蓝牙温度数据采集Word下载.docx》由会员分享，可在线阅读，更多相关《微信小程序蓝牙温度数据采集Word下载.docx（32页珍藏版）》请在冰豆网上搜索。
json文件不是必须的一般情况下我们只需要用全局配置的app.json文件配置就可以了。
在图中还有一个utils的目录：
可以看出utils和pages文件是并列的，所以他就不代表页面的信息了，里面只有一个js文件。
这个js文件其实就是把代码模块化了，已经有的代码是将日期的转换封装好了，直接引入使用就可以了。
最后剩下一系列app的文件，app.jsapp.wxssapp.json代表的信息和上面的pages里面的页面文件夹中的其实差不多，只是pages里面的代表的仅仅是某个界面的配置，而app的代表的是这个项目的配置。
●找一个官方DEMO
测试wx.getBLEDeviceServices（Objectobject）
滚动到最后面：
点击“在开发工具中预览效果”，导入代码片段：
因为涉及到蓝牙硬件，所以不能用模拟器调试，下面我们把这个代码片段添加到前面创建的项目中。
●图片位置
在pages下面建一个文件夹images，把图片集中放在这里。
●添加页面
下面我们添加一个目录scanble和一组4个页面文件scan，我们不用去创建scan页面相关的文件scan.js、scan.wxss和scan.wxml，点击打开app.json文件就可以自动创建一个小程序空白页面。
app.json是一个数组，由pages和window组成。
找到pages数组，它里面所存放的就是一个个页面的名称了，如图：
我们只需要在Pages中加上“pages/scanble/scan”，并在前面用一个逗号隔开数组元素：
pages数组里面，哪个路径在第一个，就先显示那个路径对应的界面。
保存（Ctrl+s）之后开发工具会自动帮我们创建文件夹和其中的4个scan页面文件：
app.json文件中的windows用于设置小程序的状态栏、导航条、标题、窗口背景色。
修改导航栏标题将“WeChat”改为“传感器数据采集”，保存（trl+s），模拟器界面自动刷新。
●修改scan页面代码
把导入的代码片段index页面的4个文件内容复制到相应的scan页面代码中。
●页面跳转
前面我们说过了，pages数组里面，哪个路径在第一个就先显示那个路径对应的界面，index在第一个，所以小程序先显示页面index.wxml，我们再转到scan.wxml。
为了实现点击跳转，我们把“HelloWorld”改造成“开始”按钮。
修改index.wxml：
修改index.wxss：
效果：
添加事件bindtap，它网站开发中的click事件一样，都是点击时触发的事件，我们把它写在矩形框的那个view标签里面：
bindtap将事件绑定到组件上面，绑定了之后点击组件可以触发这个函数。
bindtap=“go”的意思就是，当点击绑定的view时触发一个事件，这个事件名称叫做go，我们需要去index.js文件中去编写go事件。
进入index.js文件中，找到page，在“//事件处理函数”的最后添加go函数：
与前后的函数用逗号分隔。
●真机调试（iPhone、安卓手机都可以）
因为涉及到蓝牙硬件，所以不能用模拟器调试。
点击“真机调试”，或者“预览”。
如果不需要调试，只是测试，用“预览”要快一些。
用微信扫码，验证通过后还需要登录“小程序账号”补充一些信息，按提示做就行。
在“小程序账号”中可以设置和修改小程序图标和名称等信息：
我已经设置好了，点击“查看详情”：
开始真机调试后小程序会下载到你的微信中，可以反复测试：
点击我们的小程序：
点击“开始”，显示scan.wxml页面，点击“开始扫描”：
左边是苹果手机，右边是安卓手机。
扫描到3个蓝牙外围设备，第一个设备ble-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.wxml
<
!
--pages/scanble/scan.wxml-->
viewclass="
devices_summary"
>
已发现{{devices.length}}个外围设备：
/view>
scroll-viewclass="
device_list"
scroll-yscroll-with-animation>
<
viewwx:
for="
{{devices}}"
wx:
key="
index"
data-device-id="
{{item.deviceId}}"
bindtap="
displayData"
class="
device_item"
hover-class="
device_item_hover"
viewstyle="
display:
flex;
flex-direction:
row;
justify-content:
space-between;
align-items:
center;
font-size:
12px;
color:
#333;
"
text>
{{item.name}}<
/text>
textstyle="
10px;
#14a1fd;
{{item.deviceId}}<
{{item.RSSI}}dBm<
viewstyle='
14px'
{{item.date}}<
{{item.temp}}C<
/scroll-view>
viewclass='
scan_btn'
buttonclass='
btn'
bindtap='
scanCtrl'
{{scaningStr}}<
/button>
单引号，双引号
双引号会搜索引号内的内容是不是有变量，有则输出其值，没有则输出原有内容。
所以输出纯字符串的时候用单引号比双引号效率高，因为省去检索的过程。
3.2扫描控制
●在scan.wxml中
bindtap='
●在scan.js中添加点击事件响应函数
//开始/停止扫描
scanCtrl（e）{
if（this.data.scaningStr==='
停止扫描'
）{
this.stopBluetoothDevicesDiscovery（）//停止扫描
}else{
this.openBluetoothAdapter（）
}
},
●停止扫描
stopBluetoothDevicesDiscovery（）{
this._discoveryStarted=false
wx.stopBluetoothDevicesDiscovery（）
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（'
startBluetoothDevicesDiscoverysuccess'
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的设备
constobjDevice={}//重新构造一个device，添加温度
objDevice.deviceId=device.deviceId
objDevice.localName=device.localName
objDevice.name=device.name
objDevice.RSSI=device.RSSI
letdateSec=Date.now（）//取手机系统时间秒
letdate=newDate（dateSec）//取手机系统时间
objDevice.date=util.formatTime（date）
objDevice.advertisData=device.advertisData
letadDataStr=ab2hex（device.advertisData）
console.log（'
广播包数据：
'
+adDataStr）
objDevice.temp=getTemp（adDataStr）
温度：
+objDevice.temp）
letfoundDevices=this.data.devices
letidx=inArray（foundDevices,'
deviceId'
device.deviceId）//找到当前deviceId对应的i
if（idx===-1）{
tempData=tempData+objDevice.deviceId+dateSec+objDevice.temp
this.data.devices.push（objDevice）//如果this.data.devices没有找当前的deviceId，就添加一个新的
if（this.data.devices[idx].temp!
=objDevice.temp）{//不记录重复的数据
this.data.devices[idx]=objDevice//如果在inArray函数中找到了当前的deviceId，就更新
console.log（温度数据：
+tempData）
devices:
this.data.devices
●添加函数和变量
注意，根据Page（{来判断下面的函数和变量应该写在什么位置。
//从广播包中取温度数据
functiongetTemp（adDataStr）{
vartemp=adDataStr.substring（4,adDataStr.length）
vartemperature=temp[1]+temp[3]+'
.'
+temp[5]+temp[7]//去掉前导0，加小数点
returntemperature
//声明变量
vartempData='
constutil=require（'
../../utils/util.js'
）
Page（{
data:
[],
connected:
false,
chs:
'
……
请对照官网DEMO源代码看。
3.3真机调试
为了看到程序运行时的中间结果，我们用真机调试一下：
对于简单的修改，如果不需要看中间结果，可以用预览进行测试，比真机调试节省时间。
“真机调试”窗口：
console.log（'
tempData:
这3条调试语句将程序运行的中间结果显示出来。
手机显示：
注意，苹果手机显示的是设备ID，安卓手机显示MAC。
5.历史数据展示
我们已经将数据缓存到了变量tempData中，为了便于观察数据的变化，下面我们将tempData中的数据用列表和曲线显示。
4.1创建一个新的页面display
这个操作我们已经很熟悉了，在app.json中添加一行"
pages/displays/display"
4.2写页面代码
●display.wxss
.back-img{
10%;
none;
margin-left:
5px;
.canvas{
height:
250px;
.device_list{
margin:
5rpx5rpx;
0;
border:
1rpxsolid#EEE;
5rpx;
500rpx;
/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
:
-webkit-scrollbar
{
width:
10px;
height:
background-color:
#ffffff;
/*定义滚动条轨道内阴影+圆角*/
-webkit-scrollbar-track
-webkit-box-shadow:
inset0010pxrgba（0,0,0,0.3）;
border-radius:
yellow;
/*定义滑块内阴影+圆角*/
-webkit-scrollbar-thumb
inset0010pxrgba（0,0,0,.3）;
#ff5500;
●display.wxml
100rpx;
#eee;
#38B0DE;
imageclass='
back-img'
mode='
widthFix'
src='
../images/backs.jpg'
back"
/image>
font-weight:
bold;
margin-right:
{{deviceId}}<
view>
canvascanvas-id="
lineCanvas"
disable-scroll="
true"
canvas"
bindtouchstart="
touchstart"
bindtouchmove="
touchmove"
bindtouchend="
touchend"
/canvas>
50rpx;
共{{amount}}条记录<
scroll-y='
true'
scroll-into-view='
100'
{{idata}}"
content"
14px;
{{item.samplingTime}}<
●微信小程序wx-charts图表插件
显示曲线需要下载wx-charts，网址
解压后，把dist里面的wxcharts.js或者wxcharts-min.js放在小程序的文件夹里，在当前页面引用文件：
constwxCharts=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.redirectTo关闭当前页面,跳转到另外一个页面。
在scan.js中我们用wx.navigateTo：
//数据展示
displayData（e）{
constdeviceId=e.currentTarget.dataset.deviceId
//传递的参数可返回跳转
wx.navigateTo（{
../displays/display?
ideviceId='
+deviceId+'
tempData='
+tempData
用wx.redirectTo跳转会关闭当前页面，跳转页面后不能返回上一页，这样我们就看不到其他设备的数据了。
所以我们改用wx.navigateTo函数，它在跳转时保留当前页面，使用wx.navigateBack可以返回原页面。
下面的语句传递了2个参数deviceId和tempData。
url:
+de
升级会员 