fnvtk/soul-yongping

Fork 0

Files

乘风 3ccf331e12 更新服务器信息为新的 IP 地址，调整相关文档和代码中的默认配置，确保部署和连接的一致性。同时，优化订单管理界面，增强商品信息的格式化逻辑，提升用户体验。

2026-02-05 21:08:28 +08:00

12 KiB

Raw Blame History

小程序昵称自动填充功能说明

📋 需求

在"我的"页面点击修改昵称时，唤醒微信的自动填充功能，用户可以一键使用微信昵称。

✅ 实现方案

使用微信官方推荐的 <input type="nickname"> 组件，支持自动填充微信昵称。

🔧 实现细节

1. 添加昵称输入弹窗

文件: miniprogram/pages/my/my.wxml

新增代码:

<!-- 修改昵称弹窗 -->
<view class="modal-overlay" wx:if="{{showNicknameModal}}" bindtap="closeNicknameModal">
  <view class="modal-content nickname-modal" catchtap="stopPropagation">
    <view class="modal-close" bindtap="closeNicknameModal">✕</view>
    <view class="modal-header">
      <text class="modal-icon">✏️</text>
      <text class="modal-title">修改昵称</text>
    </view>
    
    <view class="nickname-input-wrap">
      <input 
        class="nickname-input"
        type="nickname"
        value="{{editingNickname}}"
        placeholder="点击输入昵称"
        bindchange="onNicknameChange"
        bindinput="onNicknameInput"
        maxlength="20"
      />
      <text class="input-tip">微信用户可点击自动填充昵称</text>
    </view>
    
    <view class="modal-actions">
      <view class="modal-btn modal-btn-cancel" bindtap="closeNicknameModal">取消</view>
      <view class="modal-btn modal-btn-confirm" bindtap="confirmNickname">确定</view>
    </view>
  </view>
</view>

关键点:

type="nickname" - 启用微信昵称自动填充 ✅
bindchange="onNicknameChange" - 监听自动填充事件 ✅
bindinput="onNicknameInput" - 监听手动输入事件 ✅
maxlength="20" - 限制昵称长度 ✅

2. 修改 JS 逻辑

文件: miniprogram/pages/my/my.js

2.1 添加数据字段

data: {
  showNicknameModal: false,  // 控制弹窗显示
  editingNickname: ''        // 正在编辑的昵称
}

2.2 修改 editNickname 函数

修改前（使用系统弹窗）:

editNickname() {
  wx.showModal({
    title: '修改昵称',
    editable: true,
    placeholderText: '请输入昵称',
    success: async (res) => {
      // ... 处理逻辑
    }
  })
}

修改后（使用自定义弹窗）:

// 打开昵称修改弹窗
editNickname() {
  this.setData({
    showNicknameModal: true,
    editingNickname: this.data.userInfo?.nickname || ''
  })
}

// 关闭昵称弹窗
closeNicknameModal() {
  this.setData({
    showNicknameModal: false,
    editingNickname: ''
  })
}

// 昵称输入实时更新
onNicknameInput(e) {
  this.setData({
    editingNickname: e.detail.value
  })
}

// 昵称变化（微信自动填充时触发）
onNicknameChange(e) {
  console.log('[My] 昵称已自动填充:', e.detail.value)
  this.setData({
    editingNickname: e.detail.value
  })
}

// 确认修改昵称
async confirmNickname() {
  const newNickname = this.data.editingNickname.trim()
  
  if (!newNickname) {
    wx.showToast({ title: '昵称不能为空', icon: 'none' })
    return
  }
  
  if (newNickname.length < 1 || newNickname.length > 20) {
    wx.showToast({ title: '昵称1-20个字符', icon: 'none' })
    return
  }
  
  // 关闭弹窗
  this.closeNicknameModal()
  
  // 显示加载
  wx.showLoading({ title: '更新中...' })
  
  try {
    // 更新本地
    const userInfo = this.data.userInfo
    userInfo.nickname = newNickname
    this.setData({ userInfo })
    app.globalData.userInfo = userInfo
    wx.setStorageSync('userInfo', userInfo)
    
    // 同步到服务器
    await app.request('/api/user/update', {
      method: 'POST',
      data: { userId: userInfo.id, nickname: newNickname }
    })
    
    wx.hideLoading()
    wx.showToast({ title: '昵称已更新', icon: 'success' })
  } catch (e) {
    wx.hideLoading()
    console.error('[My] 更新昵称失败:', e)
    wx.showToast({ title: '更新失败', icon: 'none' })
  }
}

