小程序—这款工具把加速计、陀螺仪、设备方向的调试痛点解决了

之前在一篇博文中捎带介绍过这款工具，反响很好，还收到了两位用户的打赏，但受那篇博文的影响，并没有被广大小程序开发者所熟知，故写一篇专门的，希望能有更多用户不再被加速计、陀螺仪、设备方向的调试难题再刺痛。

加速计、陀螺仪、设备方向痛点

1、小程序不支持开发工具调试，只支持真机调试
2、真机调试输出一堆日志，来不及做日志分析，就被顶上去

痛点解决方案

通过接收加速计、陀螺仪、设备方向返回的数据，实时绘制在折现图表上，这样一边晃动手机，一边可以观察图表中数据的变化，能够很快分辨出动作所带来的数据变化，方便调试。

实操效果

工具支持描述

加速计：X轴加速度、Y轴加速度、Z轴加速度的数据展示
陀螺仪：X轴角速度、Y轴角速度、Z轴角速度的数据展示
设备方向：α角、β角、γ角的数据展示
如下：

工具使用路径

工具系列>>硬件数据监听工具

单纯使用，无需代码

调用接口：

加速计：

 wx.onAccelerometerChange(function (res) {console.log("加速计数据变化", res)})

陀螺仪api:

 wx.startGyroscope({interval: 'normal',success: function (res) {console.log('陀螺仪监听成功', res)},fail: function (res) {console.log('陀螺仪监听失败', res)}})wx.onGyroscopeChange(function (res) {console.log('陀螺仪数据变化'，res)})

设备方向api

 wx.startDeviceMotionListening({interval: 'normal',success: function (res) {console.log('设备方向监听成功', res)},fail: function (res) {console.log('设备方向监听失败', res)}})wx.onDeviceMotionChange(function (res) {console.log('设备方向数据变化'，res)})

图表代码：

