8
问题描述
目前我们的小程序在多端使用，微信小程序+支付宝+头条/抖音小程序。
在微信、支付宝中，官方都提供了 $nextTick 的API，可以检测是否dom完成。
但在头条/抖音小程序里，官方没有提供此 $nextTick API，导致有加载过程中，有很多事件和方法都无法正常使用。
请问有头条/抖音小程序里，有什么办法检查dom完成吗？
- HBuilderX版本 [ 2.2.7.20190917-alpha ]
Q
[dcloudio/uni-app]头条/抖音小程序不支持 $nextTick
A
回答
8
没懂，你怎么调用的$nextTick，不是像下边这样吗
this.$nextTick(() => {
const query = wx.createSelectorQuery()
query.select('#a').boundingClientRect()
query.exec(function(res) {
console.log(res);
})
})
4
是的，没错，是按你说的这么调用的，我们在微信小程序里大量使用了此API。
然后在头条/抖音小程序官方并未提供.$nextTickAPI，即使是用了此API，但实事上是没有监听dom效果的
6
跟官方没关系，这个 api 是我们自己实现的，发个示例程序 以下代码测试没问题
<template>
<view class="content">
<view id="a" v-if="a">AAAAAAA</view>
<button @click="go">切换</button>
</view>
</template>
<script>
export default {
data() {
return {
a: false
}
},
methods: {
go() {
this.a = !this.a
this.$nextTick(() => {
const query = uni.createSelectorQuery()
query.select('#a').boundingClientRect()
query.exec(function(res) {
console.log(res);
})
})
}
}
}
</script>
2
嗯嗯，调用方法是一样的。 稍后我发一个demo，同时对比微信小程序与抖音小程序，就能看到区别
7
这是测试 demo.
场景：
1、因为我们从微信迁移到头条小程序，页面组件中使用了大量的 ref 来调用组件的方法。
2、在onReady 后，就要开始执行 this.$refs.xxxxx 方法了
3、在微信中，使用 this.$nextTick 能正常执行 this.$refs.xxxx 。
4、但是在头条中，使用 this.$nextTick 执行 this.$refs.xxxx ，值都是undefined
测试方式：
1、同时打开微信和头条的开发者工具
2、查看 console。
头条开发者工具的截图
8
this.$refs 底层使用了 selectAllComponents 模拟，头条小程序在基础库1.16.2.0版本之前selectAllComponents是异步 api，1.16.2.0之后支持同步，稍后优化以下，保证头条基础库 1.16.2.0 版本以后可以正常
6
好的。
那意思是要等你们优化升级后，才能正常使用 this.$refs.xxxxx，是吗？
那有计划什么时候优化升级吗？我们项目比较急，等着上线
目前我们这个项目有差不多100个页面，要是我们自己做调整，工作量太大了，等你们升级后，我们基本不用改动。
7
经测试，你的 demo 新版本里仍有几率出现访问不到，问题主要是你的组件是在 v-if 里边动态渲染的，onReady 只能保证首次渲染完成 对于你这个需求，可以自己绕一下
//#ifdef MP-TOUTIAO
const nextTick = Vue.prototype.$nextTick
Vue.prototype.$nextTick = function(callback) {
nextTick.call(this, function() {
setTimeout(callback, 200)//自己调延迟时间
})
}
//#endif
7
嗯嗯，demo只是一个简单的渲染，在我们项目里，还有比较复杂的 v-if 渲染。
如果你们近期能够升级是更好的，我们是做拖拽式开发小程序，v-if后使用 this.$refs 的频繁特别高，单纯使用 setTimeout 来处理事件，可能还是会有很多潜在的不稳定因素
4
我使用了你的方法，在 demo 里能正常使用，然后我在我们项目里测试，最终还是 undefined，项目复杂一点，再加上有 v-if 动态渲染的，这个方法无法不起作用了。
截图里还是undefined，我能确定这个this.$refs.worksBase是正常的，因为我们在微信小程序里一直使用着。
8
在官方未发新版本之前，可以手动替换 1.迁出 dev 分支 2.根目录执行 npm run build:mp-toutiao 3.将 packages/uni-mp-toutiao 替换进自己的 HBuilderX/plugins/uniapp-cli/@dcloudio 中或 cli 的 node_modules/@dcloudio 对应目录
9
我按照你的做法，build生成了uni-mp-toutiao 文件。
然后测试获取结果还是 undefined。
不知道是不是我操作有误，我把 build 的文件上传了，你看看。
另外我是用hbx的，放在nbx的安装目录 C:\tool\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-mp-toutiao。
common.zip
这是 dev mp-toutiao`` 里 的common` 文件
7
头条开发者工具 1.7.3，基础库 1.26.2.58
3
我重新做了一个demo，这个是从我们项目里抽离部分代码的demo。
比之前的demo，要复杂一点的。
这个demo测试 this.$refs.xxxx 出现 undefined 频繁超级高。
记得开启不验证域名哦
3
@fxy060608 我注意到官网已经更新到2.3版本了，我用hbx 2.3.1.20190920 测试，用这个 tt-refs-demo.zip demo 里测试 this.$refs，还是一直报undefined
2
经排查，该问题是头条小程序底层 bug 导致的，后续看是不是能绕过去。 1.如果整个 app 大量地方存在 nextTick 不生效，那么还是在 main.js 中补上之前重写 $nextTick 的延时代码 2.针对你这个 demo，修复方式：
//标识加载完成
self.isLoadConfSucc = 1;
// 延迟 resolve，避免短时间触发多次 setData
setTimeout(function(){
resolve(app.globalData[`shopsAllConf_` + $whoNo])
},10)
8