js与native的交互
Posted sql
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js与native的交互相关的知识，希望对你有一定的参考价值。
WebView与javascript交互(android)：
WebView与Javascript交互是双向的数据传递，1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数，具体实现以下面例子为主：
1.）mainfest.xml中加入网络权限
<uses-permission android:name="android.permission.INTERNET"/>
2.）WebView开启支持JavaScript
mWebView.getSettings().setJavaScriptEnabled(true);
3.）简单的H5网页实现，主要实现actionFromNative()、actionFromNativeWithParam(String str)，放在assets文件下
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript"> function actionFromNative(){ document.getElementById("log_msg").innerHTML += "<br\\>Native调用了js函数"; } function actionFromNativeWithParam(arg){ document.getElementById("log_msg").innerHTML += ("<br\\>Native调用了js函数并传递参数："+arg); } </script> </head> <body> <p>WebView与Javascript交互</p> <div> <button onClick="window.wx.actionFromJs()">点击调用Native代码</button> </div> <br/> <div> <button onClick="window.wx.actionFromJsWithParam(\'come from Js\')">点击调用Native代码并传递参数</button> </div> <br/> <div id="log_msg">调用打印信息</div> </body> </html>
4.）Native实现与JS交互函数：actionFromJs()、actionFromJsWithParam()
public class MainActivity extends Activity {
private WebView mWebView;
private TextView logTextView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
mWebView.getSettings().setJavaScriptEnabled(true);
// 从assets目录下面的加载html
mWebView.loadUrl("file:///android_asset/wx.html");
mWebView.addJavascriptInterface(this, "wx");
logTextView = (TextView) findViewById(R.id.text);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new Button.OnClickListener() {
public void onClick(View v) {
// 无参数调用
mWebView.loadUrl("javascript:actionFromNative()");
// 传递参数调用
mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "\'come from Native\'" + ")");
}
});
}
@android.webkit.JavascriptInterface
public void actionFromJs() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "js调用了Native函数", Toast.LENGTH_SHORT).show();
String text = logTextView.getText() + "\\njs调用了Native函数";
logTextView.setText(text);
}
});
}
@android.webkit.JavascriptInterface
public void actionFromJsWithParam(final String str) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "js调用了Native函数传递参数：" + str, Toast.LENGTH_SHORT).show();
String text = logTextView.getText() + "\\njs调用了Native函数传递参数：" + str;
logTextView.setText(text);
}
});
}
}
mWebView.addJavascriptInterface(this, "wx");相当于添加一个js回调接口，然后给这个起一个别名，我这里起的名字wx（微信哈哈）。@android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的，在4.2以后才有的。
5.）布局文件实现
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""/>
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Native调用js函数"/>
</LinearLayout>
6.）代码简单解说
（1.）js（HTML）访问Android（Java）端代码是通过jsObj对象实现的，调用jsObj对象中的函数，如： window.jsObj.actionFromJs()，这里的jsObj就是Native中添加接口的别名
（2.）Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebView.loadUrl("javascript:actionFromNative()");
demo运行截图：
Objective-C与JavaScript交互(ios)
http://www.cocoachina.com/ios/20160127/15105.html
以上是关于js与native的交互的主要内容，如果未能解决你的问题，请参考以下文章
REACT NATIVE 系列教程之十二REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信