uni-app全栈仿微信开源项目系列(二)

7.聊天页开发

这个模块很有意思，组件比较多，功能比较复杂，很好玩。

7.1 聊天页导航开发

思路：

1. 创建组件文件

2. 配置pages.json页面信息

   {
       "path": "pages/chat/chat/chart",
       "style": {}
   }
   

3. 在free-media-list.vue组件中绑定点击事件跳转到聊天页

   onClick() {
       uni.navigateTo({
           url: '/pages/chat/chat/chart'
       })
   },
   

4. 开发聊天页的导航栏

7.2 聊天页底部输入框开发

chart.nvue

    
    
            </view>
    <free-icon-button slot="right" :iconValue="'\ue605'" />
    <free-icon-button slot="right" :iconValue="'\ue603'" />
</view>
</code></pre>
<h3 id="73-聊天内容区域开发">7.3 聊天内容区域开发</h3>
<p><code>scroll-view</code>搭建聊天内容区域。</p>
<pre><code class="language-html"><!-- 聊天内容区域 -->
<scroll-view scroll-y class="bg-warning position-fixed left-0 right-0" style="bottom: 105rpx;" :style="`top: ${navBarHeight}px`">
    <view v-for="item in 20" style="height: 200rpx;" class="border-bottom">
        <text class="text-white  font-lg">{{item}}</text>
    </view>
</scroll-view>
</code></pre>
<p>通过JS动态计算导航栏高度以适应scroll-view的固定定位。</p>
<pre><code class="language-js">mounted() {
    // NVUE环境下获取系统状态栏的高度
    // #ifdef APP-NVUE
    let statusBarHeight = plus.navigator.getStatusbarHeight()
    // #endif
    this.navBarHeight = statusBarHeight + uni.upx2px(90)
},
</code></pre>
<h3 id="74-聊天气泡组件开发">7.4 聊天气泡组件开发</h3>
<p>uni-app中<code>block</code>和<code>template</code>的区别：</p>
<blockquote>
<p><code>uni-app</code> 支持在 template 模板中嵌套 <code><template/></code> 和 <code><block/></code>，用来进行 列表渲染 和 条件渲染。</p>
<p><code><template/></code> 和 <code><block/></code> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。</p>
<p><code><block/></code> 在不同的平台表现存在一定差异，推荐统一使用 <code><template/></code>。</p>
</blockquote>
<p>封装聊天气泡组件</p>
<p>封装前：<code>chat/chat.nvue</code></p>
<pre><code class="language-html"><template>
	<view>
		<!-- 导航栏 -->
		<free-nav-bar title titleValue="CTO" showBack>
			<free-icon-button slot="right" :iconValue="'\ue6fd'" />
		</free-nav-bar>

		<!-- 聊天内容区域 -->
		<scroll-view scroll-y class="position-fixed left-0 right-0 px-3" style="bottom: 105rpx;" :style="'top:'+ navBarHeight +'px'">
			<!-- 聊天信息列表组件 -->
			
			<template v-for="(item, index) in list" >
				<view ref="renderdDom" :key="index" class="flex position-relative mb-3" :class="item.user_id===1?'align-start justify-end ':'align-start justify-start'">
					<free-avatar size="70" :src="item.avatar" v-if="item.user_id!==1"/>
					<!-- 箭头图标 -->
					<text 
						class="iconfont font-md position-absolute" :class="item.user_id===1?'text-chat-item chat-right-icon':'text-white chat-left-icon'"
					>{{item.user_id===1?'':''}}</text>
					<div 
					class="p-2 rounded"
				  style="max-width: 500rpx;"
					:class="item.user_id===1?'mr-3 bg-chat-item':'ml-3 bg-white'"
					>
						<text class="font-md">{{item.data}}</text>
					</div>
					<free-avatar size="70" :src="item.avatar" v-if="item.user_id===1"/>
				</view>
			</template>
		</scroll-view>

		<!-- 底部输入框部分 -->
		<view class="position-fixed bottom-0 left-0 right-0 flex border-top align-center" style="height: 105rpx;background-color: #F7F7F6;">
			<free-icon-button slot="right" :iconValue="'\ue606'" />
			<view class="flex-1">
				<textarea fixed class="bg-white rounded p-2 font-md" style="height: 75rpx;" />
				</view>
			<free-icon-button slot="right" :iconValue="'\ue605'" />
			<free-icon-button slot="right" :iconValue="'\ue603'" />
		</view>
	</view>
</template>

