在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>

nvue文件和vue文件进行通信

/* 在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操作时，会弹框提醒

uni-app中覆盖视频（原生子窗体）、视频下载相关推荐

uniapp 使用原生子窗体进行视频聊天
uniapp 使用原生子窗体进行视频聊天现在 uniapp 开发的实时音视频聊天类的 APP 大部分都要在 nvue 页面上进行开发.虽然 nvue 与 vue 的区别不是很大,但还是有所差异的. ...
UNI-APP在使用SubNvue原生子窗体时，清理缓存的问题
最近在项目中遇到了一个莫名其妙的问题,在UNI-APP首页利用SubNvue原生子窗体实现了一个drawer抽屉菜单,当切换账户并uni.reLaunch之后,重新进入首页,多次打开.关闭drawer ...
uniapp原生子窗体(弹出层为例子)
在当前目录下新建一个目录和一个nvue页面 pages.json文件 {"path": "msVideo/msVideo","style": ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
快速提取视频中的文案字幕，短视频创作者必看
你会写短视频文案吗? 有没有被那几十个字绞尽脑汁? 当今众多短视频爱好者进行作品制作时,会大量借鉴同类型短视频文案,需要用到视频中的字幕,那么怎么把视频里的字幕提取出来呢? 你可能说,这不简单,我听一 ...
Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
Android Studio 实现将视频资源嵌入APP中
Android Studio 实现将视频资源嵌入APP中 (直取思路跟代码跳转文末,如有帮助勿忘分享点赞奥!你的支持是我更新的动力!) 在正文之前首先想给大家引入安卓数据存储路径: 内部存储inter ...
游戏陪玩app源码开发中，摄像头的调用及视频处理
摄像头是游戏陪玩app源码进行视频连麦时的重要移动设备之一,在开发时,我们需要实现游戏陪玩app源码对摄像头的调用权限,这就涉及到相关接口的开发了,不过今天我们主要来了解一下在游戏陪玩app源码开发中 ...

uni-app中覆盖视频（原生子窗体）、视频下载

1.微信小程序端

2.APP端

安卓和ios对于原生子窗体的弹出表现形式不同

APP端的showLoading和小程序端的显示也是不一样

视频下载

uni-app中覆盖视频（原生子窗体）、视频下载相关推荐

最新文章

热门文章