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

    

        
    {{videoTitle}}

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

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

• 往期推荐：

  • 实现单行及多行文字超出后加省略号
  • 判断iOS和Android及PC端
  • 使用vue开发移动端管理后台
  • 画三角形
  • 微信小程序使用车牌号输入法