uni-app 8聊天页开发

主文件 chat.nvue

<template>
  <view>
    <!-- 导航栏 -->
    <free-nav-bar title="呵呵呵呵" :noreadnum="1" showBack>
      <free-icon-button slot="right"><text class="iconfont font-md"></text></free-icon-button>
    </free-nav-bar>
    <!-- 聊天内容区域 -->
    <scroll-view scroll-y="true" class="bg-light position-fixed left-0 right-0" style="bottom: 105rpx;"
      :style="chatBodyBottom" :show-scrollbar="false">

      <block v-for="(item,index) in list" :key="index">
        <!-- 聊天信息列表组件 -->
        <free-chat-item :item="item" :index="index" :pretime="index>0 ? list[index-1].create_time : 0"
          @long="long" ref="chatItem" @preview="previewImage"></free-chat-item>
      </block>
      <!-- 右边 -->
      <!--   <view class="flex align-start justify-end position-relative">
        <div class="bg-chat-item p-2 rounded mr-3" style="max-width:500rpx;">
          <text class="font-md">你好你好你好你好你好你好你好你好你好你好你好</text>
        </div>
        <view class="iconfont font-md position-absolute chat-right-icon"><text class="text-chat-item iconfont font-md"></text></view>
        <free-avatar size="75" src="/static/images/demo/demo6.jpg"></free-avatar>
      </view> -->
    </scroll-view>
    
    <!-- 扩展菜单 -->
    <free-popup ref="action" bottom transformOrigin="center bottom" @hide="keyBoardHeight = 0" :mask="false">
      <view style="height: 580rpx;" class="border-top border-light-secondary">
        <swiper :indicator-dots="emoticonOrActionList.length>1" style="height:510rpx;">
          <swiper-item class="row" v-for="(item,index) in emoticonOrActionList" :key="index" >
            <view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;" v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)">
              <image :src="item2.icon" mode="widthFix"
                style="width: 100rpx;height: 100rpx;"></image>
              <text class="font-sm text-muted mt-2">{{item2.name}}</text>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </free-popup>
    <!-- 弹出层 -->
    <free-popup ref="extend" maskColor bottom :bodyWidth="240" :bodyHeight="geMenusHeight" :tabbarHeight="105">
      <view class="flex flex-column" style="width:240rpx;" :style="getMenusStyle">
        <view v-for="(item,index) in menusList" :key="index" class="flex-1 flex align-center"
          hover-class="bg-light" @click="clickEvent(item.event)">
          <text class="font-md pl-3">{{item.name}}</text>
        </view>
      </view>
    </free-popup>
    <!-- #ifdef APP-PLUS-NVUE -->
      <div class="position-fixed top-0 right-0 left-0 bottom-0" v-if="mode==='action' || mode==='emoticon'" @click="clickPage" :style="'bottom:'+maskBottom+'px;'"></div>
    <!-- #endif -->

    <!-- 底部输入框 -->
    <view class="position-fixed left-0 right-0 border-top flex align-center"
      style="background-color: #F7F7F6;height: 105rpx;" :style="'bottom:'+keyBoardHeight+'px;'">
      <free-icon-button @click="changeVoiceOrText">
        <block v-if="mode === 'audio'">
          <text class="iconfont font-lg"></text>
        </block>
        <block v-else>
          <text class="iconfont font-lg"></text>
        </block>
      </free-icon-button>
      <view class="flex-1">
        <view v-if="mode==='audio'" class="rounded flex align-center justify-center" style="height: 80rpx;" :class="isRecording?'bg-hover-light':'bg-white'" @touchstart="voiceTouchStart" @touchend="voiceTouchEnd" @touchmove="voiceTouchMove" @touchcancel="voiceTouchCancel">
          <text class="font">{{isRecording ? '松开 结束' : '按住 说话'}}</text>
        </view>
        <textarea v-else class="bg-white rounded p-1 font-md" style="height: 75rpx;" :adjust-position="false"
          v-model="text" @click="onInputClick" />
      </view>
    
      <!-- 表情 -->
      <free-icon-button><text class="iconfont font-lg" @click="openActionOrEmoticon('emoticon')"></text></free-icon-button>
    
      <template v-if="text.length === 0">
        <!-- 扩展菜单 -->
        <free-icon-button @click="openActionOrEmoticon('action')"><text class="iconfont font-lg"></text></free-icon-button>
      </template>
      <template v-else>
        <!-- 发送按钮 -->
        <view class="main-bg-color rounded flex align-center justify-center mr-2 px-2 pt-4" style="height: 70rpx;" @click="send('text')">发送
        </view>
      </template>
    </view>
    
    <!-- 录音提示 -->
    <view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center" style="bottom: 105rpx;">
      <view class="rounded flex flex-column align-center justify-center" style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);">
        <image src="/static/images/audio/audio/recording.gif" style="width: 150rpx;height: 150rpx;"></image>
        <text class="font text-white mt-3">{{unRecord?'松开手指，取消发送':'手指上滑，取消发送'}}</text>
      </view>
    </view>
  </view>
