Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[t-input] nickname类型无法获取用户微信昵称 #3143

Open
BaYunmo-Lry opened this issue Sep 12, 2024 · 9 comments
Open

[t-input] nickname类型无法获取用户微信昵称 #3143

BaYunmo-Lry opened this issue Sep 12, 2024 · 9 comments
Labels
question This is a question, not a bug

Comments

@BaYunmo-Lry
Copy link

tdesign-miniprogram 版本

v1.5.1

重现链接

No response

重现步骤

<t-input value="{{name}}" bind:change="onChangeName" bind:blur="onBlurName" label="姓名" placeholder="请输入姓名或昵称" bind:nicknamereview="onNicknamereview" type="nickname" clearable></t-input>
以上代码在用户选择微信昵称后并没有触发change事件,blur事件触发但value值仍然是空的,可以触发nicknamereview但该事件并没有我需要的数据,最终导致我无法获取用户的微信昵称

期望结果

用户选择微信昵称后,能够像微信原生组件input一样触发change事件,并返回相应的value值

实际结果

No response

基础库版本

3.5.6

补充说明

微信原生组件input并没有这种问题,在选择完就会立刻触发change事件并在detail.value中返回微信昵称

Copy link
Contributor

👋 @BaYunmo-Lry,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@anlyyao
Copy link
Collaborator

anlyyao commented Sep 14, 2024

@BaYunmo-Lry 没有复现出你的问题,我这边在代码片段上看两边表现是一致的,https://developers.weixin.qq.com/s/FHvmtcm271UA。 你可以先试下代码片段,或者在此代码片段上重新复现你的问题,我们会持续关注

@anlyyao anlyyao added the question This is a question, not a bug label Sep 14, 2024
@Arbureva
Copy link

你好,我这里有一些能复现问题的代码片段,但我并没有使用change,而是直接使用form表单,在以前版本中测试没有问题

WXML:

<view class="userinfo">
	<view class="avatar-group">
		<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
			<image class="avatar" src="{{ avatar }}"></image>
		</button>
		<view>头像</view>
	</view>

	<form catchsubmit="formSubmit" catchreset="formReset">
		<t-input
			autosize
			layout="vertical"
			label="用户名称"
			name="nick_name"
			placeholder="请输入"
			maxlength="10"
			type="nickname"
			model:value="{{ nick_name }}"
			disableDefaultPadding="{{true}}"
			indicator
		/>

		<view class="form-button">
			<t-button theme="primary" block size="large" type="submit" style="margin-left: 10rpx">提交</t-button>
		</view>
	</form>
</view>

*.ts

// pages/my/userinfo/index.ts
import { RequestError } from '@/service/index'
import user from '@/service/user'
import UploadFile from '@/utils/Uploader'
import dayjs from 'dayjs'

// pages/workbench/workorder/add/index.ts
interface IWorkOrderAddData {
	avatar: string
	nick_name: string
	userinfo?: AppModel.UserInfo
}

Page<IWorkOrderAddData, WechatMiniprogram.Page.CustomOption>({
	/**
	 * 页面的初始数据
	 */
	data: {
		avatar: '',
		nick_name: ''
	},

	onChooseAvatar(e: any) {
		console.debug(this.data)
		const { avatarUrl } = e.detail
		this.setData({
			avatar: avatarUrl
		})
	},

	async formSubmit(e: WechatMiniprogram.CustomEvent<{ value: AppModel.UpdateUserInfo }>) {
		console.log('form发生了submit事件,携带数据为:', e.detail.value)

		wx.showLoading({
			title: '正在提交',
			mask: true
		})

		try {
			let url = this.data.avatar

			// 匹配 http://tmp/ 开头,如果是说明本地文件,需要上传
			if (url.startsWith('http://tmp/') || url.startsWith('wxfile://')) {
				url = await UploadFile(this.data.avatar, `${dayjs().format('YYYY-MM-DD')}/`)
			}

			await user.update({
				avatar: url,
				nick_name: e.detail.value.nick_name
			})

			wx.showToast({
				title: '信息更新成功',
				icon: 'success',
				duration: 500
			})

			const userinfo = await user.userinfo()
			wx.setStorageSync('userinfo', userinfo)
			wx.navigateBack()
		} catch (e) {
			console.warn('信息更新失败', e)
			if (e instanceof RequestError) {
				wx.showToast({
					title: e.message,
					icon: 'none'
				})
			} else {
				wx.showToast({
					title: '服务器繁忙',
					icon: 'none'
				})
			}
		}
	},
})

在使用微信昵称后通过开发者工具观察AppData也发现并没有自动给 nick_name 赋值。

@anlyyao
Copy link
Collaborator

anlyyao commented Sep 19, 2024

你好,我这里有一些能复现问题的代码片段,但我并没有使用change,而是直接使用form表单,在以前版本中测试没有问题

