开发H5小游戏遇到的问题（抓娃娃）

前言：

此次的H5抓娃娃小游戏是我目前工作中第一次遇到的需求。当时看到这个需求人直接傻了。哈哈哈，结果.......emmm不出意外的话还是出意外了。所以，此次做一个总结。嗯，费话不多说。直接开始。技术选型使用的JQ。

正文：

<1>JQ周边插件swiper.min.js的一个小bug

jq插件轮播图区域必须是未隐藏的局域，swiper才能生效。如果是隐藏的局域，必须要先显示了，swiper才能生效

/* 未隐藏
    html: 
      <div id="siper-box">
        <div class="swiper-wrapper"></div>  
      </div>
 */
let mySwiper = new Swiper('#siper-box', {
        loop: true,
        autoplay: true,
        speed:500,
        autoplayDisableOnInteraction: false,
})
//这样就可以生效


/* 隐藏
    html: 
      <div id="siper-box" style="display: none">
        <div class="swiper-wrapper"></div>  
      </div>
 */
//必须要siper-box这个div显示才能生效(差不多就是以下这个意思)

$('#siper-box).show(function(){
    new Swiper('#siper-box', {
        loop: true,
        autoplay: true,
        speed:500,
        autoplayDisableOnInteraction: false,
    })
})

tip：菜单栏是类似轮播图那种情况。但是在这里有个问题就是swiper-slide有时候会丢失，这个问题我到现在都没想通。哈哈哈

<2>页面生成海报和二维码时候。如果使用cdn，记得要处理跨域

$('#generate2').qrcode({
            render: 'canvas',
            width: 153, //宽度 
            height: 153, //高度 
            text: shareurl, //内容 
            typeNumber:-1,//计算模式
            correctLevel:2,//二维码纠错级别
            background:"#ffffff",//背景颜色
            foreground:"#000000"  //二维码颜色
        })
        let cvs = document.createElement('canvas')
        cvs.width = 750;
        cvs.height = 1060;
    
        let ctx = cvs.getContext('2d')
    
        let generate_bg = $('#generate-bg')[0]
        ctx.drawImage(generate_bg, 0, 0, 750, 1060)
    
        let qrcvs = $('#generate2>canvas')[0]
        qrcvs.crossOrigin= 'anonymous'
        ctx.drawImage(qrcvs, 552,  809,  153, 153)
        
        ctx.fillStyle='#fff';
        ctx.font= `bold 18px solid `
        ctx.fillText('长按二维码了解详情', 548, 990) 
    
        let b64 = cvs.toDataURL('image/png')
        let img = `<img src="${b64}" style="width: 100%;" crossorigin="anonymous">`
        $('.generate-posters').append(img)

tip：其实就是crossorigin="anonymous"这个东东

<3>如果背景图有动画替换时候，最好使用计时器来切换，因为在有的ios里面，屏幕息屏了之后，背景图就会一直闪，没有图片。

setInterval(function(){
        $('.game-innerpage-bg').toggleClass('active');
 },500)
//active这个样式就是替换背景图的

tip：因为在有的ios里面，屏幕息屏了之后，背景图就会一直闪，没有图片的原因可能有以下几个：
1. iOS移动设备上的渲染机制：iOS设备上的渲染机制可能会对CSS动画的性能产生影响。某些iOS设备上的浏览器可能不如其他设备流畅地处理复杂的CSS动画，导致闪烁现象。

2. 帧率限制：iOS设备上的浏览器可能会对动画的帧率进行限制，以保持性能和电池寿命。这可能导致动画在某些情况下出现闪烁。

3. 图片加载延迟：如果动画中使用了大型背景图或网络连接较慢，iOS设备上的微信H5可能在加载和切换背景图时出现延迟，从而导致闪烁。

4. GPU加速问题：某些iOS设备上的浏览器可能未正确启用GPU加速，这可能会影响CSS动画的流畅度和稳定性。

<4>在有的ios里面图片会显示一个问号；比如

 

出现这个情况会有以下几个原因导致：

1. 图片路径和文件名检查：确保图片的路径和文件名是正确的，包括大小写和文件扩展名。检查一下图片的相对路径或绝对路径是否正确。

2. 图片格式兼容性：iOS设备对于某些图片格式可能不兼容，例如WebP格式。尝试使用其他常见的图片格式，如JPEG或PNG，以确保兼容性。

3. 图片加载失败：图片加载可能由于网络问题或服务器问题而失败。请确认网络连接是否正常，并检查服务器是否正确地提供了所需的图片资源。

4. 图片大小限制：iOS微信可能对于过大的图片有限制，如果图片过大可能无法正常显示。尝试优化图片大小，减小文件大小。

5. 安全策略限制：某些iOS微信版本可能对于跨域或未加密的图片加载有安全策略限制。确保您的图片资源符合微信的安全策略要求。

6. 缓存问题：如果之前加载过相同的图片，且缓存中的图片已损坏或过期，可能导致问号显示。尝试清除缓存并重新加载页面。

7. CSS样式问题：某些CSS样式可能会覆盖或隐藏图片，导致不显示。请检查相关的CSS样式和属性，确保没有影响到图片的显示

tip：我自己是路径有问题，使用了根路径导致的

<4>背景音乐自动播放的问题：（我目前的项目是在微信内置环境的。所以只处理了微信的）

这个安卓和ios的处理方式不一样；

// 安卓，但是这样处理必须要用户点击屏幕开会播放
let bgMusicPlay  =  setInterval(function(){
            if( $('#bg-music')[0].paused) {
                $('#bg-music')[0].play()
                $('.btn-play').addClass('active')
            } else {
                clearInterval(bgMusicPlay)
            }
 }, 10)
//ios: 借助微信的api事件WeixinJSBridgeReady
 $('#bg-music')[0].play()
        document.addEventListener('WeixinJSBridgeReady', function(){
            $('.btn-play').addClass('active')
            $('#bg-music')[0].play()
            if($('#bg-music').paused) {
                $('.btn-play').removeClass('active')
            }
 }, false)
//虽然这样是可以，但是有时候会不生效。因为有时候会存在加载快慢的问题。
//只需要把这个代码放在head里面就OK了

 <5>在H5微信分享时候，在ios背景是黑色的情况下，如果ico是圆角分享出来的会有背景色。安卓则没有。这个的话，把ico换成直角就OK了

 <6>ES6语法问题，在ios13.2以下，ES6会报错，所以这个要借助babel.js来处理，ES6敲起来是很刺激，但是一到低版本，完了，QA还不给你同步版本的情况下，哈哈哈

 <7>还有一个问题是另外一个需求的，就是H5调起APP的问题
调起APP有scheme URL和app Link两种方式。个人建议使用app Link，这样在安卓会友好一点。

关于这两种方式的具体区别，详情见：百度安全验证