uni-app 185iOS端兼容处理

简介: uni-app 185iOS端兼容处理

朋友圈样式问题

/pages.json

{
  "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
  {
      "path" : "pages/common/login/login",
      "style" :                                                                                    
      {
          "navigationBarTitleText": "",
          "enablePullDownRefresh": false
      }
      
  },
    {
      "path": "pages/tabbar/index/index",
      "style": {
        "navigationBarTitleText": "uni-app",
        "disableScroll": true // 不嵌套 scroller
      }
    }
      ,{
            "path" : "pages/tabbar/find/find",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/tabbar/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/tabbar/mail/mail",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/chat/chat",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/video/video",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/chat-set/chat-set",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/user-base/user-base",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/user-tag-set/user-tag-set",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/user-remark-tag/user-remark-tag",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/user-moments-auth/user-moments-auth",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/send-card/send-card",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/user-report/user-report",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/find/moments/moments",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": true,
        "app-plus":{
          "pullToRefresh":{
            "support":true,
            "style":"circle"
          }
        }
            }
            
        }
        ,{
            "path" : "pages/my/userinfo/userinfo",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/code/code",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/fava/fava",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": true
            }
            
        }
        ,{
            "path" : "pages/common/search/search",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/find/add-moment/add-moment",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/setting/setting",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/add-friend/add-friend",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/apply-list/apply-list",
            "style" : 
            {
                "enablePullDownRefresh": true
            }
            
        }
        ,{
            "path" : "pages/mail/mail/mail",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/group-list/group-list",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/group-remark/group-remark",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/chat-list/chat-list",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/chat-history/chat-history",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/group-user/group-user",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/tag-list/tag-list",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": true
            }
            
        }
        ,{
            "path" : "pages/mail/tag-read/tag-read",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "globalStyle":{
    "navigationBarTextStyle":"black",
    "navigationBarTitleText":"微信",
    "navigationBarBackgroundColor":"#F8F8F8",
    "backgroundColor":"#F8F8F8",
    "app-plus":{
      "titleNView":false,
      "scrollIndicator":"none"
    }
  },
  "tabBar":{
    "borderStyle":"black",
    "backgroundColor":"#F7F7F7",
    "color":"#000000",
    "selectedColor":"#08C261",
    "list":[
      {
        "iconPath":"./static/tabbar/index.png",
        "selectedIconPath":"./static/tabbar/index-select.png",
        "pagePath":"pages/tabbar/index/index",
        "text":"首页"
      },
      {
        "iconPath":"./static/tabbar/mail.png",
        "selectedIconPath":"./static/tabbar/mail-select.png",
        "pagePath":"pages/tabbar/mail/mail",
        "text":"通讯录"
      },
      {
        "iconPath":"./static/tabbar/find.png",
        "selectedIconPath":"./static/tabbar/find-select.png",
        "pagePath":"pages/tabbar/find/find",
        "text":"发现"
      },
      {
        "iconPath":"./static/tabbar/my.png",
        "selectedIconPath":"./static/tabbar/my-select.png",
        "pagePath":"pages/tabbar/my/my",
        "text":"我的"
      }
    ]
  },
  "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize",
  "condition" : { //模式配置,仅开发期间生效
    "current": 0, //当前激活的模式(list 的索引项)
    "list": [
      {
        "name": "", //模式名称
        "path": "", //启动页面,必选
        "query": "" //启动参数,在页面的onLoad函数里面得到
      }
    ]
  }
}

弹出层问题