</template>
<script>
  
  // #ifdef APP-NVUE
  const domModule = weex.requireModule('dom');
  // #endif
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeIconButton from '@/components/free-ui/free-icon-button.vue';
  import freeChatItem from '@/components/free-ui/free-chat-item.vue';
  import freePopup from '@/components/free-ui/free-popup.vue';
  import { mapState,mapMutations } from 'vuex';
  export default {
    components: {
      freeNavBar,
      freeIconButton,
      freeChatItem,
      freePopup
    },
    watch:{
      mode(newValue,oldValue){
        if(newValue !== 'action' && newValue !== 'emoticon'){
          this.$refs.action.hide();
        }
        
        if(newValue !== 'text'){
          uni.hideKeyboard()
        }
      }
    },
    // 生命周期
    mounted() {
      // 获取任务栏高度
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.navigator.getStatusbarHeight()
      // #endif
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
      // 监听键盘高度变化
      uni.onKeyboardHeightChange((res) => {
        if(this.mode !== 'action' && this.mode !== 'emoticon'){
          this.keyBoardHeight = res.height;
        }
        if (this.keyBoardHeight>0) {
          this.pageToBottom()
        }
      })
      // 注册发送音频事件
      this.regSendVoiceEvent((url)=>{
        if(!this.unRecord){
          // 发送
          this.send('audio',url,{
            time:this.RecordTime
          })
        }
      });
    },
    computed: {
      ...mapState({
        RECORD:state=>state.audio.RECORD,
        RecordTime:state=>state.audio.RecordTime
      }),
      // 所有信息的图片地址
      imageList(){
        var arr = [];
        this.list.forEach((item)=>{
          if(item.type === 'emoticon' || item.type === 'image'){
            arr.push(item.data)
          }
        })
        return arr;
      },
      // 获取蒙版的位置
      maskBottom(){
        return this.keyBoardHeight + uni.upx2px(105)
      },
      // 动态获取菜单高度
      geMenusHeight() {
        let H = 100;
        return this.menus.length * H;
      },
      // 获取菜单的样式
      getMenusStyle() {
        return `height:${this.geMenusHeight}rpx;`;
      },
      // 是否是本人
      isDoSelf() {
        // 获取本人id（假设拿到了）
        let id = 1;
        let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0;
        return user_id === id;
      },
      // 获取操作菜单
      menusList() {
        return this.menus.filter(v => {
          if (v.name === '撤回' && this.isDoSelf) {
            return false;
          } else {
            return true;
          }
        })
      },
      // 聊天区域bottom
      chatBodyBottom() {
        return `bottom:${uni.upx2px(105) + this.keyBoardHeight}px;top:${this.navBarHeight}px`;
      },
      // 获取操作或者表情列表
      emoticonOrActionList(){
        if(this.mode === 'emoticon' || this.mode === 'action'){
          return this[this.mode+'List'];
        }else{
          return  [];
        }
      }
    },
    data() {
      return {
        // 模式 text输入文字 emoticon表情 action操作 audio音频
        mode:'audio',  
        // 扩展菜单列表
        actionList: [
          [{
              name: "相册",
              icon: "/static/images/extends/pic.png",
              event: "uploadImage"
            },
            {
              name: "拍摄",
              icon: "/static/images/extends/video.png",
              event: "uploadVideo"
            },
            {
              name: "收藏",
              icon: "/static/images/extends/shoucan.png",
              event: ""
            },
            {
              name: "名片",
              icon: "/static/images/extends/man.png",
              event: ""
            },
            {
              name: "语音通话",
              icon: "/static/images/extends/phone.png",
              event: ""
            },
            {
              name: "位置",
              icon: "/static/images/extends/path.png",
              event: ""
            }
          ]
        ],
        // 表情包
        emoticonList:[
          [{
              name: "沮丧",
              icon: "/static/images/emoticon/5497/0.gif",
              event: ""
            },
            {
                name: "沮丧",
                icon: "/static/images/emoticon/5497/0.gif",
                event: ""
             }]
        ],
        // 输入文字
        text: "",
        // 音频录制中
        isRecording:false,
        // 取消录音
        unRecord:false,
        // 当前气泡索引
        keyBoardHeight: 0,
        propIndex: 1,
        navBarHeight: 0,
        list: [{
            avatar: "/static/images/demo/demo6.jpg",
            nickname: "昵称",
            user_id: 1,
            type: "text", // image,audio,video,file,share
            data: "你好你好你好你好你好你好你好你好你好你好你好",
            create_time: 1628233521,
            isremove: false
          }, {
            avatar: "/static/images/demo/demo6.jpg",
            nickname: "昵称",
            user_id: 2,
            type: "text", // image,audio,video,file,share
            data: "11你好你好你好你好你好你好你好你好你好你好你好",
            create_time: 1628234896,
            isremove: false
          },
          {
            avatar: "/static/images/demo/demo6.jpg",
            nickname: "昵称",
            user_id: 1,
            type: "text", // image,audio,video,file,share
            data: "你好你好你好你好你好你好你好你好你好你好你好",
            create_time: 1628233521,
            isremove: false
          },{
            avatar: "/static/images/demo/demo6.jpg",
            nickname: "昵称",
            user_id: 2,
            type: "text", // image,audio,video,file,share
            data: "11你好你好你好你好你好你好你好你好你好你好你好",
            create_time: 1628234896,
            isremove: false
          },
          {
            avatar: "/static/images/demo/demo6.jpg",
            nickname: "昵称",
            user_id: 1,
            type: "audio", // image,audio,video,file,share
            data: "/static/images/audio/audio/1.mp3",
            options:{
              time:10
            },
            create_time: 1628234896,
            isremove: false
          },
          {
            avatar: "/static/images/demo/demo6.jpg",
            nickname: "昵称",
            user_id: 2,
            type: "audio", // image,audio,video,file,share
            options:{
              time:20
            },
            data: "/static/images/audio/audio/2.mp3",
            create_time: 1628234896,
            isremove: false
          },
          {
            avatar: "/static/images/demo/demo6.jpg",
            nickname: "昵称",
            user_id: 1,
            type: "audio", // image,audio,video,file,share
            data: "/static/images/audio/audio/3.mp3",
            options:{
              time:60
            },
            create_time: 1628234896,
            isremove: false
          },
          {
            avatar: "/static/images/demo/demo6.jpg",
            nickname: "昵称",
            user_id: 1,
            type: "video", // image,audio,video,file,share
            data: "/static/video/demo.mp4",
            options:{
              poster:"/static/video/demo.jpg"
            },
            create_time: 1628234896,
            isremove: false
          }
        ],
        RecordingStartY:0,
        menus: [{
            name: '复制',
            event: ""
          },
          {
            name: '发送给朋友',
            event: ""
          },
          {
            name: '收藏',
            event: ""
          },
          {
            name: '删除',
            event: ""
          },
          {
            name: '多选',
            event: ""
          },
          {
            name: '撤回',
            event: "removeChatItem"
          }],
        
        }
    },
    created(){
      // 初始化
      this.__init();
    },
    methods: {
      ...mapMutations(['regSendVoiceEvent']),
      __init(){
        var total = 24;
        var page = Math.ceil(total/8);
        var arr = [];
        for (var i = 0;i<page;i++) {
          var start = i*8;
          arr[i] = [];
          for(var j=0;j<=8;j++){
            arr[i].push({
              name:'表情'+(start+j),
              icon:'/static/images/emoticon/5497/'+(start+j)+'.gif',
              event:'sendEmoticon'
            })
          }
        }
        this.emoticonList = arr;
      },
      // 点击区域
      clickPage(){
        // 隐藏操作菜单
        this.$refs.action.hide();
        this.mode = 'text';
      },
      // 输入框聚焦
      onInputClick(event){
        this.mode = 'text';
      },
      // 事件分发
      actionEvent(e){
        switch(e.event){
          case 'uploadImage':
          uni.chooseImage({
              count: 9, //默认9
              success:(res)=>{
                  res.tempFilePaths.forEach((item)=>{
                // 发送到服务器
                
                // 渲染到页面
                this.send('image',item);
              })
              }
          });
          break;
          case 'sendEmoticon': // 发送表情包
          this.send('emoticon',e.icon);
          break;
          case 'uploadVideo': // 发送短视频
          uni.chooseVideo({
            maxDuration:10,
            success: (res) => {
              // 渲染页面
              this.send('video',res.tempFilePath);
              // 发送到服务端（获取视频封面，返回url）
              // 修改本地发送状态
            }
          })
          break;
        }
      },
      // 打开扩展菜单或者表情包
      openActionOrEmoticon(model = 'action') {
        this.mode = model;
        this.$refs.action.show();
        uni.hideKeyboard();
        this.keyBoardHeight = uni.upx2px(580);
      },
      // 发送
      send(type,data='',options={}) {
        var time = (new Date()).getTime();
        var obj = {
          avatar: "/static/images/demo/demo6.jpg",
          nickname: "昵称",
          user_id: 1,
          type: type,  // image,audio,video,emoticon
          data: data,
          create_time: time,
          options:options,
          isremove: false
        };
        switch (type) {
          case 'text':
            obj.data = this.text;
            this.text = "";
            break;
          case 'image':
            obj.data = data;
            break;
          case 'audio':
            break;
          case 'video':
            break;
          case 'file':
            break;
          case 'share':
            break;
          default:
          obj.data=data;
          break;
        }
        this.list.push(obj);
        // 置于底部
        var pageToBottomTimer = setTimeout(()=>{
          this.pageToBottom();
          clearTimeout(pageToBottomTimer);
        },200);
      },
      // 长按消息气泡
      long(e) {
        this.propIndex = e.index;
        this.$refs.extend.show(e.x, e.y);
      },
      // 回到底部
      pageToBottom() {
        let chatItem = this.$refs.chatItem;
        let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0;

        let last = chatItem[lastIndex];
        if (chatItem[lastIndex]) {
          domModule.scrollToElement(last, {});
        }
      },
      // 操作菜单方法分发
      clickEvent(event) {
        switch (event) {
          case 'removeChatItem': // 撤回消息
            // 拿到当前被操作的信息
            this.list[this.propIndex].isremove = true;
            break;
          default:
            break;
        }
        // 关闭菜单
        this.$refs.extend.hide();
      },
      // 预览图片
      previewImage(url){
        // 预览图片
        uni.previewImage({
          current:url,
          urls:this.imageList,
          indicator:"default",
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
              console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function(err) {
              console.log(err.errMsg);
            }
          }
        });
      },
    // 切换音频录制喝文本输入
    changeVoiceOrText(){
      this.mode = this.mode !== 'audio' ? 'audio' : 'text';
    },
    // 录音相关 
    // 录音开始
    voiceTouchStart(e){
      this.isRecording = true;
      this.RecordingStartY = e.changedTouches[0].screenY;
      this.unRecord = false;
      // 开始录音
      this.RECORD.start({
        format:'mp3'
      })
    },
    // 录音结束
    voiceTouchEnd(){
      this.isRecording = false;
      // 停止录音
      this.RECORD.stop();
    },
    // 录音打断
    voiceTouchCancel(){
      this.isRecording = false;
      this.unRecord = true;
      // 停止录音
      this.RECORD.stop();
    },
    voiceTouchMove(e){
      var Y = Math.abs(e.changedTouches[0].screenY-this.RecordingStartY);
      this.unRecord = (Y>=80);
    }
    }
  }