<script>
import FreeNavBar from '@/components/free-ui/free-nav-bar.vue'
import FreeIconButton from '@/components/free-ui/free-icon-button.vue'
import FreeAvatar from '@/components/free-ui/free-avatar.vue'
export default {
  name: 'ChatIndex',
  components: {
		FreeNavBar,
		FreeIconButton,
		FreeAvatar
	},
  props: {},
  data () {
    return {
			statusBarHeight: 0,	// 系统状态栏高度
			navBarHeight: 0,		// 导航栏高度
			list: [
				{
					avatar: "/static/images/demo/demo6.jpg",
					user_id: 2,		// 用户自己
					nickname: "寻找阿诺泰的猪",
					type: "text",	// image、audio、video
					data: '1111'
				},
				{
					avatar: "/static/images/demo/demo5.jpg",
					user_id: 1,		// 用户自己
					nickname: "Alexander",
					type: "text",	// image、audio、video
					data: '2222'
				}
			]
		}
  },
  computed: {},
  watch: {},
  created () {},
	mounted() {
		// NVUE环境下获取系统状态栏的高度
		// #ifdef APP-NVUE
		this.statusBarHeight = plus.navigator.getStatusbarHeight()
		// #endif
		this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
	},
  methods: {}
}
</script>

<style scoped lang="less">
</style>

</code></pre>
<p>封装后：<code>free-chat-item.vue</code></p>
<pre><code class="language-html"><template>
  <view :key="index" class="flex position-relative mb-3" :class="isSelf?'align-start justify-end ':'align-start justify-start'">
  	<free-avatar size="70" :src="item.avatar" v-if="!isSelf" />
  	<!-- 箭头图标 -->
  	<text 
  		class="iconfont font-md position-absolute" :class="isSelf?'text-chat-item chat-right-icon':'text-white chat-left-icon'"
  	>{{isSelf?'':''}}</text>
  	<div 
  	class="p-2 rounded"
    style="max-width: 500rpx;"
  	:class="isSelf?'mr-3 bg-chat-item':'ml-3 bg-white'"
  	>
  		<text class="font-md">{{item.data}}</text>
  	</div>
  	<free-avatar size="70" :src="item.avatar" v-if="isSelf"/>
  </view>
</template>

