您的位置：首页 > 移动开发 > Android开发

Android Html交互_二_ JS与App互相调用

2016-03-31 17:09 751 查看

Android Html交互<二> JS与App互相调用

@(Android系统源码解析)[Android, html]

声明：转载请注明出处,知识有限，如有错误,请多多交流指正!

Android Html交互二 JS与App互相调用

效果图

网页Html端代码

Android端代码

解释

场景：html网页中JS与App相互调用，相互传输数据，互相调用；

代码下载地址: https://github.com/app-demo/AndroidHtml.git

效果图

代码主要分为2部分Android和Html代码，为了方便测试将
index_js.html
放在App项目
assets
文件夹下面，再通过
WebView
加载页面，效果图如下:



网页Html端代码

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>JS和Android交互</title>

// 样式
<style>
button {
height: 36px;
width: 100%;
background: #98bf21;
}
</style>
</head>

<body>
<p>JS和Android交互</p>

<button onclick="invokeAppMethod()">JS调用App方法(不带参数)</button>
<br/>
<br/>
<button onclick="sendInfoToJava()">JS调用App方法(带参数)</button>

<script>
// 发送消息到Android客户端
function sendInfoToJava() {
//调用android程序中的方法，并传递参数
var name = '我是JS';
window.AndroidWebView.showInfoFromJs(name);
}

// 直接调用Android客户端中的showInfoFromJs方法
function invokeAppMethod() {
window.AndroidWebView.showInfoFromJs();
}

//在Android代码中调用此方法
function showInfoFromApp(msg) {
alert("来自App的信息：" + msg);
}

//在Android代码中调用此方法,不传递信息
function showInfoFromApp() {
alert("通过App调用JS");
}
</script>
</body>

</html>


Android端代码

如果Html在服务器，需要添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />


布局代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:padding="8dp"
tools:context=".MainActivity">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="一、Android调用Html中JS代码:" />

<EditText
android:id="@+id/input_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入App发送给JS的信息" />

<Button
android:id="@+id/btn_invoke_js"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="App调用JS(带数据)" />

<Button
android:id="@+id/btn_invoke_js2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="App调用JS(不带数据)" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="二、Html中JS调用Android代码:" />

<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>


主要逻辑代码

/**
* js与Android互调，交互
*/
public class AndroidJsActivity extends AppCompatActivity {
private WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_android_js);
webView = (WebView) findViewById(R.id.webView);

webView.setVerticalScrollbarOverlay(true);
//设置WebView支持JavaScript
webView.getSettings().setJavaScriptEnabled(true);

// 加载本地网页
webView.loadUrl("file:///android_asset/index_js.html");

//在js中调用本地java方法
webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");

//添加客户端支持
webView.setWebChromeClient(new WebChromeClient());

//设置监听
onInvokeJs();
onInvokeJs2();
}

/**
* App调用JS代码
*/
private void onInvokeJs() {
findViewById(R.id.btn_invoke_js).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();
//调用js中的函数：showInfoFromApp(msg)
webView.loadUrl("javascript:showInfoFromApp('" + msg + "')");
}
});
}

/**
* App调用JS代码
*/
private void onInvokeJs2() {
findViewById(R.id.btn_invoke_js2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//调用js中的函数：showInfoFromApp()
webView.loadUrl("javascript:showInfoFromApp()");
}
});
}

}


JS调用Android的类

/**
* Author: river
* Date: 2016/3/29 14:30
* Description: js调用
*/
class JsInterface {
private Context mContext;

public JsInterface(Context context) {
this.mContext = context;
}

/**
* 在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
* 此方法名称一定要和js中showInfoFromJava方法一样
*
* @param name
*/
@JavascriptInterface
public void showInfoFromJs(String name) {
Toast.makeText(mContext, "来自js的信息:" + name, Toast.LENGTH_SHORT).show();
}

@JavascriptInterface
public void showInfoFromJs(){
Toast.makeText(mContext, "JS调用App方法", Toast.LENGTH_SHORT).show();
}
}


解释

Android调用JS

通过Android代码中
webView.loadUrl("javascript:showInfoFromApp()");
中
javascript:showInfoFromApp()
与js中的
function showInfoFromApp()
方法名称一致，必须相同名称；同理有参数的调用的是
function showInfoFromApp(msg)


JS调用Android

通过JS中
window.AndroidWebView
关联到Android中
WebView
的name是
AndroidWebView
,Android端
webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");
方法关联到JS，这样JS就可以通过
window.AndroidWebView.showInfoFromJs()
中关联到Android中
JsInterface#showInfoFromJs()


两者互调主要是名称要一致，否则无法关联上去
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html android JS App 互调
相关文章推荐
新的分享
章节导航