Dsx_wechat
- Это клиент WeChat, имитирующий Vue.
- Адрес проекта Github: https://github.com/GGwujun/Dsx_wechat
- Веб-приложение, имитирующее WeChat, имеющее реальный чат и другие функции и реализованное путем разделения передней и задней частей. Интерфейс основан на фреймворке Vue 2.0, серверная часть — на Node.js + Express + MongoDB, а функция чата и функция добавления друзей реализованы через Websocket.
- Добро пожаловать на мой публичный аккаунт:
- Стек интерфейсных технологий: vue 2.0, vue-cli, vuex, vue-router, webpack 2.x, pug, sass, Babel и т. д.;
- Стек серверных технологий: Node.js, Express, express-session, WebSocket(ws), MongoDB, mongoose, ES6 и т. д.
Введение
- Я изучаю Vue некоторое время, но компания не использует Vue. Чтобы попрактиковаться в Vue, я выполнил несколько личных проектов, больших и малых, и имитировал версию WeChat для ПК. Поскольку sockit.io не может быть обновлен. на ПК впечатления не очень хорошие, вам нужно снова войти в систему после обновления, прежде чем вы сможете отправлять сообщения друзьям.
- В компании чаще всего используется ionic, частичный фреймворк пользовательского интерфейса, ориентированный на мобильные веб-приложения, который также использует фреймворк angularjs. Cordova использовалась для упаковки, а позже я подумал об использовании Vue для создания клиента WeChat и упаковки его с помощью Cordova.
- В настоящее время аппаратное обеспечение мобильных телефонов уже очень хорошее. Работа с приложениями базовой упаковки Cordova по-прежнему очень гладкая. Одностраничные приложения с Vue могут без каких-либо изменений стать нативными приложениями.
- Интерфейсная часть собирается и упаковывается с использованием vue-cli и кодируется с помощью семейства vue (vue, vuex, vue-router).
- Используйте axios для запросов ресурсов
- Бэкэнд разработан с использованием экспресс-архитектуры Node.js. Интерфейсов на данный момент не так много, но они будут постоянно обновляться.
Сервер
- Разработано с использованием Nodejs + Express.
- Осуществите регистрацию, вход в систему, выход из системы, просмотр друзей, личную домашнюю страницу, добавление друзей, чат один на один и групповой чат.
- Адрес проекта Github: https://github.com/GGwujun/chatserve
Предварительный просмотр
Скачать апк
Нажмите здесь, чтобы загрузить и установить APK. В настоящее время он поддерживает только системы Android (5.0 или выше) (поскольку проект все еще находится в стадии разработки, некоторые функции могут быть устаревшими или временно недоступными).
Новым пользователям необходимо войти, зарегистрировав учетную запись, а зарегистрированные пользователи могут войти в систему напрямую. В настоящее время учетная запись не поддерживает офлайн-сообщения, а также не поддерживает добавление офлайн-пользователей в друзья (функции, связанные с обменом мгновенными сообщениями, должны гарантировать, что другая сторона находится в сети).
местное использование
Предполагая, что вы установили Node.js , клонируйте репозиторий непосредственно в свой локальный регион, установите все плагины и запустите сервер. Рекомендуется использовать Google Chrome и просматривать его в режиме мобильной отладки (http://localhost:8808/).
# clone
git clone https://github.com/GGwujun/Dsx_wechat.git
# 进入到目录 安装所有依赖包 国内建议使用cnpm
cd Dsx_wechat
npm install
# 开启本地服务器 监听8808端口
npm run dev
Советы
- Невозможно зарегистрироваться или получить данные, поскольку настроенный мною бэкэнд-интерфейс — это мой сервер. Вы можете скачать бэкэнд-код самостоятельно и развернуть его на своем сервере, но он, как правило, доступен.
- Если вы хотите создать собственный сервер, помимо установки зависимостей, связанных с узлами, вам также необходимо установить базу данных MongoDB.
функция
В проекте реализована поддержка внутреннего сервера с реальной функциональностью чата. Пожалуйста, перенесите сюда серверную часть
- Высокая имитация стиля дизайна клиентского интерфейса WeChat с анимацией нажатия, всплывающего окна, модального окна, отклонения и других анимаций перехода;
- Функции регистрации, входа и выхода могут запоминать статус входа и избегать повторных входов в систему;
- Функция чата, все онлайн-пользователи могут иметь групповой чат;
- Чтобы добавить друга, вы должны убедиться, что другой абонент находится в сети, прежде чем вы сможете правильно добавить друга;
- Пользователи могут общаться в частном порядке. В настоящее время другой абонент должен быть онлайн, прежде чем они смогут нормально общаться;
- В настоящее время поддерживается только текстовый чат.
Дополнительные функции, продолжение следует...
Если вы считаете этот проект хорошим, поставьте звездочку и поделитесь им!
