一、系统架构与技术选型

1. 架构设计

采用前后端分离架构，前端使用Uniapp实现跨端开发（支持微信小程序、H5、App），后端基于PHP（推荐ThinkPHP或Laravel框架）提供RESTful API服务。核心组件包括：

• 数据库：MySQL存储用户、圈子、动态等结构化数据
• 缓存层：Redis缓存热门数据（如圈子列表、用户会话）
• 消息队列：RabbitMQ处理异步任务（如图片压缩、消息推送）
• 实时通信：WebSocket（Swoole扩展）实现点赞、评论实时通知

2. 关键技术实现

• 多端适配：通过条件编译（#ifdef MP-WEIXIN）处理小程序特有API
• 性能优化：分页加载、图片懒加载（lazy-load属性）、本地缓存（uni.setStorage）
• 安全机制：JWT实现无状态登录，敏感数据BCrypt加密，HTTPS传输

二、开发过程中的踩坑记录

1. 前端开发问题

（1）页面生命周期与异步操作

• 问题：onLoad/onInit无法使用async/await
• 解决方案：将异步操作封装为Promise，在onReady中调用

// 示例：页面加载时获取用户信息
onReady() {
  this.loadUserData().then(() => {
    console.log('用户数据加载完成');
  });
},
methods: {
  async loadUserData() {
    const res = await uni.request({ url: '/api/user' });
    this.user = res.data;
  }
}

（2）组件引用与样式隔离

• 问题：自定义组件引用路径错误或样式隔离失效
• 解决方案：引用路径必须完整（如@/components/MyComponent.vue）启用样式共享（styleIsolation: 'shared'）

@Component({
  options: { styleIsolation: 'shared' }
})
export default class MyComponent extends Vue {}

3）输入框与键盘交互

• 问题：iOS微信小程序输入框聚焦时placeholder不消失
• 解决方案：动态绑定focus变量并延时处理

<input 
  :focus="inputFocus" 
  @click="handleInputClick"
  placeholder="请输入内容"
/>

methods: {
  handleInputClick() {
    this.inputFocus = true;
    setTimeout(() => {
      this.inputFocus = false;
      this.inputFocus = true; // 强制刷新
    }, 100);
  }
}

2. 后端开发问题

（1）JWT鉴权中间件

• 问题：Token解析失败导致未授权访问
• 解决方案：捕获异常并返回401状态码

class JwtMiddleware {
  public function handle($request, Closure $next) {
    $token = $request->header('Authorization');
    try {
      $payload = JWT::decode($token, env('JWT_SECRET'), ['HS256']);
      $request->auth = User::find($payload->sub);
      return $next($request);
    } catch (Exception $e) {
      return response()->json(['error' => '未授权'], 401);
    }
  }
}

（2）数据库事务与复杂查询

• 问题：圈子成员关系存储导致性能瓶颈
• 解决方案：使用Eloquent的attach/detach方法管理多对多关系

// 用户加入圈子
public function join(Request $request) {
  $user = $request->auth;
  $circle = Circle::find($request->circle_id);
  $user->circles()->attach($circle->id); // 原子操作
  return response()->json(['code' => 200]);
}

（3）文件上传与存储

• 问题：七牛云上传失败或路径错误
• 解决方案：统一处理文件路径并返回JSON响应

public function upload(Request $request) {
  $path = $request->file('file')->store('uploads');
  return response()->json([
    'code' => 200,
    'data' => ['url' => Storage::url($path)]
  ]);
}

三、优化经验与最佳实践

1. 前端优化

• 分页加载：监听onReachBottom事件触发下一页请求

onReachBottom() {
  if (this.loading || !this.hasMore) return;
  this.page++;
  this.loadCircles();
}

• 图片懒加载：使用lazy-load属性减少首屏渲染时间

<image src="/static/placeholder.png" lazy-load :data-src="item.image" />

• 本地缓存：存储用户信息和常用数据

// 存储Token
uni.setStorageSync('token', res.data.token);
// 读取Token
const token = uni.getStorageSync('token');

2. 后端优化

• 接口缓存：Redis缓存热门圈子数据

public function getHotCircles() {
  $key = 'hot_circles';
  if (Redis::has($key)) {
    return response()->json(Redis::get($key));
  }
  $circles = Circle::withCount('members')
    ->orderBy('member_count', 'desc')
    ->limit(10)
    ->get();
  Redis::set($key, $circles, 3600); // 缓存1小时
  return response()->json($circles);
}

• 异步任务：RabbitMQ处理图片压缩

// 发布消息到队列
public function uploadImage(Request $request) {
  $file = $request->file('file');
  $task = [
    'file_path' => $file->store('raw'),
    'callback_url' => '/api/upload/callback'
  ];
  RabbitMQ::publish('image_process', $task);
  return response()->json(['code' => 200]);
}

3. 跨端调试与部署

• 真机调试：使用HBuilderX的“真机调试”功能
• CI/CD：通过GitLab CI自动化部署
• 监控与日志：集成Sentry捕获前端错误，使用Laravel Telescope监控后端请求