<script>
import FreeAvatar from '@/components/free-ui/free-avatar.vue'
export default {
  name: 'FreeChatItem',
  components: {
		FreeAvatar
	},
  props: {
		item: {
			type: Object,
			required: true
		},
		index: [Number, String],
		required: true
	},
  data () {
    return {}
  },
  computed: {
		// 利用计算属性减少模版的判断代码，例如v-if
		isSelf() {
			let id = 1;		// 假设用户本身的id为1
			return this.item.user_id === id
		}
	},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
	.chat-left-icon {
		left: 80rpx;
		top: 20rpx;
	}
	
	.chat-right-icon {
		right: 80rpx;
		top: 20rpx;
	}
</style>

</code></pre>
<p>使用组件<code>chat/chat.nvue</code></p>
<pre><code class="language-html"><!-- 聊天内容区域 -->
<scroll-view scroll-y class="position-fixed left-0 right-0 px-3" style="bottom: 105rpx;" :style="'top:'+ navBarHeight +'px'">
    <!-- 聊天信息列表组件 -->

    <template v-for="(item, index) in list" >
        <free-chat-item :item="item" :index="index"></free-chat-item>
    </template>
</scroll-view>
</code></pre>
<h3 id="75-聊天时间人性化处理">7.5 聊天时间人性化处理</h3>
<p>思路：</p>
<p>判断信息和上一条信息的时间差，如果时间差小于一个数则不显示时间，否则显示格式化后的时间。</p>
<p>时间戳在线转换工具</p>
<p>实现效果：</p>
<p></p>
<p>该功能依赖<code>/common/free-lib/time.js</code>库，具体的实现逻辑参考commit。</p>
<h3 id="76-长按信息弹出操作菜单">7.6 [*]长按信息弹出操作菜单</h3>
<p>思路：</p>
<ol>
<li>实现弹出层效果</li>
<li>优化弹出层的边界问题（额外计算并减去tabbar的高度）</li>
<li>优化长按事件（如果对非用户的聊天内容进行长按应该隐藏<code>撤回</code>功能）</li>
</ol>
<p>存在的BUG：</p>
<blockquote>
<p>希望实现的效果：</p>
<p>用户长按自己的聊天信息弹出层的菜单高度正常，安全边界也正常。</p>
<p>用户长按他人的聊天信息弹出层的<strong>菜单高度跟随弹出层的菜单数量进行变化</strong>，<strong>安全边界</strong>也正常。（现在这里有BUG，这2个问题都不正常。）</p>
</blockquote>
<p>以后抽时间再解决这个BUG！</p>
<h3 id="77-消息撤回功能实现">7.7 消息撤回功能实现</h3>
<pre><code class="language-html"><!-- 撤回消息 -->
<view 
      v-if="item.isRemove"
      ref="isRemove"
      class="flex align-center justify-center pb-4 pt-2 chat-animate"
      >
    <text class="font-sm text-light-muted">你撤回了一条信息</text>
</view>
</code></pre>
<p>给<code>chat/chat.nvue</code>的popup弹出层绑定事件</p>
<pre><code class="language-html"><!-- 弹出层 -->
<free-popup ref="popupRef" :bodyWidth="200" :bodyHeight="getMenusHeight" :tabbarHeight="105">
    <view class="flex flex-column" style="width: 240rpx;" :style="setMenusStyle">
        <view class="flex-1 flex align-center" hover-class="bg-light" v-for="(item,index) in setMenusList" :key="index" @click="handleMenuItemClick(item.event)">
            <text class="font-md p-3">{{item.name}}</text>
        </view>
    </view>
</free-popup>
</code></pre>
<pre><code class="language-js">// 监听聊天信息弹出菜单点击事件
handleMenuItemClick(e) {
    switch(e) {
        case 'removeChatItem':  // 撤回消息事件
            // 拿到当前操作的信息对象
            if(this.propIndex > -1) {
                this.list[this.propIndex].isRemove = true
            }
            break;
        default:
            break;
    }
    // 关闭弹出菜单
    this.$refs.popupRef.hide()
},
</code></pre>
<p>通过<code>watch</code>监听<code>isRemove</code>字段变化来增加动画效果</p>
<pre><code class="language-js">watch: {
    // 监听是否撤回消息
    'item.isRemove': {
        handler(newValue, oldValue) {
            // #ifdef APP-NVUE
            if(newValue) {
                const animation = weex.requireModule('animation')
                this.$nextTick(()=>{
                    animation.transition(this.$refs.isRemove, {
                        styles: {
                            opacity: 1
                        },
                        duration: 500,
                        timingFunction: 'ease',
                    },function(){
                        console.log("动画执行结束!")
                    })
                })
            }
            // #endif
        },
            immediate: true
    }
},
</code></pre>
<p>CSS代码</p>
<pre><code class="language-css">.chat-animate {
    /* #ifdef APP-NVUE */
    opacity: 0;
    /* #endif */
}
</code></pre>
<h3 id="78-解决键盘顶起窗口问题">7.8 [*]解决键盘顶起窗口问题</h3>
<p>解决思路：</p>
<ol>
<li>
<p>取消<code>textarea</code>键盘上推功能</p>
<p>在 textarea 添加<code>:adjust-position="false"</code>属性即可。</p>
</li>
<li>
<p>监听键盘高度变化，动态设置输入框高度</p>
<pre><code class="language-js">mounted() {
    // 监听键盘高度的动态变化
    uni.onKeyboardHeightChange(res => {
        this.KeyboardHeight = res.height
    })
}
</code></pre>
</li>
<li>
<p>动态设置滑动内容区域的高度</p>
<p><code>html代码</code></p>
<pre><code class="language-html"><!-- 聊天内容区域 -->
<scroll-view scroll-y class="position-fixed left-0 right-0 px-3" :style="setBodyBottom">
    <!-- 聊天信息列表组件 -->
    <template v-for="(item, index) in list" >
        <free-chat-item :item="item" :index="index" :pretime="index>0?list[index-1].create_time:0" @long="handleLongPress"></free-chat-item>
    </template>
</scroll-view>
</code></pre>
<p><code>js代码</code></p>
<pre><code class="language-js">// 设置内容区域高度的计算属性
setBodyBottom () {
    return `bottom: ${this.KeyboardHeight + uni.upx2px(105)}px;top: ${this.navBarHeight}px;`
},
</code></pre>
</li>
<li>
<p>取消内容区域的滚动条</p>
<p>给 scroll-view 标签添加 <code>:show-scrollbar="false"</code>属性即可。</p>
</li>
</ol>
<blockquote>
<p>BUG：弹出键盘后，用户长按聊天信息，显示弹出层后弹出层的边界会失效，可能是弹出层的边界没有随着内容区域高度的变化而变化，后续再花时间研究优化。</p>
</blockquote>
<h3 id="79-聊天内容滚动到底部">7.9 聊天内容滚动到底部</h3>
<p>键盘弹起的时候，页面内容默认不会自动滚动到底部，这样用户需要手动将内容滑动到底部才能看到最后一条信息，然后做出对应的回复，这样的体验不是很好，怎么优化呢？这里的思路就是通过 <code>scrollToElement</code> API实现。</p>
<p>这个API存在兼容性，只支持 weex 渲染的nvue模式，具体参考官方文档</p>
<pre><code class="language-js"><script>
	// #ifdef APP-PLUS-NVUE
	const dom = weex.requireModule('dom')
	// #endif
	export default {
		mounted() {
			// 监听键盘高度变化
			uni.onKeyboardHeightChange(res => {
			  this.KeyboardHeight = res.height 
			  if (this.KeyboardHeight > 0) {
			  	this.pageToBottom()
			  }
			})
		},
		methods: {
			// 回到底部
			pageToBottom(){
				let chatItem = this.$refs.chatItem
				let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0
				if (chatItem[lastIndex]) {
					dom.scrollToElement(chatItem[lastIndex],{})
				}
			}
		}
	}
</script>
</code></pre>
<h3 id="710-发送文字功能实现">7.10 发送文字功能实现</h3>
<p>思路：</p>
<p>1、发送按钮绑定点击事件<br>
2、构建数据对象<br>
3、判断是否是text文本数据类型<br>
4、验证通过后将数据push到聊天信息列表中<br>
5、清空输入框<br>
6、滚动到最底部</p>
<p><code>chat/chat.nvue</code></p>
<pre><code class="language-js">// 发送聊天信息
send(type) {
    let chatObj = {
        avatar: "/static/images/demo/demo5.jpg",
        user_id: 1,
        nickname: "伤心的瘦子",
        type: "",	// image、audio、video
        data: this.text,
        create_time: Date.now(),
        isRemove: false
    }
    switch(type) {
        case 'text':
            chatObj.type = type
            this.text = ""
            break
    }
    this.list.push(chatObj)
    this.$nextTick(_=>{
        this.setPageToBottom()
    })
}
</code></pre>
<h3 id="711-底部菜单开发">7.11 底部菜单开发</h3>
<p>思路：</p>
<ol>
<li>
<p>编写底部拓展菜单的弹出层</p>
</li>
<li>
<p>开启拓展菜单弹出层的时候需要将<code>KeyboardHeight</code>值重新赋值，单位是<code>px</code>，因此需要使用<code>uni.upx2px</code>进行转换，关闭弹出层的时候重置<code>KeyboardHeight</code>的值</p>
</li>
<li>
<p>在弹出层内添加swiper组件，遍历列表数据动态生成swiper中的菜单内容</p>
</li>
<li>
<p>解决底部操作条弹出的键盘与拓展菜单冲突的问题</p>
<p>问题细节：</p>
<ol>
<li>当底部输入框获取焦点弹出键盘后，此时点击打开拓展菜单会有BUG，拓展菜单被键盘覆盖</li>
<li>点击拓展菜单按钮或点击蒙版关闭拓展菜单后键盘没有自动关闭</li>
<li>在没有弹起键盘的情况下打开拓展菜单，然后点击输入框希望弹起键盘，此时却直接关闭了拓展菜单</li>
</ol>
<p>针对上面的问题，这里引入<code>模式</code>的概念，用户不可能同时输入文字、语音、表情包、拓展菜单中的功能信息，我们需要通过输入模式来区分用户每次要输入的信息类型，一次只能输入一种模式，以此来实现合理切换功能。</p>
<p>该业务支持以下模式：</p>
<ol>
<li>text 输入文本</li>
<li>emoticon 表情</li>
<li>action 操作扩展菜单</li>
<li>audio 音频</li>
</ol>
<p>默认的模式为<code>text</code>，打开拓展菜单的时候将模式改变为<code>action</code>模式；</p>
<p>由于监听键盘高度变化的<code>uni.onKeyboardHeightChange</code>API是异步执行的，当你使用<code>uni.hideKeyboard</code>API收起键盘的时候，此时会触发<code>uni.onKeyboardHeightChange</code>API，正因为这个API是异步执行的，所以会优先执行<code>this.KeyboardHeight = uni.upx2px(580)</code>，然后会执行<code>this.KeyboardHeight = res.height</code>，此时res.height为0，因此底部输入框状态栏出不来，因此这里要加判断了。</p>
<p><code>methods的代码</code></p>
<pre><code class="language-js">// 底部拓展菜单展示
handleExtandMenuShow() {
    this.mode = 'action',  // 修改模式为操作拓展菜单的模式
    // 收起键盘,此时键盘高度为0
    uni.hideKeyboard()
    // 显示拓展菜单
    this.$refs.extendMenuRef.show()
    this.KeyboardHeight = uni.upx2px(580)
},
</code></pre>
<p><code>mounted时的代码</code></p>
<pre><code class="language-js">// 监听键盘高度的动态变化
uni.onKeyboardHeightChange(res => {
    console.log("键盘高度发生变化：", res.height)
    if(this.mode!=='action') {
        // 不为操作拓展菜单模式的时候才动态赋值
        this.KeyboardHeight = res.height
    }
    if(res.height>0) {
        this.$nextTick(_=>{
            this.setPageToBottom()
        })
    }
})
</code></pre>
<p>这个时候又会出现一个新问题，用户点击输入框 => 弹起键盘 => 打开拓展菜单 => 关闭拓展菜单 => 再次点击输入框就会发现底部输入框导航栏又不见了。。。</p>
<p>解决方法：</p>
<ol>
<li>关闭底部拓展菜单的时候让<code>textarea</code>输入框失焦</li>
<li>点击<code>textarea</code>的时候配置获取焦点事件<code>@focus="mode='text'"</code></li>
</ol>
<p>其他的几个bug直接看commit找解决方法。</p>
</li>
<li>
<p>nvue给<code>scroll-view</code>绑定点击事件后无效，微信小程序却可以，很奇怪。。。</p>
<p>解决的思路就是在底部输入框导航栏的同层级前面放一层div并且设置固定定位，背景颜色透明，</p>
<p>然后绑定点击事件，点击事件触发后关闭底部的拓展菜单。</p>
<pre><code class="language-html"><!-- 针对nvue环境下的蒙版层 -->
<!-- #ifdef APP-NVUE -->
<div 
     v-if="mode === 'action'" 
     class="position-fixed top-0 left-0 right-0 bottom-0" 
     @click="clickPage"
     :style="'bottom:'+maskBottom+'px'"
     ></div>
<!-- #endif -->

</code></pre>
<pre><code class="language-js">computed: {
    // 计算蒙版距离底部的位置
    maskBottom() {
        return this.KeyboardHeight + uni.upx2px(105)
    },
}

</code></pre>
<blockquote>
<p>由于nvue使用的原生渲染引擎是weex，又因为weex的渲染是从上到下的，后面定位的元素会覆盖前面的元素，v-if条件生效的时候，元素会被插入底部，此时会覆盖输入框导航条部分的<code>position: fixed</code>，因此就造成了点击拓展菜单的时候看不见底部输入框部分了，此时就需要动态设置高度了。</p>
</blockquote>
<p>这个聊天页面底部输入框部分的交互是有点难度的，逻辑比较多，要注意的细节也比较多，需要细心思考，多看commit的代码理解吧。</p>
</li>
<li>
<p>表情包开发</p>
<p>核心代码</p>
<pre><code class="language-js">// 初始化表情包数据列表函数
__init() {
    // 一共有20张表情包，因此total = 20
    var total = 20
    // 每个swiper-item里面有8张表情包，page为计算出来的总页数,此处为3
    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
            console.log(no)
            if ((no+1) > total) {
                break;
            }
            arr[i].push({
                name: '表情' + no,
                icon: `/static/images/emoticon/5497/${no}.gif`,
                event: ""
            })
        }
    }
    this.emoticonList = arr
},

