The finished product screenshots
Project characteristics
Integrated WeChat official expression package complete implementation document VUE3 chat box basic functions
The reading time
5min
What you will gain:
- WeChat official emojis ideas
- Message box and message sending emoticons show ideas
- Message around the chat show ideas
- Extra content to show ideas
- Chat messages always keep up to date
- The size of the chat content is fixed
Without further ado, the veteran began to get down to business…
A user story
In this case, the veteran received a demand, which was to precipitate the message data by connecting with the enterprise WeChat. To put it simply, the user or application message directly called the interface and communicated on my page without using the enterprise WeChat side. Of course, such a freedom will be very high, because the veteran will filter the data processing in the process of interaction and put it into the database, and then the report, user analysis and tracking will be simple. As an aside, data is the core! So let me just draw a picture so you can understand it.
The previous interaction mode looked like this:
Now to do this:
In a nutshell, that’s it!
Competing goods analysis
The status quo
Baidu search, or is to give you effect map. Or it can be integrated with a variety of complex functions that cannot be extracted. It takes a lot of time and effort to copy and copy a lot of code on the Internet. My idea is to provide a simple, pure and simple chat box to achieve, I hope to help beginners.
Function demonstration
WeChat memes
Chat box input effect
Click Send to display the effect
Scroll bar, message always bottom
The message content shows the restriction effect
Veterans always style is simple! Contracted! Contracted! So I put the implementation ideas and project code into the code base! You can download down to try, while the practice side analysis
The project address
Making: https://github.com/laobingcxy… Yards cloud: https://gitee.com/laobingcxy/…
eggs
The above is the pure front-end 1.0 version of the chat box, I believe that has been in line with the needs of most people. Of course, as a full stack, I have an updated version! The upgraded version is for students who interact with the front and back end, and eventually there will be an enterprise version. Look forward to the words quickly attention, plug it! Finally, propaganda and a wave, my personal home page: https://www.yuque.com/yingwen… , here you will gain my growth knowledge base, not limited to back end, front end, life knowledge base ~ look forward to working with veterans? Want to know what I can do for you? Click here! https://www.yuque.com/yingwen…
Reprint cooperation to contact veterans, embezzlement will be investigated!