I have put a lot of effort into developing this project. If it is helpful and inspiring to you, I hope to give it a star on GitHub ! It also supports and affirms my work!
I am also very grateful to kulovecc for correcting and submitting the problem of over-long text overflow layout in the project!
introduce:
wechat-im is a complete template that allows you to quickly implement instant messaging functions on the mini program platform.
Now updated to version 2.xx
Compared with 1.0.x and previous versions, new features in 2.xx
ES6 syntax is fully used, and asynchronous operations use Promise and async syntax sugar to make the code more semantic! (Requires newer WeChat development tools and turning on "enhanced compilation")
The text input function has been componentized using Component, which has better performance than the previous version!
The minimum supported WeChat basic library version is 2.6.1 (the previous minimum supported version was 1.4.0)
Fixed issues in some scenarios. For example, when playing a voice message, if you exit the chat interface, the voice will still be played.
2.xx document, please update it in a few days. Students who are capable can update it, most of which are syntax updates and componentization. I've been quite busy recently, so I'm sorry to all my classmates.
characteristic:
At present, webSocket has been used in the project to realize the communication function of IM! Currently it includes session list page, session page and friend page. Support using nodejs to open local WebSocket service.
Supports sending text, pictures, voice, and emoji input method
Supports taking pictures, selecting pictures from the gallery, and previewing pictures
Support showing send button when switching to text input.
Supports voice playback and animation playback.
Supports configuring the minimum and maximum time for recording voice.
Supports configuring custom events.
Support chat messages sorted by time.
After sending a message, the page will bounce back to the bottom.
It uses the latest voice playback interface and is compatible with lower version voice playback interfaces.
Status update of message being sent, sent successfully, and failed to be sent
Supports message sending failure, click the resend button to resend.
Optimize the time bubble display logic. Adjacent information is greater than 5 minutes before the latter information is displayed.
Added UI display of session status at the top of the page
Custom function to display custom bubbles.
By parsing voice or picture message information, local files are read first.
The file storage algorithm is implemented to ensure that the voice and picture files in the 10M storage space are up to date.
Each message type and each function has been modularized, making it pleasant and easy for you to browse the code. (Actually, this is not considered a component feature...)
Features not currently supported:
If you want to use group chat, the member nicknames are not displayed next to the avatar in the current UI.
There are no historical chat messages stored locally. See the end of the document for the reason.
Currently, all functions of WebSocket are only for learning and reference. If you want to use them commercially, please develop them yourself.
Currently it is not supported as a plug-in.
What conditions do you need to study or use this project?
You need to be familiar with ES6 syntax specifications and design patterns, otherwise the project will have a high threshold for you.
WebSocket does not need to be mastered in depth, but you need to know the common APIs and usage of WebSocket. For details, see the mini program WebSocket
Understand the installation of npm dependencies and the execution of commands (this block is mainly used to start the local WebSocket service)
项目根目录下启动Terminal
需先安装依赖 npm install
执行 npm run server 即可开启WebSocket服务
3. Use developer tools to run the project
If your project uses this framework and is officially put into operation, if it is convenient, you can provide the QR code of your mini program, and I can promote it here.
LINK
Document
Questions
ChangeLog
LICENSE
cooperate
For technical exchanges, please join QQ groups: Group 1: 821711186 (full) Group 2: 834335591
If you have any intention of cooperation or want to promote your products, you can add QQ: 1178545208
