微信小程序 短剧开发技术踩坑指南 仿抖音快手小视频

1、Video组件

微信官方文档地址:

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

uniapp官方文档地址：

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

2、Swiper和Video如何实现抖音 快手效果

官方提示尽量不要超过3个标签（同一个界面）官方提示尽量不要超过3个标签（同一个界面）

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

  • 解决方案1：swiper里通过放置iamge和Video标签切换来实现
  • 解决方案2:swiper里只有固定的3个Video标签，通过算法来更新切换数据源

3、视频内容兼容性

如果不加密视频内容的话，首选mp4格式的文件即可。
m3u8在很多安卓机型上回出现报错，导致播放异常。

错误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、部分手机播放会出现卡顿、画面不动、绿屏等问题

解决方案:

  • 1： 将m3u8换为mp4文件
  • 2：在Video组件上新增属性 custom-cache="{{true}}"

提示：大部分是华为手机会出现异常，小米也有小部分。

5、视频内容如何放抓包

如何防止自己小程序里的视频数据被别人转包呢。

总结：苹果目前没有好的方案，安卓通过m3u8远程加密本地解密播放即可。

从微信的官方文档我们得知


image.png

但在实际使用中我们会发现微信IOS端video是不支持读取本地的临时文件，安卓是可以的。

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

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

解决方案

  • 1：使用微信提供的网关服务，这样抓包是看不到网络请求的数据；（付费的)
  • 2： 前后端采用加签 加密解密数据即可(免费)

7、小程序接口访问慢

1：小程序端校验是否开启了域名校验
2：小程序管理后台配置
开发管理-》开发设置-》ip白名单+服务器域名
3：再配合后台运维 看对眼的服务器域名是否有付费CDN加速


image.png

8、小程序切换域名不能访问

1：小程序端校验是否开启了域名校验
2：小程序管理后台配置
开发管理-》开发设置-》ip白名单+服务器域名
3: 运维后台对应的服务器、ip是否有设置https对应的证书

举例：

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

上面这个报错就是因为服务器ip对应的没有设置https证书导致，找后台或者运维小哥哥处理即可。

9、解决不存在的path路径访问现有的小程序

以uniapp开发的小程序为例，在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、如何监控小程序里的错误异常

以uniapp开发的小程序为例，在App.vue中新增如下的代码，和onLaunch是同一层级。

可以将错误定期或立即上报给后台
也可以将错误上报给微信的WE分析平台 或对接第三方小程序上报统计平台。

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：如何防止别人对我们的视频资源进行录屏

安卓平台

以下的代码能让安卓用户录屏下来的视频画面全是黑屏的。

如果是截图会提示：该应用不允许截屏

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

ios平台

通过以下代码去监听并发送通知事件，在需要处理的界面上层自定义加视图View去干扰提醒。

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、小程序类目不匹配 如何让审核通过

当自己的实际运营类目是A，提审的时候被拒 显示还需要补充A的类目资质，但A的类目资质自己又无法获取， 这个时候就可以考虑绕道解决了。

整体思路就是提审的时候是正确的数据版面

提审通过上线之后 再通过oss配置或后台接口 调整数据为最新的即可。

13、如何一套代码 对应多个马甲包小程序

前后端约定一个或多个字段，比如小程序id等字段来区分小程序是哪个

14、wx.login偶发获取不到数据怎么处理

  • 获取到了就正常操作 请求后台api去登录注册
  • 获取为空就采用设备id策略先登录，后续再更新wx.login请求后台
  • 获取失败就重试，设置一个重试次数好一些
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、小程序中css动画保持在最后状态失败

新增这个是不够的-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：【推荐】使用剪映 快捷操作

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

编码:使用默认H.264

格式:选择mp4文件

帧率:选择60fps

码率：1000及以上手动调试

不同的码率输出的视频大小也是不一样，具体以实际大小和输出的内容清晰度为主。

image.png

完结感谢，欢迎探讨留言。

这里补充网友提问的部分代码

<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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 小程序踩坑之旅
    最近几个月因为公司的业务需求，一直在折腾小程序，从开始的完全不熟悉，到后面被各种坑折磨，是时候写一篇总结了，避免下...
    ArmorVon阅读 1,912评论 1赞 1
  • 微信小程序中实现类似抖音短视频切换效果
    1.需求背景介于之前开发了一个直播和短视频类型的微信小程序，因为考虑到后期兼容和稳定技术上面采用了原生小程序来进行...
    KingKongCat阅读 13,948评论 8赞 15
  • 微信小程序部分功能踩坑指南
    前言 开发项目时，实际遇到的一些功能需求和问题汇总。列出了当时参考的一些文章和官方文档。开发框架：mpvue官方文...
    Smile0204阅读 1,639评论 0赞 5
  • uniapp开发微信小程序
    微信小程序开发指引 前言 本文档我们主要关注微信小程序的开发使用。微信小程序使用微信开发者工具开发，使用其专有语言...
    tikeyc阅读 36,986评论 0赞 19
  • uni-app使用基础
    uni-app的基本使用 基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 un...
    千山鸟语阅读 602评论 0赞 1