移动端知识点vw适配vw适配在.postcssrc.js中使用了postcss-viewport-units，官方配置直

vw适配

vw 适配在 .postcssrc.js 中使用了 postcss-viewport-units，官方配置直接默认，该插件功能是给 CSS 的属性添加 content 的属性，配合 viewport-units-buggyfill 库给 vw、vh、vmin和vmax 做适配的操作，但是因为和伪元素冲突会导致引入第三方库和伪元素冲突，所以需要转化过程中我加入了过滤器，用来回避伪类选择器

"postcss-viewport-units":{  
    filterRule: rule => rule.selector.indexOf('::after') === -1 &&   
        rule.selector.indexOf('::before') === -1 &&   
        rule.selector.indexOf(':after') === -1 &&   
        rule.selector.indexOf(':before') === -1
}

1px细线

@mixin border-px($type: default, $color: #ebedf0, $radius: 0) {  
    position: relative;  
    &::after {  
        content: "";  
        box-sizing: border-box;  
        position: absolute;  
    @if $type == default {    
        top: 0;    
        left: 0;    
        width: 200%;    
        height: 200%;    
        border: 1PX solid $color;    
        border-radius: $radius;  
    } @else if $type == top {    
        top: 0;    
        left: 0;    
        width: 200%;    
        height: 1PX;    
        background: $color;  
    } @else if $type == bottom {    
        bottom: 0;    
        left: 0;    
        width: 200%;    
        height: 1PX;    
        background: $color;  
    } @else if $type == left {    
        top: 0;    
        left: 0;    
        width: 1PX;    
        height: 200%;    
        background: $color;  
    } @else if $type == right {    
        top: 0;    
        right: 0;    
        width: 1PX;    
        height: 200%;    
        background: $color;  
    } 
     transform: scale(0.5);  
    transform-origin: 0 0;  
    }
}

vconsole 调式

可使用 vconsole 组件调试手机移动端页面

混合开发

Android 与 h5 通过 bridge 传递消息，自己手动写的 json 数据可以在子线程传过来，通过 api 接口请求的数据需要主线程前端才可以接收到（前端自己请求 api 接口会出现 cookie 携带被拦截导致无法请求成功数据，所以使用 token 对用户验证比较好）

Android 会出现 echarts 图形不显示，可在 mounted 创建延时渲染 echarts 图形来解决

混合开发 app，在 vue 中使用 WebViewJavascriptBridge 来与 Android 和 ios 进行交互：

//iOS 交互声明
let flag = true;
function connectWebViewJavascriptBridgeIOS(callback) {  
    if (window.WebViewJavascriptBridge) {    
        return callback(window.WebViewJavascriptBridge)  
    }  
    if (window.WVJBCallbacks) {    
        return window.WVJBCallbacks.push(callback)  
    } 
     window.WVJBCallbacks = [callback]  
    let WVJBIframe = document.createElement('iframe')  
    WVJBIframe.style.display = 'none'  
    WVJBIframe.src = 'https://__bridge_loaded__'  
    document.documentElement.appendChild(WVJBIframe)  
    setTimeout(() => {    
        document.documentElement.removeChild(WVJBIframe)  
    }, 0)
}
//Android 交互声明
function connectWebViewJavascriptBridgeANDROID(callback) {  
    if (window.WebViewJavascriptBridge) {    
        callback(WebViewJavascriptBridge);  
    } else {    
        document.addEventListener(      
            "WebViewJavascriptBridgeReady",      
            function () {        
                callback(WebViewJavascriptBridge);      
            },      
            false    
        );  
    }
}
export default {  
    callhandler(name, data, callback) {    
        if(/(Android)/i.test(navigator.userAgent)){      
            connectWebViewJavascriptBridgeANDROID(function(bridge){        
                bridge.callHandler(name, data, callback)      
            })    
        }else if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){      
            connectWebViewJavascriptBridgeIOS(function (bridge) {       
               bridge.callHandler(name, data, callback)      
            })    
        }  
    },  
    registerhandler(name, callback) {    
        if(/(Android)/i.test(navigator.userAgent)){      
            connectWebViewJavascriptBridgeANDROID(function(bridge){        
                if(flag){          
                    bridge.init(function(message, responseCallback) {            
                        callback(message, responseCallback)          
                    });          
                    flag = false;        
                }        
                bridge.registerHandler(name, function(data, responseCallback){          
                    callback(data, responseCallback)        
                })      
            })    
        }else if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){      
            connectWebViewJavascriptBridgeIOS(function (bridge) {        
                bridge.registerHandler(name, function (data, responseCallback) {          
                    callback(data, responseCallback)        
                })      
            })    
        }      
    }
}