微信小程序云开发智能人机聊天室（可以语音转文字文字转语音的）

不念不忘少年蓝@ 2021-07-24 17:50 446阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1][]   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 2][]

wxml

<view class="bo">
      <scroll-view scroll-y="true" scroll-with-animation scroll-top="{
       {scrollTop}}">
    
        <block >
          <view class="body" wx:for='{
       {list}}' wx:key='index'>
    
            <view wx:if='{
       {item.type==1}}' class="right_body">
              <view class="flexRoe posRit">
                <view class="textBo">
                  <view class="dataTime">{
       {item.sendOutname}} {
       {item.dataTime}}</view>
                  <view wx:if="{
       {item.text!=''}}" class="ritTxt">
                    <image wx:if="{
       {item.src!=''}}" bindtap="previewImage" mode='widthFix' data-src='{
       {item.src}}' src="../../img/voice.png" class="textImg"></image>
                    <view>{
       {item.text}}</view>
                  </view>
    
                  <view wx:if="{
       {item.voice}}" class="ritTxt2" bindtap='my_audio_click' data-src='{
       {item.voice}}'>
                    <image class='my_audio' src='/img/play.png'></image>
                  </view>
                </view>
                <image class="head" style=" margin-left:20rpx " src="../../img/1.png"></image>
              </view>
            </view>
            <view wx:if='{
       {item.type==2}}' class="p_r left_body">
              <view class="flexRoe ">
                <image class="head" style=" margin-left:20rpx " src="../../img/2.png"></image>
                <view class="lfBo">
                  <view class="dataTime">{
       {item.sendOutname}} {
       {item.dataTime}}</view>
                  <view wx:if="{
       {item.text!=''}}" class="lftTxt">
                    <image wx:if="{
       {item.src!=''}}" bindtap="previewImage" mode='widthFix' data-src='{
       {item.src}}' src="../../img/voice.png" class="textImg"></image>
                    <view>{
       {item.text}}</view>
                  </view>
    
                  <view wx:if="{
       {item.voice}}" class="lftTxt2" bindtap='my_audio_click' data-src='{
       {item.voice}}'>
                    <image class='my_audio' src='/img/play.png'></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
      <view class="jifBo" wx:if="{
       {tis=='录音中...'}}"> 
        <image src="../../img/111.gif" mode="widthFix"></image>
      </view>
      <view class="inp">
    
        <view class="p_r" wx:if="{
       {textInputTis==1}}">
         
          <view class="yuyin" bindtap="textInputTis"><image src="../../img/jp.png"  mode="widthFix"></image></view>
        
           <view class='serac_img' style="background:{
       {tis=='松开 结束'?'#ccc':''}}" catch:longpress="touchStart" catch:touchmove="handleTouchMove" catch:touchend="touchEnd">
           {
       {tis}}
          </view>
        </view>
           <view class="p_r" wx:if="{
       {textInputTis==2}}">
         
          <view class="yuyin" bindtap="textInputTis"><image src="../../img/jp.png"  mode="widthFix"></image></view>
        
             <input class="input" placeholder-class='plaCC' confirm-type="send" bindconfirm='sendOut' placeholder='聊天，在这里' value="{
       {title}}"></input>
        </view>
        
      </view>
    </view>

css

