微信小程序
文章平均质量分 53
以微信小程序低功耗蓝牙BLE开发为入口,实际开发一个BLE的微信小程序,用以检验一下微信小程序的BLE是否好用。后续有时间将开发更多的微信小程序。
程序员顺溜
技术不是终点,成长才刚刚开始!
程序员 | 创业者 | 管理团队 | 嵌入式
10年编程经验,5年创业经历,什么都了解一点
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
22_微信小程序开发-BLE低功耗蓝牙开发-源码
我没想到很多同学都在私信我,问我要这个 iBLETool 的源码,是我没考虑到的。其实最开始没有把源码分享出来,主要的原因是这个项目是我自己拿来练手的,有很多地方考虑不完善,怕误导了各位同学!现在很多同学在问我要这个源码,那么我就把它开源出来,希望能够对你有所帮助!请关注我的微信公众号,并回复 iBLETool 就可以获取源码链接了。如果各位同学在使用源码的过程中遇到问题,也可以微信留言,主要是优快云不常登录,不能及时回复你的消息,抱歉!...原创 2022-04-21 17:21:20 · 1517 阅读 · 8 评论 -
21_微信小程序开发-BLE低功耗蓝牙开发-总结
从1月12号开始到今天1月24号,这个项目正式开发完成结束,中间零零散散的整体算下来应该花了差不多1周的时间吧。中间为了解决一些疑难问题,晚上还干到1点多,这个可能也是程序员的执著吧。其实我也是初次接触到微信小程序,我本身不是做应用端开发的,而是做嵌入式和中间件相关的,只是以前了解过应用相关开发的知识,所以开发起来还是遇到了很多障碍,有些问题对于做应用开发的人来说是很基础的,但是我可能需要花很多的时间去解决,不过也没有关系,学习的过程也就是这样的。只要有浏览器可以搜索,知道怎么通过关键字找到自己想要的结果,原创 2022-03-07 15:41:26 · 1187 阅读 · 1 评论 -
20_微信小程序-BLE低功耗蓝牙开发-发布小程序
所有功能测试OK了,就剩下最后一步了,那就是把开发好的微信小程序发布出去。1. 填写小程序信息,登录小程序管理平台,在设置->填写信息,里面填写小程序相关信息(后面我直接把小程序名称改为“iBLETool”了)2. 在详情里面吧AppID修改为正式id3. 点击上传按键上传代码填写版本号和版本描述4.在小程序管理平台的:版本管理里面找到开发版本,然后点击提交审核5.填写审核相关内容,包括小程序截图、演示视频等。6.填写隐私政策。...原创 2022-03-04 11:20:10 · 2217 阅读 · 0 评论 -
19_微信小程序-BLE低功耗蓝牙开发-分辨率适配的单位
说到小程序适配,这里可以说一下微信小程序的‘rpx’。其实现在不管是安卓还是IOS的设备,在设计的时候,都不是直接采用屏幕的物理分辨率单位,因为不同手机分辨率不一样,那么做设计开发的人员不可能去针对每款手机都去做一套UI,所以为了统一方便设计,采用了一个对应关系的单位,比如苹果的pt,安卓的pd,微信小程序的rpx,表示的是一个对应关系。在不同分辨率的手机上,对应关系是不同的。这个对应关系是系统自行去计算的,这样设计的时候,就只需要设计一套,然后就可以在大部分的手机上正常显示了。某些手机还是要去做特殊的调整原创 2022-03-03 13:52:32 · 806 阅读 · 0 评论 -
18_微信小程序-BLE低功耗蓝牙开发-测试和适配
由于我开发过程中用的是苹果的手机,并没有在安卓平台上测试过,而且也没有在其他分辨率的手机上跑过,大概率会存在很多兼容性、适配问题。所以准备在其他手机上测试一下。发现的问题点:1. 苹果和安卓返回的设备信息不一样。1) 安卓返回的设备信息:2) 苹果返回的设备信息:安卓返回的设备信息的devicdId直接是MAC地址,而苹果返回的设备信息是类型于UUID的字符串,所以解析MAC地址的时候,要根据情况做处理,不然解析的时候会有异常。2.手机分辨率适配问题虽然用了微信的..原创 2022-03-02 11:57:42 · 1020 阅读 · 0 评论 -
17_微信小程序-BLE低功耗蓝牙开发-数据本地存储
其实到目前为止,BLETools工具相关功能已经完成了,不过为了更加方便的使用,发送内容区那里最好做本地化存储处理,这样用户就不需要每次打开都去输入内容了。本地化存储需要用到微信的缓存相关API,参考页面:wx.setStorageSync(string key, any data) | 微信开放文档存储我采用:wx.setStorageSync(string key, any data, Boolean encrypt)接口读取存储信息采用:any wx.getStorageSync(原创 2022-03-02 11:51:14 · 541 阅读 · 0 评论 -
16_微信小程序-BLE低功耗蓝牙开发-循环发送数据
循环发送数据逻辑很简单,需要用到定时器函数:setInterval和clearInterval在循环发送选择框有效的时候,就开启循环发送定时器,选择框无效的时候,就清除循环发送定时器wxml代码:<!--发送区底部bottom部分--><view class="sendBottomView"> <checkbox checked="{{cycleSendFlag}}" bindtap="cycleSendCheckBoxClick"/>循环发送(ms):原创 2022-02-28 20:05:12 · 1152 阅读 · 0 评论 -
15_微信小程序-BLE低功耗蓝牙开发-读写特征值
读写特征值之前,用户需要先选择对应的特征值ID,用户选择了特征值ID以后,通过变量记录下来,方便下次使用。currWriteChar: { // 当前选择的写入特征值 flag: false, // 表示是否可用 serId: "", // 服务ID charId: "" // 特征值ID},currReadChar: { // 当前选择的读/通知特征值 flag: false, // 表示是否可用 serId: "", // 服务ID charId: "" // 特征值ID}原创 2022-02-26 10:40:06 · 1922 阅读 · 0 评论 -
14_微信小程序-BLE低功耗蓝牙开发-服务和特征值获取
获取服务列表和特征值列表,需要用到微信的两个接口:wx.getBLEDeviceServiceswx.getBLEDeviceCharacteristics这里依然对这两个接口进行的封装,在ble.js里面新增了两个对应的接口/*** 获取service* @param {string} deviceId* @param {function} cb 成功返回服务列表,失败参数为null*/function getDevServices(deviceId, cb) /**原创 2022-02-24 16:20:18 · 1854 阅读 · 2 评论 -
13_微信小程序-BLE低功耗蓝牙开发-树形布局
自定义弹窗OK了,但是还得给里面填充内容。BLE的设备信息是一个设备包含了多个服务,每个服务下面又有多个特征值,所以这里最好的方式是采用树形结构的方式去展示设备相关信息,类似于如下的效果:内容大致如下大概就是:服务名称服务UUID--特征值名称--特征值UUID服务名称服务UUID--特征值名称--特征值UUID在网上看了一下自定义的树形...原创 2022-02-22 15:13:13 · 411 阅读 · 0 评论 -
12_微信小程序-BLE低功耗蓝牙开发-自定义弹窗界面
在获取服务列表和特征值列表完成后,需要把相关的信息呈现出来,这里采用一个弹窗界面,把服务ID和特征值ID显示出来。微信小程序的原生弹窗不能满足需求,这里只有自定义弹窗窗界面了。wxml代码:<!--弹出框--><!--要加上catchtouchmove="dialogViewTouchMove",否则页面可滑动--><view class="dialogView" catchtouchmove="dialogViewTouchMove" wx:if="{{dial原创 2022-02-21 19:32:15 · 866 阅读 · 0 评论 -
11_微信小程序-BLE低功耗蓝牙开发-打印输出
随着模块的增加,打印信息越来越多,很难区分到底是哪个模块的打印,所以这里在utils新增一个debug.js的模块,用于控制打印输出。// 打印模块const DEBUG_DEBUG = 0; // debug打印等级const DEBUG_INFO = 1; // info打印等级const DEBUG_WARNING = 2; // warning打印等级const DEBUG_ERROR = 3; // 错误打印等级const debug_level = DEBUG_DEBUG;原创 2022-02-21 19:29:07 · 559 阅读 · 3 评论 -
10_微信小程序-BLE低功耗蓝牙开发-连接设备
1. 连接蓝牙设备,需要使用微信的wx.createBLEConnection接口,参数为蓝牙设备的deviceId(这个参数在搜索的设备信息里面可以直接拿到)。2. 在ble.js里面新增connect、disconnect、getDevConStatus三个接口,用以统一管理设备连接和设备断开,因为在安卓平台上,重复去连接会导致设备没有办法断开连接。所以在ble.js里面还维护了一个连接/正在连接的设备数组,方便统一管理设备。当调用connect的时候,会先去这个数组里面查找是否有该设备,如果有就不原创 2022-02-18 15:23:05 · 3133 阅读 · 0 评论 -
09_微信小程序-BLE低功耗蓝牙开发-控制界面UI布局
遇到的问题1. 子元素相对父元素靠右或者靠左对齐的实现父元素要设置为相对位置,子元素设置为绝对位置,然后就可以设置left、right等参数2. 给输入框添加下划线直接在输入框样式里面添加个下边框 3.在样式里面设置按键宽度不生效问题如果直接在xwss里面设置按键按键宽度,是没有效果的,只能直接设置style属性 ...原创 2022-02-17 17:57:42 · 753 阅读 · 0 评论 -
08_微信小程序-BLE低功耗蓝牙开发-设备搜索
遇到的一些问题BLE相关的好多函数都是异步的,但是BLE的操作又必须按照顺序流程来,否则就会出现问题,所以这里得嵌套大量的回调函数。 普通回调函数中this拿不到data数据的问题 原因:小程序在回调函数中调用this数据报错是因为在程序运行过程中,this对象也会发生改变,导致在普通回调函数之中改变后的this对象没有相关数据,即会报错 解决方法:1)使用全局变量保存这个this;2)使用箭头函数 下面开始正式开发ble设备搜索功能,为了...原创 2022-02-16 14:37:06 · 1176 阅读 · 2 评论 -
07_微信小程序-BLE低功耗蓝牙开发-权限申请
1. 在开发BLE之前,需要先申请相关权限,否则初始化蓝牙的时候,会返回错误码10001。授权相关可参考文档:授权 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html#scope-%E5%88%97%E8%A1%A82.权限申请流程 1)检查该权限是否申请 wx.getSetting 2)如果...原创 2022-02-16 14:30:22 · 4483 阅读 · 2 评论 -
06_微信小程序-BLE低功耗蓝牙开发-流程
初学微信BLE,参考: 蓝牙低功耗 (Bluetooth Low Energy, BLE) | 微信开放文档 微信BLE操作流程 1)申请ble权限‘scope.bluetooth’ 2)初始化蓝牙模块 wx.openBluetoothAdapter 3) 如果初始化失败,请提示用户授予微信ble权限,并打开蓝牙。初始化成功则跳过该步骤。 4)扫描并发现蓝蓝牙...原创 2022-02-16 14:26:49 · 934 阅读 · 0 评论 -
05_微信小程序-BLE低功耗蓝牙开发-搜索界面事件处理
1. 给List添加点击事件直接真机仿真调试,点击list,查看打印2. 给按键添加事件给按键添加事件,依然采用的是bindtap事件添加事件处理函数 3. 按键事件逻辑这里我们需要给按键事件添加想要的逻辑了,按键在这里有两种状态,1. 停止搜索状态,2. 正在搜索状态。当按键处于停止搜索状态的时候,按键显示“搜索”、去清空设备列表,点击按键按键状态变为2,显示“停止”。这里怎么才能改变...原创 2022-02-16 14:25:40 · 686 阅读 · 0 评论 -
04_微信小程序-BLE低功耗蓝牙开发-搜索界面UI布局
其实到目前为止,我还没有做过微信小程序的开发,只是有一点界面开发的知识和概念,下面我将尝试开发蓝牙搜索界面的UI。蓝牙搜索界面:根据蓝牙搜索界面的布局,设备显示列表会用到:文本控件、列表显示控件。控制部分会用到:按键控件,进度条控件,其实我也不知道微信小程序里面现在的这些控件是怎么用的,只能现学现卖。1. 大致看来一下微信的Demo,布局都是通过View来控制的,感觉有点基础了,直接开干。删除index.wxml文件里面的内容,只留下一个主view,样式引用的是app.wxss里面的co原创 2022-02-15 14:44:26 · 1535 阅读 · 0 评论 -
03_微信小程序-BLE低功耗蓝牙开发-原型设计
想尝试一下微信小程序对ble低功耗蓝牙的功能是否好用,所以准备开发一个BLETools的小工具。该工具分为蓝牙设备搜索界面、蓝牙操作控制界面,总共两个界面。1. 蓝牙搜索界面如下: 可以点击搜索按钮开始搜索设备或者停止搜索,并且旁边有搜索进度显示。搜索到的设备会显示在设备列表框内,每个设备包括:设备名称、MAC地址、信号强度、广播数据。点击对应的设备,可以连接该设备,并且进入控制界面2. 控制界面 控制界面主要分为三个区域...原创 2022-02-15 14:38:19 · 1230 阅读 · 0 评论 -
02_微信小程序-BLE低功耗蓝牙开发-文件类型和说明
查看编辑器,里面罗列了各种不同的文件1. pages目录下对应的是一个页面相关的文件.js: 脚本文件,相关逻辑代码写在这个文件里面.json: 数据文件.wxml: 可以叫做界面布局文件.wxss: 样式文件,用于设定界面或者某元素的样式2. logs目录下存放的是一些和日志相关的3. utils目录下存放的是一些全局相关的文件app.js: 入口文件app.json: ...原创 2022-02-15 14:37:19 · 418 阅读 · 0 评论 -
01_微信小程序-BLE低功耗蓝牙开发-注册和工具安装
访问微信公众号平台,注册小程序 注意:一个邮箱只能注册一个微信小程序 2. 下载安装开发工具 这里有个重要的东西AppID,注册申请的时候生成的。我们这里只做学习用,所以可以点击后面的测试号,会弹出链接,扫码然后申请一个测试号,这里就直接选择测试号的AppID就行。所有信息填写完成后,就可以点击确认创建一个小程序了。 3. 主界面 主界面和Chrome的调试界面很像,主要有...原创 2022-02-15 14:33:20 · 6990 阅读 · 0 评论
分享