/components/free-ui/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 z-index" :style="getMaskColor" @click="hide"></view>
    <!-- 弹出框内容 -->
    <div ref="popup" class="position-fixed free-animated z-index" :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
      },
      // 是否居中
      center:{
        type:Boolean,
        default:false
      },
      // 是否处于底部
      bottom:{
        type:Boolean,
        default:false
      },
      // 弹出层内容宽度
      bodyWidth:{
        type:Number,
        default:0
      },
      // 弹出层内容高度
      bodyHeight:{
        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',
        //      }, function () {
        //         console.log('动画执行结束');
        //      })
        // })
        // #endif
        
      },
      hide(){
        this.$emit('hide')
        // #ifdef APP-PLUS-NVUE
        // animation.transition(this.$refs.popup, {
        // styles: {
        //  transform: 'scale(0,0)',
        //  transformOrigin:this.transformOrigin,
        //  opacity:0
        // },
        // duration: 100, //ms
        // timingFunction: 'ease',
        // }, ()=> {
        //  this.status = false
        //    console.log('动画执行结束');
        // })
        // #endif
        
        this.status = false
      
      }
    }
  }
</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>

底部聊天框问题

/pages/chat/chat/chat.nvue

<template>
  <view>
    <!-- 导航栏 -->
    <free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack>
      <free-icon-button slot="right" @click="openChatSet"><text class="iconfont font-lg">&#xe6fd;</text>
      </free-icon-button>
    </free-nav-bar>
    <!-- 聊天内容区域 -->
    <scroll-view scroll-y class="bg-light position-fixed left-0 right-0 px-3"
      style="bottom: 105rpx;box-sizing: border-box;" :style="chatBodyBottom" :show-scrollbar="false"
      :scroll-into-view="scrollIntoView" :scroll-with-animation="true" @click="clickPage">
      <!-- 聊天信息列表组件 -->
      <view v-for="(item,index) in list" :key="index" :id="'chatItem_'+index">
        <free-chat-item :item="item" :index="index" ref="chatItem"
          :pretime=" index > 0 ? list[index-1].create_time : 0" @long="long" @preview="previewImage"
          :shownickname="currentChatItem.shownickname"></free-chat-item>
      </view>
    </scroll-view>
    <!-- #ifdef APP-PLUS-NVUE -->
    <div v-if="mode === 'action' || mode === 'emoticon'" class="position-fixed top-0 right-0 left-0"
      :style="'bottom:'+maskBottom+'px;'" @click="clickPage"></div>
    <!-- #endif -->
    <!-- 底部输入框 -->
    <view class="position-fixed left-0 right-0 border-top "
       :style="'bottom:'+KeyboardHeight+'px;'">
      <view class="flex align-center" style="background-color: #F7F7F6;height: 105rpx;">
        <free-icon-button v-if="mode === 'audio'" @click="changeVoiceOrText"><text
            class="iconfont font-lg">&#xe607;</text></free-icon-button>
        <free-icon-button v-else @click="changeVoiceOrText"><text class="iconfont font-lg">&#xe606;</text>
        </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" @touchcancel="voiceTouchCancel" @touchmove="voiceTouchMove">
            <text class="font">{{isRecording ? '松开 结束':'按住 说话'}}</text>
          </view>
        
          <textarea v-else fixed class="bg-white rounded p-2 font-md" style="height: 80rpx;max-width: 450rpx;"
            :adjust-position="false" v-model="text" @focus="focus" @blur="blur" />
        </view>
        <!-- 表情 -->
        <free-icon-button @click="openActionOrEmoticon('emoticon')"><text class="iconfont font-lg">&#xe605;</text>
        </free-icon-button>
        <template v-if="text.length === 0">
          <!-- 扩展菜单 -->
          <free-icon-button @click="openActionOrEmoticon('action')"><text class="iconfont font-lg">&#xe603;</text>
          </free-icon-button>
        </template>
        <view v-else class="flex-shrink">
          <!-- 发送按钮 -->
          <free-main-button name="发送" @click="send('text')"></free-main-button>
        </view>
      </view>
      
      <view v-if="mode==='emoticon' || mode ==='action'" style="height: 580rpx;" class="border-top border-light-secondary bg-light">
        <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>
    </view>
    <!-- 扩展菜单 -->
  <!--  <free-popup ref="action" bottom transformOrigin="center bottom" @hide="KeyboardHeight = 0" :mask="false">
      <view style="height: 580rpx;" class="border-top border-light-secondary bg-light">
        <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" :bodyWidth="240" :bodyHeight="450" :tabbarHeight="105">
      <view class="flex flex-column" style="width: 240rpx;" :style="getMenusStyle">
        <view class="flex-1 flex align-center" hover-class="bg-light" v-for="(item,index) in menusList"
          :key="index" @click="clickEvent(item.event)">
          <text class="font-md pl-3">{{item.name}}</text>
        </view>
      </view>
    </free-popup>
    <!-- 录音提示 -->
    <view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center"
      style="bottom: 105rpx;">
      <view style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);"
        class="rounded flex flex-column align-center justify-center">
        <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-PLUS-NVUE
  const dom = 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 freeMainButton from '@/components/free-ui/free-main-button.vue';
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import auth from '@/common/mixin/auth.js';
  import $U from '@/common/free-lib/util.js';
  import $H from '@/common/free-lib/request.js';
  import $C from '@/common/free-lib/config.js';
  export default {
    mixins: [auth],
    components: {
      freeNavBar,
      freeIconButton,
      freeChatItem,
      freePopup,
      freeMainButton
    },
    data() {
      return {
        scrollIntoView: "",
        // 模式 text输入文字,emoticon表情,action操作,audio音频
        mode: "text",
        // 扩展菜单列表
        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: "openFava"
          }, {
            name: "名片",
            icon: "/static/images/extends/man.png",
            event: "sendCard"
          }, {
            name: "语音通话",
            icon: "/static/images/extends/phone.png",
            event: ""
          }, {
            name: "位置",
            icon: "/static/images/extends/path.png",
            event: ""
          }]
        ],
        emoticonList: [],
        // 键盘高度
        KeyboardHeight: 0,
        menusList: [],
        navBarHeight: 0,
        list: [],
        // 当前操作的气泡索引
        propIndex: -1,
        // 输入文字
        text: "",
        // 音频录制状态
        isRecording: false,
        RecordingStartY: 0,
        // 取消录音
        unRecord: false,
        detail: {
          id: 0,
          name: "",
          avatar: "",
          chat_type: "user"
        },
        isfocus:false
      }
    },
    mounted() {
      var statusBarHeight = 0
      // #ifdef APP-PLUS-NVUE
      statusBarHeight = plus.navigator.getStatusbarHeight()
      // #endif
      this.navBarHeight = 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
          })
        }
      })
      this.pageToBottom()
    },
    computed: {
      ...mapState({
        chatList: state => state.user.chatList,
        RECORD: state => state.audio.RECORD,
        RecordTime: state => state.audio.RecordTime,
        chat: state => state.user.chat,
        totalNoreadnum: state => state.user.totalNoreadnum,
        user: state => state.user.user
      }),
      // 当前会话配置信息
      currentChatItem() {
        let index = this.chatList.findIndex(item => item.id === this.detail.id && item.chat_type === this.detail
          .chat_type)
        if (index !== -1) {
          return this.chatList[index]
        }
        return {}
      },
      // 获取蒙版的位置
      maskBottom() {
        let h = this.mode !== 'emoticon' || this.mode === 'action' ? uni.upx2px(685) : uni.upx2px(105)
        if(this.isfocus){
          h = this.KeyboardHeight + uni.upx2px(105)
        }
        return this.KeyboardHeight + h
      },
      // 动态获取菜单高度
      getMenusHeight() {
        let H = 100
        return this.menusList.length * H
      },
      // 获取菜单的样式
      getMenusStyle() {
        return `height: ${this.getMenusHeight}rpx;`
      },
      // 判断是否操作本人信息
      isdoSelf() {
        // 获取本人id(假设拿到了)
        let id = 1
        let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0
        return user_id === id
      },
      // 聊天区域bottom
      chatBodyBottom() {
        let h = this.mode !== 'emoticon' || this.mode === 'action' ? uni.upx2px(685) : uni.upx2px(105)
        if(this.isfocus){
          h = this.KeyboardHeight + uni.upx2px(105)
        }
        return `bottom:${h}px;top:${this.navBarHeight}px;`
      },
      // 获取操作或者表情列表
      emoticonOrActionList() {
        return (this.mode === 'emoticon' || this.mode === 'action') ? this[this.mode + 'List'] : []
      },
      // 所有信息的图片地址
      imageList() {
        let arr = []
        this.list.forEach((item) => {
          if (item.type === 'emoticon' || item.type === 'image') {
            arr.push(item.data)
          }
        })
        return arr
      }
    },
    watch: {
      mode(newValue, oldValue) {
        if (newValue !== 'text') {
          this.KeyboardHeight = 0;
          this.isfocus = false;
          uni.hideKeyboard()
        }
      }
    },
    onLoad(e) {
      if (!e.params) {
        return this.backToast()
      }
      this.detail = JSON.parse(decodeURIComponent(e.params))
      //console.log(this.detail);
      // 初始化
      this.__init()
      // 创建聊天对象
      this.chat.createChatObject(this.detail)
      // 获取历史记录
      this.list = this.chat.getChatDetail()
      // 监听接收聊天信息
      uni.$on('onMessage', this.onMessage)
      uni.$on('updateHistory', this.updateHistory)
      // 监听发送收藏和名片
      uni.$on('sendItem', this.onSendItem)
    },
    destroyed() {
      // 销毁聊天对象
      this.chat.destoryChatObject()
      // 销毁监听接收聊天消息
      uni.$off('onMessage', this.onMessage)
      uni.$off('updateHistory', this.updateHistory)
      uni.$off('sendItem', this.onSendItem)
    },
    methods: {
      ...mapMutations(['regSendVoiceEvent']),
      onSendItem(e) {
        if (e.sendType === 'fava' || e.sendType === 'card') {
          this.send(e.type, e.data, e.options)
        }
      },
      updateHistory(isclear = true) {
        if (isclear) {
          this.list = []
        } else {
          this.list = this.chat.getChatDetail()
        }
      },
      onMessage(message) {
        //console.log('[聊天页] 监听接收聊天信息', message);
        if ((message.from_id === this.detail.id && message.chat_type === 'user') || (message.chat_type ===
            'group' && message.to_id === this.detail.id)) {
          if (message.isremove !== 1) {
            this.list.push(message)
            // 置于底部
            return this.pageToBottom()
          }
          // 撤回消息
          let index = this.list.findIndex(item => item.id === message.id)
          if (index !== -1) {
            this.list[index].isremove = 1
          }
        }
      },
      __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;
        // var total = 20
        // 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++) {
        //    var no = start + j
        //    if ((no+1) > total) {
        //      continue;
        //    }
        //    arr[i].push({
        //      name:"表情"+no,
        //      icon: $C.emoticonUrl + no +'.gif',
        //      event:"sendEmoticon"
        //    })
        //  }
        // }
        // this.emoticonList = arr
        // 初始化会话列表
        this.chat.initChatListItem({
          chat_type: this.detail.chat_type,
          to_id: this.detail.id,
          to_name: this.detail.name,
          to_avatar: this.detail.avatar,
          data: this.detail.chat_type === 'user' ? '你们已经是好友,可以开始聊天了' : '你已经加入群聊,可以开始聊天了'
        })
      },
      // 打开扩展菜单或者表情包
      openActionOrEmoticon(mode = 'action') {
        this.mode = mode
        this.$refs.action.show()
        uni.hideKeyboard()
        this.KeyboardHeight = uni.upx2px(580)
      },
      // 发送
      send(type, data = '', options = {}) {
        // 组织数据格式
        switch (type) {
          case 'text':
            data = data || this.text
            break;
        }
        let message = this.chat.formatSendData({
          type,
          data,
          options
        })
        // 渲染到页面
        let index = this.list.length
        this.list.push(message)
        // 监听上传进度
        let onProgress = false
        if (message.type !== 'text' && message.type !== 'emoticon' && message.type !== 'card' && !message.data
          .startsWith('http')) {
          onProgress = (progress) => {
            // //console.log('上传进度:', progress);
          }
        }
        // 发送到服务端
        this.chat.send(message, onProgress).then(res => {
          //console.log(res);
          // 发送成功
          this.list[index].id = res.id
          this.list[index].data = res.data;
          this.list[index].sendStatus = 'success'
        }).catch(err => {
          // 发送失败
          this.list[index].sendStatus = 'fail'
          //console.log(err);
        })
        // 发送文字成功,清空输入框
        if (type === 'text') {
          this.text = ''
        }
        // 置于底部
        this.pageToBottom()
      },
      // 回到底部
      pageToBottom() {
        setTimeout(() => {
        // #ifdef APP-PLUS-NVUE
        let chatItem = this.$refs.chatItem
        if(chatItem){
          let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0
          if (chatItem[lastIndex]) {
            dom.scrollToElement(chatItem[lastIndex], {})
          }
        }
        // #endif
        // #ifndef APP-NVUE
        let lastIndex = this.list.length - 1
        this.scrollIntoView = 'chatItem_' + lastIndex
        // #endif
        }, 300)
      },
      // 长按消息气泡
      long({
        x,
        y,
        index
      }) {
        // 初始化 索引
        this.propIndex = index
        // 组装菜单
        let menus = [{
          name: "发送给朋友",
          event: 'sendToChatItem'
        }, {
          name: "收藏",
          event: 'fava'
        }, {
          name: "删除",
          event: 'delete'
        }]
        let item = this.list[this.propIndex]
        let isSelf = this.user.id === item.from_id
        if (isSelf) {
          menus.push({
            name: "撤回",
            event: 'removeChatItem'
          })
        }
        // #ifndef H5
        if (item.type === 'text') {
          menus.unshift({
            name: "复制",
            event: 'copy',
          })
        }
        // #endif
        this.menusList = menus
        // 显示扩展菜单
        this.$refs.extend.show(x, y)
      },
      // 操作菜单方法分发
      clickEvent(event) {
        let item = this.list[this.propIndex]
        let isSelf = this.user.id === item.from_id
        switch (event) {
          case 'removeChatItem': // 撤回消息
            // 拿到当前被操作的信息
            this.chat.recall(item).then(res => {
              item.isremove = 1
            })
            break;
          case 'sendToChatItem':
            uni.navigateTo({
              url: '../chat-list/chat-list?params=' + encodeURIComponent(JSON.stringify(item)),
            });
            break;
          case 'copy': // 复制
            uni.setClipboardData({
              data: item.data,
              success: () => {
                uni.showToast({
                  title: '复制成功',
                  icon: 'none'
                });
              }
            });
            break;
          case 'delete':
            uni.showModal({
              content: '是否要删除该记录?',
              success: (res) => {
                if (!res.confirm) return;
                this.chat.deleteChatDetailItem(item, isSelf)
                this.list.splice(this.propIndex, 1)
                // 删除最后一条消息
                if (this.list.length === this.propIndex) {
                  this.chat.updateChatItem({
                    id: this.detail.id,
                    chat_type: this.detail.chat_type
                  }, (v) => {
                    let o = this.list[this.propIndex - 1]
                    let data = ''
                    if (o) {
                      data = this.chat.formatChatItemData(o, isSelf)
                    }
                    v.data = data
                    return v
                  })
                }
              }
            });
            break;
          case 'fava': // 加入收藏
            uni.showModal({
              content: '是否要加入收藏?',
              success: (res) => {
                if (res.confirm) {
                  $H.post('/fava/create', {
                    type: item.type,
                    data: item.data,
                    options: JSON.stringify(item.options)
                  }).then(res => {
                    uni.showToast({
                      title: '加入收藏成功',
                      icon: 'none'
                    });
                  })
                }
              }
            });
            break;
        }
        // 关闭菜单
        this.$refs.extend.hide()
      },
      // 扩展菜单
      actionEvent(e) {
        switch (e.event) {
          case 'uploadImage': // 选择相册
            uni.chooseImage({
              count: 9,
              success: (res) => {
                // 发送到服务器
                // 渲染到页面
                res.tempFilePaths.forEach((item) => {
                  this.send('image', item)
                })
              }
            })
            break;
          case 'uploadVideo': // 发送短视频
            uni.chooseVideo({
              maxDuration: 10,
              success: (res) => {
                this.send('video', res.tempFilePath)
                // 渲染页面
                // 发送到服务端(获取视频封面,返回url)
                // 修改本地的发送状态
              }
            })
            break;
          case 'sendEmoticon': // 发送表情包
            this.send('emoticon', e.icon)
            break;
          case 'openFava': // 发送收藏
            uni.navigateTo({
              url: '../../my/fava/fava?type=send',
            });
            break;
          case 'sendCard': // 发送名片
            uni.navigateTo({
              url: '../../mail/mail/mail?type=sendCard&limit=1',
            });
            break;
        }
      },
      // 点击页面
      clickPage() {
        this.mode = ''
      },
      // 预览图片
      previewImage(url) {
        uni.previewImage({
          current: url,
          urls: this.imageList,
          indicator: "default"
        })
      },
      // 切换音频录制和文本输入
      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) {
        let Y = Math.abs(e.changedTouches[0].screenY - this.RecordingStartY)
        this.unRecord = (Y >= 50)
      },
      // 打开聊天信息设置
      openChatSet() {
        uni.navigateTo({
          url: '../chat-set/chat-set?params=' + JSON.stringify({
            id: this.detail.id,
            chat_type: this.detail.chat_type
          }),
        });
      },
      focus(e){
        this.mode = 'text';
        this.isfocus = true;
        this.KeyboardHeight = e.detail.height;
      },
      blur(){
        this.KeyboardHeight = 0;
        this.isfocus = false;
      }
    }
  }
