uni-app v3版本更新常见问题排查
组件不显示或者功能异常
原因:组件内使用了 onReady,onReady 是页面的生命周期,不应在组件中直接使用,组件中应该使用 mounted 生命周期
解决方法:onReady 改为 mounted
更新组件状态,视图不更新
原因:使用了 vue 无法观测的数组更新方式(如:this.array[0]=object),相关文档
解决方法:改为可以观测的数组更新方式(如:this.array.splice(0,1,object))或者使用 $forceUpdate 强制更新视图(只支持当前组件的数据变更)
使用 setData 报错
原因:vue 不支持 setData 方法
解决方法:直接给数据赋值即可,如:this.setData({a:'a'})改为this.a='a'、page.setData({a:'a'})改为page.$vm.a='a'
js 报错:TypeError: null is not an object (evaluating '_vm.xxx.xxx')、TypeError: undefined is not an object (evaluating '_vm.xxx.xxx')
原因:模板内访问了未定义数据(null、undefined)的属性
解决方法:数据初始化为对象,或者模板内先判断对象是否存在(如:),或者使用 v-if 判断(如:,不是:)
js 报错:cid unmatched at view.umd.min.js
原因、解决办法 同上,一般出现这个错误之前会出现上一条错误提示。如果这一哥报错之前没有上一条错误提示,就排查下显示异常的组件,其导入方式是否错误(如:import { test } from './test.vue')
js 报错:Failed to mount component: template or render function not defined.
原因:删除了 main.js 文件内的 App.mpType = 'app'
解决办法:在 main.js 文件内补充上 App.mpType = 'app'
js 报错:undefined is not an object (evaluating 'this.$refs.xxx.xxx')
原因:在错误的时机(如:created 生命周期)获取子组件实例,且不加判断直接调用组件方法
解决办法:在正确的时机(如:mounted 生命周期)获取子组件示例,或者判断组件或者方法是否存在后再调用
js 报错:TypeError: page.onLoad is not a function
原因:获取页面对象后主动调用 onLoad 生命周期
解决方法:调用 vm 实例上的方法,如:page.$vm.xxx
js 报错:undefined is not an object (evaluating 'e.parentNode')
原因:main.js 文件内的 app.$mount 方法内填入了参数(如:app.$mount('#app'))
解决方法:去除 app.$mount 方法参数,改回:app.$mount()
js 报错 uni.getUpdateManager is not a function
原因:非小程序端不支持 uni.getUpdateManager 方法
解决方法:使用条件编译包裹相关代码
js 报错 page.$vm.onLoad is not a function
原因:methods 内不能使用和内置生命周期相同的方法名,也不能直接获取到生命周期对应的方法
解决方法:在 methods 内将与内置生命周期同名的方法定义为其他名称
onShow 生命周期获取不到页面传入参数
原因:onShow 生命周期无参数传入
解决方法:改在 onLoad 生命周期获取
使用 uni.createSelectorQuery 报错:page is not ready
原因:在错误的时机(如:onShwo、onLoad)调用 uni.createSelectorQuery
解决方法:改在 onReady 生命周期后获取
图像不显示
原因:使用了 img 标签加载本地图像,img 不再自动转为 image 组件,在 App 目前不支持加载本地文件(后续会优化)
解决方法:将 img 标签改为 image 标签。
img、div 等标签样式异常
原因:template 中标签使用的 img、div 等,style 中写的是 image、view 等
解决方法:标签改为一致的,比如将 template 中的 img 标签改为 image 标签,div 改为 view 标签,或者 style 中统一使用 img、div 等。
横竖屏动态切换后组件或文字比预期显示的大或小
原因:r/upx 根据屏幕宽度计算,切换屏幕方向前后计算的大小不一致
解决方法:固定屏幕方向(相关文档),或者使用其他单位:百分比、rem、vw 等(相关文档)
小程序组件库报样式错误
原因:小程序组件内部分压缩后的样式解析错误
解决方法:格式化报错的样式文件
小程序组件库不显示
问题:小程序组件内使用了 、
解决方法:手动修改对应的小程序组件去除 、 使用
组件内监听页面生命周期不生效
问题:组件内不支持直接监听页面生命周期(如:onPageScroll)
解决方法:使用js监听,参考
cover-view、cover-image 被原生组件覆盖
问题:App端 cover-view、cover-image 需要放到原生组件(video、map)内
解决方法: cover-view、cover-image 嵌套在原生组件(video、map)内:
在 js 中导入 css 报错
原因:目前 App 端不支持在 js 中导入 css(后续会优化)
解决方法:改为在对应组件(或页面)的 style 中
使用 instanceof 判断 uni-app 接口返回的数据类型与预期不符
原因:uni-app 接口(如:uni.base64ToArrayBuffer)返回的数据不支持使用 instanceof 判断类型
解决方法:改用其他方式判断类型,如:arrayBuffer instanceof ArrayBuffer改为Object.prototype.toString.call(arrayBuffer)==='[object ArrayBuffer]'