- 蓝牙分包写入
前段时间收到一个蓝牙设备,需求是控制板子上面的电机,这对于从未接触过硬件的小白来说无疑是一个挑战,然而我是一个喜欢挑战的蓝人,于是开始了我的研究。 我开始各种搜罗Demo,查看文档及各大论坛。 终于,黄天不负苦心人,我成功的连接上了设备,并且获取到了他的服务及特征值,当然,每台外设可用的服务及特征值都是不一样的,而且有些是不可用的,什么 read、write、notify、indicate 要根据自己的操作需求去看哪个特征值支持。每个服务下面都有不同的特征值,每个特征值下面又分出来几个不同的特征值列表,接下来就是根据自己需求筛选了。 支持列表: read:读取低功耗蓝牙设备的特征值的二进制数据值 write:向低功耗蓝牙设备特征值中写入二进制数据 notify || indicate:启用低功耗蓝牙设备特征值变化时的 notify 功能,订阅特征值 这些都选好后该开始向蓝牙设备写入指令,让他动起来了(想想就有些小激动) 不过根据官方提供的方式转换指令并写入的时候,意外发生了! 我在回调里面打印成功与否的时候,显示成功,但是设备却没人任何反应,于是我又开始找原因(设备通过某个App试过,写入指令后是正常的),又开始了我的搜寻之旅。 之后发现原因是因为我使用的指令转换后超过了20字节,在Api文档中 https://developers.weixin.qq.com/miniprogram/dev/api/wx.writeBLECharacteristicValue.html 标注了建议每次写入不超过20字节,但是也不是强制性的呀,导致我很懵逼,明明返回的是成功。 [图片] 事到如今,只能接着寻找解决方法了,总不能跟他这么耗着呀。接着我的搜寻之旅吧!(废话那么多,重点该来了) 终于,找到种分包的方式,把超过20字节的指令分批发送(当然,没有超过20字节的话,也不影响使用),这边需要注意一下,不能直接连发,需要有一个延迟,然后~完美写入指令,我的小电机动起来了。 整体的流程如下: 打开蓝牙模块 => 搜索蓝牙 => 获取所有已发现的设备 => 连接蓝牙设备 => 获取蓝牙设备的所有服务 => 获取蓝牙设备服务下的所有特征值 => 向蓝牙设备写入指令 => 完成 =>关闭蓝牙模块 行了,不哔哔了。我结合官方提供的Demo修改了一下,添加了一个分包写入,已经打包成代码片段,可以直接使用。 代码片段中服务和特征值这两个地方我写成了固定的,根据自己的需求可以修改下。 [图片] [图片] 核心代码: 延时定时器 格式转换 判断并分包写入 [图片] [图片] 代码片段: https://developers.weixin.qq.com/s/oFJc70mI7o8K 如有不对的地方或者更好的解决方案,还望大佬们及时提出,希望对你们有所帮助。
2019-05-05 - 微信小程序三种授权登录的方式
经过一段时间对微信小程序的研发后 总结出以下三种授权登录的方式,我给他们命名为‘一次性授权’‘永久授权’‘不授权’ 1.一次性授权 常规写法,需要获取用户公开信息(头像,昵称等)时,判断调取授权登录接口,但是此方法如果不经处理的话 用户如果拒绝授权或者删除该微信小程序后 需要重新调取并获取用户公开信息(头像,昵称等),此方法用户体验较差,不建议使用; 2.永久授权 在不必要使用用户公开信息(头像,昵称等)时,不调取授权登录接口,只有在必要的时候再去判断调取授权登录接口并把获取到的用户公开信息存入数据库,这样在每次登录时直接先运行指定函数从数据库索取需要的用户公开信息(头像,昵称等)即可,此方法在删除小程序后不用再次去授权登录(因为在用户第一次授权登录时已经把用户的公开信息存入数据库了以后直接向数据库索取即可),建议使用; 3.不授权 不需要授权登录获取用户公开信息(头像,昵称等),使用wx.login获取用户code并传入后台,后台可以通过用户的code值向微信要一个值(具体需要问后台,我只是个小前端,后台的东西不是很懂,只是知道一些逻辑而且也已经成功实现)然后通过这个用code换取的值就可以识别到指定用户,如果需要的话,前端要显示的头像、昵称等这些信息可以使用自定义可编辑的功能,当然,也可以通过<open-data type=“userAvatarUrl”></open-data><open-data type=“userNickName”></open-data>小程序提供的这个组件显示用户的头像及昵称(不过这个组件只有显示功能),用户如果想直接使用自己的头像昵称,也可以自行授权(比如添加个引导按钮什么之类的),建议使用; [图片][图片] 文中使用的微信自带接口、组件及函数: <open-data type=“userAvatarUrl”></open-data> <open-data type=“userNickName”></open-data> wx.login({ success(res){ console.log(res.code) } }) 微信授权登录 以上三种方式可以灵活运用,也可以把需要的结合到一起,并不冲突; 当然,大佬很多,我也只是个小前端而已,第一次发表技术方面的帖子,希望互相学习,互相指导,如有说的不对的地方还望大佬们及时指出!!! 谢谢
2019-04-18 - 图片实现渐变/透明效果
众所周知,图片等一些盒子都可以利用opacity属性来设置不透明度,但是前两天我朋友忽然给我一个截图,截图效果如下 [图片] 图中红框圈住的位置图片或者说摄像头采集的画面出现了渐变到透明,可以清楚的看到可以看到后面小哥的胳膊,然后问我如何实现这种效果,这下把我难住了(呵 天天给我出难题),我开始在个大论坛开始寻找解决方案; 忽然在前天,日常逛论坛时看到一个文字投影的效果,而后忽然灵机一动就想,能不能变相的实现前两天我想要的那种效果,于是乎赶紧打开编辑器试了下,发现确实可以把我想要的图片或者盒子进行投影并给投影设置上渐变颜色及透明,结果出来了,只不过出来的效果他反了 [图片] 随后利用transform: rotate(180deg);控制他使出倒挂金钩此等功夫,果然不负所望,成功翻转过来 [图片] 但是我想要的只有投影,因为我想要效果目前只能用投影去实现去控制,但是他却本体与投影共同出现了,我不想看到本体,太丑了,怎么办呢,那就给他装个position: absolute; top给他爸爸装个position: relative; overflow: hidden;让他滚出~,结果显而易见,我胜利了; [图片] 我得到了我想要的结果,为了验证结果,我用文字放在他的下方 看看是否透明; [图片] 我真的成功了,哈哈(小开心一会儿),为了再次确认他真是的图片实现了渐变透明,我把渐变的透明度改成了1(也就是不透明) [图片] 事实证明,我真的成功了!!! 吹完牛皮,赶紧附上完成代码: css: [图片] html: [图片] 最终效果图: [图片] 呃…其实核心就是利用投影来完成的-webkit-box-reflect: below 0 linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1) 100%); https://www.w3cschool.cn/css3/box-reflect.html 当然 肯定有大佬在我之前发现这种实现方式,不过当时我找了很久都没找到实现方式的写法,想了想 就发出来吧,如果有什么不对的地方,或者有其他方式也可以实现同等效果的话 还劳请告知,在下多谢各位大佬了!!!
2019-04-19