1、Video組件
微信官方文檔地址:
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
uniapp官方文檔地址：
https://uniapp.dcloud.net.cn/component/video.html
2、Swiper和Video如何實(shí)現(xiàn)抖音 快手效果
官方提示盡量不要超過3個(gè)標(biāo)簽（同一個(gè)界面）官方提示盡量不要超過3個(gè)標(biāo)簽（同一個(gè)界面）
鏈接地址：
https://developers.weixin.qq.com/community/develop/doc/000e4ef22583d8961919efb6b56009
- 解決方案1：swiper里通過放置iamge和Video標(biāo)簽切換來實(shí)現(xiàn)
- 解決方案2:swiper里只有固定的3個(gè)Video標(biāo)簽，通過算法來更新切換數(shù)據(jù)源
3、視頻內(nèi)容兼容性
如果不加密視頻內(nèi)容的話，首選mp4格式的文件即可。
m3u8在很多安卓機(jī)型上回出現(xiàn)報(bào)錯(cuò)，導(dǎo)致播放異常。
錯(cuò)誤1
errMsg":"HLS error, type: mediaError, details: bufferStalledError,
錯(cuò)誤2
{"errMsg":"HLS error, type: mediaError, details: fragParsingError, response: \"none\""},
錯(cuò)誤3
{"errMsg":"MEDIA_ERR_DECODE(-4003,-1)"}}
4、部分手機(jī)播放會(huì)出現(xiàn)卡頓、畫面不動(dòng)、綠屏等問題
解決方案:
- 1： 將m3u8換為mp4文件
- 2：在Video組件上新增屬性 custom-cache=“{{true}}”
提示：大部分是華為手機(jī)會(huì)出現(xiàn)異常，小米也有小部分。
5、視頻內(nèi)容如何放抓包
如何防止自己小程序里的視頻數(shù)據(jù)被別人轉(zhuǎn)包呢。
總結(jié)：蘋果目前沒有好的方案，安卓通過m3u8遠(yuǎn)程加密本地解密播放即可。
從微信的官方文檔我們得知
但在實(shí)際使用中我們會(huì)發(fā)現(xiàn)微信IOS端video是不支持讀取本地的臨時(shí)文件，安卓是可以的。
基于上面我們就可以通過將后端返回的加密m3u8文件再通過前端解密算法緩存到本地，最后再去播放。(有興趣的留言或私信)
6、如何防止自己的接口被抓包
解決方案
- 1：使用微信提供的網(wǎng)關(guān)服務(wù)，這樣抓包是看不到網(wǎng)絡(luò)請求的數(shù)據(jù)；（付費(fèi)的)
- 2： 前后端采用加簽 加密解密數(shù)據(jù)即可(免費(fèi))
7、小程序接口訪問慢
1：小程序端校驗(yàn)是否開啟了域名校驗(yàn)
2：小程序管理后臺(tái)配置
開發(fā)管理-》開發(fā)設(shè)置-》ip白名單+服務(wù)器域名
3：再配合后臺(tái)運(yùn)維 看對眼的服務(wù)器域名是否有付費(fèi)CDN加速
8、小程序切換域名不能訪問
1：小程序端校驗(yàn)是否開啟了域名校驗(yàn)
2：小程序管理后臺(tái)配置
開發(fā)管理-》開發(fā)設(shè)置-》ip白名單+服務(wù)器域名
3: 運(yùn)維后臺(tái)對應(yīng)的服務(wù)器、ip是否有設(shè)置https對應(yīng)的證書
舉例：
'{"errno":600001,"errMsg":"request:fail -200:net::ERR_CERT_COMMON_NAME_INVALID"}',
上面這個(gè)報(bào)錯(cuò)就是因?yàn)榉?wù)器ip對應(yīng)的沒有設(shè)置https證書導(dǎo)致，找后臺(tái)或者運(yùn)維小哥哥處理即可。
9、解決不存在的path路徑訪問現(xiàn)有的小程序
以uniapp開發(fā)的小程序?yàn)槔贏pp.vue中新增如下的代碼，和onLaunch是同一層級(jí)。
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)控小程序里的錯(cuò)誤異常
以uniapp開發(fā)的小程序?yàn)槔?，在App.vue中新增如下的代碼，和onLaunch是同一層級(jí)。
可以將錯(cuò)誤定期或立即上報(bào)給后臺(tái)
也可以將錯(cuò)誤上報(bào)給微信的WE分析平臺(tái) 或?qū)?strong>第三方小程序上報(bào)統(tǒng)計(jì)平臺(tái)。
onError(error) {
printLog('小程序報(bào)錯(cuò)', JSON.stringify(error))
if (this.globalData.errorCount < 6) {
printLog('小程序報(bào)錯(cuò) 上報(bào)')
sensor.reportWeixinEvent("app_lauch", {
"errordetail": JSON.stringify(error)
})
this.globalData.errorCount += 1
}
},
11：如何防止別人對我們的視頻資源進(jìn)行錄屏
安卓平臺(tái)
以下的代碼能讓安卓用戶錄屏下來的視頻畫面全是黑屏的。
如果是截圖會(huì)提示：該應(yīng)用不允許截屏
wx.setVisualEffectOnCapture({
visualEffect: 'hidden',
success: (res) => {
printLog('錄屏 success->', res)
},
fail: (err) => {
printLog('錄屏 fail>', res)
},
complete: (res) => {
printLog('錄屏 complete>', res)
}
})
ios平臺(tái)
通過以下代碼去監(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)自己的實(shí)際運(yùn)營類目是A，提審的時(shí)候被拒 顯示還需要補(bǔ)充A的類目資質(zhì)，但A的類目資質(zhì)自己又無法獲取， 這個(gè)時(shí)候就可以考慮繞道解決了。
整體思路就是提審的時(shí)候是正確的數(shù)據(jù)版面
提審?fù)ㄟ^上線之后 再通過oss配置或后臺(tái)接口 調(diào)整數(shù)據(jù)為最新的即可。
13、如何一套代碼 對應(yīng)多個(gè)馬甲包小程序
前后端約定一個(gè)或多個(gè)字段，比如小程序id等字段來區(qū)分小程序是哪個(gè)
14、wx.login偶發(fā)獲取不到數(shù)據(jù)怎么處理
- 獲取到了就正常操作 請求后臺(tái)api去登錄注冊
- 獲取為空就采用設(shè)備id策略先登錄，后續(xù)再更新wx.login請求后臺(tái)
- 獲取失敗就重試，設(shè)置一個(gè)重試次數(shù)好一些
wx.login({
timeout: 10000,
success(res) {
if (res.code) {
//有微信code登錄
that.postLoginData(params, res.code)
} else {
//無微信code登錄 借助設(shè)備id登錄,后續(xù)在接口里再補(bǔ)充wxCode上去
that.postLoginData(params)
}
},
fail(failRes) {
//重試
},
})
15、小程序中css動(dòng)畫保持在最后狀態(tài)失敗
新增這個(gè)是不夠的-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及以上手動(dòng)調(diào)試
不同的碼率輸出的視頻大小也是不一樣，具體以實(shí)際大小和輸出的內(nèi)容清晰度為主。
文章來源：http://www.zghlxwxcb.cn/news/detail-485666.html
完結(jié)感謝，歡迎探討留言。文章來源地址http://www.zghlxwxcb.cn/news/detail-485666.html
到了這里，關(guān)于微信小程序 短劇開發(fā)技術(shù)踩坑指南 仿抖音快手小視頻的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