page {
      background: #f2f2f2;
    height: 100%;
    overflow: hidden
    }
    
    .top_bo {
      display: flex;
      background: white;
      flex-direction: row;
    }
    
    .top_bo view {
      flex: 1;
      font-size: 28rpx;
      text-align: center;
      border: 1rpx solid #ccc;
      line-height: 80rpx;
    }
    
    scroll-view {
      height: 84vh;
        overflow: hidden;
      padding-bottom: 100rpx;
      padding-top:50rpx;
    }
    
    .noList {
      background: white;
      margin-top: 30rpx;
      /* height: 230rpx; */
      width: 100%;
      /* padding-top: 25%; */
    }
    
    .noMsg {
      text-align: center;
      color: #999;
      font-size: 28rpx;
    }
    
    .inp {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #e0e0e0;
      height: 100rpx;
      padding:  10rpx 0;
    }
    
    .inp input {
      background: #d0d0d0;
      border-radius: 15rpx;
      padding-left: 20rpx;
      height: 84rpx;
      /* margin-left: 2%; */
    
        width:80%;
      background: #fff;
      /* padding-left: 20rpx; */
      /* height: 84rpx; */
      margin-top: 10rpx;
      line-height: 80rpx;
      font-size: 32rpx;
      color: #0a0a0a
    
    
    }
    
    .yuyin {
      /* width: 60rpx */
      /* background: #00a9ec; */
      border-radius: 15rpx;
      height: 84rpx;
      line-height: 84rpx;
      color: #fff;
      padding: 0 10rpx;
      margin-left: 10rpx;
      margin-top: 10rpx;
      text-align: center;
    }
    .yuyin image{
      width: 60rpx;
      margin:15rpx 10rpx 0 10rpx;
    
    }
    .prohibit {
      background: #d0d0d0;
      border-radius: 15rpx;
      padding-left: 20rpx;
      height: 84rpx;
      margin-top: 10rpx;
      width: 94%;
      margin-left: 2%;
      text-align: center;
      line-height: 84rpx;
      color: rgb(34, 34, 34);
    }
    
    .plaCC {
      margin-left: 5rpx;
    }
    
    .p_r {
      display: flex;
      flex-direction: row;
    }
    
    .flexRoe {
      display: flex;
      flex-direction: row;
    }
    
    .body {
      width: 100%;
      position: relative;
      /* border: 1rpx solid #ccc; *//* height: 200rpx */
    }
    
    .right_body {
      width: 100%;
      /* border: 1rpx solid red; */
      padding: 20rpx;
      /* margin-top: 50rpx; */
    }
    
    .left_body {
      /* margin-top: 50rpx; */
    }
    
    .posRit {
      right: 20rpx;
    }
    
    .textBo {
      width: 620rpx;
      text-align: right;
    }
    
    .lfBo {
      margin-left: 10rpx;
    }
    
    .ritTxt {
      background: #44426a;
      padding: 10rpx 20rpx 10rpx 20rpx;
      color: white;
      border-radius: 15rpx 0 15rpx 15rpx;
      margin-top: 20rpx;
      float: right;
      max-width: 500rpx;
      word-wrap: break-word;
      text-align: left;
      font-size: 28rpx;
    }
    
    .lftTxt {
      background: #44426a;
      padding: 10rpx 20rpx 10rpx 20rpx;
      color: white;
      border-radius: 0rpx 15rpx 15rpx 15rpx;
      margin-top: 20rpx;
      float: left;
      max-width: 500rpx;
      word-wrap: break-word;
      text-align: left;
      font-size: 28rpx;
    }
    
    .my_audio {
      height: 60rpx;
      width: 60rpx;
      z-index: 2;
      position: relative;
      top: 10rpx;
      left: 20rpx;
      margin-right: 30rpx;
    }
    
    .dataTime {
      font-size: 28rpx;
    }
    
    .textImg {
      width: 50rpx;
      margin-top: 5rpx;
    }
    
    .head {
      width: 80rpx;
      height: 80rpx;
    }
    
    ._ {
      height: 130rpx;
      width: 100%;
      background: #ccc;
    }
    
    .serac_img {
      width: 80%;
      background: #fff;
      border-radius: 15rpx;
      /* padding-left: 20rpx; */
      /* height: 84rpx; */
      margin-top: 10rpx;
      margin-left: 2%;
      text-align: center;
      line-height: 80rpx;
      font-size: 32rpx;
      color: #0a0a0a
    }
    
    .serac_img view {
      width: 70%;
      text-align: right;
      line-height: 80rpx;
      color: #bfbfbf;
    }
    
    .serac_img image {
      width: 50rpx;
      margin-top: 25rpx;
    }
    .jifBo{
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
    }
    .jifBo image{
      width: 40%;
      margin-left: 30%;
      margin-top: 50%;
      
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200316161647340.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020031616180125.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 2]: /images/20210724/91aa729820bc4d72bb6d6ce8957f77c7.png