# 个人笔记

**Repository Path**: hadlooop/personal-notes

## Basic Information

- **Project Name**: 个人笔记
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-06
- **Last Updated**: 2025-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信小程序手机号一键登录

这是一个实现微信小程序手机号一键登录功能的完整示例项目。

## 功能特性

- ✅ 微信手机号一键登录
- ✅ 登录状态持久化
- ✅ 用户信息展示
- ✅ 退出登录功能
- ✅ 现代化UI设计

## 项目结构

```
.
├── app.js                 # 小程序入口文件
├── app.json              # 小程序全局配置
├── app.wxss              # 小程序全局样式
├── project.config.json   # 项目配置文件
├── sitemap.json         # 站点地图配置
├── pages/               # 页面目录
│   ├── index/           # 登录页面
│   └── profile/         # 个人中心页面
└── utils/               # 工具函数
    ├── config.js        # 配置文件
    ├── token.js         # Token管理工具
    ├── request.js       # 统一请求工具（自动携带token）
    ├── login.js         # 登录相关工具
    └── api.js           # API接口定义示例
```

## 架构说明

本项目采用统一的请求架构，所有API请求自动携带token。

### 核心特性

- ✅ **Token自动管理** - 登录后自动保存token，后续请求自动携带
- ✅ **统一请求工具** - 所有API请求通过统一工具发送
- ✅ **自动错误处理** - Token过期自动跳转登录页
- ✅ **配置集中管理** - 统一的配置文件和API接口定义

详细架构说明请查看 [ARCHITECTURE.md](./ARCHITECTURE.md)

## 使用说明

### 1. 配置小程序 AppID

在 `project.config.json` 中修改 `appid` 为你的小程序 AppID。

### 2. 后端接口配置

#### 配置文件

在 `utils/config.js` 中配置：

```javascript
const config = {
  USE_MOCK: false,  // 开发测试时设为 true，生产环境必须设为 false
  BASE_URL: 'https://your-server.com/api',  // 后端接口基础地址
  TIMEOUT: 10000,
  DEBUG: true
}
```

#### 开发模式（测试用）

在 `utils/config.js` 中，将 `USE_MOCK` 设置为 `true` 可以使用模拟数据进行开发测试。

⚠️ **注意：生产环境必须将 `USE_MOCK` 设置为 `false`**

#### 生产模式

1. 将 `USE_MOCK` 设置为 `false`
2. 修改 `BASE_URL` 为你的实际后端接口地址

### 3. 后端接口规范

#### 登录接口

**请求地址：** `POST /user/login`

**请求参数：**
```json
{
  "code": "wx_login_code",
  "encryptedData": "encrypted_phone_data",
  "iv": "iv_string"
}
```

**响应数据：**
```json
{
  "code": 200,
  "success": true,
  "data": {
    "token": "jwt_token_string",
    "expiresIn": 7200,
    "phoneNumber": "13800138000",
    "userInfo": {
      "userId": "user123",
      "userName": "用户名",
      "email": "user@example.com"
    }
  },
  "message": "登录成功"
}
```

#### 需要认证的接口

所有需要认证的接口都需要在请求头中携带token：

```
Authorization: Bearer {token}
```

**响应格式：**
```json
{
  "code": 200,
  "success": true,
  "data": {},
  "message": "操作成功"
}
```

**Token过期响应：**
```json
{
  "code": 401,
  "success": false,
  "message": "登录已过期"
}
```

**后端解密流程：**

1. 使用 `code` 调用微信接口 `https://api.weixin.qq.com/sns/jscode2session` 获取 `session_key` 和 `openid`
2. 使用 `session_key`、`encryptedData` 和 `iv` 解密手机号
3. 返回解密后的手机号

### 4. 后端解密示例（Node.js）

```javascript
const crypto = require('crypto')
const axios = require('axios')

async function decryptPhoneNumber(code, encryptedData, iv) {
  // 1. 获取 session_key
  const appid = 'your-appid'
  const secret = 'your-secret'
  const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${code}&grant_type=authorization_code`
  
  const res = await axios.get(url)
  const { session_key } = res.data
  
  // 2. 解密手机号
  const sessionKey = Buffer.from(session_key, 'base64')
  const encrypted = Buffer.from(encryptedData, 'base64')
  const ivBuffer = Buffer.from(iv, 'base64')
  
  const decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, ivBuffer)
  decipher.setAutoPadding(true)
  
  let decrypted = decipher.update(encrypted, 'binary', 'utf8')
  decrypted += decipher.final('utf8')
  
  const phoneInfo = JSON.parse(decrypted)
  return phoneInfo.phoneNumber
}
```

## 开发调试

1. 使用微信开发者工具打开项目
2. 配置项目 AppID（在 `project.config.json` 中）
3. **开发测试**：在 `utils/config.js` 中设置 `USE_MOCK: true` 使用模拟数据
4. **生产环境**：设置 `USE_MOCK: false` 并配置真实的 `BASE_URL`
5. 编译运行

### 快速开始（开发模式）

1. 打开 `utils/config.js`
2. 设置 `USE_MOCK: true`
3. 在微信开发者工具中运行项目
4. 点击"手机号一键登录"按钮即可测试登录流程

### 使用API请求

所有API请求都通过统一工具发送，自动携带token：

```javascript
const request = require('./utils/request.js')

// GET请求（自动携带token）
const res = await request.get('/user/info', {}, { showLoading: true })

// POST请求（自动携带token）
const res = await request.post('/note/create', { title: '标题' })
```

更多用法请查看 [ARCHITECTURE.md](./ARCHITECTURE.md)

## 注意事项

1. **安全性**：手机号解密必须在后端完成，不要在前端处理敏感数据
2. **权限配置**：确保小程序已开通"获取手机号"权限
3. **用户授权**：用户需要主动点击按钮才能获取手机号
4. **测试环境**：开发测试时可以使用模拟数据，但上线前必须对接真实后端接口

## 微信官方文档

- [获取手机号文档](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html)
- [登录凭证校验](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html)

## License

MIT