</script>

<style>

</style>

插件 free-nav-bar.vue free-icon-button.vue free-chat-item.vue free-popup.vue

free-nav-bar.vue

<template>
  <view class="flex align-center justify-center" 
  hover-class="bg-hover-light" @click="$emit('click')"
  style="height: 90rpx;width: 90rpx;">
    <slot></slot>
  </view>
</template>

<script>
  export default {
    props: {
      icon: {
        type: String,
        default: ''
      },
    },
    mounted() {
      // #ifdef APP-PLUS-NVUE
      // 加载公共图标库
      const domModule = weex.requireModule('dom')
      domModule.addRule('fontFace', {
          'fontFamily': "iconfont",
          'src': "url('/static/font_1365296_2ijcbdrmsg.ttf')"
      });
      // #endif
    }
  }
</script>

<style>
</style>

free-icon-button.vue

<template>
  <view class="flex align-center justify-center" 
  hover-class="bg-hover-light" @click="$emit('click')"
  style="height: 90rpx;width: 90rpx;">
    <slot></slot>
  </view>
</template>

<script>
  export default {
    props: {
      icon: {
        type: String,
        default: ''
      },
    },
    mounted() {
      // #ifdef APP-PLUS-NVUE
      // 加载公共图标库
      const domModule = weex.requireModule('dom')
      domModule.addRule('fontFace', {
          'fontFamily': "iconfont",
          'src': "url('/static/font_1365296_2ijcbdrmsg.ttf')"
      });
      // #endif
    }
  }
