微信H5开发笔记——记录开发中用到的知识(手机摇动、事件捕获、wechat禁止分享、正则、promise...)

1、关闭微信浏览器：
    微信的WeixinJSBridge还是很牛的，比如自动关闭当前浏览器内置函数：WeixinJSBridge.call('closeWindow');
    直接调用即可

2、xshell批量删除map文件：（gulp打包会出现很多不需要的map文件）
    大神地址：https://blog.csdn.net/xufengzhu/article/details/76981220
    find . -name '*.map'  -type  f  -print  -exec  rm -rf  {} ;
    
3、子节点选择 filter
    $("ul").children(".classname")
    
4、call的用法，把call的参数obj的this，传给调用call的函数，
        调用函数objCall，要用对象obj里面的this，
        ：函数objCall是处理this的一个函数
        ：在obj里面调用objCall.call(this)；this是一个dom对象，和document.getElementById(id)一样的
        
5、字体：

　{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }
    大神地址：https://blog.csdn.net/sinat_39430615/article/details/77142137

6、事件捕获
    dom_obj.onclick = function(e){
   　　 e = e || event;//兼容性
   　　 e.stopPropagation();//阻止冒泡，但不阻止其他的监听
   　　 e.stopImmediatePropagation();//阻止冒泡，阻止监听
   　　 e.cancelBubble = true;//可读写，true阻止冒泡，false不阻止
　　}
　　冒泡兼容性：
    var handler = function(e){
     　　   e = e || event;
     　　   if(e.stopPropagation){
        　　    e.stopPropagation();
     　　   }else{
      　　      e.cancelBubble = true;
     　　   }
　　}
　　取消默认行为：
  　　   e.preventDefault();
   　　  e.returnValue = false;
   　　  return false;
　　取消默认兼容性：
    　　var handler = function(e){
       　　 e = e || event;
       　　 if(e.preventDefault){
       　　     e.preventDefault();
       　　 }else{
       　　     e.returnValue = false;
       　　 }
   　　 }

7、微信浏览器私有对象
    https://www.cnblogs.com/benpao/p/3395413.html

8、微信禁止分享：
   

 <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        function onBridgeReady() {
            WeixinJSBridge.call('hideOptionMenu');
        }
    
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }
    </script>

9、手机屏幕宽高：
   

    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    $(".wq1").css("width", w + "px").css("height", h + "px");
    $(".wq2").css("width", w + "px").css("height", h + "px");

10、H5摇一摇：（忘了大神地址了）

 function shakeListener() {
    const SHAKE_SPEED = 300;
    var lastTime = 0;//上次变化的时间
    var x = y = z = lastX = lastY = lastZ = 0;//位置变量初始化
    function motionHandler(event) {
        var acceleration = event.accelerationIncludingGravity;
        var curTime = Date.now();//取得当前时间
        if ((curTime - lastTime) > 120) {
            var diffTime = curTime - lastTime;
            lastTime = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            //计算摇动速度
            var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 1000;
            if (speed > SHAKE_SPEED) {
                shake_result();
            }
            lastX = x;
            lastY = y;
            lastZ = z;
        }
    }

    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', motionHandler, false);
    } else {
        alert2s("您的设备不支持摇一摇感应");
    }
}

11、正则表达式;
 

    obj.value = obj.value.replace(/[^d.]/g, ""); //清除"数字"和"."以外的字符
    obj.value = obj.value.replace(/^./g, ""); //验证第一个字符是数字而不是
    obj.value = obj.value.replace(/.{2,}/g, "."); //只保留第一个. 清除多余的
    obj.value = obj.value.replace(/^(-)*(d+).(dd).*$/, '$1$2.$3'); //只能输入两个小数

12、单个div滚动时触发      

<script>
        <!--div滚动触发-->
        window.onscroll = function () {
            //获取div距离顶部的距离
            var divH1 = document.getElementById("divID").offsetTop;
            //获取div高度
            var divH2 = parseInt(document.getElementById("divID").style.height);
            //屏幕卷去的高度
            var scrollTops = document.body.scrollTop || document.documentElement.scrollTop;
            //屏幕卷去的高度>div距离顶部的高度和div本身的高度的总和
            if (scrollTops > (divH1 + divH2)) {
                console.log('show');
            } else {
                console.log('hide');
            }
        }
    </script>

    
 23、promise的用法例子：红绿灯顺序延时（大神地址：https://www.cnblogs.com/dojo-lzz/p/5495671.html）
          

//业务函数
            function red() {
                console.log('red');
            }
            
            function green() {
                console.log('green');
            }
            
            function yellow() {
                console.log('yellow');
            }
            
            //配置promise函数1
            var tic = function (timmer, func) {
                return new Promise(function (resolve, reject) {
                    setTimeout(function () {
                        func();
                        resolve();
                    }, timmer);
                });
            };
            
            //配置promise函数2
            var d = new Promise(function (resolve, reject) {
                resolve();
            });
            
            //配置函数顺序
            var step = function (def) {
                def.then(function () {
                    return tic(1000, red);
                }).then(function () {
                    return tic(2000, green);
                }).then(function () {
                    return tic(3000, yellow);
                }).then(function () {
                    console.log("=====");
                    step(def);
                });
            }
            
            //执行函数
            step(d);