uni-app 踩坑记录 + 小本本

文章目录[隐藏]

$refs.xx undefined
nvue
组件自动注册
uni.navigateTo
运行环境

$refs.xx undefined

常识

必须是已经渲染出来的才能通过 $refs 获取，所以需要注意相关节点是否设置了 v-if 等属性。

问题描述

某个没有设置默认值的数据需要请求接口获得，那么就十分可能造成如下运行错误：

TypeError: Cannot read property ‘xx’ of undefined

这会导致调用了这个数据的节点在接口返回前无法渲染，从而导致这段时间内无法获取 $refs.xx，例如在 mounted() 中 $refs.xx 是 undefined。

无效的解决方案

then callback：请求被响应后，将响应赋值给 Vue.data 的操作
setTimeout callback：$refs.xx 相关操作

请求接口（http 请求）的 then callback 会被加入到异步微任务队列，我们可以将 setTimeout callback 加入异步宏任务队列，从而确保其在接口返回（即数据有值，节点成功渲染）后执行。

    mounted: function () {
        setTimeout(() => {
            console.log(this.$refs.xx);
        }, 0)
    }

    onLoad: async function () {
        let res = await uni.request({url})
    }

为何无效

我之所以会提出这个解决方案，是因为 await 语法糖用多了，错把 uni.request() 当成一个同步操作了…实际上，uni.request() 是异步请求。

实际运行情况如下图所示，假设【回调函数(其中包括resolve)】比【setTimeout callback】先加入异步宏任务队列，即【then callback 加入异步微任务队列】这一操作在【setTimeout callback】之前执行，那么程序才能符合我们预期。不过由于 http 请求比较耗时，这种情况的概率几乎为 0 。

nvue

在 App.vue 中定义的全局js变量不会在 nvue 页面生效。globalData和vuex是生效的。

不支持 v-html 指令。

组件自动注册

components 目录下的组件都会自动注册到全局，无需手动注册，如图。

uni.navigateTo

// 有多余的 / 则不能正常跳转
uni.navigateTo({url: `/pages/type-video-list/type-video-list/?typeId=${typeId}`})

// 去除 ? 前面的 / 则正常
uni.navigateTo({url: `/pages/type-video-list/type-video-list?typeId=${typeId}`})