• 欢迎来到我的博客
  • [email protected]

uni-app 踩坑记录 + 小本本

学习笔记 tianlan 11个月前 (06-05) 513次浏览 0个评论 扫描二维码
文章目录[隐藏]

$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 。

 

uni-app 踩坑记录 + 小本本

nvue

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

不支持 v-html 指令。

组件自动注册

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

uni-app 踩坑记录 + 小本本

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}`})

运行环境

是运行在手机上的 js 引擎,而非浏览器,所以没有 window、document 对象,如果实在需要可以用 webview ,相当于 E4A 中的浏览框。


天蓝, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:uni-app 踩坑记录 + 小本本
喜欢 (0)
[[email protected]]
分享 (0)

您必须 登录 才能发表评论!