在uni-app中,使用video时,要在视频上覆盖内容,并且要兼容app端,安卓端的适配还好做点,但是ios的话,就弄了我好久,搞了大半天才搞定,这里记录下
1.微信小程序端
- 视频做的是全屏显示的视频,使用cover-view和cover-image对视频进行覆盖,不过,cover-view也有很多限制,像文字多行省略,这个没找到方式,单行的省略就直接用普通就可以了
使用cover-view做三角形也是行不通的,但是你在开发者工具上是没有问题,能够正常显示的,所以,在cover-iew中,要想做三角形的效果,只能用图片来代替
2.APP端
- 使用原生子窗体对video进行覆盖,在视频的那个vue文件中,新建立nvue文件,可以建立多个原生子窗体
- 在page.json中
{
"path": "pages/videolist/videolist",
"style": {
"navigationBarTitleText": "视频列表",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"app-plus": {
"bounce": "none",
"pullToRefresh": {
"support": false
},
"subNVues": [{
"id": "videoChild",
"path": "pages/videolist/index",
"style": {
"position": "absolute",
"left": "0px",
"top": "100px",
"width": "750px",
"height": "110px",
"background": "transparent"
}
}]
}
}
}
- index.nvue文件中,要使用text标签来显示文字,在nvue中使用375px为屏幕宽度,默认的布局为flex布局,且是纵向的;背景色要使用background-color进行设置
- 在nvue中可以使用scroll-view来进行滚动
- 对文字超出隐藏,使用lines进行行数的设置
overflow: hidden;
width: 200px;
text-overflow: ellipsis;
lines: 1;
- index.nvue文件,要设置page.json中的id
<div class="shopInfo" id="videoChild">
<div class="shopIntroduce">
<image class="shopLogo" :src="shopLogo"></image>
<text class="subShopInfo">{{videoTitle}}</text>
</div>
/* 在vue文件中定义事件 */
this.$nextTick(() => {
let list = {};
uni.$emit('children', temporaryObj);
});
/* 在nvue中对事件进行监听,并在组件销毁前移除事件监听 */
created() {
uni.$on('children', (data) => {
this.$nextTick(() => {
this.codeImg = data.code_img;
})
})
},
beforeDestroy(){
uni.$off('children');
this.goodsId = '';
},
安卓和ios对于原生子窗体的弹出表现形式不同
const subNVue = uni.getSubNVueById('videoChild');
/* 隐藏窗体 */
subNVue.hide('none',200);
/* 显示窗体 */
subNVue.show('slide-in-bottom', 200);
- 在安卓端的page.json中可以不定义"type": "popup",定义也不会出现问题,但是ios端必须定义这个值,才能使窗体在弹出时不会布局错乱;在ios端,如果你没有定义这个属性,然后你设置的子窗体是从底部弹出,且不需要满屏的时候,就会出现这个窗体满屏显示,布局也出现问题
"id": "videoChild",
"path": "pages/videolist/index",
"type": "popup",
"style": {
"position": "absolute",
"left": "0px",
"bottom": "0px",
"width": "375px",
"height": "340px",
"background": "transparent"
}
- 还有很奇怪的,就是在安卓端的原生子窗体中,使用本地图片是可以显示的,但是,在ios端,使用本地图片就只有在编译调试的那一次才能够显示出来;这个bug测试了我好久,我还一直在搞原生子窗体的布局,对他的position进行更改,后面忽然想到,可能使用网络图片就能显示了,结果,哇,还真的是...
APP端的showLoading和小程序端的显示也是不一样
uni.showLoading({
title: `视频下载中...`,
})
const downloadTask = uni.downloadFile({})
downloadTask.onProgressUpdate((res) => {
uni.showLoading({
title: `视频下载${res.progress}%`,
})
if(res.progress == 100) {
uni.hideLoading();
}
});
- 在小程序端,这样写就能够很完美的显示出下载进度,但是app端,如果要显示下载进度的话,就会造成视频和页面卡顿,并且,loading状态也是一直抖动的状态,没有解决方案,各位大佬有的话,可以在评论区告知下,谢谢
视频下载
- 安卓端和ios端有着不同的状态,安卓端不需要进行savefile操作
- 但是ios端需要先进行savefile,然后,再保存到相册中
- 安卓端使用了插件进行权限的判断权限插件
const downloadTask = uni.downloadFile({
url: '',
success: async (res) => {
let filePath = res.tempFilePath;
let albumAuth;
/* 判断是否是安卓 */
if(uni.getSystemInfoSync().platform == 'android') {
albumAuth = await this.requestAndroidPermission();
/* 如果没有相册权限,则跳转到应用管理界面 */
if(albumAuth != 1) {
permision.gotoAppPermissionSetting()
} else {
uni.saveVideoToPhotosAlbum({
filePath,
success: file => {
uni.showToast({
title: '下载成功',
icon: 'none',
duration: 1500
})
},
fail: err => {
permision.gotoAppPermissionSetting()
},
})
}
} else {
/* ios端在下载后先进行savefile,然后在保存到相册中 */
uni.saveFile({
tempFilePath: filePath,
success: function (res) {
var savedFilePath = res.savedFilePath;
uni.saveVideoToPhotosAlbum({
filePath: savedFilePath,
success: file => {
uni.showToast({
title: '下载成功',
icon: 'none',
duration: 1500
})
},
fail: err => {
permision.gotoAppPermissionSetting()
},
})
}
});
}
},
})
/* 获取安卓端的相册权限 */
async requestAndroidPermission() {
var result = await permision.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE');
return result ? 1 : 0;
},
- APP端的nvue布局还是有点不太好弄,在样式上直接盲写的话,不能达到想要的效果,还是要直接进行真机调试,然后的话,就是,我在安卓端保存视频的话,似乎是在安装应用的时候就会授权相册,ios在进行savefile操作时,会弹框提醒
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。