/wechat-moments

:fire:朋友圈 - 基于Taro + Taro UI + Redux + Typescript + Koa开发的微信小程序

Primary LanguageTypeScript

朋友圈

朋友圈是一个基于Taro + Taro UI + Redux + Typescript + Koa开发的微信小程序。本项目实现了朋友圈的基本功能，包括用户的授权和登陆，朋友圈的浏览、发布和删除等。

主要技术

  • 使用@tarojs/cli 3.x初始化项目

  • 使用Typescript编写代码，使用React框架，使用Redux + React-redux管理当前用户信息、朋友圈内容等应用状态

  • 使用Taro UI作为UI组件库，使用SCSS编写样式

  • 通过Koa2框架搭建服务端，使用koa-router管理路由，使用koa2-request中间件简化请求

  • 前端通过 Taro.login 接口获取用户临时登录凭证 code 并传至服务端，服务端通过auth.code2session接口获取openid和session_key，最后前端将用户唯一标识和用户信息（昵称、头像等）存入storage

项目功能&截图

  • 用户授权
  • 用户登录
  • 浏览朋友圈
  • 发布朋友圈
  • 删除朋友圈

截图1 截图2 截图3

快速启动

微信小程序
// 1.将项目下载至本地
git clone https://github.com/Lorienn/wechat-moments.git
// 2.安装依赖
cd wechat-moments
npm install
// 3.启动前端项目
npm run dev:weapp
// 4.启动服务端
cd src/server
nodemon index.js
// 5.用微信开发者工具打开dist目录

项目结构

- src
 - pages // 项目页面级组件
 - store // redux初始化文件
 - reducers // redux中的相关同步操作
 - actions // redux中的相关异步操作
 - server // 服务端目录
 - static // 静态资源。包括图片资源
 - utils // 可复用的工具类方法
 - app.tsx // 项目入口文件
 - app.config.ts // 项目全局配置。包括路由配置
 - app.scss // 全局样式