Java教程

记《读书日活动需求》bug总结

本文主要是介绍记《读书日活动需求》bug总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

此次读书日活动功能主要是:五个问题对应五个动画交互页面,答完5道题之后展示一段视频(随机从书架上抽出一本书的动画效果),随后进入结果页面。

在结果页需要做站内站外的分享交互,将结果页面利用html2canvas转成图片,再将图片分享到各个平台。

 

开发过程中遇到的问题如下:

***html2canvas转apng资源元素异常***

通过image标签使用的apng动画,当它播放完成之后,再使用html2canvas转image元素,此时得到的只是apng动图的第一帧静态图片而不是最后一帧,所以需要再播放完成之后将src替换成最后一帧图片的url再使用html2canvas转。

 

***html2canvas转image元素时失效***

对于image元素,需要将其资源url import进来之后在dom中赋值到image元素的src上,写在css里不行。

 

***html2canvas会使当前页面中autoplay的audio再次播放***

这是因为html2canvas会临时遍历创建一套当前页面中所有的dom元素,再将转换目标元素择出来。解决办法是:在调用html2canvas之前,将audio元素临时移除掉autoplay属性,执行完之后再加上autoplay属性。

document.getElementById("WorldBookDayMusic").removeAttribute('autoPlay')

  

***在iOS移动端微信浏览器上,视频和音频无法播放,安卓端可以***

解法如下:

init = () => {
    if (this.refVideo) {
      this.refVideo.play()
      if (typeof WeixinJSBridge !== 'undefined') {
        WeixinJSBridge.invoke('getNetworkType', {}, e => {
          this.refVideo.play()
        })
      }
    }
  }

 

***在iOS手机上,H5页面中audio的音量无法通过volume来设置***

 

解法如上:将音频文件本身的音量设置大些,这样在audio中直接通过src使用就可。

 

*** 在安卓手机上,video视频会闪现下默认播放图标***

解法如下图:加上 poster="noposter"即可

 

 

***在iOS 13.4版本上,html2canvas无效(无报错无响应)***

解法:需要将html2canvas版本设置成 1.0.0-rc.4,即在package.json中 设置  "html2canvas": "1.0.0-rc.4"。但是这个版本在服务端渲染项目中会报 window is not defined错误,所以不能在页面顶部import,在使用的地方import。

utils.js文件

const importHtml2Canvas = () => import (/* webpackChunkName: "activityHtml2canvas" */ 'html2canvas')

const _ = ''

export {
  _ as default,
  importHtml2Canvas,
}

使用:

const html2canvas = await (await (importHtml2Canvas)()).default

 

***在APP内,进入活动结果页面,点击分享调用客户端分享协议后,再点击重新测试,再次进入结果页时会再次触发客户端分享协议***

解法:

在didMount中调用getInitIframe方法,如下,将首次iframe的src存下来:

getInitIframe = () => {
    const {isIOS} = this.props
    if (isIOS && document.getElementsByTagName('iframe')[0]) {
      this.setState({iframeSrc: document.getElementsByTagName('iframe')[0].src})
    }
  }

点击重新测试按钮时,执行

const {isIOS} = this.props
    if (isIOS && document.getElementsByTagName('iframe')[0]) {
      document.getElementsByTagName('iframe')[0].src = this.state.iframeSrc
    }

 

这篇关于记《读书日活动需求》bug总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!