1. Video component
WeChat official document address:
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
Uniapp official document address:
https://uniapp.dcloud.net.cn/component/video.html
2. How Swiper and Video achieve the effect of Douyin Kuaishou
Official tips try not to exceed 3 labels (same interface) Official tips try not to exceed 3 labels (same interface)
Link address:
https://developers.weixin.qq.com/community/develop/doc/000e4ef22583d8961919efb6b56009
- Solution 1: Switch between iamge and Video tags in swiper
- Solution 2: There are only 3 fixed Video tags in the swiper, and the algorithm is used to update and switch data sources
3. Video Content Compatibility
If the video content is not encrypted, the file in mp4 format is preferred.
m3u8 reported an error on many Android models, resulting in abnormal playback.
error 1
errMsg":"HLS error, type: mediaError, details: bufferStalledError,
error 2
{"errMsg":"HLS error, type: mediaError, details: fragParsingError, response: \"none\""},
error 3
{"errMsg":"MEDIA_ERR_DECODE(-4003,-1)"}}
4. Some mobile phones may freeze, freeze, green screen, etc.
solution:
- 1: Change m3u8 to mp4 file
- 2: Add the attribute custom-cache="{ {true}}" on the Video component
Tips: Most of Huawei mobile phones will have abnormalities, and Xiaomi also has a small part.
5. How to capture video content
How to prevent the video data in your own applet from being subcontracted by others.
Summary: Apple currently does not have a good solution. Android can remotely encrypt and play locally through m3u8.
From WeChat's official documents, we know that
But in actual use, we will find that WeChat IOS video does not support reading local temporary files, and Android can.
Based on the above, we can cache the encrypted m3u8 file returned by the backend to the local through the front-end decryption algorithm, and finally play it. (If you are interested, leave a message or private message)
6. How to prevent your own interface from being captured
solution
- 1: Use the gateway service provided by WeChat, so that you cannot see the data requested by the network when capturing packets; ( paid )
- 2: The front and back end can use signature encryption to decrypt the data ( free of charge )
7. Small program interface access is slow
1: Verify whether the domain name verification is enabled on the applet side
2: Mini program management background configuration
Development Management-"Development Settings-"IP Whitelist + Server Domain Name
3: Cooperate with background operation and maintenance to see if the server domain name you see is paid CDN acceleration
8. The domain name of the applet cannot be accessed
1: Verify whether the domain name verification is enabled on the applet side
2: Applet management background configuration
Development management-"development settings-"ip white list + server domain name
3: Whether the server and ip corresponding to the operation and maintenance background are set to correspond to https Certificate
Example:
'{"errno":600001,"errMsg":"request:fail -200:net::ERR_CERT_COMMON_NAME_INVALID"}',
The above error is caused by the fact that the server ip does not have an https certificate. You can find the background or the operation and maintenance brother to deal with it.
9. Solve the non-existent path path to access the existing applet
Taking the applet developed by uniapp as an example, add the following code in App.vue, which is at the same level as 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. How to monitor the error exception in the applet
Taking the applet developed by uniapp as an example, add the following code in App.vue, which is at the same level as onLaunch .
Errors can be reported to the background periodically or immediately,
or reported to WeChat's WE analysis platform or connected to a third-party applet reporting statistics platform .
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: How to prevent others from recording our video resources
android platform
The following code can make the video screen recorded by Android users be all black .
If it is a screenshot, it will prompt: This application does not allow screenshots
wx.setVisualEffectOnCapture({
visualEffect: 'hidden',
success: (res) => {
printLog('录屏 success->', res)
},
fail: (err) => {
printLog('录屏 fail>', res)
},
complete: (res) => {
printLog('录屏 complete>', res)
}
})
ios platform
Use the following code to monitor and send notification events, and add a custom view on the upper layer of the interface that needs to be processed to interfere with the reminder.
wx.onScreenRecordingStateChanged(function(res) {
printLog('录屏状态', 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. How to pass the review if the category of the applet does not match
When your actual operation category is A, and the rejection shows that you need to supplement the category qualification of A during the review, but the category qualification of A cannot be obtained by yourself, then you can consider a detour to solve it.
The overall idea is that it is the correct data layout when reviewing
After passing the review and going online, adjust the data to the latest through OSS configuration or background interface.
13. How does one set of codes correspond to multiple mini-programs?
The front and back ends agree on one or more fields, such as the applet id and other fields to distinguish which applet is
14. What to do if wx.login occasionally fails to obtain data
- Once you get it, you can operate normally and request the background API to log in and register
- If the acquisition is empty , use the device id strategy to log in first, and then update the wx.login request background
- If the acquisition fails , try again. It is better to set a number of retries
wx.login({
timeout: 10000,
success(res) {
if (res.code) {
//有微信code登录
that.postLoginData(params, res.code)
} else {
//无微信code登录 借助设备id登录,后续在接口里再补充wxCode上去
that.postLoginData(params)
}
},
fail(failRes) {
//重试
},
})
15. The css animation in the applet remains in the final state and fails
Adding this is not enough -webkit-animation-fill-mode:forwards, you also need to add!important
Check out the ultimate solution below:
.zhuanpanView360{
-webkit-animation-fill-mode:forwards !important ;
animation-fill-mode: forwards !important;
animation: zhuanpan360 2.1s linear 1 ;
}
16. How can the video in the mini program be as clear and small as competing products?
- 1: Use ffmpeg command
- 2: Compress using format factory
- 3: [ Recommended ] Use clipping shortcuts
Resolution: generally keep the original film resolution
Encoding: Use default H.264
Format: choose mp4 file
Frame rate: select 60fps
Code rate : 1000 and above manual debugging
The video size output by different bit rates is also different, the specific size depends on the actual size and the definition of the output content.
Thanks for the end, welcome to discuss and leave a message.