1. 90前端首页
  2. 前端开发
  3. 移动开发

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

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

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021988310

展开阅读全文

发表评论

登录后才能评论