手机端H5开发技巧

511 阅读1分钟

JS调用原生方法

JS调用Android/iOS原生方法
jsCallNative = () => {            
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {                
    //使用WK API直接注册调用方法
    //window.webkit.messageHandlers.callNativeMethod.postMessage('scan');
    //使用WebVuewJavascriptBridge
    bridge.callHandler('getAppInfo', {'foo': 'bar'}, function(response) {       log('JS got response', response)    })
  } else if (/(Android)/i.test(navigator.userAgent)) {
      var native = window['NATIVE'] //NATIVE是JSInterface暴露模块                
     if (native) {                    
         native.callNativeMethod();//                
     }else{                    
         alert('未找到方法')                
     }            
  }        
}

手机端网页内调试工具

为了方便手机端调试H5页面中相关信息,入cookie的查看、网络请求的查看,使用eruda插件可以使开发者看到和电脑端浏览器相似的调试效果。

<!-- 手机端debug ,只需要在项目的html入口文件加上如下script即可使用-->
<script src="https://cdn.bootcss.com/eruda/1.5.2/eruda.min.js">
</script>
<script>eruda.init();</script>