</script>

<style>
</style>

free-chat-item.vue

<template>
  <view @longpress="long">
    <!-- 时间显示 -->
    <view v-if="showTime" class="flex align-center justify-center pb-4 pt-2">
      <text class="font-sm text-light-muted">{{showTime}}</text>
    </view>
    <!-- 撤回消息 -->
    <view class="flex align-center justify-center pb-4 pt-1 chat-animate" v-if="item.isremove">
      <text class="font-sm text-light-muted">你撤回了一条消息</text>
    </view>
    <!-- 气泡 -->
    <view v-else class="flex align-start position-relative mb-3" :class="!isself ? 'justify-start' : 'justify-end'">
      <!-- 头像 -->
      <template v-if="!isself">
        <free-avatar size="75" :src="item.avatar"></free-avatar>
        <view class="iconfont font-md position-absolute chat-left-icon bg-light"><text
            class="iconfont font-md text-white"></text></view>
        <!-- 聊天气泡 -->
        <div class="p-2 rounded" :class="labelClass" style="max-width:500rpx;">
          <!-- 文字 -->
          <text v-if="item.type === 'text'" class="font-md">{{item.data}}</text>
          <!-- 表情包||图片 -->
          <free-image @click="preview(item.data)" v-if="item.type==='emoticon' || item.type==='image'" :src="item.data"></free-image>
          <!-- 音频 -->
          <view v-if="item.type === 'audio'" class="flex align-center" @click="openAudio(item.data)">
            <image :src="audioPlaying ?'/static/images/audio/audio/play.gif' : '/static/images/audio/audio/audio3.png'" style="width: 50rpx;height: 50rpx;" class="font"></image>
            <text class="font">{{item.options.time + '"'}}</text>
          </view>
        </div>
      </template>
      <template v-if="isself">
        <div class="p-2 rounded" :class="labelClass" style="max-width:500rpx;" :style="labelStyle">
          <!-- 文字 -->
          <text v-if="item.type === 'text'" class="font-md">{{item.data}}</text>
          <!-- 表情包||图片 -->
          <free-image @click="preview(item.data)" v-if="item.type==='emoticon' || item.type==='image'" :src="item.data"></free-image>
            <!-- 音频 -->
           <view v-if="item.type === 'audio'" class="flex align-center" @click="openAudio(item.data)">
            <image :src="audioPlaying ?'/static/images/audio/audio/play.gif' : '/static/images/audio/audio/audio3.png'" style="width: 50rpx;height: 50rpx;" class="mx-1"></image>
            <text class="font">{{item.options.time + '"'}}</text>
           </view>
           <!-- 视频 -->
           <view v-if="item.type === 'video'" class="position-relative rounded">
             <free-image :src="item.options.poster" @click="openVideo" 
             imageClass="rounded" :maxWidth="350" :maxHeight="300" @load="loadPoster"></free-image>
             <text class="iconfont text-white position-absolute" style="font-size: 80rpx;width: 80rpx;height: 80rpx;" :style="posterTextStyle"></text>
           </view>
        </div>
        <view class="iconfont font-md position-absolute" :class="(item.type==='text')?'chat-right-icon' : '' ">
          <text class="text-chat-item iconfont"></text></view>
        <free-avatar size="75" :src="item.avatar"></free-avatar>
      </template>
    </view>
  </view>