3. 添加样式

文件: miniprogram/pages/my/my.wxss

新增样式:

/* 修改昵称弹窗 */
.nickname-modal {
  width: 600rpx;
  max-width: 90%;
}

.modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.modal-icon {
  font-size: 60rpx;
  margin-bottom: 16rpx;
}

.modal-title {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: 600;
}

.nickname-input-wrap {
  margin-bottom: 40rpx;
}

.nickname-input {
  width: 100%;
  height: 88rpx;
  padding: 0 24rpx;
  background: rgba(255, 255, 255, 0.05);
  border: 2rpx solid rgba(56, 189, 172, 0.3);
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #ffffff;
  box-sizing: border-box;
}

.input-tip {
  display: block;
  margin-top: 12rpx;
  font-size: 22rpx;
  color: rgba(56, 189, 172, 0.6);
  text-align: center;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.modal-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.modal-btn-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  border: 2rpx solid rgba(255, 255, 255, 0.1);
}

.modal-btn-confirm {
  background: linear-gradient(135deg, #38bdac 0%, #2da396 100%);
  color: #ffffff;
  box-shadow: 0 8rpx 24rpx rgba(56, 189, 172, 0.3);
}

🎯 使用流程

用户操作步骤

打开"我的"页面
点击昵称（或点击"点击设置昵称"）
弹出昵称修改弹窗
点击输入框
- 微信用户：会自动弹出"使用微信昵称"选项
- 非微信用户：手动输入昵称
选择"使用微信昵称" 或 手动输入
点击"确定"
昵称更新成功 ✅

📱 效果展示

自动填充流程

点击昵称
    ↓
显示弹窗（输入框为空或显示当前昵称）
    ↓
点击输入框
    ↓
微信弹出选择：
  ┌─────────────────────┐
  │ 使用微信昵称        │
  │ [张三]              │  ← 点击即可自动填充
  ├─────────────────────┤
  │ 手动输入            │  ← 或者自己输入
  └─────────────────────┘
    ↓
自动填充到输入框（触发 onNicknameChange）
    ↓
点击"确定"
    ↓
保存到本地 + 同步到服务器

🆚 对比旧版

旧版（系统弹窗）❌

wx.showModal({
  editable: true,
  placeholderText: '请输入昵称'
})

问题:

❌ 样式单调，无法自定义
❌ 不支持微信昵称自动填充
❌ 用户体验较差

新版（自定义弹窗）✅

<input type="nickname" />

优势:

✅ 支持微信昵称自动填充
✅ 样式可自定义（符合APP风格）
✅ 用户体验更好
✅ 微信官方推荐方式

🧪 测试验证

测试1: 微信用户自动填充

步骤:

使用微信登录小程序
进入"我的"页面
点击昵称
弹出昵称修改弹窗
点击输入框
应该看到"使用微信昵称"选项
点击"使用微信昵称"
昵称自动填充到输入框
点击"确定"
昵称更新成功

预期结果: ✅ 一键使用微信昵称

测试2: 手动输入昵称

步骤:

点击昵称
弹出弹窗
点击输入框
手动输入"Soul创业者"
点击"确定"

预期结果: ✅ 手动输入的昵称保存成功

测试3: 昵称验证

步骤:

输入空昵称 → 提示"昵称不能为空"
输入超长昵称（>20字符） → 提示"昵称1-20个字符"
输入正常昵称 → 保存成功

预期结果: ✅ 验证逻辑正常

📦 修改文件清单

文件	修改内容	状态
`miniprogram/pages/my/my.wxml`	添加昵称输入弹窗	✅
`miniprogram/pages/my/my.js`	修改 editNickname 逻辑	✅
`miniprogram/pages/my/my.wxss`	添加弹窗样式	✅

🎨 UI 设计

弹窗外观

┌────────────────────────────┐
│            ✕               │ ← 关闭按钮
│                            │
│           ✏️               │ ← 图标
│        修改昵称            │ ← 标题
│                            │
│  ┌──────────────────────┐ │
│  │ 点击输入昵称          │ │ ← 输入框（支持自动填充）
│  └──────────────────────┘ │
│  微信用户可点击自动填充昵称 │ ← 提示文字
│                            │
│  ┌────────┐  ┌──────────┐ │
│  │  取消  │  │   确定   │ │ ← 操作按钮
│  └────────┘  └──────────┘ │
└────────────────────────────┘

颜色方案

背景：深色半透明遮罩
弹窗：渐变背景（与APP整体风格一致）
输入框：品牌色边框 rgba(56, 189, 172, 0.3)
确定按钮：品牌渐变 #38bdac → #2da396
取消按钮：灰色透明

🔍 核心技术点

1. `type="nickname"` 属性

作用: 启用微信昵称自动填充功能

触发时机: 用户点击输入框时

用户体验:

iOS: 弹出键盘上方显示"使用微信昵称"选项
Android: 显示快捷选择弹窗

2. `bindchange` vs `bindinput`

bindchange:

当用户点击"使用微信昵称"时触发
自动填充完成时触发
e.detail.value 包含完整的微信昵称

bindinput:

用户手动输入时实时触发
每输入一个字符都会触发
e.detail.value 包含当前输入值

两者配合: 完美支持自动填充和手动输入 ✅

3. 数据流转

用户点击昵称
    ↓
this.editNickname()
    ↓
显示弹窗 (showNicknameModal = true)
    ↓
用户点击输入框
    ↓
微信弹出选择
    ↓
选择"使用微信昵称"
    ↓
onNicknameChange() 触发
    ↓
editingNickname 更新为微信昵称
    ↓
用户点击"确定"
    ↓
confirmNickname() 执行
    ↓
保存到本地 + 同步服务器
    ↓
显示成功提示

🔐 安全性

1. 输入验证

if (!newNickname) {
  wx.showToast({ title: '昵称不能为空', icon: 'none' })
  return
}

if (newNickname.length < 1 || newNickname.length > 20) {
  wx.showToast({ title: '昵称1-20个字符', icon: 'none' })
  return
}

2. 数据同步

// 1. 先更新本地（立即响应）
userInfo.nickname = newNickname
this.setData({ userInfo })
app.globalData.userInfo = userInfo
wx.setStorageSync('userInfo', userInfo)

// 2. 再同步到服务器（异步）
await app.request('/api/user/update', {
  method: 'POST',
  data: { userId: userInfo.id, nickname: newNickname }
})

优势:

✅ 用户体验流畅（先更新UI）
✅ 数据持久化（同步到服务器）
✅ 离线友好（失败不影响本地显示）

🎁 额外优化

1. 弹窗动画

复用现有的 .modal-overlay 和 .modal-content 样式，自带淡入淡出效果。

2. 友好提示

<text class="input-tip">微信用户可点击自动填充昵称</text>

让用户知道可以使用自动填充功能。

3. 错误处理

try {
  // 同步到服务器
  await app.request(...)
} catch (e) {
  console.error('[My] 更新昵称失败:', e)
  wx.showToast({ title: '更新失败', icon: 'none' })
}

即使服务器同步失败，本地仍然更新成功，不影响用户体验。

📱 兼容性

微信版本要求

<input type="nickname"> 支持的最低版本：

基础库: 2.21.2
微信版本: 8.0.16

兼容处理:

新版微信：显示"使用微信昵称"选项 ✅
旧版微信：降级为普通输入框（仍可手动输入）✅

✨ 完成效果

修改前

点击昵称 → 系统弹窗 → 手动输入 → 保存

修改后

点击昵称 → 自定义弹窗 → 
  ├─ 点击"使用微信昵称" → 一键填充 ✅
  └─ 手动输入 → 保存 ✅

现在用户可以一键使用微信昵称了！ 🎉

相关文件:

✅ miniprogram/pages/my/my.wxml
✅ miniprogram/pages/my/my.js
✅ miniprogram/pages/my/my.wxss

12 KiB Raw Blame History Unescape Escape