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

混合APP开发的套路(三): android和javascript初步交互

2017-04-01 14:59 399 查看

我们测试方便，我们利用布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="测试文本"
android:id="@+id/wvText"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="调用javscript"
android:id="@+id/wvBtn"/>
<WebView
android:layout_width="match_parent"
android:layout_height="227dp"
android:layout_weight="0.27"
android:id="@+id/webView"/>
</LinearLayout>

我们会吧本地index.html文件加载到

WebView

控件中，然后点击

Button

控件，执行一段javascsript脚本（一个js方法）.

index.html内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>this is title</title>
<script>
function show(){
document.getElementById("txtMsg").value = "hello javascript";
}
</script>
</head>
<body>
<input type="text" id="txtMsg">
</body>
</html>

show()

方法实现了，把

hello javascript

写入到input文本框。

我们要在安卓里来调用这个

show()

方法。

Activity里：

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.setContentView(R.layout.webview); // 设置layout

// 获取webView组件
final WebView webView = (WebView)findViewById(R.id.webView);

// 拿到webView的设置对象
WebSettings settings = webView.getSettings();
settings.setAppCacheEnabled(true); // 开启缓存
settings.setJavaScriptEnabled(true); // 开启javascript支持

// 加载文件到webView
AssetManager assetManager = this.getAssets();
try {
InputStream inputStream = assetManager.open("index.html");
byte[] buffer = new byte[inputStream.available()];
inputStream.read(buffer);
// 读取html内容
String htmlContent = new String(buffer,"utf-8");
inputStream.close();

// 加载到webView中
webView.loadData(htmlContent,"text/html","utf-8");
} catch (IOException e) {
e.printStackTrace();
}

// 找到界面上的按钮
Button btn = (Button)findViewById(R.id.wvBtn);
// 给按钮绑定事件
btn.setOnClickListener(new View.OnClickListener(){

@Override
public void onClick(View view) {
webView.loadUrl("javascript:show()");
}
});
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航