</code></pre>
<blockquote>
<p>arr数组的长度其实就是表情包的页数，第一个for循环就是用来生成表情包的页数的，第二个循环用来给表情包每页加入数据的。</p>
</blockquote>
<p>发送表情包功能开发流程：</p>
<p>1、给每项拓展菜单项绑定点击事件，传递数据，监听事件，通过<code>switch</code>做函数分发</p>
<p></p>
<p></p>
<p></p>
<p>2、在<code>free-chat-item.vue</code>子组件中进行修改结构和样式</p>
<p>先看一下传递过来的item表情包数据长是什么样子。</p>
<p></p>
<p>首先得在组件中增加一个显示表情包的<code>image</code>标签。</p>
<p></p>
<p></p>
<p>3、通过计算属性处理气泡样式</p>
<p></p>
<p>此时就搞定了。</p>
</li>
<li>
<p>发送图片功能</p>
<p>关键就是调用<code>uni.chooseImage</code>API。</p>
<p>点击拓展菜单的相册，调用API让用户打开相册选择图片，然后渲染到页面中。</p>
<p></p>
<p>在组件中修改条件判断</p>
<p></p>
</li>
<li>
<p>预览图片保存相册功能</p>
<p>给图片标签绑定点击事件，点击后将该图像数据传递给父组件，父组件中通过<code>uni.previewImage</code>打开图片预览功能。</p>
<p></p>
<p></p>
<p></p>
<p></p>
</li>
<li>
<p>封装图片加载组件</p>
<p>解决nvue模式下<code>max-width、max-height</code>CSS属性不生效的问题，通过JavaScript动态计算最大宽度和高度。</p>
<p><code>free-image.vue</code></p>
<pre><code class="language-html"><template>
	<image 
		:class="imageClass" 
		:src="src" 
		:style="setImageStyle"
		@click="$emit('click')"
		@load="loadImage"
	></image>
