picker组件在HBuilderX中正常,转到微信开发者工具无法设置参数

Question

本人在HBuilder X中调试一切正常，但是运行到微信开发者工具时通过picker可以滚动参数（点击图中数字 4 的位置），但参数不会改变（也就是LED_1模式），而且右下角的终端输出也是正确的，也不知道问题是出在哪里了。关键右边的LED_2可以正常控制

<template>
    <view class="Device">
        <view class="dev-area">
            <view class="dev-card">
                <view class="">
                    <view class="dev-params">温度</view>
                    <image class="dev-logo" src="/static/Temperature.png" mode=""></image>
                </view>
                <view class="dev-number">{{Temperature}} ℃</view>
            </view>
            <view class="dev-card">
                <view class="">
                    <view class="dev-params">电压</view>
                    <image class="dev-logo" src="/static/Voltage.png" mode=""></image>
                </view>
                <view class="dev-number">{{Voltage}} V</view>
            </view>
            <view class="dev-card">
                <view class="">
                    <view class="dev-params">LED_1模式</view>
                    <image class="dev-logo" src="/static/Alarm.png" mode=""></image>
                </view>
                <view>
                    <picker mode="selector" :range="array" @change="IssueLED1" :value="index">
                        <view class="dev-number">{{array[index]}}</view>
                    </picker>
                </view>

                <!-- <view class="dev-number">{{LED1_Mode}}</view> -->
            </view>
            <view class="dev-card">
                <view class="">
                    <view class="dev-params">LED_2开关</view>
                    <image class="dev-logo" src="/static/Lamp.png" mode=""></image>
                </view>
                <switch :checked="LED2_Switch" @change="IssueLED2" color="#2b9939"/>
            </view>
            <!-- <view class="">温度 {{Temperature}} ℃</view>
            <view class="">电压 {{Voltage}} V</view>
            <view class="">LED_1模式 {{LED1_Mode}}</view>
            <switch :checked="LED2_Switch" @change="IssueData" /> -->

        </view>
    </view>
</template>

<script>
    const {
        createCommonToken
    } = require('@/key.js')
    export default {
        data() {
            return {
                Temperature: '',
                Voltage: '',
                LED1_Mode: '',
                LED2_Switch: true,
                array: ['0','1','2','3','4'],
                index: 0,
                token: '',
            }
        },
        onLoad() {
            const params = {
                author_key: 'jhoyGhePDWnAzV+op3sNHpj4q02BKKwP0hcSlWCBYNiCdTt/bfRykSumDITN9SDO',
                version: '2022-05-01',
                user_id: '419550',
            }
            this.token = createCommonToken(params);
            // console.log(this.token)

        },
        onShow() {
            // this.fetchDevData();
            setInterval(()=>{
                this.fetchDevData();  
            },4000)
        },
        methods: {
            fetchDevData() {
                uni.request({
                    url: 'https://iot-api.heclouds.com/thingmodel/query-device-property',
                    method: 'GET',
                    data: {
                        product_id: 'KPJsCXDdWm',
                        device_name: 'demo1'
                    },
                    header: {

                        'authorization': this.token //自定义请求头信息
                    },
                    success: (res) => {
                        console.log(res.data);
                        this.Temperature = res.data.data[2].value;
                        this.Voltage = res.data.data[3].value;
                        this.index = res.data.data[0].value;
                        this.LED2_Switch = res.data.data[1].value === true;
                    }
                });
            },
            IssueLED2(event) {
                console.log(event.detail.value);
                let value = event.detail.value;
                uni.request({
                    url: 'https://iot-api.heclouds.com/thingmodel/set-device-property',
                    method: 'POST',
                    data: {
                        product_id: 'KPJsCXDdWm',
                        device_name: 'demo1',
                        params: {
                            "LED_2": value
                        }

                    },
                    header: {

                        'authorization': this.token //自定义请求头信息
                    },
                    success: () => {
                        console.log('LED_2 ' + (value ? 'ON' : 'OFF') + '!');
                    }
                });
            },
            IssueLED1(event) {
                console.log(event.detail.value);
                let value = event.detail.value;
                uni.request({
                    url: 'https://iot-api.heclouds.com/thingmodel/set-device-property',
                    method: 'POST',
                    data: {
                        product_id: 'KPJsCXDdWm',
                        device_name: 'demo1',
                        params: {
                            "LED": value
                        }
            
                    },
                    header: {
            
                        'authorization': this.token //自定义请求头信息
                    },
                    success: () => {
                        console.log('LED_1 Mode in ' + value);
                    }
                });
            }

        }
    }
</script>

<style>
    .Device {
        padding: 30rpx;
    }

    .dev-area {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .dev-card {
        height: 150rpx;
        width: 320rpx;
        box-shadow: 0 0 15rpx #ccc;
        border-radius: 30rpx;
        margin-top: 30rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .dev-params {
        font-size: 20rpx;
        color: #6d6d6d;
        text-align: center;
    }

    .dev-number {
        font-size: 50rpx;
        color: #6d6d6d;
    }

    .dev-logo {
        height: 70rpx;
        width: 70rpx;
        margin-top: 12rpx;
    }
</style>

Answer 1

让【道友老李】来帮你解答，本回答参考gpt编写，并整理提供，如果还有疑问可以点击头像关注私信或评论(小黑屋了，无法评论，请私信)。

如果答案让您满意，请采纳、关注，非常感谢！

问题分析： 根据描述，运行到微信开发者工具时通过picker可以滚动参数，但参数不会改变，而LED_2可以正常控制。可能问题出在picker的绑定事件中，导致参数无法正确更新。 解决方案：

1. 检查picker组件的数据绑定是否正确，确认数据源array中的值是否正确显示在picker上。
2. 检查change事件是否正确绑定，确认IssueLED1函数是否正确处理参数更新逻辑。
3. 可以在IssueLED1函数中添加console.log()语句打印参数的变化，查看是否有输出。
4. 确保LED_1模式的显示部分和picker组件的绑定是否正确。 代码示例（假设在IssueLED1函数中处理LED_1模式的更新）：

// 在Page的methods中定义IssueLED1函数
IssueLED1: function(event) {
  const index = event.detail.value; // 获取picker选择的索引
  const mode = this.data.array[index]; // 获取对应的LED_1模式
  console.log('选择的LED_1模式为：', mode);
  
  // 更新LED_1模式到页面数据
  this.setData({
    LED1_Mode: mode
  });
}

通过以上步骤检查和调试，可以定位问题并修复参数不会改变的情况。如果问题仍然存在，可以进一步检查picker组件的相关属性和绑定，确保逻辑正确。