uni_app+vite+vue3+ts开发小程序，解决getUserProfile()获取用户信息问题

1.前言

最近开发小程序，开发环境uni_app+vue3等。在获取小程序平台用户信息是报错：

{errMsg: "getUserProfile:fail must be invoked by user tap gesture", errNo: 21500}

我在抖音上查了下错误码：

看到这个解释也是瞬间无语了，然后在平台查找错误，找了半天终于在vue2 升级vue3文档里面找到解决办法,官方链接：

uni-app官网 (dcloud.io)https://zh.uniapp.dcloud.io/tutorial/migration-to-vue3.html#some-miniapp-terminal-events-of-vue3-project-are-delayed-or-failed-to-call

这里也给出了解释。

2.代码逻辑

<template>
	<view class="page">
		<view class="box" data-eventsync="true" @click="getUserProfile">
			<text class="head">头像</text>
			<text>获取用户信息</text>
		</view>
		<button data-eventsync="true" @click="getUserProfile">获取用户信息</button>
	</view>
</template>

<script setup lang="ts">
	const getUserProfile = async () => {
		await new Promise(() => {
			uni.getUserProfile({
				success: (res) => {
					console.log('success', res);
				}, fail: (err) => {
					console.log('err', err);
					uni.showModal({
						title: '提示',
						content: JSON.stringify(err),
						success: function (res) {
							if (res.confirm) {
								 
							} else if (res.cancel) {
								 
							}
						}
					});

				}
			})
		})
		

	}
</script>

注意点：一定要把data-eventsync="true"添加到事件源上，冒泡到父节点不会生效，如下图所示，在外层view添加了点击事件，我点击了子元素，也会报错，所以子结点上也要添加data-eventsync="true"。

完整代码

<template>
	<view class="page">
		<view class="box" data-eventsync="true" @click="getUserProfile">
			<text class="head" data-eventsync="true">头像</text>
			<text data-eventsync="true">获取用户信息</text>
		</view>
		<button data-eventsync="true" @click="getUserProfile">获取用户信息</button>
	</view>
</template>

<script setup lang="ts">
	const getUserProfile = async () => {
		await new Promise(() => {
			uni.getUserProfile({
				success: (res) => {
					console.log('success', res);
				}, fail: (err) => {
					console.log('err', err);
					uni.showModal({
						title: '提示',
						content: JSON.stringify(err),
						success: function (res) {
							if (res.confirm) {
								 
							} else if (res.cancel) {
								 
							}
						}
					});

				}
			})
		})
		

	}
</script>

 

以上是uni_app加vue3开发遇到的问题，希望对你有所帮助。vue2开发小程序不会存在这个问题。