小程序 canvas 画布半圆环 效果图：2、wxml：<view class="fragrance_item"> <view class="fragPos"> <view class="fragNum">{{perfumePercent}}%</view> <view class="fragText">香水余量</view> </view> <view class="fragPsoReset"> <view bindtap="resetTab" class="fragReset" hover-class="fragModel_hover"> <image class="fragReset_icon" src="/static/image/reset.png" mode="widthFix"> </image> <view>复位</view> </view> </view> <view class="fragRing"> <canvas id="perfumeBalance" type="2d" style="width: 220px; height: 120px;" ></canvas> </view> </view>3、wxss：.fragModel_hover{box-shadow: 0.2rem 0 0.3rem #8fd0e0, -0.2rem 0 0.3rem #58bfd1;} .fragrance_item{position: relative;margin-left: 15px;margin-right: 15px;} .fragPos{position: absolute;left: 50%; top: 50%;transform: translateX(-50%);text-align: center;} .fragPos .fragNum{color:#32CD32;} .fragPsoReset{position: absolute;right: 3px;top: 36px;text-align: center;} .fragPsoReset .fragReset{display:inline-block;padding:8px 13px;background-color: rgba(50,80,80.68);border-radius: 15px;transition: all .3s ease-in;font-size: 12px;} .fragPsoReset .fragReset_icon{width:22px;height:22px;} .fragRing{width: 220px;height:120px;margin: auto;}4、js：let perfumeNum = 1.5; Page({ data: { perfumePercent: 0, // 香水余量 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let that = this; // 香水余量圆环 const query = wx.createSelectorQuery() query.select('#perfumeBalance') .fields({ node: true, size: true }).exec((res) => { that.initRing(res); }) }, // b、香水余量 initRing(res) { let that = this; const canvas = res[0].node const ctx = canvas.getContext('2d'); const dpr = wx.getSystemInfoSync().pixelRatio // 设备像素比 canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr); var circleR = 220 / 2; // 画布的一半，用来找中心点和半径 ctx.translate(0, 0); // 定义起始点 function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 取色圆环 ctx.beginPath(); ctx.strokeStyle = '#fff';//transparent ctx.lineWidth = 12; ctx.lineCap='round' // 设置圆环端点的形状 ctx.arc(circleR, circleR-10, circleR - 35, Math.PI, 2 * Math.PI, false); ctx.stroke(); ctx.closePath(); console.log("香水余量") // 进度_香水余量 ctx.beginPath(); // 起始一条路径，或重置当前路径 ctx.lineWidth = 6; // 线条宽度 ctx.lineCap='round' // 线条的结束端点样式 ctx.arc(circleR, circleR-10, circleR - 35, Math.PI,perfumeNum * Math.PI, false); ctx.strokeStyle = "#00CED1";//transparent ctx.stroke(); canvas.requestAnimationFrame(draw); } draw(); }, // 复位 resetTab(){ let that = this; perfumeNum = 2; // 香水余量为100% that.setData({ perfumePercent: 100, }) }, })

小程序 蓝牙连接（出现的问题和一些解决方法） 序：最近做小程序，要用到蓝牙模块的，不知道如何下手，没关系，看文档，看案例！看文档： 微信文档 看案例： 谷歌/百度/知乎等等，只要你觉得合适，都可以去尝试！一、小程序 BLE 开发 API 简介操作蓝牙适配器的共有 4 个：wx.openBluetoothAdapter 初始化蓝牙适配器 1 wx.closeBluetoothAdapter 关闭蓝牙模块 2 wx.getBluetoothAdapterState 获取本机蓝牙适配器状态 3 wx.onBluetoothAdapterStateChange 监听蓝牙适配器状态变化事件 4扫描和获取周围 BLE 设备的有4个(操作方式与普通蓝牙一样)：wx.startBluetoothDevicesDiscovery 开始搜寻附近的蓝牙外围设备 5 wx.stopBluetoothDevicesDiscovery 停止搜寻附近的蓝牙外围设备 6 wx.getBluetoothDevices 获取所有已发现的蓝牙设备 7 wx.onBluetoothDeviceFound 监听寻找到新设备的事件 8连接BLE设备的2个：wx.createBLEConnection 连接低功耗蓝牙设备 9 wx.closeBLEConnection 断开与低功耗蓝牙设备的连接 10连接成功后，读写BLE对应特征对象的数据：wx.getConnectedBluetoothDevices 根据 uuid 获取处于已连接状态的设备 11 wx.getBLEDeviceServices 获取蓝牙设备所有 service（服务） 12 wx.getBLEDeviceCharacteristics 获取蓝牙设备所有 characteristic（特征值）13 wx.readBLECharacteristicValue 读取低功耗蓝牙设备的特征值的二进制数据值 14 wx.writeBLECharacteristicValue 向低功耗蓝牙设备特征值中写入二进制数据 15 wx.notifyBLECharacteristicValueChange 启用低功耗蓝牙设备特征值变化时的 notify 功能 16 wx.onBLECharacteristicValueChange 监听低功耗蓝牙设备的特征值变化 17 wx.onBLEConnectionStateChange 监听低功耗蓝牙连接的错误事件 18二、小程序蓝牙连接流程我的连接流程是这样的（代码我就不多贴了，只要你有思路、有想法，你就是黑马）：初始化蓝牙设备之前，我做了一些的骚操作（不懂的查一下）：1、打开定位/** 获取定位信息 */ getLocation: function () { let that = this; // 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限 wx.getSetting({ success: function (res) { if(res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true){ wx.showModal({ title: '是否授权当前位置', content: '需要获取你的地理位置，请确认授权，否则无法获蓝牙', success: function(mres){ if(mres.confirm){ wx.openSetting({ success (authData) { if(authData.authSetting['scope.userLocation'] == true){ wx.showToast({ title: '授权成功', icon: "success", duration: 1000 }) }else{ wx.showToast({ title: '授权失败', icon: "error", duration: 1000 }) } } }) }else if(mres.cancel){ wx.showToast({ title: '授权失败', icon: "error", duration: 1000 }) } } }) }else{ // 当前位置 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标 wx.getLocation({ type: 'wgs84', success: function (res) { console.log('打开地理位置') }, }) } }, }) },2、这个放到一个初始化方法里面,，校验一下微信的蓝牙权限是否打开：init(){ let that = this; // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.bluetooth" 这个 scope wx.getSetting({ success(res) { // (1) 微信授权已关闭，弹窗打开 if (res.authSetting['scope.bluetooth'] != undefined && res.authSetting['scope.bluetooth'] == false) { wx.openSetting({ success (authData) { if(authData.authSetting['scope.bluetooth'] == true){ wx.showToast({ title: '授权成功', icon: "success", duration: 1000 }) that.openBluetoothAdapter(); // 打开蓝牙适配器 }else{ wx.showToast({ title: '授权失败', icon: "success", duration: 1000 }) } } }) } // (2) 'scope.bluetooth'属性不存在，需要授权 if(res.authSetting['scope.bluetooth'] == undefined){ wx.authorize({ scope: 'scope.bluetooth', success(res){ that.openBluetoothAdapter(); // 打开蓝牙适配器 } }) } // (3) 已经授权 if(res.authSetting['scope.bluetooth'] == true){ that.openBluetoothAdapter(); // 打开蓝牙适配器 } } }) }初始化蓝牙设备 1=》 (1_success)成功：开始搜索附近的蓝牙外围设备 5 ， (1_fail)失败：获取蓝牙适配器状态 4；=》1_success：发现蓝牙设备 8 (对结果进行过滤，符合条件的设备进行连接) =》 连接到目标设备 9 ，连接成功，监听蓝牙低功耗连接状态的改变事件 18，关闭蓝牙搜索 6 =》 获取蓝牙低功耗设备所有服务 12 =》 获取某个服务下所有的特征值 13 (打印一下特征值有：notify，read，write特征的)，监听蓝牙低功耗设备的特征值变化 17 =》 启用低功耗蓝牙设备特征值变化时的 notify 功能 16 ；=》1_fail​​​​​​​：available 为true时，开始搜索附近的蓝牙外围设备 5，否则提示检查蓝牙是否打开你会发现，有好几个是一些流程中没用到的，但是，这是不可能发生的，存在必有其道理；​​​​​​​（1）比如：你刷新时，你不可能再重新走一遍初始化蓝牙吧，那就要用到 获取蓝牙适配器状态 3 ，判断是 获取所有已发现的蓝牙设备 8 还是 开始搜索附近的蓝牙外围设备 5；​​​​​​​（2）比如：要你断开主动断开蓝牙连接，断开与低功耗蓝牙设备的连接 10；（3）比如：短时间内，频繁退出或多次扫描 重新进入已连接蓝牙的小程序，在 onLoad 要用的 根据 uuid 获取处于已连接状态的设备 11（连接后，缓存 services 连接的 uuid 值），不然你已连接了设备，还一直搜不到；（4）比如：关闭蓝牙模块 2，获取所有已发现的蓝牙设备 7​​​​​​​，读取低功耗蓝牙设备的特征值的二进制数据值 14​​​​​​​，向低功耗蓝牙设备特征值中写入二进制数据 15 ，这个几个不用我多说了吧。三、总结：iOS 的坑是比较少一些的，Android 机的确实有很多不完善的地方，毕竟是百花齐放的嘛

前端技术导航站 本想不记录的，本人懒得很，摸一下鱼字节跳动10月27日开源的 modernjs ，是要把前端技术面向全栈应用，有兴趣的可以去了解一下！{dotted startColor="#ffab6b" endColor="#73fa19"/}CodePen 一个在线的前端代码编辑工具记录一下近期学习在看的网址导航吧！CSS:1、You-need-to-know-css2、使用 CSS 绘制图案的 Web 组件3、CSS 灵感4、w3cplus 一个致力于推广国内前端行业的技术博客5、cssdeck （和 CodePen 类似）一些动画案例使用6、svg-path-editor svg 路径制作 Web 动效导航站：1、前端之家-前端导航2、技术导航网3、程序员导航4、艾特网-程序员导航站，程序员之家5、设计师网址导航网上的世界让你眼花缭乱，现实的世界让你爱恨交错

PicGo+GitHub搭建个人图床 1、在 github 上新建一个存放图片的仓库 2、生成一个账号使用的token ，当然，你可以把它命名区分让某个仓库使用（其实它都可以应用到各个仓库）

图床神器 如果你还在为图片的存放发愁，不如自己建一个免费的图床 非技术手段 永久存储免注册，图片链接支持https，可以删除上传的图片