# 登录页面快速开始指南

## 🚀 如何打开登录页面

### 方式 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`

---

**现在你可以运行小程序，登录页面会自动显示！** 🎉