【微信小程序-原生开发】实用教程12 - 注册页（含获取用户微信昵称，原生form的表单提交，t-result 的使用）

开始前，请先完成用户登录鉴权，详见

【微信小程序-原生开发】实用教程11 - 用户登录鉴权（含云函数的创建、删除、使用，通过云函数获取用户的openid）_朝阳39的博客-CSDN博客
https://blog.csdn.net/weixin_41192489/article/details/129314349

创建注册页

pages\register\index.wxml

<view class="box">
  <form wx:if="{{type == '注册'}}" bindsubmit="saveInfo">
    <input maxlength="10" name='nickname' type="nickname" placeholder="请输入昵称" />
    <radio-group class="radioBox" name='gender'>
      <radio color='#027CBE' checked value='1'>男radio>
      <radio color='pink' value='2'>女radio>
    radio-group>
    <input maxlength="20" name='identification' placeholder="请输入微信号/可添加微信的手机号" />
    <button form-type="submit">注册button>
  form>

  <view wx:if="{{type == '已注册'}}" class="resultBox">
    <t-result wx:if="{{userInfo.accountStatus === '被拒绝'}}" theme="error" title="您的申请未通过" description="可微信咨询 sunshinehu39" />
    <t-result wx:else theme="success" title="注册信息已提交" description="请耐心等待审核结果" />
  view>
view>

• input 标签的 type 为 nickname 时，用户点击该输入框，会出现用户微信昵称的快捷输入，方便用户快速输入微信的昵称（用户也可输入其他昵称）

pages\register\index.wxss

.box {
  padding: 40rpx;
}

.radioBox {
  padding-bottom: 30rpx;
  display: flex;
  justify-content: space-around;
}

.resultBox {
  margin-top: 200rpx;
}

pages\register\index.json

{
  "usingComponents": {
    "t-result": "tdesign-miniprogram/result/result",
    "t-input": "tdesign-miniprogram/input/input",
    "t-button": "tdesign-miniprogram/button/button",
    "t-link": "tdesign-miniprogram/link/link"
  }
}

pages\register\index.js

 Page({
  data: {
    userInfo: {},
    type: ''
  },
  onLoad(options) {
    this.setData({
      type: options.type
    })
    if (this.data.type == "已注册") {
      this.setData({
        userInfo: wx.getStorageSync('userInfo')
      })
    }
  },
  saveInfo: function (e) {
    let nickname = e.detail.value.nickname
    let gender = e.detail.value.gender
    let identification = e.detail.value.identification

    if (!nickname) {
      info('昵称不能为空')
      return
    }

    if (!identification) {
      info('微信号/手机号不能为空')
      return
    }
    
    wx.cloud.database().collection('user').add({
      data: {
        nickname: nickname, //昵称
        gender: gender, //性别
        identification: identification, //身份验证
        createTime: new Date(), //创建时间
        avatarUrl: '', //头像
        accountStatus: '待审核', //审核状态
        mark: '' //备注
      }
    }).then(res => {
      wx.showToast({
        icon: 'success',
        title: '注册成功',
      })
      this.setData({
        type: '已注册'
      })
    })
  }
})

注册成功后显示审核状态