</template>

<script>
export default {
  name: 'FreeImage',
  components: {},
  props: {
		// 图片路径地址
		src: {
			type: String,
			required: true
		},
		// 样式类名
		imageClass: {
			type: String,
			required: true
		},
		// 最大宽度
		maxWidth: {
			type: [Number, String],
			default: 500
		},
		// 最大高度
		maxHeight: {
			type: [Number, String],
			default: 300
		}
	},
  data () {
		return {
			w: 100,
			h: 100
		}
  },
  computed: {
		// 计算图片的高度和宽度样式
		setImageStyle() {
			return `width: ${this.w}px; height: ${this.h}px;`
		}
	},
  watch: {},
  created () {
	},
  mounted () {},
  methods: {
		loadImage(e) {
			console.log("loadImage", e)
			let w = e.detail.width
			let h = e.detail.height
			
			// 最大高度作为基准的写法
			let maxW = uni.upx2px(this.maxWidth)
			let maxH = uni.upx2px(this.maxHeight)
			if (h <= maxH) {
				this.h = h
				this.w = w <= maxW ? w : maxW
				return
			}
			this.h = maxH
			// 计算等比例的最大宽度，赋值给w2变量
			let w2 = maxH * (w / h)
			// 如果等比例最大宽度小于之前定义的最大宽度则使用w2，否则使用之前定义的最大宽度
			this.w = w2 <= maxW ? w2 : maxW
		}
	}
}
</script>

