LayaAir微信端长按识别二维码

LayaAir微信端长按识别二维码

LayaAir之类的h5引擎是基于Canvas来实现页面交互，微信长按识别二维码只能识别img标签。

---

解决方案

没办法，还是只能选择img标签，盖在Canvas之上。那就迎面而来一个布局问题，怎么和Canvas上的预设位置重合，还要适配各种屏幕尺寸，对于css玩得不溜的我，诶~有时间还是恶补一下css。

还好引擎提供了一个工具方法fitDOMElementInArea

public static function fitDOMElementInArea(dom:Object, coordinateSpace:Sprite, x:Number, y:Number, width:Number, height:Number):void
使DOM元素使用舞台内的某块区域内。

Parameters

dom:Object — DOM元素引用
 
coordinateSpace:Sprite — 坐标空间，不能是Stage引用
 
x:Number — 相对于coordinateSpace的x坐标
 
y:Number — 相对于coordinateSpace的y坐标
 
width:Number — 宽度
 
height:Number — 高度

使用实践

//第一步，创建一个隐藏的img
![](code.png)
//第二步，在页面上定义一个空的sprite，位置大小和code要放得位置一致，可通过代码或ide直接拖一个，略过
//第三步，显示code，将code位置大小和预设的sp保持一致
$("#code").show();
Laya.Utils.fitDOMElementInArea($("#code")[0],this.sp,0,0,this.sp.width,this.sp.height);

阻止按住图片时，向下滑动会使窗口下移。

$(document).ready(
    
    function(){
        var mobile   = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
        var touchstart = mobile ? "touchstart" : "mousedown";
        var touchend = mobile ? "touchend" : "mouseup";
        var touchmove = mobile ? "touchmove" : "mousemove";
        $('html,body,img,video').on(touchmove,function(e){
                e.preventDefault()
            });
    }
);