Android和H5之间的交互hybridApp开发也不是什么新鲜事了，其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的？1、webView加载页面我们都知道在Android中是通过webView来加载html页面的，根据HTML文件所在的位置不同写法也不同：//例如：加载assets文件夹下的test.html页面mWebView.loadUrl("file:///android_asset/test.html")//例如：加载网页mWebView.loadUrl("")如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时，页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话，那么就得设置setWebViewClient：mWebView.setWebViewClient(newWebViewClient(){@OverridepublicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){mWebView.loadUrl(url)returntrue}}})2、Android本地通过Java调用HTML页面中的JavaScript方法想要调用js方法那么就必须让webView支持WebSettingswebSettings=mWebView.getSettings()//设置为可调用js方法webSettings.setJavaScriptEnabled(true)若调用的js方法没有返回值，则直接可以调用mWebView.loadUrl("JavaScript:do()")其中do是js中的方法；若有返回值时我们可以调用mWebView.evaluateJavascript()方法：mWebView.evaluateJavascript("sum(1,2)",newValueCallback(){@OverridepublicvoidonReceiveValue(Stringvalue){Log.e(TAG,"onReceiveValuevalue="+value)}})js代码如下：2、js调用Android本地Java方法在Android4.2以上可以直接使用@JavascriptInterface注解来声明，下面是在一个本地Java方法publicclassJsInteration{@JavascriptInterfacepublicStringback(){return"helloworld"}}定义完这个方法后再调用mWebView.addJavascriptInterface()方法：mWebView.addJavascriptInterface(newJsInteration(),"android")那么在js中怎么来调用呢？4、拦截HTML页面中的点击事件mWebView.setWebViewClient(newWebViewClient(){@OverridepublicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){//判断url拦截事件if(url.equals("file:///android_asset/test2.html")){Log.e(TAG,"shouldOverrideUrlLoading:"+url)startActivity(newIntent(MainActivity.this,Main2Activity.class))returntrue}else{mWebView.loadUrl(url)returnfalse}}})以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码：mainActivitypublicclassMainActivityextendsAppCompatActivity{publicstaticfinalStringTAG="MainActivity"privateWebViewmWebView@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)mWebView=(WebView)findViewById(R.id.webView)mWebView.loadUrl("file:///android_asset/test.html")WebSettingswebSettings=mWebView.getSettings()webSettings.setJavaScriptEnabled(true)mWebView.addJavascriptInterface(newJsInteration(),"android")mWebView.setWebViewClient(newWebViewClient(){@OverridepublicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){if(url.equals("file:///android_asset/test2.html")){Log.e(TAG,"shouldOverrideUrlLoading:"+url)startActivity(newIntent(MainActivity.this,Main2Activity.class))returntrue}else{mWebView.loadUrl(url)returnfalse}}})}//Android调用有返回值js方法@TargetApi(Build.VERSION_CODES.KITKAT)publicvoidonClick(Viewv){mWebView.evaluateJavascript("sum(1,2)",newValueCallback(){@OverridepublicvoidonReceiveValue(Stringvalue){Log.e(TAG,"onReceiveValuevalue="+value)}})}publicclassJsInteration{@JavascriptInterfacepublicStringback(){return"helloworld"}}}test.html调用本地方法点击在react native中有这么几种日志： 在debug模式下，react native默认打印trace以上级别日志 在release模式下，react native默认打印error以上级别日志 如果想在release模式下，打印所有console日志，可以在AppDelegate.m中这么干： 1、引入RCTLog头文件 #import <React/RCTLog.h> 2、在application方法中调整日志级别 RCTSetLogThreshold(RCTLogLevelTrace) 然后在mac系统下就可以通过console.app来过滤查看日志： 有了js console日志，调试生产包就方便很多了！如果不习惯苹果的控制台，可以安装libimobiledevice 安装libimobiledevice很简单，在命令行输入： brew install libimobiledevice --HEAD 不知道brew的自己去脑补，如果电脑上没有brew，请看这里: brew安装传送门如何使用idevicesyslog 很简单，在命令行输入： idevicesyslog 就可以在屏幕上看见手机上所有的日志了。 如何查看我们想要的日志 1）将设备日志重定向到文件 idevicesyslog >> iphone.log & 该命令是将日志导入到iphone.log这个文件，并且是在后台执行。 2）用tail -f和grep查看log tail -f iphone.log tail -f iphone.log | grep 'QQ’ # 查看包含QQ的行 如图：