</template>

<script>
  import freeAvatar from "@/components/free-ui/free-avatar.vue";
  import $T from '@/common/free-lib/time.js';
  import freeImage from './free-image.vue';
  import { mapState,mapActions } from 'vuex';
  
  export default {
    components: {
      freeAvatar,
      freeImage
    },
    props: {
      item: Object,
      index: Number,
      // 上一条消息的时间戳
      pretime: [Number, String]
    },
    data(){
      return {
        innerAudioContext:null,
        audioPlaying:false,
        // 默认封面宽高
        poster:{
          w:100,
          h:100
        }
      }
    },
    mounted() {
      // 注册全局事件
      if(this.item.type === 'audio'){
        this.audioOn(this.onPlayAudio)
      }
      
      // 监听是否撤回消息
      // #ifdef APP-PLUS-NVUE
      this.$watch('item.isremove', (newVal, oldVal) => {
        if (newVal) {
          const animation = weex.requireModule('animation');
          this.$nextTick(() => {
            animation.transition(this.$refs.isremove, {
              styles: {
                opacity: 1
              },
              duration: 100, //ms
              timingFunction: 'ease',
            }, () => {
              console.log('动画执行结束');
            })
          })
        }
      })
      // #endif
    },
    computed: {
      ...mapState({
        ceshi:state=>state.audio.ceshi
      }),
      labelStyle(){
        if(this.item.type === 'audio'){
          let time = this.item.options.time || 0;
          let width = parseInt(time) / (60/500);
          width = width < 150 ? 150 : width;
          return `width:${width}rpx;`;
        }
      },
      // 视频封面图标
      posterTextStyle(){
        let w = (this.poster.w-uni.upx2px(80))/2;
        let h = (this.poster.h-uni.upx2px(80))/2;
        return `left:${w}px;top:${h}px;`;
      },
      // 是否是本人
      isself() {
        // 获取本人id（假设拿到了）
        let id = 1;
        return this.item.user_id === id;
      },
      // 显示时间
      showTime() {
        return $T.getChatTime(this.item.create_time, this.pretime);
      },
      // 是否需要气泡样式
      hasLabelClass() {
        return this.item.type === 'text' || this.item.type === 'audio';
      },
      // 气泡打样式
      labelClass() {
        let lable = this.hasLabelClass ? 'bg-chat-item mr-3' : 'mr-3';
        return this.isself ? lable : 'bg-white ml-3';
      }
    },
    // 组件销毁
    destroyed() {
      if(this.item.type === 'audio'){
        this.audioOff(this.onPlayAudio)
      }
      // 销毁
      if(this.innerAudioContext != null){
        this.innerAudioContext.destroy();
        this.innerAudioContext = null;
      }
    },
    methods: {
      ...mapActions(['audioOn','audioEmit','audioOff']),
      // 加载封面
      loadPoster(e){
        this.poster.w = e.w;
        this.poster.h = e.h;
      },
      // 打开视频
      openVideo(){
        uni.navigateTo({
          url:'/pages/chat/video/video?url='+this.item.data,
        })
      },
      // 监听音频播放全局事件
      onPlayAudio(index){
        if(this.innerAudioContext){
          if(this.index !== index){
            this.innerAudioContext.pause();
          }
        }
      },
      // 播放音频
      openAudio(url){
        // 通知其他音频停止
        this.audioEmit(this.index);
        if(this.innerAudioContext==null){
          this.innerAudioContext = uni.createInnerAudioContext();
          this.innerAudioContext.autoplay = true;
          this.innerAudioContext.src = url;
          this.innerAudioContext.play();
          // 监听播放
          this.innerAudioContext.onPlay(()=>{
            this.audioPlaying = true
          })
          // 监听暂停
          this.innerAudioContext.onPause(()=>{
            this.audioPlaying = false
          })
          // 监听停止
          this.innerAudioContext.onStop(()=>{
            this.audioPlaying = false
          })
          // 监听错误
          this.innerAudioContext.onError(()=>{
            this.audioPlaying = false
          })
        }else{
          this.innerAudioContext.pause();
          this.innerAudioContext.play();
        }
      },
      // 预览图片
      preview(url) {
        this.$emit('preview',url);
      },
      // 长按事件
      long(e) {
        let x = 0,
          y = 0;
        // #ifdef APP-PLUS-NVUE
        if (Array.isArray(e.changedTouches) && e.changedTouches.length > 0) {
          x = e.changedTouches[0].screenX;
          y = e.changedTouches[0].screenY;
        }
        // #endif
        // #ifdef MP
        x = e.detail.x;
        y = e.detail.y;
        // #endif
        this.$emit('long', {
          x,
          y,
          index: this.index
        });
      }
    }
  }