<style scoped lang="less"></style>
</code></pre>
</li>
</ol>
<h3 id="712-音频功能开发">7.12 音频功能开发</h3>
<blockquote>
<p>这块的功能比较复杂，多思考吧。</p>
</blockquote>
<h4 id="7121-语音播放功能开发">7.12.1 语音播放功能开发</h4>
<p>添加音频标签结构</p>
<pre><code class="language-html"><view v-else-if="item.type === 'audio'" class="flex align-center" @click="openAudio">
    <text class="font">300'</text>
</view>
</code></pre>
<pre><code class="language-js">// 播放音频函数
openAudio() {
    // 创建音频对象
    const innerAudioContext = uni.createInnerAudioContext();
    // 设置音频播放地址
    innerAudioContext.src = this.item.data;
    // 播放音频
    innerAudioContext.play()
}
</code></pre>
<p>解决返回页面不销毁音频的Bug。</p>
<p></p>
<h4 id="7122-多语音播放切换功能开发">7.12.2 多语音播放切换功能开发</h4>
<p><strong>在nvue中使用vuex。</strong></p>
<p>必看！！！nvue和vue中使用Vuex有部分差异，详细内容参考官网资料：</p>
<p>https://uniapp.dcloud.io/nvue-api?id=sharevar</p>
<p>多语音播放切换功能的开发需要使用到Vuex，因此我们需要在nvue项目中引入Vuex，下面是引入步骤：</p>
<p>在项目根目录创建<code>store</code>文件夹，然后在<code>store</code>文件夹中创建<code>index.js</code>文件，然后在<code>main.js</code>中引入并注册。</p>
<p></p>
<p></p>
<p>这个项目中对Vuex进行模块拆分，语音模块的状态单独使用<code>audio.js</code>文件来保存。</p>
<p>思考一个问题：</p>
<p>下面的图片中，有3个音频，如果用户点了第一个音频之后，音频就会开始播放，此时用户再点击第二个、第三个音频，这2个音频也会同时播放，导致3个音频都会同时播放，这样肯定是不行的，我们期待的效果是，用户点击第一个音频，音频播放，点击第二个音频，其他的音频都停止播放，只播放当前点击的音频。</p>
<p></p>
<p>如何解决这个问题？</p>
<p>思路：</p>
<p>音频开始播放的时候，通知<code>vuex</code>，将其他的音频全部停止。</p>
<blockquote>
<p>关于Vue的actions，记住一句话：</p>
<p>actions是异步修改仓库的数据，并且依赖于mutations。</p>
</blockquote>
<p>这一块的具体逻辑直接参考commit提交记录。</p>
<h4 id="7123-音频播放动画效果">7.12.3 音频播放动画效果</h4>
<p>由于没有现成的gif动画图片，我们要手动合成gif，gif在线合成网站</p>
<p><code>语音结构部分代码</code></p>
<p></p>
<blockquote>
<p>这里通过<code>audioPlaying</code>状态来控制image标签的src地址是否为gif图，true的时候显示gif，否则显示静止的图片。</p>
</blockquote>
<p>当语音开始播放的时候，我们就需要将这个状态改为true了，不为播放状态的时候将其改为false。</p>
<p></p>
<p>这样就实现了语音播放动画效果的功能了。</p>
<h3 id="713-短视频消息功能开发">7.13 短视频消息功能开发</h3>
<p>聊天页面只显示短视频的封面，用户点击封面图片应该跳转到视频播放页面进行播放。</p>
<p>这个功能需要注意以下的几个点：</p>
<ol>
<li>
<p>需要获取视频封面的宽高，可以通过<code>image</code>组件的<code>@load</code>的回调函数参数获取到</p>
</li>
<li>
<p>需要动态计算视频封面的播放按钮图标的坐标位置</p>
<p>计算思路：</p>
<p>拿到封面图片的宽高数据，减去播放按钮图标本身的宽高的一半再除以2就可以得出播放按钮图标水平垂直居中的坐标数据了。</p>
<p></p>
<p></p>
</li>
</ol>
<p>在视频页面需要动态获取屏幕高度信息用于设置视频高度，怎么获取呢？</p>
<p>使用<code>uni.getSystemInfoSync()</code>API来获取，需要的数据是<code>windowHeight</code>字段。</p>
<p><code>视频播放页面代码</code></p>
<pre><code class="language-html"><template>
    <view class="position-relative">
        <video :src="url" controls autoplay style="width: 750rpx;" :style="'height: ' + videoHeight + 'px;'" @ended="back"></video>
        <view 
              class="position-absolute flex justify-center align-center rounded" 
              style="top: 50rpx;left: 20rpx;width: 80rpx;height: 80rpx; background-color: rgba(255,255,255,0.3);"
              @click="back"
              >
            <!-- 关闭视频的按钮 -->
            <text class="iconfont text-white font-lg"></text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                videoHeight: 300,		// 视频高度
                url: ''		// 视频播放地址
            }
        },
        onLoad(params) {
            console.log("params: ", params)
            if(!params.url) {
                this.back()
                // 非法的url
                return uni.showToast({
                    title: '非法视频',
                    icon: 'none'
                });
            }
            this.url = params.url
            // 动态获取屏幕高度以便设置视频高度
            let res = uni.getSystemInfoSync()
            this.videoHeight = res.windowHeight		// 注意动态获取的屏幕高度的单位是px
        },
        methods: {
            // 返回上一级页面
            back() {
                uni.navigateBack({
                    delta: 1
                })
            }
        }
    }