</script>
<style>
</style>

感谢大家观看,我们下次见

目录
相关文章
|
11天前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
116 3
|
11天前
|
iOS开发 开发者
一键制作 iOS 上架 App Store 描述文件教程
一键制作 iOS 上架 App Store 描述文件教程
|
11天前
|
iOS开发 开发者
苹果iOS App Store上架操作流程详解:从开发者账号到应用发布
很多开发者在开发完iOS APP、进行内测后,下一步就面临上架App Store,不过也有很多同学对APP上架App Store的流程不太了解,下面我们来说一下iOS APP上架App Store的具体流程,如有未涉及到的部分,大家可以及时咨询,共同探讨。
|
11天前
|
安全 数据安全/隐私保护 iOS开发
iOS App 上架流程图文教学
在上架App 之前必须先准备好开发者帐号,但申请开发者帐号因法兰克早在之前已经申请好了,故就跳过此步骤,直接从产生凭证到上传App开始讲起。首先,要将自己辛苦写好的App 送审的话,则要依序做完下列几件事情即可。
|
11天前
|
Android开发 iOS开发 开发者
App备案-iOS云管理式证书 Distribution Managed 公钥及证书SHA-1指纹的获取方法
App备案-iOS云管理式证书 Distribution Managed 公钥及证书SHA-1指纹的获取方法
166 0
|
3天前
|
移动开发 网络协议 Linux
We discovered one or more bugs in your app when reviewed on iPhone and iPad running iOS 14.1
We discovered one or more bugs in your app when reviewed on iPhone and iPad running iOS 14.1
6 0
|
5天前
|
大数据 测试技术 数据库
ios app性能分析
ios app性能分析
14 2
|
5天前
|
iOS开发 网络架构 UED
ios app的分类与本质,感想
ios app的分类与本质,感想
8 0
|
11天前
|
开发者 iOS开发
iOS App上架新规解析:如何进行App备案
iOS App上架新规解析:如何进行App备案
313 0
|
11天前
|
iOS开发 开发者
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题