微信小程序 短劇開發(fā)技術(shù)踩坑指南 仿抖音快手小視頻

1、Video組件

微信官方文檔地址:

https://developers.weixin.qq.com/miniprogram/dev/component/video.html

uniapp官方文檔地址：

https://uniapp.dcloud.net.cn/component/video.html

2、Swiper和Video如何實現(xiàn)抖音 快手效果

官方提示盡量不要超過3個標(biāo)簽（同一個界面）官方提示盡量不要超過3個標(biāo)簽（同一個界面）

鏈接地址：
https://developers.weixin.qq.com/community/develop/doc/000e4ef22583d8961919efb6b56009

  • 解決方案1：swiper里通過放置iamge和Video標(biāo)簽切換來實現(xiàn)
  • 解決方案2:swiper里只有固定的3個Video標(biāo)簽，通過算法來更新切換數(shù)據(jù)源

3、視頻內(nèi)容兼容性

如果不加密視頻內(nèi)容的話，首選mp4格式的文件即可。
m3u8在很多安卓機型上回出現(xiàn)報錯，導(dǎo)致播放異常。

錯誤1

errMsg":"HLS error, type: mediaError, details: bufferStalledError,

錯誤2

{"errMsg":"HLS error, type: mediaError, details: fragParsingError, response: \"none\""},

錯誤3

{"errMsg":"MEDIA_ERR_DECODE(-4003,-1)"}}

4、部分手機播放會出現(xiàn)卡頓、畫面不動、綠屏等問題

解決方案:

  • 1： 將m3u8換為mp4文件
  • 2：在Video組件上新增屬性 custom-cache="{{true}}"

提示：大部分是華為手機會出現(xiàn)異常，小米也有小部分。

5、視頻內(nèi)容如何放抓包

如何防止自己小程序里的視頻數(shù)據(jù)被別人轉(zhuǎn)包呢。

總結(jié)：蘋果目前沒有好的方案，安卓通過m3u8遠(yuǎn)程加密本地解密播放即可。

從微信的官方文檔我們得知


image.png

但在實際使用中我們會發(fā)現(xiàn)微信IOS端video是不支持讀取本地的臨時文件，安卓是可以的。

基于上面我們就可以通過將后端返回的加密m3u8文件再通過前端解密算法緩存到本地，最后再去播放。(有興趣的留言或私信)

6、如何防止自己的接口被抓包

解決方案

  • 1：使用微信提供的網(wǎng)關(guān)服務(wù)，這樣抓包是看不到網(wǎng)絡(luò)請求的數(shù)據(jù)；（付費的)
  • 2： 前后端采用加簽 加密解密數(shù)據(jù)即可(免費)

7、小程序接口訪問慢

1：小程序端校驗是否開啟了域名校驗
2：小程序管理后臺配置
開發(fā)管理-》開發(fā)設(shè)置-》ip白名單+服務(wù)器域名
3：再配合后臺運維 看對眼的服務(wù)器域名是否有付費CDN加速


image.png

8、小程序切換域名不能訪問

1：小程序端校驗是否開啟了域名校驗
2：小程序管理后臺配置
開發(fā)管理-》開發(fā)設(shè)置-》ip白名單+服務(wù)器域名
3: 運維后臺對應(yīng)的服務(wù)器、ip是否有設(shè)置https對應(yīng)的證書

舉例：

'{"errno":600001,"errMsg":"request:fail -200:net::ERR_CERT_COMMON_NAME_INVALID"}',

上面這個報錯就是因為服務(wù)器ip對應(yīng)的沒有設(shè)置https證書導(dǎo)致，找后臺或者運維小哥哥處理即可。

9、解決不存在的path路徑訪問現(xiàn)有的小程序

以uniapp開發(fā)的小程序為例，在App.vue中新增如下的代碼，和onLaunch是同一層級。

onPageNotFound(e) {
            printLog('頁面路徑未找到', JSON.stringify(e))
            let query = e.query;
            let paramsArr = Object.keys(query);
            let params = '';
            paramsArr.forEach((item, index) => {
                if (index === (paramsArr.length - 1)) {
                    params += (item + '=' + query[item]);
                } else {
                    params += (item + '=' + query[item] + '&');
                }
            });
            if (e.path.includes('oldPage')) {
                uni.reLaunch({
                    url: `/pages/newPage/newPage?${params}`
                })
                printLog('頁面路徑未找到,打開新頁面', params)
                return false;
            } else {
                uni.reLaunch({
                    url: `/pages/home/home`
                })
                printLog('頁面路徑未找到,打開主界面')
            }
        },

10、如何監(jiān)控小程序里的錯誤異常

以uniapp開發(fā)的小程序為例，在App.vue中新增如下的代碼，和onLaunch是同一層級。

可以將錯誤定期或立即上報給后臺
也可以將錯誤上報給微信的WE分析平臺 或?qū)?strong>第三方小程序上報統(tǒng)計平臺。

onError(error) {
            printLog('小程序報錯', JSON.stringify(error))
            if (this.globalData.errorCount < 6) {
                printLog('小程序報錯 上報')
                sensor.reportWeixinEvent("app_lauch", {
                    "errordetail": JSON.stringify(error)
                })
                this.globalData.errorCount += 1
            }
        },

11：如何防止別人對我們的視頻資源進行錄屏

安卓平臺

以下的代碼能讓安卓用戶錄屏下來的視頻畫面全是黑屏的。

如果是截圖會提示：該應(yīng)用不允許截屏

wx.setVisualEffectOnCapture({
                        visualEffect: 'hidden',
                        success: (res) => {
                            printLog('錄屏 success->', res)
                        },
                        fail: (err) => {
                            printLog('錄屏 fail>', res)
                        },
                        complete: (res) => {
                            printLog('錄屏 complete>', res)
                        }
                    })

