一 问题重现
在开发微信小程序时，我遇到了一个问题。当用户手动输入昵称并提交时，一切正常。
然而，在这情况下会出现问题。当用户点击输入框时，微信系统会提示“用微信昵称”。若用户选择此提示，昵称输入框会自动填充当前微信昵称，然后点击保存按钮，实际上nickname输入框是没有数据的。
问题重现一下，在input输入框上我添加了监听事bindinput=”onChangeNickname”.
如下：
<form bindsubmit="save">
...
<input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称" bindinput="onChangeNickname" value="{{nickname}}"/>
...
<button form-type="submit" type="primary" style="margin-top: 100rpx;">保存</button>
</form>js逻辑如下：
Page({
data: {
nickname:'',
},
onChangeNickname(e:any){
const nickname = e.detail.value;
this.setData({nickname})
},
save() {
const nickname = this.data.nickname;
wx.request({
...
//api逻辑
})
}
})这个监听事件只在用户正常输入时起作用，如果想上面说的那样选择系统的“用微信昵称”，其实这个nickname是没变化的。
二 操作如虎
(这段也没解决问题，如果想解决问题直接第三段)
1，审核完后出发函数
从小程序的文档获得input的一个属性bindnicknamereview，不管是输入还是自动填充，在审核完昵称后触发bindnicknamereview
| bindnicknamereview | 用户昵称审核完毕后触发，仅在 type 为 “nickname” 时有效，event.detail = { pass, timeout } |
天真的我以为昵称审核完后，触发事件bindnicknamereview，会返回昵称，然而并没有，所以这个方式也不行。
2，提交
然后我一通搜索，在”表单组件form“文档发现这么一句话
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
这样的话获取输入框的内容，就不需要从data获取了，直接我们从bindsubmit这个监听来获取nickname以及其他的参数。
save(e) {
const { nickname, avatar } = e.detail.value;
wx.request({
...
//api逻辑
})
}三，解决问题
//wxml
<!--pages/set-profile/index.wxml 设置用户的头像和昵称-->
<view>
<form bindsubmit="save">
<!-- 头像 -->
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatar}}"></image>
</button>
<!-- 头像隐藏域 -->
<input type="text" name="avatar" value="{{avatar}}" type="text" hidden="true" />
<mp-form>
<mp-cells>
<mp-cell title="昵称">
<input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称" value="{{nickname}}"/>
</mp-cell>
</mp-cells>
</mp-form>
<button form-type="submit" type="primary" style="margin-top: 100rpx;">保存</button>
</form>
</view>
import config from "../../wxconfig";
const defaultAvatarUrl = "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
Page({
data: {
token: "",
nickname: "",
avatar: "",
userProfile: {},
},
onLoad() {
const token = wx.getStorageSync("token");
const userProfile = wx.getStorageSync("userProfile");
let avatar, nickname;
if (userProfile) {
avatar = userProfile.avatar;
nickname = userProfile.nickname;
} else {
avatar = defaultAvatarUrl;
nickname = "";
}
this.setData({
token,
nickname,
avatar,
userProfile,
});
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail;
wx.uploadFile({
url: config.baseUrl + "/api/v1/upload",
filePath: avatarUrl,
name: "file",
header: {
Authorization: "Bearer " + this.data.token,
},
formData: {
mediaType: "avatar",
},
success: (res) => {
const mydata = JSON.parse(res.data);
if (mydata.status == 1) {
const newAvatar = mydata.data.url;
this.setData({
avatar: newAvatar,
});
} else {
wx.showToast({
title: "上传失败",
icon: "error",
});
}
},
fail: (err) => {
wx.showToast({
title: err.message,
icon: "error",
});
},
});
},
save(e) {
const { nickname, avatar } = e.detail.value;
wx.request({
method: "POST",
url: config.baseUrl + "/api/v1/setprofile",
header: {
Authorization: "Bearer " + this.data.token,
},
data: {
nickname,
avatar,
},
success: (res) => {
if (res.data.status == 1) {
wx.showToast({
title: "保存成功",
icon: "success",
duration: 2000,
});
const userProfile = { ...this.data.userProfile, avatar, nickname };
this.setData({
userProfile,
});
wx.setStorageSync("userProfile", userProfile);
}
},
});
},
});