基于微信小程序的登录注册代码,主页面为登录页面,点击注册,跳转到注册页面,注册完后,跳转回登录界面
时间: 2024-05-08 13:15:13 浏览: 9
登录页面代码:
```html
<!-- index.wxml -->
<view class="container">
<form bindsubmit="login">
<view class="form-group">
<view class="label">手机号码</view>
<input type="number" name="phone" class="input" placeholder="请输入手机号码" required />
</view>
<view class="form-group">
<view class="label">密码</view>
<input type="password" name="password" class="input" placeholder="请输入密码" required />
</view>
<button type="submit" class="btn">登录</button>
<button type="button" class="btn" bindtap="goToRegister">注册</button>
</form>
</view>
```
```js
// index.js
Page({
goToRegister() {
wx.navigateTo({
url: '/pages/register/register',
})
},
login(e) {
const { phone, password } = e.detail.value
// TODO: 登录逻辑
}
})
```
注册页面代码:
```html
<!-- register.wxml -->
<view class="container">
<form bindsubmit="register">
<view class="form-group">
<view class="label">手机号码</view>
<input type="number" name="phone" class="input" placeholder="请输入手机号码" required />
</view>
<view class="form-group">
<view class="label">密码</view>
<input type="password" name="password" class="input" placeholder="请输入密码" required />
</view>
<button type="submit" class="btn">注册</button>
</form>
</view>
```
```js
// register.js
Page({
register(e) {
const { phone, password } = e.detail.value
// TODO: 注册逻辑
wx.navigateBack({
delta: 1
})
}
})
```
注意,跳转到注册页面使用 `wx.navigateTo`,注册完后跳转回登录页面使用 `wx.navigateBack`。