写一个微信小程序的注册页面,内容接口路径:/register 接口说明:输入必要的信息之后注册,成功返回0,不成功返回1,以及不成功的原因 请求方式:post 需要参数(参数名+参数含义): ●name:用户姓名 ●password:用户密码 ●email :用户邮箱 ●type:用户类型,只能在“admin”、“applier”、“fixer”三者中选择 ●company_name:用户所属公司 ●department_id:用户所属部门,一个整数只能从1-6中选择,各个数字的含义看数据库 可能返回的Json内容: ●code:状态响应码,0表示注册成功,1表示注册失败 ●data:接下来是否有其他数据,有则为true ●userMsg:这个邮箱已经被注册 ●nameMsg:姓名为空 ●emailMsg:邮箱不能为空 ●passwordMsg:密码为空 ●typeMsg:用户类型为空、用户类型非法(传入的类型不在指定的那三种中) ●companyMsg:公司名为空、公司名不存在 ●departmentMsg:部门不存在(传入的整数不在1-6范围内) 响应体示例: 注册成功: {"code":0, "data":false} 因为用户输入的邮箱已经被注册过而登录失败: {"code":1,"data":true,"userMsg":"该账号不存在!"} 因为用户输入的公司名不存在而登录失败: {"code":1,"data":true,"companyMsg":"公司不存在!"}
时间: 2023-11-27 22:05:59 浏览: 805
微信小程序 教程之注册页面
以下是一个简单的微信小程序注册页面的代码示例:
```html
<!-- register.wxml -->
<view class="register-form">
<form bindsubmit="submitForm">
<view class="form-item">
<text class="form-label">姓名:</text>
<input class="form-input" name="name" placeholder="请输入姓名" />
</view>
<view class="form-item">
<text class="form-label">密码:</text>
<input class="form-input" type="password" name="password" placeholder="请输入密码" />
</view>
<view class="form-item">
<text class="form-label">邮箱:</text>
<input class="form-input" type="email" name="email" placeholder="请输入邮箱" />
</view>
<view class="form-item">
<text class="form-label">用户类型:</text>
<picker class="form-input" name="type" mode="selector" range="{{types}}" bindchange="typeChange">
<text>{{selectedType}}</text>
</picker>
</view>
<view class="form-item">
<text class="form-label">所属公司:</text>
<input class="form-input" name="company_name" placeholder="请输入公司名" />
</view>
<view class="form-item">
<text class="form-label">所属部门:</text>
<picker class="form-input" name="department_id" mode="selector" range="{{departments}}" bindchange="departmentChange">
<text>{{selectedDepartment}}</text>
</picker>
</view>
<button class="register-btn" formType="submit">注册</button>
</form>
</view>
```
```js
// register.js
Page({
data: {
types: ['admin', 'applier', 'fixer'],
selectedType: 'admin',
departments: ['1', '2', '3', '4', '5', '6'],
selectedDepartment: '1'
},
typeChange: function(event) {
let index = event.detail.value;
let selectedType = this.data.types[index];
this.setData({
selectedType: selectedType
});
},
departmentChange: function(event) {
let index = event.detail.value;
let selectedDepartment = this.data.departments[index];
this.setData({
selectedDepartment: selectedDepartment
});
},
submitForm: function(event) {
let formData = event.detail.value;
wx.request({
url: 'https://example.com/register',
method: 'POST',
data: formData,
success: function(res) {
let code = res.data.code;
if (code === 0) {
wx.showToast({
title: '注册成功'
});
wx.navigateTo({
url: '/pages/login/login'
});
} else {
let errorMsg = '';
switch (code) {
case 1:
errorMsg = res.data.userMsg || res.data.nameMsg || res.data.emailMsg || res.data.passwordMsg || res.data.typeMsg || res.data.companyMsg || res.data.departmentMsg;
break;
default:
errorMsg = '未知错误';
break;
}
wx.showModal({
title: '注册失败',
content: errorMsg,
showCancel: false
});
}
},
fail: function() {
wx.showModal({
title: '注册失败',
content: '网络错误,请检查网络连接',
showCancel: false
});
}
});
}
});
```
在这个示例中,我们首先定义了一个包含输入表单的 `register-form` 区域,其中包含姓名、密码、邮箱、用户类型、所属公司和所属部门等输入项。用户可以通过 `picker` 组件选择用户类型和所属部门。当用户提交表单时,我们通过 `bindsubmit` 事件获取表单数据,并使用 `wx.request` 方法发送 POST 请求到服务器端的 `/register` 接口,其中包含用户输入的必要信息。在请求成功后,根据返回的状态响应码 `code` 来判断注册是否成功,并显示相应的提示信息。如果注册成功,我们通过 `wx.showToast` 方法显示一个注册成功的提示框,并跳转到登录页面。如果注册失败,我们通过 `wx.showModal` 方法显示一个注册失败的模态框,并显示相应的错误信息。需要注意的是,我们需要根据接口文档中返回的数据结构来解析返回的响应数据,并根据具体需求进行编写。
阅读全文