安卓和ios针对小程序兼容以及小程序技术实现上本身遇到的一些问题

原创

已于 2023-06-19 15:12:26 修改 · 3.9k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #小程序遇到的问题 #小程序踩坑 #前端技术 #前端采坑总结

于 2021-01-04 11:54:47 首次发布

小程序实现问题

问题：1.小程序中弹出框，使用absolute定位一屏蒙版结果发现上下滑动蒙版没有遮住后面内容。只遮住后面内容的一屏。

解决：蒙版用fixed布局设置top right bottom left 为0 整个后面的内容都会被蒙版遮住

缺点：被蒙版遮住的内容依然可以滑动，只不过是不能操作

问题： 2.小程序中input按照文档设置自动聚焦不起作用 auto-focus focus都无效

解决: 同时使用focus 还有auto-focus 虽然官网提示即将废弃，但是亲测这种方式可用。在wxml的input中给focus设置一个变量，在需要实现的场景中给该变量设置一个600ms的延时配合auto-focus 就会自动聚焦

let timer = setTimeout(() => {

  this.setData({

    autoFocus: true

  })

  clearTimeout(timer);

},600)

场景：要做一个功能，先AR识别比心成功后，播放一个MP4的视频，视频播放完成后展示全屏滑动轮播图等特效以及其他业务场景

问题：3.在AR比心后，通过wx:if变量控制video显示前面会有黑色的闪屏，闪动后视频才加载播放用户体验很差这里AR比心是使用百度AI开发的接口通过拍照传过去对比做的

解决：autoplay设置为false 让视频不会自动播放等前面的业务需求执行完成后让视频播放播放完成后设置videoStatus为true 让video隐藏掉执行其他场景

// 视频播放js相关代码
let openVideo = wx.createVideoContext('myVideo'); 
openVideo.play();

// wxml中video写法
<video id="myVideo" class="{
  
  {videoStatus? 'video-play': ''}}" enable-progress-gesture="{
  
  {false}}" bindended="endPlay" object-fit="cover" autoplay="{
  
  {false}}" vslide-gesture-in-fullscreen="{
  
  {false}}" controls="{
  
  {false}}" poster="{
  
  {baseUrl}}/beauty/zh_cn/store/media/wysiwyg/cvdaog/ar/morenzhen.png" src="{
  
  {baseUrl}}/beauty/zh_cn/store/media/wysiwyg/cvdaog/ar/white1.mp4"></video>

其他业务场景举例：小程序第一帧KV播放视频加载的时候会出现KV中第一帧的视频黑屏一下再播放的情况因为controls设置成了false 默认不展示播放控件所以默认帧也不可用

解决方案：vedio提供了一个默认事件 bindloadedmetadata（视频元数据加载完成时触发）实践发现会在视频黑屏结束后触发该方法所以默认进入小程序时可以先设置一个骨架屏loading效果当视频元数据加载完成触发该函数时让骨架屏消失当前页面展现就可规避掉黑屏一下的问题。除了这个之外要做好容错例如当视频本身加载