WXML:

<view class="userinfo">
	<view class="avatar-group">
		<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
			<image class="avatar" src="{{ avatar }}"></image>
		</button>
		<view>头像</view>
	</view>

	<form catchsubmit="formSubmit" catchreset="formReset">
		<t-input
			autosize
			layout="vertical"
			label="用户名称"
			name="nick_name"
			placeholder="请输入"
			maxlength="10"
			type="nickname"
			model:value="{{ nick_name }}"
			disableDefaultPadding="{{true}}"
			indicator
		/>

		<view class="form-button">
			<t-button theme="primary" block size="large" type="submit" style="margin-left: 10rpx">提交</t-button>
		</view>
	</form>
</view>

*.ts

// pages/my/userinfo/index.ts
import { RequestError } from '@/service/index'
import user from '@/service/user'
import UploadFile from '@/utils/Uploader'
import dayjs from 'dayjs'

// pages/workbench/workorder/add/index.ts
interface IWorkOrderAddData {
	avatar: string
	nick_name: string
	userinfo?: AppModel.UserInfo
}

Page<IWorkOrderAddData, WechatMiniprogram.Page.CustomOption>({
	/**
	 * 页面的初始数据
	 */
	data: {
		avatar: '',
		nick_name: ''
	},

	onChooseAvatar(e: any) {
		console.debug(this.data)
		const { avatarUrl } = e.detail
		this.setData({
			avatar: avatarUrl
		})
	},

	async formSubmit(e: WechatMiniprogram.CustomEvent<{ value: AppModel.UpdateUserInfo }>) {
		console.log('form发生了submit事件,携带数据为:', e.detail.value)

		wx.showLoading({
			title: '正在提交',
			mask: true
		})

		try {
			let url = this.data.avatar

			// 匹配 http://tmp/ 开头,如果是说明本地文件,需要上传
			if (url.startsWith('http://tmp/') || url.startsWith('wxfile://')) {
				url = await UploadFile(this.data.avatar, `${dayjs().format('YYYY-MM-DD')}/`)
			}

			await user.update({
				avatar: url,
				nick_name: e.detail.value.nick_name
			})

			wx.showToast({
				title: '信息更新成功',
				icon: 'success',
				duration: 500
			})

			const userinfo = await user.userinfo()
			wx.setStorageSync('userinfo', userinfo)
			wx.navigateBack()
		} catch (e) {
			console.warn('信息更新失败', e)
			if (e instanceof RequestError) {
				wx.showToast({
					title: e.message,
					icon: 'none'
				})
			} else {
				wx.showToast({
					title: '服务器繁忙',
					icon: 'none'
				})
			}
		}
	},
})

在使用微信昵称后通过开发者工具观察AppData也发现并没有自动给 nick_name 赋值。

还是没提供是从哪个版本升级到的1.5.1哇?"在以前版本中测试没有问题" 以前的版本指的是哪个版本?

@Arbureva
Copy link

还是没提供是从哪个版本升级到的1.5.1哇?"在以前版本中测试没有问题" 以前的版本指的是哪个版本?

你好,我检查了一下我的历史提交记录,发现没有更新,虽说我之前好几次都用过 yarn upgrade 命令,但貌似最新版就是1.4.4。不过以前的版本的确是可以获取到的,是经过测试后才上传了体验版,我再排查一下是不是基础库升级或是其他问题,您可以拿代码示例测一下呢,目前就是拿不到信息。

@Arbureva
Copy link

image image @anlyyao 貌似是从 1.4.4 升级到 1.6.0 之后的问题,只是很奇怪为什么这里的版本不一致,1.6.0 是我现在的主推分支里面的代码

@dududa2015
Copy link

@BaYunmo-Lry 没有复现出你的问题,我这边在代码片段上看两边表现是一致的,https://developers.weixin.qq.com/s/FHvmtcm271UA。 你可以先试下代码片段,或者在此代码片段上重新复现你的问题,我们会持续关注

我也遇到这个问题。在文本框里手动输入昵称是没有问题,但是选择微信弹出来的昵称是没有触发change事件的,其他事件如blur也取不到。

@flyshu
Copy link

flyshu commented Sep 25, 2024

我也遇到类似问题,选择微信弹出来的昵称是没有触发change事件,导致name的值没有变化

@ldcTnT
Copy link

ldcTnT commented Nov 25, 2024

我也遇到这个问题。在文本框里手动输入昵称是没有问题,但是选择微信弹出来的昵称是没有触发change事件的,其他事件如blur也取不到。

<t-input label="昵称" placeholder="请输入文字" align="right" type="nickname" maxlength="{{10}}" bind:change="onNickNameInput" bind:blur="onNickNameInput" value="{{nickname}}"/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question This is a question, not a bug
Projects
None yet
Development

No branches or pull requests

6 participants