uni-app x项目input, picker-view, uni-upgrade-center-app组件方面的两个问题
uni-app x项目input, picker-view, uni-upgrade-center-app组件方面的两个问题
uniapp x/App
示例代码：
如下
操作步骤：
- 访问 https://mp-cc3f25eb-d6ea-44a4-8c91-70c11cd03d7b.cdn.bspapp.com/resources/errors/Temp1.zip，下载此项目
- 运行项目
预期结果：
正常
实际结果：
报错
bug描述：
uniapp x项目组件方面的两个问题
- 在同一个页面中，同时放置
uni-upgrade-center-app和input组件（都是官方demo中的代码片段），input一旦单击获取焦点即闪退。
<uni-upgrade-center-app ref="upgradePopup"></uni-upgrade-center-app>
<input class="uni-input uni-input-default" value="hello uni-app x" />报错信息：
18:04:53.742 java.lang.IndexOutOfBoundsException: Index: 1, Size: 1
at java.util.Collections$SingletonList.get(Collections.java:4872)
at io.dcloud.uniapp.util.ViewGroupDrawingOrderManager.getChildDrawingOrder(ViewGroupDrawingOrderManager.kt:54)
at io.dcloud.uniapp.ui.view.UniView.getChildDrawingOrder(UniView.kt:207)
at android.view.ViewGroup.getAndVerifyPreorderedIndex(ViewGroup.java:2135)
at android.view.ViewGroup.populateChildrenForAutofill(ViewGroup.java:3797)
at android.view.ViewGroup.populateChildrenForAutofill(ViewGroup.java:3804)
at android.view.ViewGroup.populateChildrenForAutofill(ViewGroup.java:3804)
at android.view.ViewGroup.populateChildrenForAutofill(ViewGroup.java:3804)
at android.view.ViewGroup.populateChildrenForAutofill(ViewGroup.java:3804)
at android.view.ViewGroup.populateChildrenForAutofill(ViewGroup.java:3804)
at android.view.ViewGroup.populateChildrenForAutofill(ViewGroup.java:3804)
at android.view.ViewGroup.populateChildrenForAutofill(ViewGroup.java:3804)
at android.view.ViewGroup.getChildrenForAutofill(ViewGroup.java:3783)
at android.view.ViewGroup.dispatchProvideAutofillStructure(ViewGroup.java:3747)
at android.app.assist.AssistStructure$WindowNode.<init>(AssistStructure.java:527)
at android.app.assist.AssistStructure.<init>(AssistStructure.java:2345)
at android.app.ActivityThread.handleRequestAssistContextExtras(ActivityThread.java:4243)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2532)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loopOnce(Looper.java:223)
at android.os.Looper.loop(Looper.java:324)
at android.app.ActivityThread.main(ActivityThread.java:8595)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:582)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1061)- 当
picker-view的父级节点存在v-show时，切换v-show的状态时显示错乱，并且change事件的返回值错误并闪退。而将v-show切换为v-if则没有此问题。（因此将picker-view放进使用v-show来实现的弹出层中就会报错）
<view v-show="isOpen" style="width:100%;height: 500px;">
<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="bindChange" :mask-top-style="maskTopStyle" :mask-bottom-style="maskBottomStyle">
<picker-view-column class="picker-view-column">
<view class="item" v-for="(item,index) in years" :key="index"><text class="text">{{item}}年</text></view>
</picker-view-column>
<picker-view-column class="picker-view-column">
<view class="item" v-for="(item,index) in months" :key="index"><text class="text">{{item}}月</text></view>
</picker-view-column>
<picker-view-column class="picker-view-column">
<view class="item" v-for="(item,index) in days" :key="index"><text class="text">{{item}}日</text></view>
</picker-view-column>
</picker-view>
</view>报错信息：
17:56:42.480 error: java.lang.IndexOutOfBoundsException: Index: 2147483647, Size: 24
17:56:42.480 at pages/index/index.uvue:109:4
17:56:42.480 107| const val = e.detail.value
17:56:42.480 108| this.result = val
17:56:42.480 109| this.year = this.years[val[0]]
17:56:42.480 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
17:56:42.480 110| this.month = this.months[val[1]]
17:56:42.480 111| this.day = this.days[val[2]]
17:56:42.810 java.lang.IllegalArgumentException: Cannot round NaN value.
at kotlin.math.MathKt__MathJVMKt.roundToInt(MathJVM.kt:619)
at io.dcloud.uts.Math.round(Math.kt:279)
at io.dcloud.uniapp.framework.UniPickerViewColumn$$initMethods$2.invoke(index.kt:1746)
at java.lang.reflect.Method.invoke(Native Method)
at io.dcloud.uniapp.vue.shared.IndexKt$callFunction$invoke$1.invoke(index.kt:640)
at io.dcloud.uniapp.vue.shared.IndexKt.callFunction(index.kt:651)
at io.dcloud.uniapp.vue.IndexKt.callWithErrorHandling(index.kt:1699)
at io.dcloud.uniapp.vue.IndexKt.callWithAsyncErrorHandling(index.kt:1708)
at io.dcloud.uniapp.vue.Invoker.invoke(index.kt:4292)
at io.dcloud.uniapp.vue.IndexKt$addEventListener$2.invoke(index.kt:4312)
at java.lang.reflect.Method.invoke(Native Method)
at io.dcloud.uts.UniCallbackWrapper.invoke(UniCallbackWrapper.kt:93)
at io.dcloud.uniapp.dom.node.DomNode.dispatchEventWithBubble(DomNode.kt:544)
at io.dcloud.uniapp.dom.node.DomNode.dispatchEvent(DomNode.kt:519)
at io.dcloud.uniapp.ui.component.BasicComponentData.dispatchEvent(BasicComponentData.kt:199)
at io.dcloud.uniapp.ui.component.BasicComponent.dispatchEvent(BasicComponent.kt:510)
at io.dcloud.uniapp.ui.component.BasicComponent.sendEvent(BasicComponent.kt:502)
at io.dcloud.uniapp.ui.component.ScrollerComponent$initComponentView$1.onScrollStopped(ScrollerComponent.kt:120)
at io.dcloud.uniapp.ui.view.scroller.UniScrollerView.onScrollStopped(UniScrollerView.kt:338)
at io.dcloud.uniapp.ui.view.scroller.UniScrollerView.handleMessage(UniScrollerView.kt:367)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loopOnce(Looper.java:223)
at android.os.Looper.loop(Looper.java:324)
at android.app.ActivityThread.main(ActivityThread.java:8595)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:582)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1061)
1 回复
在使用 uni-app x 开发应用时，input、picker-view 和 uni-upgrade-center-app 是常用的组件。以下是关于这些组件的两个常见问题及解答：
问题 1: input 组件在 uni-app x 中如何实现双向绑定？
解答：
在 uni-app x 中，input 组件可以通过 v-model 实现双向绑定。v-model 是 Vue.js 中的语法糖，用于在表单元素上实现数据的双向绑定。
<template>
<view>
<input v-model="inputValue" placeholder="请输入内容" />
<text>你输入的内容是：{{ inputValue }}</text>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
}
};
</script>在这个例子中，inputValue 会随着用户在输入框中输入的内容而实时更新，同时也会在页面上显示用户输入的内容。
问题 2: picker-view 组件如何实现多列选择器？
解答：
picker-view 组件可以用于实现多列选择器。你可以通过 picker-view-column 组件来定义每一列的内容，并通过 value 属性来设置默认选中的值。
<template>
<view>
<picker-view :value="pickerValue" @change="handlePickerChange">
<picker-view-column>
<view v-for="(item, index) in years" :key="index">{{ item }}</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item, index) in months" :key="index">{{ item }}</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item, index) in days" :key="index">{{ item }}</view>
</picker-view-column>
</picker-view>
<text>你选择的日期是：{{ selectedDate }}</text>
</view>
</template>
<script>
export default {
data() {
return {
years: ['2020', '2021', '2022', '2023'],
months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
days: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
pickerValue: [0, 0, 0], // 默认选中第一项
selectedDate: ''
};
},
methods: {
handlePickerChange(e) {
const [yearIndex, monthIndex, dayIndex] = e.detail.value;
this.selectedDate = `${this.years[yearIndex]}-${this.months[monthIndex]}-${this.days[dayIndex]}`;
}
}
};
</script>在这个例子中，picker-view 组件包含三列，分别用于选择年、月、日。pickerValue 用于设置默认选中的值，handlePickerChange 方法用于处理用户选择的变化，并更新 selectedDate。
问题 3: uni-upgrade-center-app 组件如何实现应用版本更新？
解答：
uni-upgrade-center-app 是 uni-app 提供的一个用于应用版本更新的组件。它可以帮助你检测应用是否有新版本，并提示用户进行更新。
<template>
<view>
<uni-upgrade-center-app :auto-check="true" @check-success="handleCheckSuccess" @check-fail="handleCheckFail" />
</view>
</template>
<script>
export default {
methods: {
handleCheckSuccess(res) {
console.log('检测到新版本', res);
// 提示用户更新
uni.showModal({
title: '发现新版本',
content: '是否立即更新？',
success: (res) => {
if (res.confirm) {
// 用户确认更新
uni.downloadFile({
url: res.downloadUrl,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
uni.installApk({
filePath: downloadRes.tempFilePath
});
}
}
});
}
}
});
},
handleCheckFail(err) {
console.log('检测更新失败', err);
}
}
};
</script>