更新记录

1.0.0（2026-06-01） 下载此版本

init

平台兼容性

uni-app(4.87)

其他

仿微信 Demo

基于 UniApp + Vue 2 + Vuex 开发的仿微信移动端应用

目录

• 项目简介
• 快速开始
• 构建部署
• 功能模块
• 项目结构
• 配置说明
• 技术栈
• 页面路由

项目简介

一个高度还原微信 UI 和交互的移动端 Demo 项目，采用 uni-app 框架开发，支持 H5、微信小程序、Android、iOS 多端运行。项目涵盖了微信的主要功能模块，包括聊天、通讯录、发现、我的四大主页面及大量子页面。

内置小游戏

技术栈

快速开始

环境要求

• Node.js >= 12.x
• HBuilderX （推荐） 或 npm/yarn
• 微信开发者工具 （小程序调试）

安装依赖

# 克隆项目
git clone <your-repo-url>
cd wx-demo

# 安装依赖
npm install

本地开发

方式一：HBuilderX（推荐）

1. 使用 HBuilderX 打开项目根目录
2. 点击菜单：运行 → 运行到浏览器 → Chrome
3. 默认访问 http://localhost:9090

方式二：命令行

# H5 开发模式
npm run dev:h5

# 微信小程序开发模式（需先配置 appid）
npm run dev:mp-weixin

后端接口

项目默认连接 RuoYi-Vue 后台。可在 config.js 中修改接口地址：

// config.js
export default {
  baseUrl: 'https://your-api-server.com/prod-api',
  // ...
}

不接入后端也可运行，登录页点击"游客登录"进入主界面，大部分功能使用本地数据模拟。

构建部署

# H5 构建
npm run build:h5

# 微信小程序构建
npm run build:mp-weixin

# 打包后的文件在各平台对应目录：
# H5         → dist/build/h5
# 微信小程序  → dist/build/mp-weixin

• H5 部署：将 dist/build/h5 下文件上传至任意静态服务器或 Nginx
• 微信小程序：用微信开发者工具打开 dist/build/mp-weixin 目录，上传审核

功能模块

一、微信（聊天）

二、通讯录

三、发现

四、我

五、设置子页面

移动端适配

项目结构

