wechat im

위챗임

WeChat 미니 프로그램 인스턴트 메시징

저는 이 프로젝트를 개발하기 위해 많은 노력을 기울였습니다. 그것이 여러분에게 도움이 되고 영감을 주었다면 GitHub 에서 star 을 주고 싶습니다! 또한 내 작업을 지원하고 확인합니다!

또한 프로젝트에서 너무 긴 텍스트 오버플로 레이아웃 문제를 수정하고 제출한 kulovecc에 매우 감사드립니다!

소개하다:

wechat-im은 미니 프로그램 플랫폼에서 인스턴트 메시징 기능을 빠르게 구현할 수 있는 완벽한 템플릿입니다.

이제 버전 2.xx로 업데이트되었습니다.

1.0.x 및 이전 버전과 비교하여 2.xx의 새로운 기능

• ES6 구문이 완전히 사용되며 비동기 작업은 Promise 및 비동기 구문 설탕을 사용하여 코드를 더욱 의미있게 만듭니다! (최신 WeChat 개발 도구가 필요하고 "향상된 컴파일"을 켜야 함)
• 텍스트 입력 기능을 Component를 사용하여 컴포넌트화 하여 이전 버전보다 성능이 향상되었습니다!
• 지원되는 최소 WeChat 기본 라이브러리 버전은 2.6.1입니다(이전 최소 지원 버전은 1.4.0이었습니다).
• 일부 시나리오의 문제가 해결되었습니다. 예를 들어, 음성 메시지를 재생할 때 채팅 인터페이스를 종료해도 음성은 계속 재생됩니다.
• 2.xx 문서는 며칠 안에 업데이트해 주세요. 능력이 있는 학생은 업데이트할 수 있으며, 대부분은 구문 업데이트 및 구성 요소화입니다. 요즘 너무 바빠서 반 친구들에게 미안해요.

특성:

• 현재 IM의 통신 기능을 구현하기 위해 프로젝트에 webSocket이 사용되었습니다! 현재는 세션 목록 페이지, 세션 페이지, 친구 페이지가 포함되어 있습니다. nodejs를 사용하여 로컬 WebSocket 서비스를 열 수 있도록 지원합니다.
• 문자, 사진, 음성, 이모티콘 입력 방식 지원
• 사진 촬영, 갤러리에서 사진 선택, 사진 미리보기 지원
• 텍스트 입력으로 전환 시 보내기 버튼 표시를 지원합니다.
• 음성 재생 및 애니메이션 재생을 지원합니다.
• 음성 녹음을 위한 최소 및 최대 시간 구성을 지원합니다.
• 사용자 정의 이벤트 구성을 지원합니다.
• 시간별로 정렬된 채팅 메시지를 지원합니다.
• 메시지를 보낸 후 페이지가 맨 아래로 다시 이동합니다.
• 최신 음성 재생 인터페이스를 사용하며 하위 버전의 음성 ​​재생 인터페이스와 호환됩니다.
• 메시지 전송 중, 전송 성공, 전송 실패 상태 업데이트
• 메시지 전송 실패를 지원합니다. 재전송하려면 재전송 버튼을 클릭하세요.
• 인접 정보가 후자 정보가 표시되기까지 5분 이상 걸리는 시간 버블 표시 로직을 최적화합니다.
• 페이지 상단에 세션 상태의 UI 표시가 추가되었습니다.
• 사용자 정의 거품을 표시하는 사용자 정의 기능입니다.
• 음성이나 사진 메시지 정보를 분석하여 로컬 파일을 먼저 읽습니다.
• 파일 저장 알고리즘은 10M 저장 공간의 음성 및 사진 파일을 최신 상태로 유지하도록 구현됩니다.
• 각 메시지 유형과 각 기능이 모듈화되어 코드를 보는 것이 즐겁고 쉽습니다. (사실 이 부분은 컴포넌트 기능으로 볼 수는 없습니다...)

현재 지원되지 않는 기능:

• 현재 UI에서는 그룹 채팅 이용 시 아바타 옆에 멤버 닉네임이 표시되지 않습니다.
• 로컬에 저장된 기록 채팅 메시지가 없습니다. 이유는 문서 끝부분을 참조하세요.
• 현재 WebSocket의 모든 기능은 학습 및 참고용으로만 사용 가능하며, 상업적으로 활용하고자 하시는 경우 직접 개발하시기 바랍니다.
• 현재는 플러그인으로 지원되지 않습니다.

이 프로젝트를 연구하거나 사용하려면 어떤 조건이 필요합니까?

• ES6 구문 사양과 디자인 패턴에 익숙해야 합니다. 그렇지 않으면 프로젝트의 임계값이 높아집니다.
• WebSocket을 깊이 있게 마스터할 필요는 없지만 WebSocket의 일반적인 API와 사용법을 알아야 합니다. 자세한 내용은 WebSocket 미니 프로그램을 참조하세요.
• npm 종속성 설치 및 명령 실행 이해(이 블록은 주로 로컬 WebSocket 서비스를 시작하는 데 사용됩니다)

설치 및 사용 방법

1. 개발자 도구 가져오기 프로젝트

修改app.js文件中下面配置的url为你本地网络ip及固定的端口号8001，即ws://xx.xx.xx.xx:8001
this.imWebSocket.createSocket({url: 'ws://10.4.97.87:8001'});

2. 로컬 WebSocket 서비스 구축

项目根目录下启动Terminal
需先安装依赖 npm install
执行 npm run server  即可开启WebSocket服务

3. 개발자 도구를 사용하여 프로젝트 실행

귀하의 프로젝트가 이 프레임워크를 사용하고 공식적으로 실행된다면, 편리하다면 귀하의 미니 프로그램의 QR 코드를 제공할 수 있으며, 여기에서 홍보할 수 있습니다.

링크

문서

질문

변경 로그

특허

맞잡다

기술 교류를 위해서는 QQ 그룹에 가입하세요: 그룹 1: 821711186(전체) 그룹 2: 834335591

협력할 의향이 있거나 제품을 홍보하고 싶다면 QQ: 1178545208를 추가하세요.

팁을 환영합니다