本文介绍uni-app的交互反馈、动态设置滚动条、动态设置tabbar、录音管理、视频组件控制、剪贴板API。
一、交互反馈
【消息提示框】
uni.showToast显示消息提示框，属性见uni-app官网：
uni.showToast(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.showToast(OBJECT),参数 HarmonyOS Next 兼容性,IPromptError 的属性值,uni.hideToast(),uni.showLoading(OBJECT),参数 HarmonyOS Next 兼容
https://uniapp.dcloud.net.cn/api/ui/prompt.html示例：
uni.showToast({title: '标题',duration: 2000
});【loading提示框】
uni.showLoading显示loading提示框，一般用于请求服务器端数据时使用，用于在等待期间显示一个加载中的提示。当加载完毕后，关闭提示框。示例：
uni.showLoading({title: '加载中'
});setTimeout(function () {uni.hideLoading();
}, 2000);当加载完毕后，用uni.hideLoading()关闭提示框。
【模态窗口】
uni.showModel()显示模态窗口，可理解为消息提示框。语法比较简单，见下面示例：
uni.showModal({title: '提示',content: '这是一个模态弹窗',success: function (res) {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}
});【操作菜单】
uni.showActionSheet显示操作菜单，经常用于选择性别、选择相册还是拍照等功能，一般是从手机底部弹出的菜单。
uni.showActionSheet({itemList: ['A', 'B', 'C'],success: function (res) {console.log('选中了第' + (res.tapIndex + 1) + '个按钮');},fail: function (res) {console.log(res.errMsg);}
});二、动态设置导航条
导航条中可以动态设置的包括当前页面的标题、页面导航条颜色、显示、隐藏导航条加载动画、隐藏返回首页按钮等。官方说明见：
uni.setNavigationBarTitle(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.setNavigationBarTitle(OBJECT),参数 HarmonyOS Next 兼容性,SetNavigationBarTitleFail 的属性值,AsyncApiResult 的属性值,uni.setNavigatihttps://uniapp.dcloud.net.cn/api/ui/navigationbar.html【设置导航条标题】
uni.setNavigationBarTitle({title: '新的标题'
});【设置导航条颜色】
uni.setNavigationBarColor({frontColor: '#ffffff',backgroundColor: '#ff0000',animation: {duration: 400,timingFunc: 'easeIn'}
})【显示和隐藏导航条加载动画】
uni.showNavigationBarLoading()和uni.hideNavigationBarLoading();
【隐藏返回首页按钮】
uni.hideHomeButton()用于隐藏返回首页按钮。
三、动态设置tabBar
uni-app可动态设置tabBar某项的内容、整体样式、隐藏/显示tabBar以及为某一项右上角添加/删除文本、显示/隐藏某一项右上角的红点等功能。例如商城底部的购物车图标右上角显示购物车的数量。tabBar使用的官方介绍见：
uni.setTabBarItem(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.setTabBarItem(OBJECT),参数 HarmonyOS Next 兼容性,SetTabBarFail 的属性值,AsyncApiResult 的属性值,uni.setTabBarStyle(OBJECT),参数 Harmohttps://uniapp.dcloud.net.cn/api/ui/tabbar.html下面是设置tabBar文本和icon的示例：
uni.setTabBarItem({index: 0,text: 'text',iconPath: '/path/to/iconPath',selectedIconPath: '/path/to/selectedIconPath'
})下面是设置tabBar样式的示例：
uni.setTabBarStyle({color: '#FF0000',selectedColor: '#00FF00',backgroundColor: '#0000FF',borderStyle: 'white'
})下面是显示、隐藏tabBar的示例：
uni.showTabBar({animation:true})
uni.hideTabBar({animation:true})
【为tabBar右上角添加/删除文本】
如果实现购物车右上角显示数字，参考下面的代码：
uni.setTabBarBadge({index :1,text:'10'}) //tabBar第二项右上角文本设置为10，index为1 是第二项
uni.removeTabBarBadge({index :1}) //移除文本
【在tabBar右上角显示红点】
uni.showTabBarRedDot({index:2})
uni.hideTabBarRedDot({index:2})
四、录音管理
录音通常用于开发聊天系统时发送语音的功能，也可以利用录音配合人工智能API实现语音识别功能。官方介绍见：uni.getRecorderManager() | uni-app官网uni-app,uniCloud,serverless,uni.getRecorderManager(),start(options),onStop(callback),onFrameRecorded(callback),onError(callback),示例https://uniapp.dcloud.net.cn/api/media/record-manager.html下面是录音管理的示例代码，示例代码包括了创建音频控制组件、监听录音停止事件、开始录音、录音结束、播放录音等。最终录音的音频为aac格式，如果将录音文件上传到服务器，可以使用res.tempFilePath字段：
<template>
<view>
<button @tap="startRecord">开始录音</button>
<button @tap="endRecord">停止录音</button>
<button @tap="playVoice">播放录音</button>
</view>
</template>
<script>
export default {
name: "recorder",
onLoad() {
//创建录音管理器实例
this.recorderManager = uni.getRecorderManager();
//创建音频组件控制实例
this.innerAudioContext = uni.createInnerAudioContext();
//停止录音事件
this.recorderManager.onStop((res)=> {
console.log('recorder stop' + JSON.stringify(res));
//音频文件路径
this.voicePath = res.tempFilePath;
});
},
methods:{
startRecord() {
console.log('开始录音');
this.recorderManager.start({
format:"mp3"
});
},
endRecord() {
console.log('录音结束');
this.recorderManager.stop();
},
playVoice() {
console.log('播放录音');
if (this.voicePath) {
this.innerAudioContext.src = this.voicePath;
this.innerAudioContext.play();
}
}
}
}
</script>
<style scoped>
</style>
五、视频组件控制
视频组件控制可控制<video>组件使用js实现播放、暂停、全屏、弹幕等功能。
使用uni.createVideoContext创建并返回video上下文videoContext对象，可以操作组件内的<video>组件。视频组件控制官方说明见：
uni.createVideoContext(videoId, componentInstance) | uni-app官网uni-app,uniCloud,serverless,uni.createVideoContext(videoId, componentInstance)https://uniapp.dcloud.net.cn/api/media/video-context.html下面是示例代码：
<template>
<view>
<video id="myVideo" :src="videoUrl" controls style="width:100%;height:500rpx;" object-fit="fill" @timeupdate="getTime" :danmu-list="danmuList" :danmu-btn="true"></video>
当前播放时间：{{currentTime|formatSeconds}}/{{duration|formatSeconds}}
<input type="text" placeholder="请输入弹幕内容" v-model="danmuValue">
<button @click="sendDanmu()">发送弹幕</button>
<button @click="play()">播放</button>
<button @click="pause()">暂停</button>
<button @click="goTime()">前进15秒</button>
<button @click="backTime()">后退15秒</button>
</view>
</template>
<script>
export default {
name: "video-component",
data(){
return {
videoUrl:"https://www.xxx.com/aaa.m3u8",
currentTime:"00:00",
duration:"00:00",
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
],
danmuValue:""
}
},
onReady(){
//创建视频组件控制实例
this.videoContext = uni.createVideoContext('myVideo')
},
methods:{
play(){
this.videoContext.play();
},
pause(){
this.videoContext.pause();
},
//获取时长
getTime(e){
// console.log(e);
this.currentTime=e.detail.currentTime;
this.duration=e.detail.duration;
},
goTime(){
this.videoContext.seek(this.currentTime+15);
},
backTime(){
this.videoContext.seek(this.currentTime-15);
},
//发送弹幕
sendDanmu(){
this.videoContext.sendDanmu({
text: this.danmuValue,
color: this.getRandomColor()
})
},
getRandomColor() {
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
console.log('#' + rgb.join(''));
return '#' + rgb.join('')
}
},
filters:{
formatSeconds(val){
let minute=parseInt(val/60)?parseInt(val/60):"0";//分
let second=parseInt(val%60)?parseInt(val%60):"0"; //秒
if(minute<10){
minute="0"+minute;
}
if(second<10){
second="0"+second;
}
return minute+":"+second;
}
}
}
</script>
<style scoped>
</style>
演示效果：
在上面的代码中还使用了uni.createVodeContext('myVideo').sendDanmu()发送弹幕，并设置随机弹幕文本颜色。发送弹幕需要在video组件上设置enable-danmu属性为true。在实际开发中，弹幕内容应该让所有观看视频的用户看到，需要通过webSocket实现。首先是搭建服务器端的socket环境，然后通过客户端的WebSocket连接通信。后续会在 Java开发示例搭建一个websocket服务器。在uni-app中使用websocket参考官方示例：
uni.connectSocket(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.connectSocket(OBJECT),参数 HarmonyOS Next 兼容性,ConnectSocketSuccess 的属性值,ConnectSocketFail 的属性值,返回值 HarmonyOS Next 兼容性,Sohttps://uniapp.dcloud.net.cn/api/request/websocket.html 在上面的示例中，在请输入弹幕内容的地方输入弹幕文字，然后点发送弹幕，就可以在视频的顶部看到弹幕的内容，不过这个是本地发的，只有自己能看到。实际项目中需要通过websocket实现发弹幕让大家都能看到。
六、剪贴板
uni-app中可设置剪贴板内容和获取剪贴板内容，同时可实现复制口令功能。官方文档见：
uni-app官网uni-app,uniCloud,serverless,uni.setClipboardData(OBJECT),参数 HarmonyOS Next 兼容性,uni.getClipboardData(OBJECT),参数 HarmonyOS Next 兼容性,GetClipboardDataSucchttps://uniapp.dcloud.net.cn/api/system/clipboard.html 向剪贴板加入内容：
uni.setClipboardData({data: 'hello',success: function () {console.log('success');}
});获取剪贴板内容：
uni.getClipboardData({success: function (res) {console.log(res.data);}
});
