工作笔记总结

我会带着你远行 2023-01-12 11:55 27阅读 0赞

###### 好记性不如烂笔头 ######

###### Flex ######

flex:direction :row/ column   横向排列  纵向
    flex-warp ：warp 拆行拆列
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;

###### H5与Android和IOS 交互 ######

注意：前端需要用缓存时，app 需要设置允许缓存，需要缓存的页面都要设置 还有弹框
    
    h5 传参数给 Android
    //$("#login").attr("href","Javascript:android.returnAndroid('"+ sendData + "')")
    
    h5 接收来自Android的参数
    function getAndroidPushId(dataFromAndroid){
           sendData = JSON.parse(dataFromAndroid)	    			
     }
    
    function succBackAndroid(res){  // res 为js 向Android 传的参数			
        // 安卓 调用  js
        android.getAndroid(JSON.stringify(dataToAndroid))
    }
    
    h5 传参数给IOS
    function setupWebViewJavascriptBridge(callback) {
       if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
       if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
      window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。
       var WVJBIframe = document.createElement('iframe'); // 创建一个 iframe 元素
       WVJBIframe.style.display = 'none'; // 不显示
     //WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; 
       WVJBIframe.src = 'https://__bridge_loaded__';    // 设置 iframe 的 src 属性
       document.documentElement.appendChild  (WVJBIframe); // 把 iframe 添加到当前文导航上。
       setTimeout(function() { document.documentElement.removeChild(WVJBIframe)     }, 0)
     }
    	    
       setupWebViewJavascriptBridge(function(bridge){
                   // 这里主要是注册 OC 将要调用的 JS 方法。
    	bridge.registerHandler('getIosPushId', function(dataFromIos, responseCallback) {
    	    // data 是 OC 传递过来的数据. responseCallback 是 JS 调用完毕之后传递给 OC 的数据
                       alert("JS 被 OC 调用了.");
    	   responseCallback({ 'code':0 });
    	   sendData = JSON.parse(dataFromIos)	  
    	 })
    
                 //JS 调用 OC 的 block，传递 JS 参数，并接受 OC 的返回值。
                    WebViewJavascriptBridge.callHandler('IosloginSuccess',{data : JSON.stringify(dataToIOS)},function(dataFromOC){
    	             // 
                  });		        
    });

###### 常用正则 ######

中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
    reg.test(value)

###### 文本设置显示行数 ######

单行文本
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    多行文本
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    
    技巧：
    将height设置为line-height的整数倍，防止超出的文字露出。

###### 移动端a标签点击去掉背景边框等 ######

1.取消a标签在移动端点击时的蓝色
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
    2.使用图片作为a标签的点击按钮时，当触发touchstart的时候，往往会有一个灰色的背景
    a,a:hover,a:active,a:visited,a:link,a:focus{
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
        outline:none;
        background: none;
        text-decoration: none;
    }
    3.改变选中内容的背景颜色
    ::selection { 
        background: #FFF; 
        color: #333; 
    } 
    
    ::-moz-selection { 
        background: #FFF; 
        color: #333; 
    } 
    
    ::-webkit-selection { 
        background: #FFF; 
       color: #333; 
    }

###### 去除ios input框点击时的灰色背景/阴影 ######

-webkit-tap-highlight-color:rgba(0,0,0,0);
     -webkit一appearance: none;

###### 消除IOS input 默认样式 ######

input[type="button"], input[type="submit"], input[type="reset"] {
        -webkit-appearance: none;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
    }

###### html5调用安卓或者ios的拨号功能 ######

###### 禁止复制文字 ######

*{
        user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
    }

###### 编码 ######

//编码
    
    decodeURI(编码前字符);
    
    
    //解码
    
    decodeURIComponent(编码后字符);

###### IOS 内嵌H5页面 , 后退不刷新问题解决方法 ######

$(function () {
        var isPageHide = false;
        window.addEventListener('pageshow', function () {
            if (isPageHide) {
                window.location.reload();
            }
        });
    
        window.addEventListener('pagehide', function () {
             isPageHide = true;
        });
    })