第一 开关的坑
所需要实现的功能是点击开关，弹出提示框提示用户是否要进行该操作，用户通过选择确定或取消可以触发相对应的操作，该操作有可能成功也有可能失败，因此需要在失败或者成功的时候让开关处于正确的状态，由于微信小程序的一旦点击开关就会自动触发开关的动作，因此只能通过数据绑定checked开关的值来进行操作，然而如果绑定了checked的值仍然不能够实现该功能，因为用户点击后即使在js的处理中让值回到原位开关也不会回到之前的状态（动画也有问题），有一些例子是用过别的按钮来绑定checked的值来解决这个问题的，这里借鉴了这样的思路进行了进一步的优化。
思路：
- 将开关disabled掉，去除了点击事件，将开关看成是一个dom绑定点击事件（而不是文档中的开关绑定bindchage事件）
- 数据绑定checked值来控制开关的状态
|
1 |
<switch class='switch' wx:if="{{item.client_status==1}}" disabled checked="{{item.checked}}" color='#1E9FFF' data-index='{{idx}}' bindtap='switchChange' data-clientId='{{item.client_id}}' data-checked='{{item.checked}}'/> |
第二 setData的坑
由于有很多的开关，需要知道是哪一个开关进行操作，因此通过data-index=”{{item.index}}”来确定用户电机的是哪个开关，但是这样就出现了一个问题，setData的时候我们需要改变对象的其中一个值，这个时候常规的思路是setData{{sensorList.xxx.xx: ‘xxx’}}，在setData的时候是不能够通过这种方式对对象中的其中一个元素进行赋值的，一种非常糟糕的解决思路是遍历一遍然后全部重新setData。其实可以用一个字符串来中转一下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
switchChange:function(e){ console.log(e); console.log('执行器ID:',e.target.dataset.clientid); console.log('目前的状态:', e.target.dataset.checked); var checked = e.target.dataset.checked var that = this; wx.showModal({ title: '请确认操作', content: '指令将立即发送', success(res) { if (res.confirm) { // 改变checked的状态 var index = e.target.dataset.index; console.log(that.data.actuatorList[index].client_id); var str = 'actuatorList['+index+'].checked'; // 将按钮重置 that.setData({ [str]: !checked, }); console.log(e); } else if (res.cancel) { } } }) } |
第三：echarts动态绑定数据时遇到的坑
由于微信小程序是没有dom操作的，因此是使用数据绑定的方式来绑定图的对象的，需要注意的是使用setData来绑定echarts的图是不能直接生效的，因此echarts会先去找图的对象，由于setData是页面加载完成的动作，所以在wxml获取图的对象的时候是不存在的，但对象的数据更新后，图不会进行更新，所以要在ec-canvas判断一下等数据加载好了再显示图表或者直接使用循环也可以，总是不要再还没有数据的时候就让wxml进行渲染：
xwml部分
|
1 2 3 |
<view class="chart-container"> <ec-canvas id="mychart-dom-line" wx:if="{{chartData}}" canvas-id="mychart-line" ec="{{chartData}}"></ec-canvas> </view> |
js部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import { Visual } from 'visual-model.js' import * as echarts from '../../../../ec-canvas/echarts.min'; var visual = new Visual(); Page({ data: { }, onLoad: function (options) { var device_id = options.device_id; this.getSensorData(device_id); }, getSensorData:function(device_id){ visual.getOneSensorData(device_id,(res)=>{ console.log(res); var device_name = res.sensorInfo.device_name; var data_type = res.sensorInfo.data_type; var sensorData = res.data; var chartData = chartInit(device_name, data_type, sensorData); this.setData({ chartData: chartData }); }) } }); function chartInit(device_name, data_type, sensorData) { var chartData = { disableTouch: true, onInit: function (canvas, width, height) { const ecChart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(ecChart); ecChart.setOption(getLineOption(device_name, data_type, sensorData)); return ecChart; } } return chartData; } function getLineOption(device_name, data_type, sensorData) { return { title: { text: device_name, subtext: data_type, left: 'center' }, color: ["#37A2DA"], grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'time', boundaryGap: false, }, yAxis: { x: 'center', type: 'value', boundaryGap: [0.5, 0.5], scale: true, splitLine: { lineStyle: { type: 'dashed' } } }, series: [{ name: 'A', type: 'line', smooth: true, showSymbol: false, data: sensorData, animation: false }] } } |
