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

1.视频组件

微信公文地址：

Uniapp官方文档地址：

2.如何用Swiper和视频实现抖音快手效果

官方提示不应超过3个标签（同一界面）。官方提示不应超过3个标签（同一界面）

链接地址：

解决方案1：在切换器中切换图像和视频标签

解决方案2：切换器中只有三个固定视频标签，该算法用于更新和切换数据源

3.视频内容兼容性

如果视频内容未加密，则首选mp4格式的文件。

m3u8在许多Android机型上报告了错误，导致播放异常。

错误1

errMsg“：”HLS错误，类型：mediaError，详细信息：bufferStalledError，

错误2

｛“errMsg”：“HLS错误，类型：mediaError，详细信息：fragParsingError、响应：\“none\”｝，

错误3

｛“errMsg”：“MEDIA_ERR_DECODE（-4003，-1）”｝｝

4.一些手机可能存在卡顿、固定图片和绿屏等问题

解决方案：

1： 用mp4文件替换m3u8

2： 在视频组件上添加属性自定义缓存=“｛｛true｝｝”

小贴士：大多数华为手机都是异常的，小米的数量很少。

5.如何放置和捕获视频内容

如何防止小程序中的视频数据被他人转包。

结论：苹果目前没有一个好的解决方案。Android可以使用m3u8远程加密进行解密并在本地播放。

我们从微信官方文件中得知

图像.png

然而，在实际使用中，我们会发现微信IOS端的视频不支持读取本地临时文件，Android可以。

基于以上，我们可以通过前端解密算法将从后端返回的加密m3u8文件缓存到本地，然后进行播放。（感兴趣的消息或私人消息）

6.如何防止界面被捕获

解决方案

1： 微信提供的网关服务用于捕获数据包，而不会看到网络请求的数据；（已付）

2： 前端和后端可以加密和解密数据（免费）

7.小程序界面访问速度慢

1： 小程序端是否已启用域名验证

2： 小程序管理后台配置

开发管理->开发设置->IP白名单+服务器域名

3： 然后配合后台运维，看看目标的服务器域名是否已经支付CDN加速

图像.png

8.无法访问小程序交换机域名

1： 小程序端是否已启用域名验证

2： 小程序管理后台配置

开发管理->开发设置->IP白名单+服务器域名

3： 运维后台对应的服务器和IP是否有https对应的证书

举个例子：

“｛”errno“：600001，”errMsg“：”request:fail-200:net:：ERR_CERT_COMMON_NAME_INVALID“｝”，

上述错误是由于没有为服务器IP地址设置https证书。找后台或O&M兄弟来处理。

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

以uniapp开发的小程序为例，在App中添加以下代码。vue，与onLaunch处于同一级别。

未找到页面（e）{

PrintLog（“找不到页面路径”，JSON.stringify（e））

let query=e.query；

let paramsArr=Object.keys（查询）；

让参数=“”；

参数Arr。forEach（（项目，索引）=>{

如果（索引===（paramsArr.length-1））{

params+=（item+'='+查询[item]）；

}其他{

params+=（item+'='+查询[item]+'&'）；

}

});

if（e.path.includes（'oldPage'））{

uni.re启动({

url:`/pages/newPage/newPage？$｛params｝`

})

PrintLog（'未找到页面路径，打开新页面'，参数）

返回false；

}其他{

uni.re启动({

网址：`/pages/home/home`

})

PrintLog（'找不到页面路径，打开主界面'）

}

},

10.如何监控小程序中的错误异常

以uniapp开发的小程序为例，在App中添加以下代码。vue，与onLaunch处于同一级别。

可以定期或立即向后台报告错误

错误也可以报告给微信WE分析平台或第三方小程序报告统计平台。

onError（错误）{

PrintLog（“app错误”，JSON.stringify（错误））

如果（this.globalData.errorCount<6）{

printLog（“app错误报告”）

传感器报告Weixin事件（“app_lauch”{

“errordetail”：JSON.stringify（错误）

})

this.global数据。错误计数+=1

}

},

11： 如何防止他人录制我们的视频资源

Android平台

以下代码可以使Android用户录制的所有视频图像变黑。

如果是屏幕截图，它将提示app不允许屏幕截图

wx.set捕获时的视觉效果({

visualEffect:'隐藏'，

成功：（res）=>{

PrintLog（'屏幕录制成功->'，res）

},

失败：（错误）=>{

打印日志