Example description ： Static source code , Need self redevelopment
Scope of application ： All versions of wechat applet Library
date ：2019/9/2
front end ：
<scroll-view style="height:{{height}}vh;width: 100vw;display: flex; position:
relative;flex-direction: column;top:{{top?top:0}}px;" scroll-y="true"
scroll-top="{{scrollTopVal}}" bindtap="resetInputStatus"> <view
class="chat-item-row"> <view class="chat-item-me"> <image class="chat-avatar"
src="/static/img/avatar.png"></image> <view class="message-body-me"> <view
class="message-text"> Text message Remember, there are three types </view> </view> </view> </view> <view
class="chat-item-row"> <view class="chat-item-time"> Monday 12:54</view> </view>
<view class="chat-item-row"> <view class="chat-item-he"> <image
class="chat-avatar" src="/static/img/avatar.png"></image> <view
class="im-msg-box"> <view class="user-name"> Nickname? </view> <view
class="message-body"> <image class="message-image" src="{
{style}}/upload/image/0100.png"></image> </view> </view> </view> </view> <view
class="chat-item-row"> <view class="chat-item-he"> <image class="chat-avatar"
src="/static/img/avatar.png"></image> <view class="im-msg-box"> <view
class="user-name"> Nickname? </view> <view class="message-body"> <view
class="message-text"> Text message Remember, there are three types </view> </view> </view> </view> </view> <view
class="chat-item-row"> <view class="chat-item-he"> <image class="chat-avatar"
src="/static/img/avatar.png"></image> <view class="im-msg-box"> <view
class="user-name"> Nickname? </view> <view class="message-body"> <view
class="message-voice"> <image class="voice-play-size" src="{
{isPlaying?'data:image/gif;base64,R0lGODlhFgAgAIABAJmZmQAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZGRjUyRUJDQTQwNjExRTdCOENGRjgwODNFQUZERjc2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjZGRjUyRUJEQTQwNjExRTdCOENGRjgwODNFQUZERjc2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NkZGNTJFQkFBNDA2MTFFN0I4Q0ZGODA4M0VBRkRGNzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NkZGNTJFQkJBNDA2MTFFN0I4Q0ZGODA4M0VBRkRGNzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFIQABACwAAAAAFgAgAAACJYyPqcvtD6OctNqLs54A3O5RYCeOpGSe6PiplbvF8kzX9o3nQQEAIfkEBSEAAQAsCAAGAAYAFAAAAhcMEHmXxrpahEg+V7HNU9P9hUs1jVZTAAAh+QQJIQABACwIAAAADgAgAAACN4wfgHvgvNyDRipaJc4X251MnraRY0d9pZiykNmir8vAsxzZOY3o+8prBDm43jA0VMWKQmaPUQAAIfkEBSEAAQAsAAAAABYAIAAAAhmMj6nL7Q+jnLTai7PevPsPhuJIluaJpkEBACH5BAUhAAEALAgABgAGABQAAAIXDBB5l8a6WoRIPlexzVPT/YVLNY1WUwAAIfkEBSEAAQAsDgAAAAgAIAAAAigMggmbuKxeM7LVCPF8x2b3UeEFdppnltv4cWhKii86n6XpYnBoTEEBADs=':'/static/chat/voice_other.png'}}"
/> <text> 15'</text> </view> </view> </view> </view> </view> <view
class="chat-item-row"> <view class="chat-item-me"> <image class="chat-avatar"
src="/static/img/avatar.png"></image> <view class="im-msg-box"> <view
class="message-body-me"> <view class="message-voice"> <text> 15'</text> <image
class="voice-play-size" src="{
{isPlaying?'data:image/gif;base64,R0lGODlhFgAgAIABAHenywAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVCODkzNTZBQTQxMTExRTdBMUU5RjQwNDFCQUNCRDgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVCODkzNTZCQTQxMTExRTdBMUU5RjQwNDFCQUNCRDgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUI4OTM1NjhBNDExMTFFN0ExRTlGNDA0MUJBQ0JEODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUI4OTM1NjlBNDExMTFFN0ExRTlGNDA0MUJBQ0JEODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFIQABACwAAAAAFgAgAAACJYyPqcvtD6OctNqLs94IAOx9VuhRZDidZUpW6Chy8kzX9o3nUgEAIfkEBSEAAQAsCAAGAAYAFAAAAhaMARaI18tckrTCeVW0O+vnXVjHjEkBACH5BAklAAEALAAAAAAOACAAAAI1jA+nC73c0kNxmihttQHz7nCeGJLZNGqleqKr2z6b+YEx9OK3MrN16vsAYb8ebHcxynKySQEAIfkEBR4AAQAsAAAAABYAIAAAAhmMj6nL7Q+jnLTai7PevPsPhuJIluaJpkEBACH5BAUhAAEALAgABgAGABQAAAIWjAEWiNfLXJK0wnlVtDvr511Yx4xJAQAh+QQFJQABACwAAAAACAAgAAACKIwPh5DLyp6JbUp7Q4TbKZ1RXIV9nTeaGUiypJjGTnti9ArP491qQQEAOw==':'/static/chat/voice_mine.png'}}"
/> </view> </view> </view> </view> </view> </scroll-view> <view
class="footer-input-box"> <view class="footer-input-body"> <image
src="/static/chat/voice.png" class="mp3-btn" bindtap="showLy"></image> <button
class="luyingBtn" wx:if="{{luYing}}"> Hold to talk </button> <input
class="chat-input-style" bindinput="setMessage" wx:else></input> <view
class="chat-input-send-button-style" wx:if="{{textMessage}}"
bindtap="sendJsonText"> send out </view> <image src="/static/chat/extra.png"
class="more-btn" wx:else bindtap="showBox"></image> </view> <view
class="extra-super" wx:if="{{isShow}}"> <view class="flex-column"
bindtap="sendImg"> <image class="extra-image-size"
src="/static/chat/choose_picture.png" ></image> <text
class="extra-text-size"> picture </text> </view> </view> </view>
back-end ：
Page({ /** * Initial data of the page */ data: { ...common.data, textMessage: '', chatItems:
[], type:'', height:100, isShow:false, luYing:false }, ...common.method, /** *
Life cycle function -- Listening page loading */ onLoad(options) { this.getPage(options); }, setMessage(e){
let {value} = e.detail; this.setData({ textMessage:value }) },
getPage(options){ let {type,top} = options; this.setData({ type: type, top:top
}) // Access to information about the other party and us }, sendJsonText(data){ // Send message and perform update page data }, // Display and hide the function of uploading pictures
showBox(e){ let {isShow} = this.data; if(isShow){ isShow=false; }else{ isShow =
true; } this.setData({ isShow:isShow }); }, showLy(e){ let { luYing } =
this.data; if (luYing) { luYing = false; } else { luYing = true; }
this.setData({ luYing: luYing }); }, // Start recording startRecording(){ // Recording and testing },
// End recording and upload endRecording() { // After uploading, return to the path and send a message }, // Upload and send pictures sendImg(){ } });
style ：
.chat-item-row{ padding: 15rpx; display: flex; } .chat-item-me{ width: 100%;
display: flex; flex-direction: row-reverse; } .chat-item-he{ float: left;
display: flex; flex-direction: row; } .chat-avatar{ width: 90rpx; height:
90rpx; border-radius: 50%; overflow: hidden; } .message-body-me{ background:
#8FCBF7; padding: 15rpx; text-align: left; border-radius: 10rpx; margin: 0rpx
15rpx; color: #FFFFFF; font-size: 25rpx; margin-top: 8rpx; } .message-body{
padding: 15rpx; text-align: left; background: #FFFFFF; border-radius: 10rpx;
margin: 0rpx 15rpx; font-size: 25rpx; } .chat-item-time{ width: 100vw; color:
#999999; text-align: center; font-size: 23rpx; } .im-msg-box{ display: flex;
flex-direction: column; } .im-msg-box .user-name{ font-size: 23rpx; color:
#999999; margin-left: 15rpx; padding: 10rpx 20rpx; } .voice-play-size{ width:
22rpx; height: 32rpx; margin: 10rpx; } .message-voice{ line-height: 50rpx;
height: 50rpx; display: flex; flex-direction: row; justify-content:
space-between; } .message-voice text{ line-height: 50rpx; height: 50rpx; }
.footer-input-box{ width: 100%; display: flex; flex-direction: column;
position: fixed; left: 0; bottom: 0; } .footer-input-body{ display: flex;
flex-direction: row; background-color: #E6EAEB; width: 100%; align-items:
center; height: 100rpx; } .mp3-btn{ width: 50rpx; height: 50rpx; padding: 25rpx
15rpx; display: flex; flex-shrink: 0; } .chat-input-style{ border-radius:10rpx;
border:1rpx solid transparent; margin-top:14rpx; margin-bottom: 13rpx;
padding:10rpx; min-height: 51rpx; background-color: #FFFFFF; color: #000000;
width: 100%; } .message-image{ width: 60vw; height: 24vh; }
.chat-input-send-button-style{ width: 100rpx; padding: 15rpx 0; text-align:
center; margin: 0 10rpx; border-radius: 10rpx; background: #5087E5; color:
#FFFFFF; font-size: 25rpx; } .more-btn{ width: 50rpx; height: 50rpx; padding:
25rpx 15rpx; display: flex; flex-shrink: 0; } .extra-super{ display: flex;
padding-top: 25rpx; height: 234rpx; width: 100%; background-color: white }
.flex-column{ display: flex; flex-direction: column; align-items: center;
width: 25%; } .extra-text-size{ color: #666666; font-size: 24rpx; margin-top:
10rpx; } .extra-image-size{ width: 114rpx; height: 114rpx; } .luyingBtn{
font-size: 32rpx; width: 100%; line-height: 74rpx; margin-top: 15rpx;
margin-bottom: 15rpx; }
be careful ： The attachment is Baidu , For reference and study only , Commercial needs secondary development .
Technology