3.8 KiB
3.8 KiB
登录页面快速开始指南
🚀 如何打开登录页面
方式 1: 作为应用启动页（推荐）
登录页面已经被设置为应用的启动页。当你运行小程序时，用户首先会看到登录页面。
已完成的配置：
- ✅ 登录页面已添加到
pages.json的第一位 - ✅ 用户未登录时会自动显示登录页面
- ✅ 登录成功后会自动跳转到首页
方式 2: 从其他页面导航到登录页面
如果你需要从其他页面导航到登录页面，使用以下代码：
// 导航到登录页面
uni.navigateTo({
url: '/pages/login/login-page'
})
// 或者使用 reLaunch（清除历史记录）
uni.reLaunch({
url: '/pages/login/login-page'
})
方式 3: 在代码中检查登录状态
// 检查用户是否已登录
const token = uni.getStorageSync('token')
if (!token) {
// 用户未登录，跳转到登录页面
uni.reLaunch({
url: '/pages/login/login-page'
})
} else {
// 用户已登录，继续使用应用
}
📱 运行小程序
使用 HBuilderX
- 打开 HBuilderX
- 打开你的项目
- 点击菜单 "运行" → "运行到小程序模拟器" → "微信开发者工具"
- 小程序会自动打开登录页面
使用命令行
# 开发模式
npm run dev
# 构建
npm run build
🔐 登录流程
- 用户进入应用 → 显示登录页面
- 用户勾选协议 → 启用登录按钮
- 用户点击登录 → 调用微信登录 API
- 获取授权码 → 发送到后端
- 后端验证 → 返回 token 和用户信息
- 保存 token → 存储到本地存储
- 自动跳转 → 进入首页
🛠️ 配置说明
pages.json 配置
登录页面已在 pages.json 中配置：
{
"path": "pages/login/login-page",
"style": {
"navigationStyle": "custom"
}
}
navigationStyle: "custom"- 使用自定义导航栏
环境变量配置
确保你的后端 API 地址已正确配置。在 main.js 或相关配置文件中：
// 配置 API 基础 URL
uni.$config = {
apiBaseUrl: 'http://localhost:3000' // 开发环境
// apiBaseUrl: 'https://api.example.com' // 生产环境
}
🌍 多语言支持
登录页面支持三种语言：
- 中文 (Chinese)
- 英文 (English)
- 葡萄牙文 (Portuguese)
语言会根据用户的系统设置自动切换。
📝 常见问题
Q: 如何修改登录按钮的颜色？
A: 编辑 pages/login/login-page.vue，修改 .login-button 的 background-color：
.login-button {
background-color: #17a2b8; // 修改此颜色
}
Q: 如何修改用户协议内容？
A: 编辑 pages/login/login-page.vue，修改 getUserAgreementContent() 方法。
Q: 如何禁用微信登录？
A: 在 pages/login/login-page.vue 中注释掉 handleWechatLogin() 方法的微信登录代码。
Q: 登录后如何获取用户信息？
A: 登录成功后，用户信息会保存到本地存储：
const user = JSON.parse(uni.getStorageSync('user'))
console.log(user.nickname) // 获取用户昵称
Q: 如何实现登出功能？
A: 创建一个登出函数：
function logout() {
// 清除本地存储
uni.removeStorageSync('token')
uni.removeStorageSync('refreshToken')
uni.removeStorageSync('user')
// 跳转到登录页面
uni.reLaunch({
url: '/pages/login/login-page'
})
}
🔗 相关文件
- 登录页面:
pages/login/login-page.vue - 路由配置:
pages.json - 中文翻译:
locale/zh.js - 英文翻译:
locale/en.js - 葡萄牙文翻译:
locale/pt.js
📚 更多信息
详细的登录页面文档请查看: pages/login/README.md
现在你可以运行小程序，登录页面会自动显示！ 🎉