问题描述

在使用uniapp开发小程序时，使用uni.navigateToMiniProgram (opens new window)实现打开另一个小程序时，微信小程序 (opens new window)可正常打开，字节小程序 (opens new window)会报错：navigateToMiniProgram:fail must be invoked by user tap gesture

示例代码

<template>
  <view class="content">
    <view class="btn" @click="openMiniProgram">打开小程序</view>
  </view>
</template>
<script setup>
const openMiniProgram = () => {
  uni.navigateToMiniProgram({
    appId: 'ttb53ac3872a065e8501',
    path: '/pages/index/index',
    success: () => {
      console.log('打开成功')
    },
    fail: (err) => {
      console.log('打开失败', err)
    }
  })
}
</script>

问题分析

根据报错信息，可以看出是因为navigateToMiniProgram方法必须由tap事件触发，才能正常打开另一个小程序。于是修改@click为@tap，再次运行，发现还是报错。

于是查看头条小程序配置文档 (opens new window)，发现需要在app.json中配置navigateToMiniProgramAppIdList需要跳转的小程序列表。配置后再次运行，仍旧报同样的错。

问题解决

经过排查，最终发现是uniapp的bug。此问题在新版 alpha hx 3.4.5 上已得到修复；通过vue-cli (opens new window)创建的uniapp项目，也需要升级cli版本（执行yarn upgrade，目前我使用的版本是 "@dcloudio/uni-app": "3.0.0-3080420230531001" ）。并在在有点击事件的节点上添加 data-eventsync="true" ，注意：全小写。

如果这个标签内部只有文本或者是没有子元素，添加data-eventsync="true"确实可以，但是如果标签内有子元素，还是不生效，任然会报 fail must be invoked by user tap gesture 错误。这时候需要在子元素上也添加 data-eventsync="true"。

为避免不同平台对 data-eventsync 的值解析类型不同，可统一简写为 data-eventsync，或者 :data-eventsync="true"。

最终修改后的代码如下：

<template>
  <view class="content" data-eventsync>
    <view class="btn" @click="openMiniProgram" data-eventsync>打开小程序</view>
  </view>
</template>
<script setup>
const openMiniProgram = () => {
  uni.navigateToMiniProgram({
    appId: 'ttb53ac3872a065e8501',
    path: '/pages/index/index',
    success: () => {
      console.log('打开成功')
    },
    fail: (err) => {
      console.log('打开失败', err)
    }
  })
}
</script>

至此，问题圆满解决。 同样，在使用 uni.getUserProfile 获取用户信息时，若报同样错误，也可参考此方法解决。 期待 uniapp 官方早日修复此问题。