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操做時，會彈框提醒

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期推薦：

  • 實現單行及多行文字超出後加省略號
  • 判斷iOS和Android及PC端
  • 使用vue開發移動端管理後臺
  • 畫三角形
  • 微信小程序使用車牌號輸入法