uni-app 微信小程序（安卓端）带个性化参数 picker不能正常弹出

uni-app 微信小程序（安卓端）带个性化参数 picker不能正常弹出

开发环境 版本号 项目创建方式
Windows Win7家庭 Service Pack 1 HBuilderX

操作步骤：

PickerChange($event, ‘BackgroundMusicFolder’) 我在这里多传了一个个性参数，所以把$event参数也一并带上了，不然我检测发现触发事件如有个性参数则不会带上event参数了

预期结果：

代码均严格按照原生APP方式来实施 生成的APP、H5以及微信小程序（IOS）均能正常调取picker 但在微信小程序（华为鸿蒙系统端）及微信小程序开发者工具都调取失败

实际结果：

但在微信小程序（华为鸿蒙系统端）及微信小程序开发者工具都调取失败

bug描述：

页面片段

<view class="uni-flex uni-row border-bottom h50">  
    <view><text class="font1">背景音乐：</text></view>  
    <view class="uni-flex-item">  
        <picker name="BackgroundMusicFolder" mode="selector" :value="SelectBackgroundMusicFolderIndex" :range="BackgroundMusicFolder" range-key="name" @change="PickerChange($event, 'BackgroundMusicFolder')">
            <view class="uni-input">{{BackgroundMusicFolder[SelectBackgroundMusicFolderIndex].name}}</view>  
        </picker>  
    </view>  
</view>

页面data片段：

BackgroundMusicFolder:[{name:'喝酒顺口溜', value:'2/0'},{name:' 搞笑段子', value:'3/0'},{name:'动感音乐', value:'4/0'},{name:'劲爆舞曲', value:'5/0'},{name:'酒文化知识', value:'6/0'}],  
SelectBackgroundMusicFolderIndex:0,

页面方法片段：

//通用设置变量选取值事件  
//通用选择事件  
,PickerChange:function(e, SourceName, SelectIndexName){  
    if (typeof SourceName=="string" && typeof this[SourceName]=="object" && this[SourceName].length!=undefined)  
    {  
        var SelectIndexName = SelectIndexName || "Select"+ SourceName +"Index";  
        if (typeof this[SelectIndexName]==undefined){console.log("Picker "+ SourceName + "Not Set SelectIndex");return false;}  

        if (typeof e!="object" || e.detail==undefined || e.detail.value==undefined){console.log("Picker Not Set Event Parameter");return false;}  
        this[SelectIndexName] = e.detail.value;  
    }  
    else  
    {  
        console.log("Picker Not Set SourceName");return false;  
    }  
}

生成的APP、H5以及微信小程序（IOS）均能正常调取picker
但在微信小程序（华为鸿蒙系统端）及微信小程序开发者工具都调取失败


更多关于uni-app 微信小程序（安卓端）带个性化参数 picker不能正常弹出的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 微信小程序（安卓端）带个性化参数 picker不能正常弹出的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于微信小程序的事件处理机制与uni-app其他平台存在差异导致的。

核心原因： 在微信小程序中，当你在@change事件中传递自定义参数时，$event参数会被覆盖，导致无法正确获取picker的选中值。而在iOS端和H5端，uni-app框架做了兼容处理，能够正常获取事件对象。

解决方案：

  1. 推荐方案：使用事件对象获取自定义参数
// 修改事件绑定，只传递$event
@change="PickerChange"

// 修改事件处理方法
PickerChange: function(e) {
    // 通过currentTarget.dataset获取自定义参数
    const sourceName = e.currentTarget.dataset.sourceName;
    
    if (typeof sourceName == "string" && typeof this[sourceName] == "object") {
        const selectIndexName = "Select" + sourceName + "Index";
        
        if (typeof this[selectIndexName] == undefined) {
            console.log("Picker Not Set SelectIndex");
            return false;
        }
        
        if (typeof e != "object" || e.detail == undefined || e.detail.value == undefined) {
            console.log("Picker Not Set Event Parameter");
            return false;
        }
        
        this[selectIndexName] = e.detail.value;
    }
}
  1. 修改模板，添加data属性：
<picker 
    name="BackgroundMusicFolder" 
    mode="selector" 
    :value="SelectBackgroundMusicFolderIndex" 
    :range="BackgroundMusicFolder" 
    range-key="name"
    data-source-name="BackgroundMusicFolder"
    @change="PickerChange">
    <view class="uni-input">{{BackgroundMusicFolder[SelectBackgroundMusicFolderIndex].name}}</view>
</picker>
回到顶部