wx-demo/
├── api/                         # API 接口层
│   ├── login.js                 #   登录/注册/登出/验证码
│   └── system/                  #   系统管理接口
│       ├── dict/data.js         #     字典数据
│       ├── dict/type.js         #     字典类型
│       └── user.js              #     用户管理
├── components/                  # 自定义组件
│   └── uni-section/             #   通用 section 标题组件
├── pages/                       # 页面目录（共 30+ 页面）
│   ├── login.vue                #   登录页
│   ├── register.vue             #   注册页
│   ├── chat/                    #   微信 Tab
│   │   ├── index.vue            #     聊天列表
│   │   └── detail.vue           #     聊天详情
│   ├── contacts/                #   通讯录 Tab
│   │   ├── index.vue            #     联系人列表
│   │   ├── detail.vue           #     联系人详情
│   │   └── add.vue              #     添加朋友
│   ├── discover/                #   发现 Tab
│   │   ├── index.vue            #     发现主页
│   │   ├── game/                #     小游戏
│   │   │   ├── brick.vue        #       弹弹球 (Canvas)
│   │   │   ├── match3.vue       #       消消乐 (Canvas)
│   │   │   └── xiuxian.vue      #       漫漫修仙路 (文字RPG)
│   │   ├── moments.vue          #     朋友圈
│   │   ├── scan.vue             #     扫一扫
│   │   ├── shake.vue            #     摇一摇
│   │   ├── topstory.vue         #     看一看
│   │   ├── search.vue           #     搜一搜
│   │   ├── nearby.vue           #     附近
│   │   ├── shopping.vue         #     购物
│   │   ├── game.vue             #     游戏列表
│   │   ├── miniprogram.vue      #     小程序
│   │   ├── video.vue            #     视频号
│   │   ├── live.vue             #     直播
│   │   └── post.vue             #     发表文字
│   ├── mine/                    #   我 Tab
│   │   ├── index.vue            #     我的主页
│   │   ├── info/                #     个人信息
│   │   │   ├── index.vue
│   │   │   ├── edit.vue
│   │   │   └── personal.vue
│   │   ├── avatar/index.vue     #     修改头像
│   │   ├── pwd/index.vue        #     修改密码
│   │   ├── status/index.vue     #     状态
│   │   ├── favorites/index.vue  #     收藏
│   │   ├── album/index.vue      #     相册
│   │   ├── cards/index.vue      #     卡包
│   │   ├── emoji/index.vue      #     表情
│   │   ├── about/index.vue      #     关于
│   │   ├── help/index.vue       #     帮助
│   │   └── setting/             #     设置
│   │       ├── index.vue        #       设置主页
│   │       ├── account.vue      #       账号与安全
│   │       ├── notify.vue       #       新消息通知
│   │       ├── privacy.vue      #       隐私
│   │       └── general.vue      #       通用
│   └── common/                  #   通用页面
│       ├── webview/index.vue    #     WebView 容器
│       └── textview/index.vue   #     文本查看器
├── plugins/                     # Vue 插件
│   ├── index.js                 #   插件安装器
│   ├── tab.js                   #   $tab 页面导航
│   ├── auth.js                  #   $auth 权限验证
│   └── modal.js                 #   $modal 弹窗提示
├── static/                      # 静态资源
│   ├── index.html               #   H5 模板（含移动端 meta 标签）
│   ├── images/                  #   图片资源
│   │   ├── banner/              #     Banner 图片
│   │   └── tabbar/              #     底部导航图标
│   ├── scss/                    #   全局样式
│   │   ├── global.scss          #     全局工具类
│   │   ├── colorui.css          #     ColorUI 组件样式
│   │   └── index.scss           #     样式入口
│   └── font/                    #   字体图标
├── store/                       # Vuex 状态管理
│   ├── index.js                 #   Store 入口
│   ├── getters.js               #   全局 getters
│   └── modules/                 #   模块
│       ├── user.js              #     用户登录状态
│       ├── favorites.js         #     收藏数据 (localStorage)
│       └── status.js            #     状态数据 (localStorage)
├── utils/                       # 工具函数
│   ├── auth.js                  #   Token 存取
│   ├── common.js                #   Toast / Confirm / 参数序列化
│   ├── constant.js              #   常量定义
│   ├── errorCode.js             #   HTTP 错误码映射
│   ├── permission.js            #   权限校验
│   ├── request.js               #   uni.request 封装
│   ├── storage.js               #   命名空间存储
│   ├── upload.js                #   文件上传
│   └── validate.js              #   表单校验
├── uni_modules/                 # uni-ui 组件（15+ 组件包）
├── pages.json                   #   页面路由 & TabBar 配置
├── manifest.json                #   应用清单（多平台配置）
├── config.js                    #   全局配置（API地址等）
├── App.vue                      #   根组件
├── main.js                      #   应用入口
└── uni.scss                     #   uni-app 全局 SCSS 变量

配置说明

全局配置 config.js

export default {
  baseUrl: 'https://vue.ruoyi.vip/prod-api',  // API 基础地址
  appName: '微信Demo',
  appVersion: '1.0.0'
}

路由配置 pages.json

• 全局自定义导航栏 navigationStyle: "custom"
• 底部 4 Tab：微信 / 通讯录 / 发现 / 我
• 小游戏页面使用独立导航样式
• 共注册 40 个页面路由

应用清单 manifest.json

• h5：hash 路由模式，开发端口 9090，模板 static/index.html
• mp-weixin：appid wxccd7e2a0911b3397
• app-plus：Android 权限（相机、WiFi、震动等）

页面路由

底部导航 (TabBar)

小游戏

主要子页面

页面统计

• 总页面数：40
• Tab 页：4（微信、通讯录、发现、我）
• 实现功能数：40+
• 内置游戏：3（弹弹球、消消乐、漫漫修仙路）

本项目用于学习交流，非商业用途。