</script>

<style>
  .chat-left-icon {
    left: 80rpx;
    top: 20rpx;
  }

  .chat-right-icon {
    right: 80rpx;
    top: 20rpx;
  }

  .chat-animate {
    /* #ifndef APP-PLUS-NVUE */
    opacity: 0;
    /* #endif */
  }
</style>

free-popup.vue

<template>
  <div style="z-index:9999;overflow:hidden;" v-if="status">
    <!-- 蒙版 -->
    <view v-if="mask" class="position-fixed top-0 left-0 right-0 bottom-0" :style="getMaskColor"  @click="hide"></view>
      <!-- 弹出框内容 -->
      <div ref="popup" class="position-fixed free-animated" :class="getBodyClass" :style="getBodyStyle">
          <slot></slot> 
      </div>
  </div>
</template>

<script>
  // #ifdef APP-PLUS-NVUE
    const animation = weex.requireModule('animation');
  // #endif
  
  export default {
    props: {
      // 是否开启蒙版颜色
      maskColor: {
        type: Boolean,
        default: false
      },
      // 是否开启蒙版
      mask:{
        type:Boolean,
        default:true
      },
      // 是否处于底部
      bottom:{
        type:Boolean,
        default:false
      },
      // 弹出层内容高度
      bodyHeight:{
        type:Number,
        default:0
      },
      // 弹出层内容宽度
      bodyWidth:{
        type:Number,
        default:0
      },
      bodyBgColor:{
        type:String,
        default:'bg-white'
      },
      transformOrigin:{
        type:String,
        default:'left top'
      },
      // tabbar高度
      tabbarHeight:{
        type:Number,
        default:0
      }
    },
    data() {
      return {
        status: false,
        x:-1,
        y:1,
        maxX:0,
        maxY:0
      }
    },
    mounted() {
      try {
          const res = uni.getSystemInfoSync();
        this.maxX = res.windowWidth - uni.upx2px(this.bodyWidth)
        this.maxY = res.windowHeight - uni.upx2px(this.bodyHeight) - uni.upx2px(this.tabbarHeight)
      } catch (e) {
          // error
      }
    },
    computed: {
      getMaskColor() {
        let i = this.maskColor ? 0.5 : 0
        return `background-color: rgba(0,0,0,${i});` 
      },
      getBodyClass(){
        if(this.center){
          return 'left-0 right-0 bottom-0 top-0 flex align-center justify-center';
        }
        let bottom = this.bottom ? 'left-0 right-0 bottom-0' : 'rounded border'
        return `${this.bodyBgColor} ${bottom}`;
      },
      getBodyStyle(){
        let left = this.x > -1 ? `left:${this.x}px;` : ''
        let top = this.y > -1 ? `top:${this.y}px;` : ''
        return left + top
      }
    },
    methods:{
      show(x=-1,y=-1){
        if(this.status){
          return;
        }
        this.x = (x > this.maxX) ? this.maxX : x;
        this.y = (y > this.maxY) ? this.maxY : y;
        
        this.status = true
        // #ifdef APP-PLUS-NVUE
        this.$nextTick(()=>{
          animation.transition(this.$refs.popup,{
            styles:{
              transform:'scale(1,1)',
              transformOrigin:this.transformOrigin,
              opacity:1
            },
            duration:100, //ms
            timingFunction:'ease',
          },()=>{
            console.log('动画执行结束');
          })
        })
        // #endif
      },
      hide(){
        this.$emit('hide');
        // #ifdef APP-PLUS-NVUE
        this.$nextTick(()=>{
          animation.transition(this.$refs.popup,{
            styles:{
              transform:'scale(0,0)',
              transformOrigin:this.transformOrigin,
              opacity:0
            },
            duration:100, //ms
            timingFunction:'ease',
          },()=>{
            this.status = false;
          })
        })
        // #endif
      }
    }
  }
