以下は、単純な WeChat アプレット登録ログイン ページのコード例です。
<!-- index.wxml -->
<view class="container">
<form bindsubmit="onSubmit">
<view class="form-group">
<text>用户名:</text>
<input type="text" name="username" placeholder="请输入用户名" />
</view>
<view class="form-group">
<text>密码:</text>
<input type="password" name="password" placeholder="请输入密码" />
</view>
<view class="form-group">
<text>确认密码:</text>
<input type="password" name="confirmPassword" placeholder="请再次输入密码" />
</view>
<button formType="submit">注册</button>
</form>
<view class="login">
<text>已有账号?</text>
<text class="login-btn" bindtap="goToLogin">登录</text>
</view>
</view>
<!-- index.js -->
Page({
onSubmit: function (e) {
const { username, password, confirmPassword } = e.detail.value;
if (!username || !password || !confirmPassword) {
wx.showToast({
title: "请填写完整信息",
icon: "none",
});
return;
}
if (password !== confirmPassword) {
wx.showToast({
title: "两次密码不一致",
icon: "none",
});
return;
}
// 发送注册请求,注册成功后跳转到登录页
wx.request({
url: "注册接口地址",
method: "POST",
data: {
username,
password,
},
success: (res) => {
wx.showToast({
title: "注册成功",
icon: "success",
});
wx.navigateTo({
url: "/pages/login/login",
});
},
fail: (err) => {
wx.showToast({
title: "注册失败",
icon: "none",
});
},
});
},
goToLogin: function () {
wx.navigateTo({
url: "/pages/login/login",
});
},
});
// login.js
Page({
onSubmit: function (e) {
const { username, password } = e.detail.value;
if (!username || !password) {
wx.showToast({
title: "请填写完整信息",
icon: "none",
});
return;
}
// 发送登录请求,登录成功后跳转到首页
wx.request({
url: "登录接口地址",
method: "POST",
data: {
username,
password,
},
success: (res) => {
wx.showToast({
title: "登录成功",
icon: "success",
});
wx.switchTab({
url: "/pages/index/index",
});
},
fail: (err) => {
wx.showToast({
title: "登录失败",
icon: "none",
});
},
});
},
});
上記のコードでは、index.wxml ファイルは、ユーザー名、パスワード、パスワードを確認するための入力ボックス、送信ボタン、ログイン ページへのリンクを含む登録ページのビューを定義します。Index.js ファイルは、登録ページのロジックを定義します。ユーザーが送信ボタンをクリックすると、登録リクエストが送信され、リクエストの返された結果に従ってプロンプトとページ ジャンプが実行されます。login.js ファイルも同様に、ログイン ページのロジックを定義します。