uni-app HBuilderX 4.36 鸿蒙系统 picker组件的mode为"multiSelector"时直接闪退

发布于 1周前 作者 eggper 来自 Uni-App

uni-app HBuilderX 4.36 鸿蒙系统 picker组件的mode为"multiSelector"时直接闪退

操作步骤:

  • 点击picker组件的mode="multiSelector"组件,直接闪退

预期结果:

  • 正常使用,数据能联动

实际结果:

  • 直接闪退

bug描述:

昨天升级版本HBuilderX 4.36版本, 鸿蒙系统 picker组件的mode=“multiSelector”,直接闪退 其他系统都正常显示。

之前用的版本是HBuilderX 4.26版本,鸿蒙系统能正常显示,只是不能联动

代码如下:

<template>  
  <view class="pca-picker-cc">  
    <picker mode="multiSelector" @cancel="pickerClose()" @columnchange="bindMultiPickerColumnChange" @change="change" :value="multiIndexArr" :range="multiArray">  
      <slot></slot>  
    </picker>  
  </view>  
</template>  

<script>  
let _self;  
export default {  
  name: "pca-picker-cc",  
  // 此处定义传入的数据  
  props: {  
    addressList: {  
      type: Array,  
      default: []  
    },  
    resultDTO: {  
        type: Array,  
        default: []  
    },  
    isDefault:{ // 是否展示默认提示语  
      type: Boolean,  
      default: true  
    }  
  },  
  computed: {  
    multiIndexArr(){  
      return [this.provinceIndex, this.cityIndex, this.countyIndex];  
    },  
    province() {  
      return this.provinceList[this.provinceIndex] || {};  
    },  
    provinceList() {  
      return this.data;  
    },  
    provinceNameList() {  
      return this.provinceList.map((item, index) => item.text || '');  
    },  
    city() {  
      return this.cityList[this.cityIndex] || {};  
    },  
    cityList() {  
      return this.province.children || [];  
    },  
    cityNameList() {  
      return this.cityList.map((item, index) => item.text || '');  
    },  
    county() {  
      return this.countyList[this.countyIndex] || {};  
    },  
    countyList() {  
      return this.city.children || [];  
    },  
    countyNameList() {  
      return this.countyList.map((item, index) => item.text || '');  
    },  
    multiArray() {  
      return [this.provinceNameList, this.cityNameList, this.countyNameList];  
    },  
    addressResultObj() {  
      return {province: this.province, city: this.city, county: this.county};  
    },  
    addressResultList(){  
      return Object.values(this.addressResultObj).map((item, index) => item.text || '');  
    }  
  },  
  data() {  
    return {  
      data: [],  
     // resultDTO:[],  
      provinceIndex: 0,  
      cityIndex: 0,  
      countyIndex: 0,  
      keys: ['province', 'city', 'county'],  
      upDown:false,  
    };  
  },  
  //在实例创建完成后被立即调用。  
  mounted() {  
    _self = this;  
   _self.data = this.resultDTO;  
    if(_self.isDefault){  
      _self.init();  
    }  
  },  
  methods: {  
  // 获取数据  
  // async loadData() {  
    // const result = await this.$axios(this.$baseUrl.schooSelectAllRegion);  
    // this.resultDTO = fn.FuncUnzip(result.data.obj);  
    // console.log("resultDTO1", this.resultDTO)  
    // _self.data = this.resultDTO;  
    // console.log("_self.data:",this.resultDTO)  
    // _self.init();  
  // },  

    init() {  
      if (this.addressList.length === 3) {  
        let key, index;  
        for (let i in this.keys) {  
          key = this.keys[i];  
          index = this[`${key}NameList`].indexOf(this.addressList[i]);  
          if (index <= -1) {  
            index = 0;  
          }  
          this.$data[`${key}Index`] = index;  
        }  
        this.change();  
      }  
    },  
    bindMultiPickerColumnChange: function (e) {  
      let index = e.detail.column;  
      let key = this.keys[index];  
      this.$data[`${key}Index`] = e.detail.value;  
      while (index < this.keys.length) {  
        index++;  
        key = this.keys[index];  
        this.$data[`${key}Index`] = 0;  
      }  
    },  
    change(e){  
      // console.log(e)  
      this.$emit('update:addressList', this.addressResultList);  
      this.$emit('getAddressResultObj', this.addressResultObj);  
      this.$emit('pickerClose', this.upDown);  
    },  
    pickerClose(){  
        this.$emit('pickerClose', this.upDown);  
    }  
  }  
}  
</script>  

<style lang="scss"></style>  

环境信息

项目 版本/信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 4.36
手机系统 HarmonyOS NEXT
手机系统版本号 HarmonyOS NEXT Developer Beta2
手机厂商 华为
手机机型 纯血鸿蒙
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

更多关于uni-app HBuilderX 4.36 鸿蒙系统 picker组件的mode为"multiSelector"时直接闪退的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好,我这测试多列选择器是正常的,你可以提供一下一个可以复现的项目吗?

更多关于uni-app HBuilderX 4.36 鸿蒙系统 picker组件的mode为"multiSelector"时直接闪退的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在处理uni-app在鸿蒙系统上使用HBuilderX 4.36版本时,picker组件的mode设置为"multiSelector"导致的闪退问题时,首先需要确保代码本身没有逻辑错误,并且符合uni-app和鸿蒙系统的规范。以下是一个基本的代码示例,用于展示如何在uni-app中使用multiSelector模式的picker组件。请注意,由于我无法直接测试鸿蒙系统的具体表现,以下代码是基于uni-app官方文档和通用实践编写的,旨在提供一个正确的实现方式,以帮助你排查问题。

<template>
  <view>
    <button @click="showPicker">选择多项</button>
    <view v-if="selectedItems.length">
      <text>选中项:</text>
      <view v-for="(item, index) in selectedItems" :key="index">
        {{ item.text }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      multiArray: [
        { text: '选项1-1', value: '1-1' },
        { text: '选项1-2', value: '1-2' },
        // 更多选项...
      ],
      selectedItems: []
    };
  },
  methods: {
    showPicker() {
      uni.showActionSheet({
        itemList: ['取消', '确定'],
        success: (res) => {
          if (res.tapIndex === 1) {
            uni.showPicker({
              mode: 'multiSelector',
              range: this.multiArray.map(item => item.text),
              rangeKey: 'text', // 注意:这里设置range的key,如果你的数据结构不同,需要调整
              success: (res) => {
                const selected = res.value;
                this.selectedItems = selected.map(index => this.multiArray[index]);
                console.log('选中的项:', this.selectedItems);
              },
              fail: (err) => {
                console.error('picker失败:', err);
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
/* 样式根据需要调整 */
</style>

此代码示例展示了如何使用uni.showPicker方法来显示一个多选选择器(multiSelector)。注意以下几点:

  1. 数据结构multiArray中的每个对象应包含textvalue字段,text字段用于显示,value字段用于标识。
  2. rangeKey:在uni.showPicker的调用中,通过rangeKey指定range数组中对象的哪个属性用于显示。
  3. 错误处理:在fail回调中添加了错误处理,以便在picker调用失败时能够捕捉到错误信息。

如果代码本身没有问题,但问题依旧存在,可能需要考虑以下几个方向:

  • 鸿蒙系统兼容性:检查uni-app和HBuilderX的官方文档,确认当前版本是否完全支持鸿蒙系统。
  • 系统日志:查看鸿蒙系统的应用日志,寻找可能的崩溃原因。
  • 社区和论坛:搜索是否有其他开发者遇到类似问题,并查看他们的解决方案。
回到顶部