exports.init = function (ctx, options) {return new LineChart(ctx, options);
};function LineChart(ctx, options) {this.ctx = wx.createCanvasContext(ctx);this.tipsCtx = options.tipsCtx ? wx.createCanvasContext(options.tipsCtx) : null;this.options = Object.assign({width: 320,height: 200,labelColor: '#888888',axisColor: '#d0d0d0',xUnit: '',yUnit: '',xAxis: [],lines: [],margin: 20,fontSize: 12,}, options, {xAxisOffset: (options.margin || 20) + (options.fontSize || 12) * 1.5});this._attrs = {};if (_.isEmpty(this.options.xAxis)) {throw new Error('options.xAxis can not be empty');}if (_.isEmpty(this.options.lines)) {throw new Error('options.lines can not be empty');}
}LineChart.prototype.draw = function () {this._clear();this._drawAxis();this._drawLines();this._draw();
};LineChart.prototype.hideLine = function (index) {let {lines} = this.options;if (lines[index]) {lines[index].hidden = true;this.draw();}
};LineChart.prototype.showLine = function (index) {let {lines} = this.options;if (lines[index] && lines[index].hidden) {lines[index].hidden = false;this.draw();}
};LineChart.prototype.tipsByX = function (x) {if (!this.options.tipsCtx) {return;}let {tipsIndex} = this._attrs;let index = this._indexByX(x);if (index === tipsIndex) {return;}this._attrs.tipsIndex = index;this._tipsLineByIndex(index);this._tipsLabelByIndex(index);this.tipsCtx.draw();
};LineChart.prototype.clearTips = function () {if (!this.options.tipsCtx) {return;}let {width,height} = this.options;this.tipsCtx.clearRect(0, 0, width, height);this.tipsCtx.draw();
};LineChart.prototype._tipsLabelByIndex = function (index) {let {xAxis,xUnit,yUnit,margin} = this.options;let {xOffset} = this._attrs;let ctx = this.tipsCtx;ctx.setFontSize(12);let title = xAxis[index] + xUnit;let points = this._pointsByIndex(index);points = _.map(points, item => ({color: item.color,text: `${item.value}${yUnit}`,width: ctx.measureText(`${item.value}${yUnit}`).width + 15,x: item.x}));let width = _.max(_.map(points, item => item.width));width = Math.max(ctx.measureText(title).width, width) + 20;let fromX = points[0].x - width;if (fromX < xOffset) {fromX = points[0].x;}let endX = fromX + width;let fromY = margin;let endY = margin + (points.length + 1) * 18;// 背景ctx.beginPath();ctx.moveTo(fromX, fromY);ctx.lineTo(fromX, endY);ctx.lineTo(endX, endY);ctx.lineTo(endX, fromY);ctx.closePath();ctx.globalAlpha = 0.4;ctx.fillStyle = 'black';ctx.fill();// 文字ctx.globalAlpha = 1;ctx.fillStyle = 'white';ctx.fillText(title, fromX + 10, fromY + 15);_.each(points, (item, index) => {let textY = fromY + 15 * (index + 2);ctx.beginPath();ctx.arc(fromX + 15, textY - 4, 5, 0, 2 * Math.PI);ctx.closePath();ctx.fillStyle = item.color;ctx.fill();ctx.fillStyle = 'white';ctx.fillText(item.text, fromX + 25, textY);});
};LineChart.prototype._tipsLineByIndex = function (index) {let {yOffset} = this._attrs;let {margin,labelColor} = this.options;let points = this._pointsByIndex(index);let ctx = this.tipsCtx;// 实心点_.each(points, item => {ctx.beginPath();ctx.arc(item.x, item.y, 2, 0, 2 * Math.PI);ctx.closePath();ctx.fillStyle = item.color;ctx.fill();});ctx.beginPath();ctx.lineWidth = 0.3;ctx.strokeStyle = labelColor;ctx.moveTo(points[0].x, yOffset);ctx.lineTo(points[0].x, margin);ctx.stroke();
};LineChart.prototype._indexByX = function (x) {let {xOffset,xStep} = this._attrs;let {xAxis} = this.options;let index = 0;if (x > xOffset) {index = Math.min(Math.round((x - xOffset) / xStep), xAxis.length - 1);}return index;
};LineChart.prototype._pointsByIndex = function (index) {let {xOffset,xStep,yOffset,yStep} = this._attrs;return _.map(_.filter(this.options.lines, item => !item.hidden && !_.isUndefined(item.points[index])), item => ({x: xOffset + index * xStep,y: yOffset - item.points[index] * yStep,value: item.points[index],color: item.color}));
};LineChart.prototype._clear = function () {let {width,height} = this.options;this.ctx.clearRect(0, 0, width, height);
};LineChart.prototype._drawAxis = function () {let {width,height,lines,labelColor,axisColor,xUnit,yUnit,xAxis,margin,xAxisOffset,fontSize} = this.options;let ctx = this.ctx;ctx.setFontSize(fontSize);let yAxisLen = height - margin - xAxisOffset;let yLabelCount = Math.floor(yAxisLen / 25);let yMaxValue = _.max(_.map(lines, item => _.max(item.points))) || 1;// 计算需要绘制的y轴labellet fixed = 0;let yDelta = yMaxValue * 1.2 / yLabelCount;if (yDelta < 1) {fixed = Math.round(1 / yDelta).toString().length;}yDelta = Number(fixed === 0 ? Math.ceil(yDelta) : yDelta.toFixed(fixed));let labels = [];for (let i = 2; i <= yLabelCount; i++) {labels.push(Number(((i - 1) * yDelta).toFixed(fixed)) + yUnit);}let xLabelMaxWidth = _.max(_.map(xAxis, item => ctx.measureText(item + xUnit).width));let yLabelMaxWidth = _.max(_.map(labels, item => ctx.measureText(item).width)) + margin;let xAxisLen = width - margin - yLabelMaxWidth;let xOffset = yLabelMaxWidth;let xStep = xAxisLen / (xAxis.length - 1);let yOffset = margin + yAxisLen;let yStep = yAxisLen / (yMaxValue * 1.2);// 绘制x轴ctx.beginPath();ctx.lineWidth = 1;ctx.strokeStyle = axisColor;ctx.moveTo(yLabelMaxWidth, height - xAxisOffset);ctx.lineTo(width - margin, height - xAxisOffset);ctx.stroke();// 绘制x轴labellet xLabelCount = Math.floor(xAxisLen / xLabelMaxWidth);let xLabelStep = Math.ceil(xAxis.length / xLabelCount);// 需要被绘制的lablelet xLabel = _.filter(_.map(xAxis, (item, index) => ({name: item + xUnit,index: index})), (item, index) => index % xLabelStep === 0);_.each(xLabel, item => {let xValue = xOffset + item.index * xStep - xLabelMaxWidth / 2 - 2;ctx.fillStyle = labelColor;ctx.fillText(item.name, xValue, height - margin);});// 绘制y轴label，以及水平标记线_.each(labels, (item, index) => {let xValue = (yLabelMaxWidth - ctx.measureText(item).width) - 5;let yValue = yOffset - yStep * Number((index + 1) * yDelta).toFixed(fixed);// 水平标记线ctx.beginPath();ctx.lineWidth = 0.8;ctx.strokeStyle = axisColor;ctx.moveTo(yLabelMaxWidth, yValue);ctx.lineTo(width - margin, yValue);ctx.stroke();// labelctx.strokeStyle = labelColor;ctx.fillText(item, xValue, yValue + 4);});// 将这几个数据存放在attrs上，绘制线的时候有用Object.assign(this._attrs, {xOffset,yOffset,xStep,yStep});
};LineChart.prototype._drawLines = function () {_.each(this.options.lines, item => {if (item.hidden) {return;}this._drawLine(item);});
};LineChart.prototype._drawLine = function (line) {let {xOffset,yOffset,xStep,yStep} = this._attrs;let ctx = this.ctx;let points = _.map(line.points, (item, index) => ({x: xOffset + index * xStep,y: yOffset - item * yStep}));// 与x轴的面积阴影ctx.beginPath();ctx.globalAlpha = 0.2;ctx.fillStyle = line.color;ctx.moveTo(xOffset, yOffset);_.each(points, item => {ctx.lineTo(item.x, item.y);});ctx.lineTo(xOffset + xStep * (points.length - 1), yOffset);ctx.closePath();ctx.fill();// 线ctx.beginPath();ctx.globalAlpha = 1;ctx.lineWidth = 1;ctx.strokeStyle = line.color;_.each(points, item => {ctx.lineTo(item.x, item.y);});ctx.stroke();// 空心点_.each(points, item => {ctx.beginPath();ctx.arc(item.x, item.y, 2, 0, 2 * Math.PI);ctx.closePath();ctx.fillStyle = 'white';ctx.fill();ctx.stroke();});
};LineChart.prototype._draw = function () {if (this._timer) {clearTimeout(this._timer);}this._timer = setTimeout(() => {this.ctx.draw();});
};