ios平臺

通過以下代碼去監(jiān)聽并發(fā)送通知事件，在需要處理的界面上層自定義加視圖View去干擾提醒。

wx.onScreenRecordingStateChanged(function(res) {
                        printLog('錄屏狀態(tài)', res.state)
                        uni.$emit('screenRecord', res.state == 'start');
                    })
                    wx.getScreenRecordingState({
                        success: (res) => {
                            printLog('查詢 錄屏 success->', res)
                            if (res.state == 'on') {
                                uni.$emit('screenRecord', true)
                            } else if (res.state == 'off') {
                                uni.$emit('screenRecord', false)
                            }
                        },
                        fail: (err) => {
                            uni.$emit('screenRecord', false)
                        }
                    })

12、小程序類目不匹配 如何讓審核通過

當(dāng)自己的實際運營類目是A，提審的時候被拒 顯示還需要補充A的類目資質(zhì)，但A的類目資質(zhì)自己又無法獲取， 這個時候就可以考慮繞道解決了。

整體思路就是提審的時候是正確的數(shù)據(jù)版面

提審?fù)ㄟ^上線之后 再通過oss配置或后臺接口 調(diào)整數(shù)據(jù)為最新的即可。

13、如何一套代碼 對應(yīng)多個馬甲包小程序

前后端約定一個或多個字段，比如小程序id等字段來區(qū)分小程序是哪個

14、wx.login偶發(fā)獲取不到數(shù)據(jù)怎么處理

  • 獲取到了就正常操作 請求后臺api去登錄注冊
  • 獲取為空就采用設(shè)備id策略先登錄，后續(xù)再更新wx.login請求后臺
  • 獲取失敗就重試，設(shè)置一個重試次數(shù)好一些
wx.login({
                    timeout: 10000,
                    success(res) {
                        if (res.code) {
                            //有微信code登錄
                            that.postLoginData(params, res.code)
                        } else {
                            //無微信code登錄 借助設(shè)備id登錄,后續(xù)在接口里再補充wxCode上去
                            that.postLoginData(params)
                        }
                    },
                    fail(failRes) {
                        //重試
                    },
                })

15、小程序中css動畫保持在最后狀態(tài)失敗

新增這個是不夠的-webkit-animation-fill-mode:forwards, 還需要添加!important

看下面終極方案：

.zhuanpanView360{
    -webkit-animation-fill-mode:forwards !important ;
    animation-fill-mode: forwards !important;
    animation: zhuanpan360  2.1s linear 1 ;
}

16、小程序里的視頻如何像競品 那樣清晰且體積小

  • 1：使用ffmpeg指令
  • 2：使用格式工廠壓縮
  • 3：【推薦】使用剪映 快捷操作

分辨率:一般保持原片分辨率即可

編碼:使用默認(rèn)H.264

格式:選擇mp4文件

幀率:選擇60fps

碼率：1000及以上手動調(diào)試

不同的碼率輸出的視頻大小也是不一樣，具體以實際大小和輸出的內(nèi)容清晰度為主。

image.png

完結(jié)感謝，歡迎探討留言。

這里補充網(wǎng)友提問的部分代碼

<swiper vertical @animationfinish="animationfinish" @change="_swiperallchange" :circular="circular"
                class="video-swiper" :current="current" :duration="duration" :easingFunction="easingFunction">
                <swiper-item v-for="(item, indexClone) in curQueue" :key="indexClone">
                    <video enableProgressGesture enablePlayGesture :autoplay="item.audioId1&&current==indexClone"
                        @ended="onEnded" @error="videoErrorCallback" @loadedmetadata="onLoadedMetaData" @pause="onPause"
                        @play="onPlay" @progress="onProgressFun" @timeupdate="onTimeUpdate" @waiting="onWaiting"
                        class="video_item" :controls="false" :data-index="indexClone" :data-playletid="item.courseid"
                        :data-videoid="item.courseid" :data-jishuId="item.id" 
                        
                        :loop="loop"
                        objectFit="contain" 
                        :showCenterPlayBtn="false" 
                        :src="item.audioId1"
                        :id="'video_' + indexClone" 
                        :data-videourls="item.audioId1"
                        v-if="(item.audioId1&&item.audioId1 != '')&&(indexClone==current||indexClone==(current+1))"></video>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 最近幾個月因為公司的業(yè)務(wù)需求，一直在折騰小程序，從開始的完全不熟悉，到后面被各種坑折磨，是時候?qū)懸黄偨Y(jié)了，避免下...
    ArmorVon閱讀 1,900評論 1贊 1
  • 1.需求背景介于之前開發(fā)了一個直播和短視頻類型的微信小程序，因為考慮到后期兼容和穩(wěn)定技術(shù)上面采用了原生小程序來進行...
    KingKongCat閱讀 13,825評論 8贊 15
  • 前言 開發(fā)項目時，實際遇到的一些功能需求和問題匯總。列出了當(dāng)時參考的一些文章和官方文檔。開發(fā)框架：mpvue官方文...
    Smile0204閱讀 1,633評論 0贊 5
  • 微信小程序開發(fā)指引 前言 本文檔我們主要關(guān)注微信小程序的開發(fā)使用。微信小程序使用微信開發(fā)者工具開發(fā)，使用其專有語言...
    tikeyc閱讀 36,877評論 0贊 19
  • uni-app的基本使用 基礎(chǔ)部分： 環(huán)境搭建 頁面外觀配置 數(shù)據(jù)綁定 uni-app的生命周期 組件的使用 un...
    千山鳥語閱讀 551評論 0贊 1