工作笔记总结

好记性不如烂笔头

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的拨号功能

<a href="tel:4008106999,1034">400一810一6999 转 1034</a>
<a href="tel:15677776767">点击拨打15677776767</a>

禁止复制文字

*{
    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;
    });
})