小程序—这款工具把加速计、陀螺仪、设备方向的调试痛点解决了相关推荐

一款小程序增强开发工具 - EWA
EWA (微信小程序增强开发工具) Enhanced Wechat App Development Toolkit (微信小程序增强开发工具) 项目地址:https://github.com/lyfe ...
跑鸭”微信小程序-一款基于校园跑步的社交小程序
跑鸭:这是我的毕业设计,"跑鸭"微信小程序-一款基于校园跑步的社交小程序(实时里程配速.运动路径.整公里提醒.周榜月榜.打卡分享.热门推荐.线上活动.勋章墙.隐私设置),技术栈:V ...
比较实用的微信小程序开发框架和工具
[微信小程序开发框架] 1.官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex.Vue框架.MINA框架通过封装微信客户端提供的文件系统.网络通信.任务管理.数据安全等基础功能 ...
一键生成微信小程序的制作工具-小程序切片工具
微信小程序前端开发者工具(小程序切片)是一款根据效果图像画画一样来设计微信小程序,自动生成导出前端页面的快速开发工具.可以很方便.快速地生成小程序的wxml,wcss,js文件.可以大大提高您的工作效 ...
百度网盘小程序互转工具：wx2正式开源！
" 2020年11月,百度网盘小程序互转工具WX2,正式开源!" wx2是一个小程序的转换工具,它可以一键将原生的微信小程序转化成百度小程序.作为一种轻量级小程序跨宿主解决方案,w ...
微信开发者工具 wxmi修改模版颜色_网站建设公司讲解：微信小程序的开发者工具界面...
网站建设公司深圳市博纳网络信息技术有限公司()讲解:微信小程序的开发者工具界面创建项目后,进入到微信开发者工具界面,界面大致可以分为6个区域:①菜单栏区域,②模拟器.编辑器.调试器显示与隐藏区域,③ ...
小程序助手多功能微信小程序反编译工具
介绍: 小程序助手多功能微信小程序反编译工具,软件采用 VS 2017 编译,需安装.net 4.0 或以上版本方可运行,理论上 win7 .win10及以上系统 x86 x64 运行正常,条件有限未 ...
微信小程序开发什么工具好？
现在微信小程序已经是非常普遍,而开发小程序也变得更简单,只需要使用微信小程序开发工具就可以帮助你快速完成小程序.如果能熟练掌握其基本操作,可以大大提高开发效率,节省时间.精力和成本,让客户更早使用你的 ...
微信小程序：去水印工具微信小程序源码
这是一个去水印小程序支持各大平台短视频去水印支持图集去水印另外还有一个功能也就相当于抖音一样刷短视频偷偷告诉你们哟,刷的短视频都是热门小姐姐哟!惊不惊喜意不意外小程序源码下载地址: 微信小程 ...