微信小程序即时通讯功能模块
操作界面截图
<view>
<view class="content" bindtouchstart="hideDrawer">
<scroll-view class="msg-list {{popupLayerClass}}" scroll-y="true"
scroll-with-animation="{{scrollAnimation}}" scroll-top="{{scrollTop}}" scroll-into-view="{{scrollToView}}"
bindscrolltoupper="loadHistory" upper-threshold="50">
<view class="loading">
<view class="spinner">
<view class="rect1">view>
<view class="rect2">view>
<view class="rect3">view>
<view class="rect4">view>
<view class="rect5">view>
view>
view>
<view class="row" wx:for="{{msgList}}" id="{{'msg'+item.msg.id}}" wx:key="item">
<block wx:if="{{item.type=='system'}}">
<view class="system">
<view wx:if="{{item.msg.type=='text'}}" class="text">
{{item.msg.content.text}}
view>
<view wx:if="{{item.msg.type=='redEnvelope'}}" class="red-envelope">
<image src="/static/chat/red-envelope-chat.png">image>
{{item.msg.content.text}}
view>
view>
block>
<block wx:if="{{item.type=='user'}}">
<view class="my" wx:if="{{item.msg.userinfo.uid==myuid}}">
<view class="left">
<view wx:if="{{item.msg.type=='text'}}" class="bubble">
<rich-text nodes="{{item.msg.content.text}}">rich-text>
view>
<view wx:if="{{item.msg.type=='voice'}}" class="bubble voice {{playMsgid == item.msg.id?'play':''}}" data-msg="{{item.msg}}" bindtap="playVoice">
<view class="length">{{item.msg.content.length}}view>
<view class="icon my-voice">view>
view>
<view wx:if="{{item.msg.type=='img'}}" class="bubble img" data-msg="{{item.msg}}" bindtap="showPic">
<image src="{{item.msg.content.url}}"
style="width:{{item.msg.content.w}}px;height:{{item.msg.content.h}}px;">
image>
view>
<view wx:if="{{item.msg.type=='redEnvelope'}}" class="bubble red-envelope" data-index="{{index}}" data-msg="{{item.msg}}"
bindtap="openRedEnvelope">
<image src="/static/chat/red-envelope.png">image>
<view class="tis">
view>
<view class="blessing">
{{item.msg.content.blessing}}
view>
view>
view>
<view class="right">
<image src="{{item.msg.userinfo.face}}">image>
view>
view>
<view class="other" wx:if="{{item.msg.userinfo.uid!=myuid}}">
<view class="left">
<image src="{{item.msg.userinfo.face}}">image>
view>
<view class="right">
<view class="username">
<view class="name">{{item.msg.userinfo.username}}view>
<view class="time">{{item.msg.time}}view>
view>
<view wx:if="{{item.msg.type=='text'}}" class="bubble">
<rich-text nodes="{{item.msg.content.text}}">rich-text>
view>
<view wx:if="{{item.msg.type=='voice'}}" data-msg="{{item.msg}}" class="bubble voice {{playMsgid == item.msg.id?'play':''}}" bindtap="playVoice">
<view class="icon other-voice">view>
<view class="length">{{item.msg.content.length}}view>
view>
<view wx:if="{{item.msg.type=='img'}}" data-msg="{{item.msg}}" class="bubble img" bindtap="showPic">
<image src="{{item.msg.content.url}}"
style="width:{{item.msg.content.w}}px;height:{{item.msg.content.h}}px;">
image>
view>
<view wx:if="{{item.msg.type=='redEnvelope'}}" class="bubble red-envelope" data-msg="{{item.msg}}" data-index="{{index}}"
bindtap="openRedEnvelope">
<image src="/static/chat/red-envelope.png">image>
<view class="tis">
view>
<view class="blessing">
{{item.msg.content.blessing}}
view>
view>
view>
view>
block>
view>
scroll-view>
view>
<view class="popup-layer {{popupLayerClass}}" catchtouchmove="discard">
<swiper class="emoji-swiper {{hideEmoji?'hidden':''}}" indicator-dots="true" duration="150">
<swiper-item wx:for="{{emojiList}}" wx:for-item="page" wx:key="{{page}}">
<view wx:for="{{page}}" wx:for-item="em" wx:key="{{em}}" data-em="{{em}}" bindtap="addEmoji">
<image mode="widthFix" src="https://zhoukaiwen.com/img/icon/emojj1/{{em.url}}">image>
view>
swiper-item>
swiper>
<view class="more-layer {{hidden?'hideMore':''}}">
<view class="list">
<view class="box" bindtap="chooseImage">
<view class="icon tupian2">view>
view>
<view class="box" bindtap="camera">
<view class="icon paizhao">view>
view>
<view class="box" bindtap="handRedEnvelopes">
<view class="icon hongbao">view>
view>
view>
view>
view>
<view class="input-box cu-bar tabbar {{popupLayerClass}}" catchtouchmove="discard">
<view class="voice">
<view class="icon {{isVoice?'jianpan':'yuyin'}}" bindtap="switchVoice">view>
view>
<view class="textbox">
<view class="voice-mode {{isVoice?'':'hidden'}}{{recording?'recording':''}}"
bindtouchstart="voiceBegin" catchtouchmove="voiceIng" bindtouchend="voiceEnd"
bindtouchcancel="voiceCancel">{{voiceTis}}view>
<view class="text-mode {{isVoice?'hidden':''}}">
<view class="box">
<textarea auto-height="true" bindinput="inputtextMsg" value="{{textMsg}}" bindfocus="textareaFocus" />
view>
<view class="em" bindtap="chooseEmoji">
<view class="icon biaoqing">view>
view>
view>
view>
<view class="more" bindtap="showMore">
<view class="icon add">view>
view>
<view class="send {{isVoice?'hidden':''}}" bindtap="sendText">
<view class="btn">发送view>
view>
view>
<view class="record {{recording?'':'hidden'}}">
<view class="ing {{willStop?'hidden':''}}">
<view class="icon luyin2">view>
view>
<view class="cancel {{willStop?'':'hidden'}}">
<view class="icon chehui">view>
view>
<view class="tis {{willStop?'change':''}}">{{recordTis}}view>
view>
<view class="windows {{windowsState}}">
<view class="mask" catch:touchmove="discard" bindtap="closeRedEnvelope">view>
<view class="layer" catch:touchmove="discard">
<view class="open-redenvelope">
<view class="top">
<view class="close-btn">
<view class="icon close" bindtap="closeRedEnvelope">view>
view>
<image src="https://zhoukaiwen.com/img/qdpz/face/face_1.jpg">image>
view>
<view class="from">来自{{redenvelopeData.from}}view>
<view class="blessing">{{redenvelopeData.blessing}}view>
<view class="money">{{redenvelopeData.money}}view>
<view class="showDetails" data-rid="{{redenvelopeData.rid}}" bindtap="toDetails">
查看领取详情 <view class="icon to">view>
view>
view>
view>
view>
view>
.cu-bar.tabbar {
padding: 0;
/* height: calc(100rpx + env(safe-area-inset-bottom) / 2); */
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.cu-bar {
display: flex;
position: relative;
align-items: center;
min-height: 100rpx;
justify-content: space-between;
}
page {
background-color: #e5e5e5;
}
@font-face {
font-family: "HMfont-home";
src: url("data:application/x-font-woff2;charset=utf-8;base64,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") format("woff2");
}
.icon {
font-family: "HMfont-home" !important;
font-size: 56rpx;
font-style: normal;
color: #333;
}
.icon.biaoqing:before {
content: "\e797";
}
.icon.jianpan:before {
content: "\e7b2";
}
.icon.yuyin:before {
content: "\e805";
}
.icon.tupian:before {
content: "\e639";
}
.icon.chehui:before {
content: "\e904";
}
.icon.luyin:before {
content: "\e905";
}
.icon.luyin2:before {
content: "\e677";
}
.icon.other-voice:before {
content: "\e667";
}
.icon.my-voice:before {
content: "\e906";
}
.icon.hongbao:before {
content: "\e626";
}
.icon.tupian2:before {
content: "\e674";
}
.icon.paizhao:before {
content: "\e63e";
}
.icon.add:before {
content: "\e655";
}
.icon.close:before {
content: "\e607";
}
.icon.to:before {
content: "\e675";
}
.hidden {
display: none !important;
}
.popup-layer {
transition: all .15s linear;
width: 100%;
height: 42vw;
padding: 20rpx 2%;
background-color: #f3f3f3;
border-top: solid 1rpx #ddd;
position: fixed;
z-index: 20;
top: 100%;
box-sizing: border-box;
}
.popup-layer.showLayer {
-webkit-transform: translate3d(0, -43vw, 0);
transform: translate3d(0, -43vw, 0);
}
.popup-layer .emoji-swiper {
height: 40vw;
}
.popup-layer .emoji-swiper swiper-item {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
}
.popup-layer .emoji-swiper swiper-item view {
width: 12vw;
height: 12vw;
display: flex;
justify-content: center;
align-items: center;
}
.popup-layer .emoji-swiper swiper-item view image {
width: 8.4vw;
height: 8.4vw;
}
.popup-layer .more-layer {
width: 100%;
height: 42vw;
}
.popup-layer .more-layer .list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.popup-layer .more-layer .list .box {
width: 18vw;
height: 18vw;
border-radius: 20rpx;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin: 0 3vw 2vw 3vw;
}
.popup-layer .more-layer .list .box .icon {
font-size: 70rpx;
}
.input-box {
width: 100%;
min-height: 100rpx;
padding: 0 1%;
background-color: #f2f2f2;
display: flex;
position: fixed;
z-index: 20;
bottom: -2rpx;
transition: all .15s linear;
border-bottom: solid 1rpx #ddd;
}
.input-box.showLayer {
-webkit-transform: translate3d(0, -43vw, 0);
transform: translate3d(0, -43vw, 0);
}
.input-box .voice, .input-box .more {
flex-shrink: 0;
width: 90rpx;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
.input-box .send {
flex-shrink: 0;
width: 100rpx;
height: 100rpx;
display: flex;
align-items: center;
}
.input-box .send .btn {
width: 90rpx;
height: 56rpx;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, #f09b37, #eb632c);
color: #fff;
border-radius: 6rpx;
font-size: 24rpx;
}
.input-box .textbox {
width: 100%;
min-height: 70rpx;
}
.input-box .textbox .voice-mode {
width: calc(100% - 2rpx);
height: 68rpx;
border-radius: 70rpx;
border: solid 1rpx #cdcdcd;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
background-color: #fff;
color: #555;
}
.input-box .textbox .voice-mode.recording {
background-color: #e5e5e5;
}
.input-box .textbox .text-mode {
width: 100%;
min-height: 70rpx;
display: flex;
background-color: #fff;
border-radius: 40rpx;
}
.input-box .textbox .text-mode .box {
width: 100%;
padding-left: 30rpx;
min-height: 70rpx;
display: flex;
align-items: center;
}
.input-box .textbox .text-mode .box textarea {
width: 100%;
}
.input-box .textbox .text-mode .em {
flex-shrink: 0;
width: 80rpx;
padding-left: 10rpx;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
}
.record {
width: 40vw;
height: 40vw;
position: fixed;
top: 55%;
left: 30%;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 20rpx;
}
.record .ing {
width: 100%;
height: 30vw;
display: flex;
justify-content: center;
align-items: center;
}
@-webkit-keyframes volatility {
0% {
background-position: 0% 130%;
}
20% {
background-position: 0% 150%;
}
30% {
background-position: 0% 155%;
}
40% {
background-position: 0% 150%;
}
50% {
background-position: 0% 145%;
}
70% {
background-position: 0% 150%;
}
80% {
background-position: 0% 155%;
}
90% {
background-position: 0% 140%;
}
100% {
background-position: 0% 135%;
}
}
@keyframes volatility {
0% {
background-position: 0% 130%;
}
20% {
background-position: 0% 150%;
}
30% {
background-position: 0% 155%;
}
40% {
background-position: 0% 150%;
}
50% {
background-position: 0% 145%;
}
70% {
background-position: 0% 150%;
}
80% {
background-position: 0% 155%;
}
90% {
background-position: 0% 140%;
}
100% {
background-position: 0% 135%;
}
}
.record .ing .icon {
background-image: linear-gradient(to bottom, #f09b37, #fff 50%);
background-size: 100% 200%;
-webkit-animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 150rpx;
color: #f09b37;
}
.record .cancel {
width: 100%;
height: 30vw;
display: flex;
justify-content: center;
align-items: center;
}
.record .cancel .icon {
color: #fff;
font-size: 150rpx;
}
.record .tis {
width: 100%;
height: 10vw;
display: flex;
justify-content: center;
font-size: 28rpx;
color: #fff;
}
.record .tis.change {
color: #f09b37;
}
.content {
width: 100%;
}
.content .msg-list {
width: 100%;
padding: 0 2%;
position: absolute;
top: 0;
bottom: 100rpx;
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
box-sizing: border-box;
}
.content .msg-list .loading {
display: flex;
justify-content: center;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
.content .msg-list .loading .spinner {
margin: 20rpx 0;
width: 60rpx;
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.content .msg-list .loading .spinner view {
background-color: #f06c7a;
height: 50rpx;
width: 6rpx;
border-radius: 6rpx;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.content .msg-list .loading .spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.content .msg-list .loading .spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.content .msg-list .loading .spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.content .msg-list .loading .spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.content .msg-list .row {
padding: 20rpx 0;
}
.content .msg-list .row .system {
display: flex;
justify-content: center;
}
.content .msg-list .row .system view {
padding: 0 30rpx;
height: 50rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #c9c9c9;
color: #fff;
font-size: 24rpx;
border-radius: 40rpx;
}
.content .msg-list .row .system .red-envelope image {
margin-right: 5rpx;
width: 30rpx;
height: 30rpx;
}
.content .msg-list .row:first-child {
margin-top: 20rpx;
}
.content .msg-list .row .my .left, .content .msg-list .row .other .right {
width: 100%;
display: flex;
}
.content .msg-list .row .my .left .bubble, .content .msg-list .row .other .right .bubble {
max-width: 70%;
min-height: 50rpx;
border-radius: 10rpx;
padding: 15rpx 20rpx;
display: flex;
align-items: center;
font-size: 32rpx;
word-break: break-word;
}
.content .msg-list .row .my .left .bubble.img, .content .msg-list .row .other .right .bubble.img {
background-color: transparent;
padding: 0;
overflow: hidden;
}
.content .msg-list .row .my .left .bubble.img image, .content .msg-list .row .other .right .bubble.img image {
max-width: 350rpx;
max-height: 350rpx;
}
.content .msg-list .row .my .left .bubble.red-envelope, .content .msg-list .row .other .right .bubble.red-envelope {
background-color: transparent;
padding: 0;
overflow: hidden;
position: relative;
justify-content: center;
align-items: flex-start;
}
.content .msg-list .row .my .left .bubble.red-envelope image, .content .msg-list .row .other .right .bubble.red-envelope image {
width: 250rpx;
height: 313rpx;
}
.content .msg-list .row .my .left .bubble.red-envelope .tis, .content .msg-list .row .other .right .bubble.red-envelope .tis {
position: absolute;
top: 6%;
font-size: 26rpx;
color: #9c1712;
}
.content .msg-list .row .my .left .bubble.red-envelope .blessing, .content .msg-list .row .other .right .bubble.red-envelope .blessing {
position: absolute;
bottom: 14%;
color: #e9b874;
width: 80%;
text-align: center;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.content .msg-list .row .my .left .bubble.voice .icon, .content .msg-list .row .other .right .bubble.voice .icon {
font-size: 40rpx;
display: flex;
align-items: center;
}
.content .msg-list .row .my .left .bubble.voice .icon:after, .content .msg-list .row .other .right .bubble.voice .icon:after {
content: " ";
width: 53rpx;
height: 53rpx;
border-radius: 100%;
position: absolute;
box-sizing: border-box;
}
.content .msg-list .row .my .left .bubble.voice .length, .content .msg-list .row .other .right .bubble.voice .length {
font-size: 28rpx;
}
.content .msg-list .row .my .right, .content .msg-list .row .other .left {
flex-shrink: 0;
width: 80rpx;
height: 80rpx;
}
.content .msg-list .row .my .right image, .content .msg-list .row .other .left image {
width: 80rpx;
height: 80rpx;
border-radius: 10rpx;
}
.content .msg-list .row .my {
width: 100%;
display: flex;
justify-content: flex-end;
}
.content .msg-list .row .my .left {
min-height: 80rpx;
align-items: center;
justify-content: flex-end;
}
.content .msg-list .row .my .left .bubble {
background-color: #f06c7a;
color: #fff;
}
.content .msg-list .row .my .left .bubble.voice .icon {
color: #fff;
}
.content .msg-list .row .my .left .bubble.voice .length {
margin-right: 20rpx;
}
@-webkit-keyframes my-play {
0% {
-webkit-transform: translateX(80%);
transform: translateX(80%);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes my-play {
0% {
-webkit-transform: translateX(80%);
transform: translateX(80%);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
.content .msg-list .row .my .left .bubble.play .icon:after {
border-left: solid 10rpx rgba(240, 108, 122, 0.5);
-webkit-animation: my-play 1s linear infinite;
animation: my-play 1s linear infinite;
}
.content .msg-list .row .my .right {
margin-left: 15rpx;
}
.content .msg-list .row .other {
width: 100%;
display: flex;
}
.content .msg-list .row .other .left {
margin-right: 15rpx;
}
.content .msg-list .row .other .right {
flex-wrap: wrap;
}
.content .msg-list .row .other .right .username {
width: 100%;
height: 45rpx;
line-height: 30rpx;
font-size: 24rpx;
color: #999;
display: flex;
}
.content .msg-list .row .other .right .username .name {
margin-right: 50rpx;
}
.content .msg-list .row .other .right .bubble {
background-color: #fff;
color: #333;
}
.content .msg-list .row .other .right .bubble.voice .icon {
color: #333;
}
.content .msg-list .row .other .right .bubble.voice .length {
margin-left: 20rpx;
}
@-webkit-keyframes other-play {
0% {
-webkit-transform: translateX(-80%);
transform: translateX(-80%);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes other-play {
0% {
-webkit-transform: translateX(-80%);
transform: translateX(-80%);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
.content .msg-list .row .other .right .bubble.play .icon:after {
border-right: solid 10rpx rgba(255, 255, 255, 0.8);
-webkit-animation: other-play 1s linear infinite;
animation: other-play 1s linear infinite;
}
.windows .mask {
position: fixed;
top: 100%;
width: 100%;
height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity .2s ease-out;
}
.windows .layer {
position: fixed;
width: 80%;
height: 70%;
left: 10%;
z-index: 1001;
border-radius: 20rpx;
overflow: hidden;
top: 100%;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
transition: all .2s ease-out;
}
.windows.show {
display: block;
}
.windows.show .mask {
top: 0;
opacity: 1;
}
.windows.show .layer {
-webkit-transform: translate3d(0, -85vh, 0) scale3d(1, 1, 1);
transform: translate3d(0, -85vh, 0) scale3d(1, 1, 1);
}
.windows.hide {
display: block;
}
.windows.hide .mask {
top: 0;
opacity: 0;
}
.open-redenvelope {
width: 100%;
height: 70vh;
background-color: #cf3c35;
position: relative;
}
.open-redenvelope .top {
width: 100%;
background-color: #fe5454;
display: flex;
justify-content: center;
flex-wrap: wrap;
border-radius: 0 0 100% 100%;
box-shadow: inset 0 -20rpx 0 #9c1712;
margin-bottom: 65rpx;
}
.open-redenvelope .top .close-btn {
width: 100%;
height: 80rpx;
display: flex;
justify-content: flex-end;
margin-bottom: 30rpx;
}
.open-redenvelope .top .close-btn .icon {
color: #9c1712;
margin-top: 10rpx;
margin-right: 10rpx;
}
.open-redenvelope .top image {
width: 130rpx;
height: 130rpx;
border: solid 12rpx #cf3c35;
border-radius: 100%;
margin-bottom: -65rpx;
}
.open-redenvelope .from, .open-redenvelope .blessing, .open-redenvelope .money, .open-redenvelope .showDetails {
width: 100%;
padding: 5rpx 5%;
display: flex;
justify-content: center;
font-size: 32rpx;
color: #fff;
}
.open-redenvelope .money {
font-size: 100rpx;
color: #f8d757;
display: flex;
padding-top: 20rpx;
}
.open-redenvelope .showDetails {
position: absolute;
bottom: 20rpx;
align-items: center;
font-size: 28rpx;
color: #f8d757;
}
.open-redenvelope .showDetails .icon {
font-size: 26rpx;
color: #f8d757;
}
.content .showLayer {
-webkit-transform: translate3d(0, -43vw, 0);
transform: translate3d(0, -43vw, 0);
}
// author Lin 2022/2/16
let {TIM,webIm} = require('../../utils/tim-aggregate');
Page({
data: {
//文字消息
textMsg: '',
//消息列表
isHistoryLoading: false,
scrollAnimation: false,
scrollTop: 0,
scrollToView: '',
msgList: [],
msgImgList: [],
myuid: 0,
//录音相关参数
//H5不能录音
RECORDER: '',
isVoice: false,
voiceTis: '按住 说话',
recordTis: "手指上滑 取消发送",
recording: false,
willStop: false,
initPoint: {
identifier: 0,
Y: 0
},
recordTimer: null,
recordLength: 0,
//播放语音相关参数
AUDIO: '',
playMsgid: null,
VoiceTimer: null,
// 抽屉参数
popupLayerClass: '',
// more参数
hideMore: true,
//表情定义
hideEmoji: true,
emojiList: [
[{
"url": "1.png",
alt: "[微笑]"
}, {
"url": "2.png",
alt: "[生气]"
}, {
"url": "3.png",
alt: "[坏笑]"
}, {
"url": "4.png",
alt: "[难受]"
}, {
"url": "5.png",
alt: "[困]"
}, {
"url": "6.png",
alt: "[偷看]"
}, {
"url": "7.png",
alt: "[难过]"
}, {
"url": "8.png",
alt: "[斜眼]"
}, {
"url": "9.png",
alt: "[委屈]"
}, {
"url": "10.png",
alt: "[害羞]"
}, {
"url": "11.png",
alt: "[裂开]"
}, {
"url": "12.png",
alt: "[偷笑]"
}, {
"url": "13.png",
alt: "[痛苦]"
}, {
"url": "14.png",
alt: "[白眼]"
}, {
"url": "15.png",
alt: "[丑]"
}, {
"url": "16.png",
alt: "[哇哇哭]"
}, {
"url": "17.png",
alt: "[笑嘻嘻]"
}, {
"url": "18.png",
alt: "[盯着你]"
}, {
"url": "19.png",
alt: "[啊哈]"
}, {
"url": "20.png",
alt: "[吃瓜]"
}, {
"url": "21.png",
alt: "[哦吼]"
}, {
"url": "22.png",
alt: "[哭死]"
}, {
"url": "23.png",
alt: "[打脸]"
}, {
"url": "24.png",
alt: "[斗鸡眼]"
}],
[{
"url": "25.png",
alt: "[发呆]"
}, {
"url": "26.png",
alt: "[憨笑]"
}, {
"url": "27.png",
alt: "[无语]"
}, {
"url": "28.png",
alt: "[鸡贼]"
}, {
"url": "29.png",
alt: "[大无语]"
}, {
"url": "30.png",
alt: "[哭吐了]"
}, {
"url": "31.png",
alt: "[呲牙笑]"
}, {
"url": "32.png",
alt: "[奸笑]"
}, {
"url": "33.png",
alt: "[啊啊啊]"
}, {
"url": "34.png",
alt: "[哈嘿]"
}, {
"url": "35.png",
alt: "[惊讶]"
}, {
"url": "36.png",
alt: "[指你]"
}, {
"url": "37.png",
alt: "[可爱型]"
}, {
"url": "38.png",
alt: "[快哭了]"
}, {
"url": "39.png",
alt: "[抠鼻屎]"
}, {
"url": "40.png",
alt: "[酷酷]"
}, {
"url": "41.png",
alt: "[笑汗]"
}, {
"url": "42.png",
alt: "[算命]"
}, {
"url": "43.png",
alt: "[红脸坏笑]"
}, {
"url": "44.png",
alt: "[委屈死了]"
}, {
"url": "45.png",
alt: "[爆炸]"
}, {
"url": "46.png",
alt: "[吐了]"
}, {
"url": "47.png",
alt: "[么么哒]"
}, {
"url": "48.png",
alt: "[吐血]"
}],
[{
"url": "49.png",
alt: "[面无表情]"
}, {
"url": "50.png",
alt: "[捂嘴吐]"
}, {
"url": "51.png",
alt: "[斜眼看]"
}, {
"url": "52.png",
alt: "[花痴]"
}, {
"url": "53.png",
alt: "[被打]"
}, {
"url": "54.png",
alt: "[瞌睡]"
}, {
"url": "55.png",
alt: "[冥想]"
}, {
"url": "56.png",
alt: "[俏皮]"
}, {
"url": "57.png",
alt: "[戳手委屈]"
}, {
"url": "58.png",
alt: "[端庄]"
}, {
"url": "59.png",
alt: "[emmm]"
}, {
"url": "60.png",
alt: "[欢呼]"
}, {
"url": "61.png",
alt: "[笑哭了]"
}, {
"url": "62.png",
alt: "[抱抱]"
}, {
"url": "63.png",
alt: "[闭眼笑]"
}, {
"url": "64.png",
alt: "[捂嘴微笑]"
}, {
"url": "65.png",
alt: "[笑哭2]"
}, {
"url": "66.png",
alt: "[笑嘻嘻]"
}, {
"url": "67.png",
alt: "[笑露齿]"
}, {
"url": "68.png",
alt: "[阴脸笑]"
}, {
"url": "69.png",
alt: "[问号脸]"
}, {
"url": "70.png",
alt: "[拜拜]"
}, {
"url": "71.png",
alt: "[难受2]"
}, {
"url": "72.png",
alt: "[傻笑2]"
}],
[{
"url": "73.png",
alt: "[爆炸2]"
}, {
"url": "74.png",
alt: "[二哈]"
}, {
"url": "75.png",
alt: "[二哈吐舌]"
}, {
"url": "76.png",
alt: "[狗狗笑哭]"
}, {
"url": "77.png",
alt: "[狗狗绿帽]"
}, {
"url": "78.png",
alt: "[狗狗张嘴]"
}, {
"url": "79.png",
alt: "[狗狗绿扇]"
}, {
"url": "80.png",
alt: "[狗狗]"
}, {
"url": "81.png",
alt: "[猫咪]"
}, {
"url": "82.png",
alt: "[牛啊]"
}, {
"url": "83.png",
alt: "[爱心]"
}, {
"url": "84.png",
alt: "[心裂开]"
}, {
"url": "85.png",
alt: "[玫瑰花]"
}, {
"url": "86.png",
alt: "[枯萎]"
}, {
"url": "87.png",
alt: "[棒]"
}, {
"url": "88.png",
alt: "[差]"
}, {
"url": "89.png",
alt: "[红药]"
}, {
"url": "90.png",
alt: "[绿药]"
}, {
"url": "91.png",
alt: "[抱拳]"
}, {
"url": "92.png",
alt: "[ok]"
}, {
"url": "93.png",
alt: "[pk]"
}, {
"url": "94.png",
alt: "[绿帽子]"
}, {
"url": "95.png",
alt: "[菜刀]"
}]
],
//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
onlineEmoji: {
"1.png": "1.png",
"2.png": "2.png",
"3.png": "3.png",
"4.png": "4.png",
"5.png": "5.png",
"6.png": "6.png",
"7.png": "7.png",
"8.png": "8.png",
"9.png": "9.png",
"10.png": "10.png",
"11.png": "11.png",
"12.png": "12.png",
"13.png": "13.png",
"14.png": "14.png",
"15.png": "15.png",
"16.png": "16.png",
"17.png": "17.png",
"18.png": "18.png",
"19.png": "19.png",
"20.png": "20.png",
"21.png": "21.png",
"22.png": "22.png",
"23.png": "23.png",
"24.png": "24.png",
"25.png": "25.png",
"26.png": "26.png",
"27.png": "27.png",
"28.png": "28.png",
"29.png": "29.png",
"30.png": "30.png",
"31.png": "31.png",
"32.png": "32.png",
"33.png": "33.png",
"34.png": "34.png",
"35.png": "35.png",
"36.png": "36.png",
"37.png": "37.png",
"38.png": "38.png",
"39.png": "39.png",
"40.png": "40.png",
"41.png": "41.png",
"42.png": "42.png",
"43.png": "43.png",
"44.png": "44.png",
"45.png": "45.png",
"46.png": "46.png",
"47.png": "47.png",
"48.png": "48.png",
"49.png": "49.png",
"50.png": "50.png",
"51.png": "51.png",
"52.png": "52.png",
"53.png": "53.png",
"54.png": "54.png",
"55.png": "55.png",
"56.png": "56.png",
"57.png": "57.png",
"58.png": "58.png",
"59.png": "59.png",
"60.png": "60.png",
"61.png": "61.png",
"62.png": "62.png",
"63.png": "63.png",
"64.png": "64.png",
"65.png": "65.png",
"66.png": "66.png",
"67.png": "67.png",
"68.png": "68.png",
"69.png": "69.png",
"70.png": "70.png",
"71.png": "71.png",
"72.png": "72.png",
"73.png": "73.png",
"74.png": "74.png",
"75.png": "75.png",
"76.png": "76.png",
"77.png": "77.png",
"78.png": "78.png",
"79.png": "79.png",
"80.png": "80.png",
"81.png": "81.png",
"82.png": "82.png",
"83.png": "83.png",
"84.png": "84.png",
"85.png": "85.png",
"86.png": "86.png",
"87.png": "87.png",
"88.png": "88.png",
"89.png": "89.png",
"90.png": "90.png",
"91.png": "91.png",
"92.png": "92.png",
"93.png": "93",
"94.png": "94.png",
"95.png": "95.png"
},
//红包相关参数
windowsState: '',
redenvelopeData: {
rid: null, //红包ID
from: null,
face: null,
blessing: null,
money: null
}
},
onLoad(options) {
this.getMsgList();
this.setData({
RECORDER:wx.getRecorderManager(),
AUDIO:wx.createInnerAudioContext()
},()=>{
//语音自然播放结束
this.data.AUDIO.onEnded((res) => {
this.setData({
playMsgid:null
});
});
//录音开始事件
this.data.RECORDER.onStart((e) => {
this.recordBegin(e);
});
//录音结束事件
this.data.RECORDER.onStop((e) => {
this.recordEnd(e);
});
});
console.log('IM参数方法集合:',TIM,webIm)
let joinGroup = webIm.joinGroup({ groupID: '@TGS#aYDESY2HY', type:TIM.TYPES.GRP_AVCHATROOM});
joinGroup.then(function(imResponse) {
console.log(imResponse)
switch (imResponse.data.status) {
case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
console.log('等待管理员同意')
break;
case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
console.log('加群成功')
console.log(imResponse.data.group); // 加入的群组资料
break;
case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
console.log('已经在群中')
break;
default:
break;
}
}).catch(function(imError){
console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
});
setTimeout(()=>{
let getGroupMemberList = webIm.getGroupMemberList({ groupID: '@TGS#aYDESY2HY',count: 30, offset:0});
getGroupMemberList.then(function(imResponse) {
console.log('群成员列表：',imResponse.data);
}).catch(function(imError) {
console.warn('getGroupMemberList error:', imError); // 获取群详细资料失败的相关信息
});
},5000)
},
onShow() {
this.scrollTop = 9999999;
//模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
wx.getStorage({
key: 'redEnvelopeData',
success: (res) => {
console.log(res.data);
let nowDate = new Date();
let lastid = this.msgList[this.msgList.length - 1].msg.id;
lastid++;
let row = {
type: "user",
msg: {
id: lastid,
type: "redEnvelope",
time: nowDate.getHours() + ":" + nowDate.getMinutes(),
userinfo: {
uid: 0,
username: "大黑哥",
face: "https://zhoukaiwen.com/img/kevinLogo.png"
},
content: {
blessing: res.data.blessing,
rid: Math.floor(Math.random() * 1000 + 1),
isReceived: false
}
}
};
this.screenMsg(row);
wx.removeStorage({
key: 'redEnvelopeData'
});
}
});
},
// 接受消息(筛选处理)
screenMsg(msg) {
//从长连接处转发给这个方法，进行筛选处理
if (msg.type == 'system') {
// 系统消息
switch (msg.msg.type) {
case 'text':
this.addSystemTextMsg(msg);
break;
case 'redEnvelope':
this.addSystemRedEnvelopeMsg(msg);
break;
}
} else if (msg.type == 'user') {
// 用户消息
switch (msg.msg.type) {
case 'text':
this.addTextMsg(msg);
break;
case 'voice':
this.addVoiceMsg(msg);
break;
case 'img':
this.addImgMsg(msg);
break;
case 'redEnvelope':
this.addRedEnvelopeMsg(msg);
break;
}
console.log('用户消息');
//非自己的消息震动
if (msg.msg.userinfo.uid != this.data.myuid) {
console.log('振动');
wx.vibrateLong();
}
}
this.setData({
scrollToView: 'msg' + msg.msg.id
})
},
// 消息列表
getMsgList() {
let self = this;
let msgImgList = self.data.msgImgList;
let list = [{
type: "system",
msg: {
id: 0,
type: "text",
content: {
text: "欢迎进入Kevin聊天室"
}
}
},
{
type: "user",
msg: {
id: 1,
type: "text",
time: "12:56",
userinfo: {
uid: 0,
username: "大黑哥",
face: "https://zhoukaiwen.com/img/kevinLogo.png"
},
content: {
text: "web前端开发该怎么学习？"
}
}
},
{
type: "user",
msg: {
id: 2,
type: "text",
time: "12:57",
userinfo: {
uid: 1,
username: "售后客服008",
face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"
},
content: {
text: "按照基本路线，从html、css、js三大基础开始，然后ajax、vue进阶学习，最后学习小程序、node、react。"
}
}
},
{
type: "user",
msg: {
id: 3,
type: "voice",
time: "12:59",
userinfo: {
uid: 1,
username: "售后客服008",
face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"
},
content: {
url: "/static/voice/1.mp3",
length: "00:06"
}
}
},
{
type: "user",
msg: {
id: 4,
type: "voice",
time: "13:05",
userinfo: {
uid: 0,
username: "大黑哥",
face: "https://zhoukaiwen.com/img/kevinLogo.png"
},
content: {
url: "/static/voice/2.mp3",
length: "00:06"
}
}
},
{
type: "user",
msg: {
id: 5,
type: "img",
time: "13:05",
userinfo: {
uid: 0,
username: "大黑哥",
face: "https://zhoukaiwen.com/img/kevinLogo.png"
},
content: {
url: "https://zhoukaiwen.com/img/Design/logo/psketch3.png",
w: 200,
h: 200
}
}
},
{
type: "user",
msg: {
id: 6,
type: "img",
time: "12:59",
userinfo: {
uid: 1,
username: "售后客服008",
face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"
},
content: {
url: "https://zhoukaiwen.com/img/Design/pc/ybss_jt.png",
w: 1920,
h: 1080
}
}
},
{
type: "system",
msg: {
id: 7,
type: "text",
content: {
text: "欢迎进入Kevin聊天室"
}
}
},
{
type: "system",
msg: {
id: 9,
type: "redEnvelope",
content: {
text: "售后客服008领取了你的红包"
}
}
},
{
type: "user",
msg: {
id: 10,
type: "redEnvelope",
time: "12:56",
userinfo: {
uid: 0,
username: "大黑哥",
face: "https://zhoukaiwen.com/img/kevinLogo.png"
},
content: {
blessing: "恭喜发财，大吉大利，万事如意",
rid: 0,
isReceived: false
}
}
},
{
type: "user",
msg: {
id: 11,
type: "redEnvelope",
time: "12:56",
userinfo: {
uid: 1,
username: "售后客服008",
face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"
},
content: {
blessing: "恭喜发财",
rid: 1,
isReceived: false
}
}
},
]
// 获取消息中的图片,并处理显示尺寸
for (let i = 0; i < list.length; i++) {
if (list[i].type == 'user' && list[i].msg.type == "img") {
list[i].msg.content = self.setPicSize(list[i].msg.content);
msgImgList.push(list[i].msg.content.url);
self.setData({
msgImgList:msgImgList
})
}
}
self.setData({
msgList:list,
scrollTop:9999,
scrollAnimation:true
})
},
//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
setPicSize(content) {
// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
let maxW = this.toPx(350); //350是定义消息图片最大宽度
let maxH = this.toPx(350); //350是定义消息图片最大高度
if (content.w > maxW || content.h > maxH) {
let scale = content.w / content.h;
content.w = scale > 1 ? maxW : maxH * scale;
content.h = scale > 1 ? maxW / scale : maxH;
}
return content;
},
// rpx转px
toPx(num){
var px = num / 750 * wx.getSystemInfoSync().windowWidth;
return px;
},
//更多功能(点击+弹出)
showMore() {
let self = this;
self.setData({
isVoice:false,
hideEmoji:true
})
if (self.data.hideMore) {
self.setData({
hideMore:false
});
self.openDrawer();
} else {
self.hideDrawer();
}
},
// 打开抽屉
openDrawer() {
this.setData({
popupLayerClass:'showLayer'
})
},
// 隐藏抽屉
hideDrawer() {
this.setData({
popupLayerClass:''
})
setTimeout(() => {
this.setData({
hideMore:true,
hideEmoji:true
})
}, 150);
},
// 选择图片发送
chooseImage() {
this.getImage('album');
},
//拍照发送
camera() {
this.getImage('camera');
},
//选照片 or 拍照
getImage(type) {
let self = this;
self.hideDrawer();
wx.chooseImage({
sourceType: [type],
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
success: (res) => {
for (let i = 0; i < res.tempFilePaths.length; i++) {
wx.getImageInfo({
src: res.tempFilePaths[i],
success: (image) => {
console.log(image.width);
console.log(image.height);
let msg = {
url: res.tempFilePaths[i],
w: image.width,
h: image.height
};
self.sendMsg(msg, 'img');
}
});
}
}
});
},
// 选择表情
chooseEmoji() {
let self = this;
self.setData({
hideMore:true
})
if (self.data.hideEmoji) {
self.setData({
hideEmoji:false
})
self.openDrawer();
} else {
self.hideDrawer();
}
},
//添加表情
addEmoji(e) {
let textMsg = this.data.textMsg;
textMsg += e.currentTarget.dataset.em.alt;
this.setData({
textMsg:textMsg
});
},
//获取焦点，如果不是选表情ing,则关闭抽屉
textareaFocus() {
if (this.data.popupLayerClass == 'showLayer' && this.data.hideMore == false) {
this.hideDrawer();
}
},
// 发送文字消息
sendText() {
this.hideDrawer(); //隐藏抽屉
if (!this.data.textMsg) {
return;
}
let content = this.replaceEmoji(this.data.textMsg);
let msg = {
text: content
}
this.sendMsg(msg, 'text');
//清空输入框
this.setData({
textMsg:''
})
},
//替换表情符号为图片
replaceEmoji(str) {
let emojiList = this.data.emojiList,
onlineEmoji = this.data.onlineEmoji;
let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
console.log("str: " + str);
console.log("index: " + index);
console.log("item: " + item);
for (let i = 0; i < this.data.emojiList.length; i++) {
let row = emojiList[i];
for (let j = 0; j < row.length; j++) {
let EM = row[j];
if (EM.alt == item) {
//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
let onlinePath = 'https://zhoukaiwen.com/img/icon/emojj1/'
let imgstr = '
+ onlinePath + onlineEmoji[EM.url] +
'">';
console.log("imgstr: " + imgstr);
return imgstr;
}
}
}
});
return '' + replacedStr + '';
},
//输入框双向数据绑定
inputtextMsg(e){
this.setData({
textMsg:e.detail.value
})
},
// 发送消息
sendMsg(content, type) {
//实际应用中，此处应该提交长连接，模板仅做本地处理。
var nowDate = new Date();
let self = this;
let lastid = self.data.msgList[self.data.msgList.length - 1].msg.id;
lastid++;
let msg = {
type: 'user',
msg: {
id: lastid,
time: nowDate.getHours() + ":" + nowDate.getMinutes(),
type: type,
userinfo: {
uid: 0,
username: "大黑哥",
face: "https://zhoukaiwen.com/img/kevinLogo.png"
},
content: content
}
}
// 发送消息
self.screenMsg(msg);
// 定时器模拟对方回复,三秒
setTimeout(() => {
lastid = self.data.msgList[self.data.msgList.length - 1].msg.id;
lastid++;
msg = {
type: 'user',
msg: {
id: lastid,
time: nowDate.getHours() + ":" + nowDate.getMinutes(),
type: type,
userinfo: {
uid: 1,
username: "售后客服008",
face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"
},
content: content
}
}
// 本地模拟发送消息
self.screenMsg(msg);
}, 3000)
},
// 添加文字消息到列表
addTextMsg(msg) {
let msgList = this.data.msgList;
msgList.push(msg);
this.setData({
msgList:msgList
})
},
// 添加语音消息到列表
addVoiceMsg(msg) {
let msgList = this.data.msgList;
msgList.push(msg);
this.setData({
msgList:msgList
})
},
// 添加图片消息到列表
addImgMsg(msg) {
let self = this,
msgImgList = self.data.msgImgList,
msgList = self.data.msgList;
msg.msg.content = self.setPicSize(msg.msg.content);
msgImgList.push(msg.msg.content.url);
msgList.push(msg);
self.setData({
msgImgList:msgImgList,
msgList:msgList
})
},
addRedEnvelopeMsg(msg) {
let msgList = this.data.msgList;
msgList.push(msg);
this.setData({
msgList:msgList
})
},
// 添加系统文字消息到列表
addSystemTextMsg(msg) {
let msgList = this.data.msgList;
msgList.push(msg);
this.setData({
msgList:msgList
})
},
// 添加系统红包消息到列表
addSystemRedEnvelopeMsg(msg) {
let msgList = this.data.msgList;
msgList.push(msg);
this.setData({
msgList:msgList
})
},
// 打开红包
openRedEnvelope(e) {
let msg = e.currentTarget.dataset.msg,
index = e.currentTarget.dataset.index,
rid = msg.content.rid,
redenvelopeData = this.data.redenvelopeData,
msgList = this.data.msgList;
wx.showLoading({
title: '加载中...'
});
console.log("index: " + index);
//模拟请求服务器效果
setTimeout(() => {
//加载数据
if (rid == 0) {
redenvelopeData = {
rid: 0, //红包ID
from: "大黑哥",
face: "https://zhoukaiwen.com/img/qdpz/face/face.jpg",
blessing: "恭喜发财，大吉大利",
money: "已领完"
}
this.setData({
redenvelopeData:redenvelopeData
})
} else {
redenvelopeData = {
rid: 1, //红包ID
from: "售后客服008",
face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg",
blessing: "恭喜发财",
money: "0.01"
}
this.setData({
redenvelopeData:redenvelopeData
})
if (!msg.content.isReceived) {
// {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
this.sendSystemMsg({
text: "你领取了" + (msg.userinfo.uid == this.data.myuid ? "自己" : msg.userinfo
.username) + "的红包"
}, 'redEnvelope');
console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));
msgList[index].msg.content.isReceived = true;
this.setData({
msgList:msgList
})
}
}
wx.hideLoading();
this.setData({
windowsState:'show'
})
}, 200)
},
// 关闭红包弹窗
closeRedEnvelope() {
this.setData({
windowsState:'hide'
})
setTimeout(() => {
this.setData({
windowsState:''
})
}, 200)
},
sendSystemMsg(content, type) {
let lastid = this.data.msgList[this.data.msgList.length - 1].msg.id;
lastid++;
let row = {
type: "system",
msg: {
id: lastid,
type: type,
content: content
}
};
this.screenMsg(row)
},
//领取详情
toDetails(rid) {
wx.navigateTo({
url: 'details/details?rid=' + rid
})
},
// 预览图片
showPic(e) {
wx.previewImage({
indicator: "none",
current: e.currentTarget.dataset.msg.content.url,
urls: this.data.msgImgList
});
},
// 播放语音
playVoice(e) {
let msg = e.currentTarget.dataset.msg;
this.setData({
playMsgid:msg.id
},()=>{
this.data.AUDIO.src = msg.content.url;
this.data.AUDIO.play();
})
},
// 录音开始
voiceBegin(e) {
if (e.touches.length > 1) {
return;
}
console.log(e)
this.setData({
['initPoint.Y']:e.touches[0].clientY,
['initPoint.identifier']:e.touches[0].identifier
},()=>{
this.data.RECORDER.start({
format: "mp3"
}); //录音开始,
})
},
//录音开始UI效果
recordBegin(e) {
this.setData({
recording:true,
voiceTis:'松开 结束',
recordLength:0,
},()=>{
let recordLength = this.data.recordLength,
recordTimer = null;
recordTimer = setInterval(() => {
this.setData({
recordLength:recordLength++
})
}, 1000);
this.setData({
recordTimer:recordTimer
})
})
},
// 录音被打断
voiceCancel() {
this.setData({
recording:false,
voiceTis:'按住 说话',
recordTis:'手指上滑 取消发送',
willStop:true //不发送录音
},()=>{
this.data.RECORDER.stop(); //录音结束
})
},
// 录音中(判断是否触发上滑取消发送)
voiceIng(e) {
if (!this.data.recording) {
return;
}
let touche = e.touches[0];
//上滑一个导航栏的高度触发上滑取消发送
if (this.data.initPoint.Y - touche.clientY >= this.toPx(100)) {
this.setData({
willStop:true,
recordTis:'松开手指 取消发送'
})
} else {
this.setData({
willStop:true,
recordTis:'手指上滑 取消发送'
})
}
},
// 结束录音
voiceEnd(e) {
if (!this.data.recording) {
return;
}
this.setData({
recording:false,
voiceTis:'按住 说话',
recordTis:'手指上滑 取消发送'
},()=>{
this.data.RECORDER.stop(); //录音结束
})
},
//录音结束(回调文件)
recordEnd(e) {
clearInterval(this.data.recordTimer);
if (!this.data.willStop) {
console.log("e: " + JSON.stringify(e));
let msg = {
length: 0,
url: e.tempFilePath
}
let min = parseInt(this.data.recordLength / 60);
let sec = this.data.recordLength % 60;
min = min < 10 ? '0' + min : min;
sec = sec < 10 ? '0' + sec : sec;
msg.length = min + ':' + sec;
this.sendMsg(msg, 'voice');
} else {
console.log('取消发送录音');
}
this.setData({
willStop:false
})
},
// 切换语音/文字输入
switchVoice() {
this.hideDrawer();
this.setData({
isVoice:this.data.isVoice ? false : true
})
},
discard() {
return;
}
})
{
"navigationBarTitleText": "青奢1号客服",
"navigationBarBackgroundColor": "#f2f2f2",
"backgroundColorTop": "#e5e5e5",
"backgroundColorBottom": "#e5e5e5",
"usingComponents": {}
}