</script>

<style scoped>
  .free-animated{
    /* #ifdef APP-PLUS-NVUE */
    /* transform: scale(0,0);
    opacity: 0; */
    /* #endif */
  }
  .z-index{
    /* #ifndef APP-NVUE */
    z-index: 9999;
    /* #endif */
  }
</style>

还有我们在chat.nvue中引入了vuex

/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import audio from '@/store/modules/audio.js';
export default new Vuex.Store({
  modules:{
    audio
  }
})

/store/modules/audio.js

export default{
  state:{
    // 存放全局事件
    events:[],
    RECORD:null,
    RecordTime:0,
    RECORDTIMER:null,
    sendVoice:null
  },
  mutations:{
    // 初始化录音管理器
    initRECORD(state){
      state.RECORD = uni.getRecorderManager();
      // 监听录音开始
      state.RECORD.onStart(()=>{
        state.RecordTime = 0;
        state.RECORDTIMER = setInterval(()=>{
          state.RecordTime++
        },1000);
      })
      // 监听录音结束
      state.RECORD.onStop((e)=>{
        if(state.RECORDTIMER){
          clearInterval(state.RECORDTIMER)
          state.RECORDTIMER = null
        }
        
        // if(!state.unRecord){
        //  this.send('audio',e.tempFilePath,{time:state.RecordTime});
        // }
        // 执行发送
        if(typeof state.sendVoice === 'function'){
          state.sendVoice(e.tempFilePath)
        }
      })
    },
    // 注册发送音频事件
    regSendVoiceEvent(state,event){
      state.sendVoice = event
    },
    // 注册全局事件
    regEvent(state,event){
      console.log('注册事件')
      state.events.push(event)
    },
    // 执行全局事件
    doEvent(state,params){
      state.events.forEach(e=>{
        console.log('执行事件'+state.events.length)
        e(params)
      })
    },
    // 注销事件
    removeEvent(state,event){
      let index = state.events.findIndex(item=>{
        return item === event
      })
      if(index !== -1){
        state.events.splice(index,1);
      }
    }
  },
  actions:{
    // 分发注册全局事件
    audioOn({commit},event){
      commit('regEvent',event);
    },
    // 分发执行全局事件
    audioEmit({commit},params){
      commit('doEvent',params);
    },
    // 分发注销全局事件
    audioOff({commit},event){
      commit('removeEvent',event);
    }
  }
}

页面是如下所示

感谢大家观看，我们下期再见。