</script>

<style scoped>

</style>
</code></pre>
<h3 id="714-处理音频时间和气泡长短">7.14 处理音频时间和气泡长短</h3>
<p>音频时间处理很容易，关键是气泡长度要怎么动态处理呢？</p>
<pre><code class="language-js">labelStyle() {
    // 只有类型为音频时才动态设置气泡样式
    if (this.item.type === 'audio') {
        let time = this.item.options.time || 0
        /* 
						下面代码解释：
							这里做个约定，气泡最小宽度150rpx，最大宽度500rpx;
							录制时间最大为60s;
							60/500为一个比例,计算公式为: parseInt(time) / width = 60 / 500,求width即可。
					 */
        let width = parseInt(time) / (60/500)
        width = width < 150 ? 150 : width
        return `width:${width}rpx;`
    }
}
</code></pre>
<h3 id="715-音频录制模块开发">7.15 音频录制模块开发</h3>
<h4 id="7151-音频录制和文本输入切换">7.15.1 音频录制和文本输入切换</h4>
<p>这个小功能还是很好实现的，通过mode判断类型然后渲染出不同的元素即可。</p>
<p><code>chat.nvue</code></p>
<p></p>
<p></p>
<h4 id="7152-录制状态动画显示">7.15.2 录制状态动画显示</h4>
<ol>
<li>
<p>首先给录音按钮添加<code>touch</code>事件，用于监听用户的手势操作。</p>
<p></p>
<p></p>
</li>
<li>
<p>编写录音提示弹出层</p>
<p></p>
<blockquote>
<p>根据<code>isRecording</code>判断是否显示录音弹出层，根据<code>isRecordCancel</code>判断是否取消录音</p>
</blockquote>
<p></p>
</li>
</ol>
<h4 id="7153-发送录音功能">7.15.3 发送录音功能</h4>
<p>首先通过<code>uni-app</code>官方的<code>uni.getRecorderManager()</code>API获取全局唯一的录音管理器。</p>
<p>官方API链接：https://uniapp.dcloud.io/api/media/record-manager?id=getrecordermanager</p>
<pre><code class="language-js">const RECORD = uni.getRecorderManager()
</code></pre>
<p></p>
<p></p>
<p>这是最简单的一个录音功能了，后期还要加上录音时常的限制，例如录音时间小于1s就不发送。</p>
<h4 id="7154-计算音频时长">7.15.4 计算音频时长</h4>
<p>由于<code>uni-app</code>没有提供计算录音时长的API，因此这里使用定时器简单实现。</p>
<pre><code class="language-js">// 监听录音开始
RECORD.onStart( _ => {
    this.recordTime = 0
    console.log("录音时长: ", this.recordTime)
    this.recordTimer = setInterval(_=>{
        this.recordTime++
    }, 1000)
})

