176 lines
3.8 KiB
Markdown
176 lines
3.8 KiB
Markdown
# 登录页面快速开始指南
|
||
|
||
## 🚀 如何打开登录页面
|
||
|
||
### 方式 1: 作为应用启动页（推荐）
|
||
|
||
登录页面已经被设置为应用的启动页。当你运行小程序时，用户首先会看到登录页面。
|
||
|
||
**已完成的配置：**
|
||
- ✅ 登录页面已添加到 `pages.json` 的第一位
|
||
- ✅ 用户未登录时会自动显示登录页面
|
||
- ✅ 登录成功后会自动跳转到首页
|
||
|
||
### 方式 2: 从其他页面导航到登录页面
|
||
|
||
如果你需要从其他页面导航到登录页面，使用以下代码：
|
||
|
||
```javascript
|
||
// 导航到登录页面
|
||
uni.navigateTo({
|
||
url: '/pages/login/login-page'
|
||
})
|
||
|
||
// 或者使用 reLaunch（清除历史记录）
|
||
uni.reLaunch({
|
||
url: '/pages/login/login-page'
|
||
})
|
||
```
|
||
|
||
### 方式 3: 在代码中检查登录状态
|
||
|
||
```javascript
|
||
// 检查用户是否已登录
|
||
const token = uni.getStorageSync('token')
|
||
|
||
if (!token) {
|
||
// 用户未登录，跳转到登录页面
|
||
uni.reLaunch({
|
||
url: '/pages/login/login-page'
|
||
})
|
||
} else {
|
||
// 用户已登录，继续使用应用
|
||
}
|
||
```
|
||
|
||
## 📱 运行小程序
|
||
|
||
### 使用 HBuilderX
|
||
|
||
1. 打开 HBuilderX
|
||
2. 打开你的项目
|
||
3. 点击菜单 "运行" → "运行到小程序模拟器" → "微信开发者工具"
|
||
4. 小程序会自动打开登录页面
|
||
|
||
### 使用命令行
|
||
|
||
```bash
|
||
# 开发模式
|
||
npm run dev
|
||
|
||
# 构建
|
||
npm run build
|
||
```
|
||
|
||
## 🔐 登录流程
|
||
|
||
1. **用户进入应用** → 显示登录页面
|
||
2. **用户勾选协议** → 启用登录按钮
|
||
3. **用户点击登录** → 调用微信登录 API
|
||
4. **获取授权码** → 发送到后端
|
||
5. **后端验证** → 返回 token 和用户信息
|
||
6. **保存 token** → 存储到本地存储
|
||
7. **自动跳转** → 进入首页
|
||
|
||
## 🛠️ 配置说明
|
||
|
||
### pages.json 配置
|
||
|
||
登录页面已在 `pages.json` 中配置：
|
||
|
||
```json
|
||
{
|
||
"path": "pages/login/login-page",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
```
|
||
|
||
- `navigationStyle: "custom"` - 使用自定义导航栏
|
||
|
||
### 环境变量配置
|
||
|
||
确保你的后端 API 地址已正确配置。在 `main.js` 或相关配置文件中：
|
||
|
||
```javascript
|
||
// 配置 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`：
|
||
|
||
```scss
|
||
.login-button {
|
||
background-color: #17a2b8; // 修改此颜色
|
||
}
|
||
```
|
||
|
||
### Q: 如何修改用户协议内容？
|
||
|
||
A: 编辑 `pages/login/login-page.vue`，修改 `getUserAgreementContent()` 方法。
|
||
|
||
### Q: 如何禁用微信登录？
|
||
|
||
A: 在 `pages/login/login-page.vue` 中注释掉 `handleWechatLogin()` 方法的微信登录代码。
|
||
|
||
### Q: 登录后如何获取用户信息？
|
||
|
||
A: 登录成功后，用户信息会保存到本地存储：
|
||
|
||
```javascript
|
||
const user = JSON.parse(uni.getStorageSync('user'))
|
||
console.log(user.nickname) // 获取用户昵称
|
||
```
|
||
|
||
### Q: 如何实现登出功能？
|
||
|
||
A: 创建一个登出函数：
|
||
|
||
```javascript
|
||
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`
|
||
|
||
---
|
||
|
||
**现在你可以运行小程序，登录页面会自动显示！** 🎉
|