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]'