Uniapp 在开发字节抖音小程序时使用 $refs 报错详细解决方案_uniapp $refs

在使用 uniapp 在开发字节抖音小程序时，无论是打包还是调试，在有一些场景下都无法使用 $refs 去获取到子组件，一开始我以为是无法在，子组件里面通过 $refs 获取孙子组件，因为在父组件中是可以使用的，后面测试总结后，才发现是原来是只要通过 v-if 控制的组件，都无法获取到。

最后在 github.com/dcloudio/uni-app/issues 中找到了解决方案，原来是 @dcloudio\uni-mp-toutiao 包出了问题有 bug。

经过排查，发现因为抖音 App 27.2.0 版本的 SDKVersion 为 3.0.0，在 initRefs 方法中，对 selectAllComponents API 做了一个兼容处理：

1、如果使用的是 HBuilder 工具开发直接升级工具为最新版就可以。

2、如果使用的是命令行 cli 进行开发的话，需要更改一下 uniapp 打包抖音的插件。

需要找到如下目录 node_modules\@dcloudio\uni-mp-toutiao\dist\index.js，找到这段代码：

function initRefs$1 (vm) {
  const mpInstance = vm.$scope;
  // /* eslint-disable no-undef */
  const minorVersion = parseInt(tt.getSystemInfoSync().SDKVersion.split('.')[1]);
  if (minorVersion > 16) {
    initRefs(vm);
  } else {
1
2
3
4
5
6
7

修改成下面这段

function initRefs$1 (vm) {
  const mpInstance = vm.$scope;
  /* eslint-disable no-undef */
  const [majorVersion, minorVersion] = tt.getSystemInfoSync().SDKVersion.split('.');
  if (parseInt(majorVersion) > 1 || parseInt(minorVersion) > 16) {
    initRefs(vm);
  } else {
1
2
3
4
5
6
7