// 监听录音结束
RECORD.onStop(e => {
    if(this.recordTimer) {
        clearInterval(this.recordTimer)
        this.recordTimer = null
    }
    if(this.recordTime < 1) {
        uni.showToast({
            title: '说话时间太短!',
            image: '/static/images/audio/kulian.png',
            mask:true
        })
        this.isRecordCancel = true
    }
    if(!this.isRecordCancel) {
        // 没有取消录音则发送录音
        this.send('audio', e.tempFilePath, {
            time: this.recordTime
        })
    }
})
</code></pre>
<h3 id="716-视频录制发送视频功能">7.16 视频录制&&发送视频功能</h3>
<p>用户点击拓展菜单的<code>拍摄</code>功能，既可以选择相册中的视频也可以调用摄像头拍摄视频。</p>
<p>给拓展菜单的拍摄按钮添加事件名称。</p>
<p></p>
<p>然后在<code>handleActionClick</code>函数中添加<code>switch...case</code>条件判断。</p>
<p></p>
						  
					  </div>
						<!--conend-->
							<div class="p-2"></div>

						<div class="arcinfo my-3 fs-7 text-center">
							
							
			<a href='/t/etagid2224-0.html' class='tagbtn' target='_blank'>uni-app</a><a href='/t/etagid72848-0.html' class='tagbtn' target='_blank'>高仿微信</a><a href='/t/etagid335-0.html' class='tagbtn' target='_blank'>vue.js</a><a href='/t/etagid26888-0.html' class='tagbtn' target='_blank'>nvue</a>							
						



						</div>
						
						<div class="p-2"></div>

						

						
					</div>
					<div class="p-2"></div>
					<!--xg-->
					<div class="lbox p-4 shadow-sm rounded-3">
						<div class="boxtitle"><h2 class="fs-4">相关</h2></div>
						
<hr>				
						
			<div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565139.html">uni-app技术分享| 10分钟实现一个简易uniapp视频通话</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-548560.html">vue.js 3.2.22：菜单每行依次滑动出现的动画</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-547140.html">初识Vue.js</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-542701.html">uni-app 微信小程序全局分享</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-542187.html">uni-app 地图全解析+事件监听</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-518991.html">uni-app爬坑之旅_开发一个自己的app_day47_主页面基本完成</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-529117.html">uni-app中使用uView组件库</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-519107.html">uni-app中使用uView组件库</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-515079.html">uni-app爬坑之旅_开发一个自己的app_day24_成功在app端运行云函数</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-514671.html">uni-app爬坑之旅_开发一个自己的app_day25_完成add.vue界面部分功能</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-491416.html">入坑uni-app第一天</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-476751.html">flowable 工作流 Springboot vue.js 整合框架项目源码</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div>            
            
            <!---->
                                    
           <!---->
  			
						

					</div>
					<!--xgend-->
				</div>

				<div class="col-lg-3 col-12 p-0 ps-lg-2">
					<!--box-->									
					<!--boxend-->
					<!--<div class="p-2"></div>-->

					<!--box-->
									<div class="lbox p-4 shadow-sm rounded-3">
					
									   <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div>
										<div class="clearfix"></div>
										<ul class="m-0 p-0 fs-7 r-tag">
										</ul>
									

										
										<div class="clearfix"></div>
									</div>
					<!--box end-->

					
				</div>

			</div>
		
		
		
		</div>	

</main>
						<div class="p-2"></div>
<footer>
<div class="container-fluid p-0 bg-black">
	<div class="container p-0  fs-8">
	<p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p>
	</div>	
</div>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>
		
<script src="/skin/bootstrap.bundle.js"></script>

</body>
</html>