工作上经常做一些蓝牙的设备开发,但是一直没有一个比较好的软件工具来配合自己的蓝牙设备,之前在windows上面使用C#做过一个,感觉用PC已经是很古老的方式了,都2021年了,肯定得使用手机才显得高大上。
于是乎开始尝试了IOS开发,Android开发,发现太庞大了,学习成本太高,并且也比较难兼容所有的手机,于是掉头想到了小程序。
说干就干,首先就是小程序的一些开发基础要学习
小程序非常类似前端的开发,基本上一个页面有三个文件,类似xml前端布局文件,类似css的样式文件,还有一个最重要的类似js的Javascript文件,大部分逻辑程序都在js文件中执行。
上面的onLaunch()函数就是在js中的一个事件,他会在页面加载的时候执行。
小程序运行时的第一个界面在APP.json中设置,这个文件中会列出所有页面,但是排在第一排的这个就是小程序默认启动时的页面。
在js 文件中如何在page()之外的地方调用page()内定义的函数?
3.在Page外部加一个延迟调用就可以了,延时应该是为了页面加载。确定加载完也不需要延时了。
修改page中data的方法是使用this.setData方法,按照KEY:Value进行修改。如下面代码是增加一个数组元素。
首先需要在xml文件中进行变量的定义,如下面的data-name,data-id
这两个变量将存储对应view的数据信息,并且在绑定的bindtap事件BTConnectClick()中传递。使用方法如下:
//点击链接蓝牙事件,根据XML获取的参数进行连接固定蓝牙。
//点击链接蓝牙事件,根据XML获取的参数进行连接固定蓝牙。 btConnectClick(e){
注意:显示控件的时间需要在page空间中定义
有了以上的基础,我们就可以进行蓝牙的相关操作了
在所有蓝牙操作调用前,要先调用这个wx.openBluetoothAdapter()当然调用之前最好Ian关闭一下,保证可以顺利的打开。
开启蓝牙扫描函数后,所有被扫描到的蓝牙都会出发回调函数wx.onBluetoothDeviceFound,并将扫描到的蓝牙信息传递出来,我们可以在这个回调函数中处理扫描的蓝牙设备。
在回调函数中,我们根据蓝牙设备广播的名称以及厂商自定义字段来筛选出自己关心的蓝牙设备,并通过page中的函数将设备存储到数据列表中,这里就用到了上面提到的page中数据表的操作。
在链接蓝牙成功后,可以获取对应设备的服务列表
//获取服务下面的所有个性,这里只获取第一个服务下面的特性,应该改为指定服务UUID下面的服务。 btGetCharacter(Id,serviceUUID[0]);
对于notify的操作是首先打开notify,之后会在相应的回调函数中接收到设备发送来的数据。
notify的回调函数处理
在页面对应的 .js 文件中,把数据定义到 data 对象中即可:
把 data 中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量抱起来即可。语法格式为:
Mustache 语法的应用场景如下:
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:
页面打开到触发事件所经过的毫秒数 |
触发事件的组件的一些属性值集合 |
当前组件的一些属性集合 |
触摸事件,当前停留在屏幕中的触摸点信息的数组 |
触摸事件,当前变化的触摸点信息的数组 |
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。
1、通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:
2、在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e)来接收:
在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:
1、通过 bindinput,可以为文本框绑定输入事件:
2、在页面的 .js 文件中定义事件处理函数
* 生命周期函数--监听页面初次渲染完成 * 生命周期函数--监听页面显示 * 生命周期函数--监听页面隐藏 * 生命周期函数--监听页面卸载 * 页面相关事件处理函数--监听用户下拉动作 * 页面上拉触底事件的处理函数 * 用户点击右上角分享介绍微信小程序实现仿微信聊天界面,分享给大家,具体如下:
要达到这个效果,首先要解决两个问题:
1.点击输入框弹出软键盘后,会弹出一点聊天内容,造成看不见的问题;
2.当键盘弹出或缩回时,聊天信息不会自动滚动到底部。
首先解决第二个问题,自动滚动到底部,非常简单。这里有三种方法(推荐第三种):
1.计算每条消息的最大高度,并设置scroll-top=(单个消息的最大高度msg数)px。
2.用显示消息的目标滚动视图包装它。
通过js获取视图的实际高度:
这个。setdata({查看:' msg-'(msglist。length-1)})已经解决了这里的第二个问题,那么让我们回去解决第一个问题:
(点击输入框弹出软键盘后,会弹出一点聊天内容,造成看不见的问题)
1.首先,我们需要关闭输入的自动上推。这里有一个坑:
虽然这不会再向上推,但当软键盘弹出时,它会导致屏幕下部的消息被阻止。
2.如何解决软键盘弹出时屏幕下方的消息会被屏蔽的问题?
当软键盘弹起时,滚动视图的高度缩短到屏幕的上部,不会被软键盘挡住。当软键盘折叠时,滚动视图的高度恢复,从而解决了遮挡问题。
最后,将输入组件放在软键盘上。