微信小程序 短剧开发技术踩坑指南 仿抖音快手小视频
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远程加密本地解密播放即可。
从微信的官方文档我们得知
但在实际使用中我们会发现微信IOS端video是不支持读取本地的临时文件,安卓是可以的。
基于上面我们就可以通过将后端返回的加密m3u8文件再通过前端解密算法缓存到本地,最后再去播放。(有兴趣的留言或私信)
6、如何防止自己的接口被抓包
解决方案
- 1:使用微信提供的网关服务,这样抓包是看不到网络请求的数据;(付费的)
- 2: 前后端采用加签 加密解密数据即可(免费)
7、小程序接口访问慢
1:小程序端校验是否开启了域名校验
2:小程序管理后台配置
开发管理-》开发设置-》ip白名单+服务器域名
3:再配合后台运维 看对眼的服务器域名是否有付费CDN加速
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及以上手动调试
不同的码率输出的视频大小也是不一样,具体以实际大小和输出的内容清晰度为主。
完结感谢,欢迎探讨留言。
微信小程序 短剧开发技术踩坑指南 仿抖音快手小视频相关推荐
- 小程序云开发疯狂踩坑之没值怎么办?
云开发报错怎么办? 填它,先让我们来看一下,今天下午我遇到的几个问题 Error: errCode: -404011 cloud function execution error | errMsg: ...
- 仿抖音 快手 小火山等短视频APP
1. 开发环境及工具 安卓 Android studio 3.3. Java 1.8 IOS Xcode 11 服务端 基础环境LAMP(linux ,apache,mysql ...
- DAY10微信小程序项目开发技术总结
一.每日实习任务 1.网页基础知识(html,css,js) 今天老师为我们介绍讲解了网页基础知识(html,css,js).首先,我们安装了谷歌浏览器及sublime text.老师为我们介绍了ht ...
- 【golang程序包推荐分享】分享亿点点golang json操作及myJsonMarshal程序包开发的踩坑经历 :)
目录[阅读时间:约5分钟] 一.概述 1.Json的作用 2.Go官方 encoding/json 包 3. golang json的主要操作 二.Json Marshal:将数据编码成json字符串 ...
- 字节跳动小程序点击右上角分享胶囊设置“拍抖音”和“分享”功能
字节跳动小程序点击右上角分享胶囊设置"拍抖音"和"分享"功能 附上代码: /** * 用户点击右上角分享 */ onShareAppMessage: funct ...
- 短视频软件开发,仿抖音滑动播放视频的实现
下面要说的就是短视频软件开发重中之重,仿抖音滑动播放视频的实现. 当我们首次进入播放短视频页面时,会优先判断当前的视频列表videoList是否有值,如果没有值或当前的视频的index大于videoL ...
- 微信小程序和webview通信踩坑(表单篇)
背景 为了适配多端小程序,通用的功能一般采用webview的方式引入小程序,这次的移动管理端也不例外. 需求 h5表单的地图选择功能.如下所示: 可行性分析 方案: 引入第三方地图 使用微信sdk的地 ...
- 微信小程序·云开发,采坑第一趴
operateWXData:fail invalid scope 微信开发者工具 v1.02.1809111 的版本更新了微信小程序·云开发的功能: 这次更新弱化了后端开发!!???具体看微信的更新文 ...
- 仿抖音滑动小短剧影视微信小程序源码带支付收益等模式
项目功能介绍:支持无限滑动 高性能滑动 预加载 视频预览 支持剧情介绍,集合壁纸另外仿抖音滑动效果 支持会员模式,支持用户单独购买等等多功能 丰富的后台设置,具体大家可以看小编的后台演示图 具体小编也 ...
最新文章
- Imagination 推新款GPU IP,首次实现桌面级光线追踪效果
- Hibernate two table same id
- 矢量旋度的散度恒为零
- 不清楚 spring 的这几个知识点,面试直接挂了!
- 激光slam-- .pgm格式地图分析及修改方法
- 墨迹天气android,墨迹天气Android产品分析
- ZZULIOJ 1088: 手机短号 (多实例)
- 阻塞与非阻塞、同步与异步 I/O模型
- SSM项目启动报错More than one fragment with the name [spring_web] was found. This is not legal with relativ
- 详细说明手工创建oracle数据库实例
- 2017年大数据行业盘点:方案落地转向了价值创造
- html5 retina 1像素,7种方法解决移动端Retina屏幕1px边框问题
- 【选型指南】选择示波器带宽要注意哪些问题呢?
- CDH6.2配置spark.yarn.jars目录
- 计算机网络基础——网络的性能
- 分段多项式及样条估计
- 第八周编程题在线测试
- 形式验证 formality的设置及fm_shell使用
- 计算机辅助教学领域的先驱者,探索“三大构成”教学模式发展之路
- Dynamic Slicing for Deep Neural Networks