【微信小程序控制硬件 第14篇】分享一下我在微信公众号和小程序上实现的几个颜色采集器，轻松集成到您项目实现调光。
【微信小程序控制硬件第1篇 】 全网首发，借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器，轻松控制智能硬件！
【微信小程序控制硬件第2篇 】 开始微信小程序之旅，导入小程序Mqtt客户端源码，实现简单的验证和通讯于服务器！
【微信小程序控制硬件第3篇 】 从软件到硬件搭建一个微信小程序控制esp8266的项目，自定义通讯协议，为面试职位和比赛项目加分！
【微信小程序控制硬件第4篇 】 深度剖析微信公众号配网 Airkiss 原理与过程，esp8266如何自定义回调参数给微信，实现绑定设备第一步！
【微信小程序控制硬件第5篇 】理清接下来必须走的架构思想，学习下 JavaScript 的观察者模式，在微信小程序多页面同时接收到设备推送事件！
【微信小程序控制硬件第6篇 】服务器如何集成七牛云存储SDK，把用户自定义设备图片存储在第三方服务器！
【微信小程序控制硬件第7篇 】动起来做一个微信小程序Mqtt协议控制智能硬件的框架，为自己心里全栈工程师梦想浇水！！
【微信小程序控制硬件第8篇 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器，封装起来使用就是这么简单！
【微信小程序控制硬件第9篇 】巧借阿里云物联网平台的免费连接，从微信小程序颜色采集控制 esp8266 输出七彩灯效果，中秋节来个直播如何？！
【微信公众号控制硬件 第10篇 】如何在微信公众号网页实现连接mqtt服务器教程！！
【微信小程序控制硬件 第11篇 】全网首发，微信小程序ble蓝牙控制esp32，实现无需网络也可以控制亮度开关。
【微信小程序控制硬件 第12篇 】微信小程序蓝牙控制硬件应如何开发？为您全面解析微信小程序蓝牙API的使用。
【微信小程序控制硬件 第13篇 】安信可B站直播学习总结，微信小程序MQTT远程控制ESP8266 NodeMCU，谈谈微信生态那些事。
【微信小程序控制硬件 第14篇 】分享一下我在微信公众号和小程序上实现的几个颜色采集器，轻松集成到您项目实现调光。
文章目录
- 一 前言
- 二 关于颜色采集器
- 三 七彩控件
- 1. 微信小程序圆环七彩控件
- 2. 微信小程序七彩控件
- 3. 微信公众号七彩圆环控件
一 前言
时光如白驹过隙，世事如白云苍狗，不知不觉中，2020年已经度过了一半了，很多时候，我在反思自己，这几个月我究竟在项目中学到了什么？又如何去总结形成自己的知识体系？正是自己所考虑的，正如前辈所说：不仅为公司谋发展，还要提高个人竞争力；
最近我没什么新鲜文章出炉，很多时候在反思一些未来的方向，需要不断改正来适应社会的发展。
怎么搞都是 Wi-Fi 模块物联网领域，在接触 ble mesh协议，还是比较吃力的，好吧，慢慢来；
二 关于颜色采集器
在2017年时候，我写过一篇文章关于在 Android 上实现七彩虹控制的，其原理还是比较简单，大家可以到这文章浏览下：
- Android自定义View之七色环颜色采集器: 续我未完的大学梦
然后，微信小程序就逐渐慢慢庞大起来了，于是乎，我在考虑如何在跨平台上来做这些好看的界面，特别是七彩环控制，特别受欢迎；
三 七彩控件
总结这几年实现的七彩控制的经验，给各位带来几个好看的实用的控件！
1. 微信小程序圆环七彩控件
- 【 推荐指数 ★★★★★】
先看看效果：
原理就是画2个圆，用2个画布即可实现，具体的画法代码如下：
<view class="color-picker-view"><canvas id="colorPicker" style="width: {{raduis}}rpx;height: {{raduis}}rpx;" canvas-id="colorPicker" class="color-picker" /><canvas canvas-id="colorPickerSlider" class="color-picker-slider" style="width: {{raduis}}rpx;height: {{raduis}}rpx;z-index:1;background:rgba(255,255,255,0);" bindtouchstart="onSlide" bindtouchmove="onSlide" bindtouchend="onSlide" />
</view>
设置点击触摸事件：
let colorPickerCtx = wx.createCanvasContext('colorPicker');colorPickerCtx.fillStyle = 'rgb(255, 255, 255)';sliderCtx = wx.createCanvasContext('colorPickerSlider');this.MqttConnect()let isInit = true;wx.createSelectorQuery().select('#colorPicker').boundingClientRect(function(rect) {_this.setData({valueWidthOrHerght: rect.width,})if(isInit){colorPickerCtx.fillRect(0, 0, rect.width, rect.height);util.drawRing(colorPickerCtx, rect.width, rect.height);// 设置默认位置util.drawSlider(sliderCtx, rect.width, rect.height, 1.0);isInit = false;}_this.setData({pickColor: JSON.stringify({red: 255,green: 0,blue: 0})})}).exec();
同步下状态，比如设置为绿色：
let h = util.rgb2hsl(0, 255, 0);util.drawSlider(sliderCtx, _this.data.valueWidthOrHerght, _this.data.valueWidthOrHerght, h[0]);this.setData({pickColor: JSON.stringify({red: 0,green: 255,blue: 0})})
参考的是阿里开源的支付宝小程序七彩灯程序，二次移植并开发实现在微信小程序上，目前已经实现了圆环拖动获取颜色，以及根据指定的颜色来跳到指定的位置；
代码开源，我已经放在了GitHub上了： https://github.com/xuhongv/WCMiniColorPicker
2. 微信小程序七彩控件
- 【 推荐指数 ★★★】
先看看效果：
小程序拾色器（颜色选择器）组件,以rgb为数据格式
对比:
- we-color-picker
需注意组件定位，操作不跟手不流畅,配置复杂。其定位会撑开原有页面，体验不佳。滑动距离按像素区分(固定)，需考虑设备分辨率，不利于多端。 - PapaerPen
利用原有slider组件实现滑动选取，不限于设备分辨率。但需三次操作。
特性:
本组件利用官方提供的slider实现选择色相，movable-view选择饱和度和明度，由于是官方基础组件，操作顺畅。在滑动区域的设定上，使用占比来影响色值变化，无需考虑rpx转换。在操作流程上，限于手机操作区域，不能使用Popover，使用底部拉起弹窗，不影响原有页面，重点突出。在操作预览上，由于弹窗遮罩不可避免无法实时预览，采用色相滑块的颜色来实现预览。同时考虑了iphone-x的安全区域问题。
安装和使用具体的方法参考：GitHub链接
下面贴下我的应用场景，使用此控件+远程控制设备，是非常好玩的；
3. 微信公众号七彩圆环控件
- 【 推荐指数 ★★★★★】
- 这个效果我个人感觉是最好的，富有弹性，哈哈！
上面给大家分享了我最近用的2个微信小程序上实现的采集颜色控件，下面给大家推荐下微信公众号上的，其实微信公众号开发就是一个网页来的，所以一般的移动端H5适配都可以轻松集成；
具体的使用方法，访问：radial-color-picker/vue-color-picker ，集成失败的，可以联系我呢！
下面是集成到我的公众号之后的效果：
- 玩转
esp8266带你飞、加群QQ群，不喜的朋友勿喷勿加：434878850 - 个人邮箱：xuhongv@yeah.net 24小时在线，有发必回复！
- esp8266源代码学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp8266
- esp32源代码学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp32
- 关注下面微信公众号二维码，干货多多，第一时间推送！
【微信小程序控制硬件 第14篇】分享一下我在微信公众号和小程序上实现的几个颜色采集器，轻松集成到您项目实现调光。相关推荐
- 微信小程序控制硬件 第14篇 微信小程序腾讯地图控制 4G Cat.1模组 ，安信可CA-01加载定位显示当前位置。
文章目录 一.前言 通讯协议 技术问题点 二.4G模组业务逻辑 上报基站信息 三.微信小程序控制 另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈! 微信物 ...
- 微信小程序控制硬件第17篇 : 腾讯连连小程序通过LLSync蓝牙协议控制安信可PB-02模组，无需网络实现蓝牙本地通讯。（附带源码）
文章目录 前言 一.注册腾讯物联开发平台设备 新建项目 新建产品 创建数据模板 选择设备开发方式 交互开发配置 新建设备 二.设备端操作 硬件简介与连接 准备软件环境 工程目录 烧录步骤 三.腾讯连连 ...
- 【微信小程序控制硬件 第12篇-项目篇】微信小程序蓝牙控制硬件应如何开始动手？为您全面解析微信小程序蓝牙API的使用；（附带demo）
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
- 【微信小程序控制硬件 第13篇】安信可B站直播学习总结，微信小程序MQTT远程控制ESP8266 NodeMCU，谈谈微信生态那些事；
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
- 【微信小程序控制硬件⑦ 进阶篇】动起来做一个微信小程序Mqtt协议控制智能硬件的框架，为心里全栈工程师梦想浇水。
文章目录 一.前言: 二.涉及的技术点: 三.框架的运行原理: 四.框架代码流程: 4.1 主线程: 4.2 获取设备列表显示设备,以及订阅在线的设备: 4.3 点击某设备如何实现携带此设备信息到控制 ...
- 【微信小程序控制硬件14 】 微信小程序蓝牙+WiFi双控制ESP32-C3应用示范；（附带Demo）
文章目录 一.前言 二.设备核心代码 2.1 蓝牙控制 2.2 WiFi控制 2.3 外设驱动 三.微信小程序核心代码 3.1 蓝牙搜索 3.2 蓝牙服务发现 四.感谢 另外,不要把我的博客作为学习标 ...
- 【微信小程序控制硬件⑦ 进阶篇】巧借阿里云物联网平台的免费连接，从微信小程序颜色采集控制 esp8266 输出七彩灯效果，中秋节来个直播如何？！
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
- 【微信小程序控制硬件13 】 与硬件平台无关，微信小程序 AP 配网安信可 Wi-Fi 模块入网示例。【AT篇，附带Demo】
文章目录 前言 一 材料准备 二 实现目的 三 配置的数据交互协议 3.1 小程序发送网络信息阶段 3.2 模组连接路由器的回调: 四 配置原理和过程 五 设备端 AT 交互过程 另外,不要把我的博客 ...
- 【微信小程序控制硬件16 】 安信可 ESP32-S 开发板实现移植腾讯物联开发平台蓝牙 llsync 协议，实现一键蓝牙快速配网+远程控制。（附带源码）
文章目录 一.前言 二.源码目录说明 三.编译指导 四.常见问题 五.开源微信物联网控制一览表 另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈! 微信物联 ...
最新文章
- 关于selinux排错
- 图像降噪算法——图像噪声模型
- int*与(int*)的差别
- java的css的块_CSS块宽度不大于前一个块
- 《文明之光 第二册》一一10.1 罗卡尔角的夕阳—— 葡、西的殖民时代(1)
- 问题 1437: [蓝桥杯][历届试题]城市建设（最小生成树）
- java 1000以内的完数
- 参数嗅探_SQL Server 2016参数嗅探
- css 悬停动画_CSS3缩放图像动画效果悬停
- PHP 常用算法集锦
- vc 6.0下msdev错误
- 内存碎片与malloc（转）
- IOS端好用的ssh工具推荐
- 2013年US News全美综合大学排名（全）
- 【JavaWeb】1、XML、Tomcat
- Rational Team Concert 2
- 读取工程下的文档 统计重复的姓名 并按次数排序 java_当多个节点有相同名字但是内容不同的时候，生成的类名是相同的，导致导入项目中的时候不好识别。...
- SAS硬盘和SATA硬盘傻傻分不清？不懂的看这里
- LeetCode-241. Different Ways to Add Parentheses [C++][Java]
- 关于计算机网络隐私的作文,网络安全小心作文