开发的手机项目也进入了最后的关键功能，在手机上嵌入html5图形，需要与android和js进行相互交互，百度了一下android的webview提供了强大的调用js的功能，也可以将android的对象传入到html界面进行使用，不多说上代码（关键在android调用js的函数，传递多个函数的写法，网上没有多少例子）：
1.html文件，demo.html
<html><head><script type="text/javascript" >function updateHtml(type,type2){ document.getElementById("content").innerHTML = "弹出对话框，测试"+type+type2; alert("dialog");}</script></head><body>这是一个js与android的例子 <a onClick="window.ceshi.startFunction()" href="">弹出对话框</a>调用对象方法 <a onClick="per.print()" href="">调用对象方法</a><span id="content"></span></body></html>
2.android端控制代码：
package com.ccb.javascript;import android.app.Activity;import android.app.AlertDialog;import android.content.Context;import android.content.DialogInterface;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.View.OnClickListener;import android.webkit.WebView;import android.widget.Button;import android.widget.Toast;public class MainActivity extends Activity { int priceMenu1 = 1; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // 获取webView 控件 final WebView webview = (WebView) findViewById(R.id.webview); // 加上这句话才能使用javascript方法 webview.getSettings().setJavaScriptEnabled(true); webview.loadUrl("file:///android_asset/demo.html"); webview.addJavascriptInterface(new Person(this), "per"); Button button = (Button) findViewById(R.id.button); // 获取button控件 // 即"调用html中的js方法" // 按钮 // 给button添加事件响应,执行JavaScript的fillContent()方法 button.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { webview.loadUrl("javascript:updateHtml('str11','bar22')");//多个参数拼接 } }); Button button1 = (Button) findViewById(R.id.button1);// 获取button1控件 // 即"重新加载html "按钮 // 给button添加事件响应,执行JavaScript的fillContent()方法 button1.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { Log.d("MainActivity", "button1 OnClick"); webview.loadUrl("file:///android_asset/demo.html"); // return } }); // 增加接口方法,让html页面调用 webview.addJavascriptInterface(this, "ceshi"); Button buttonceshi = (Button) findViewById(R.id.buttonceshi); buttonceshi.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { } }); } public void startFunction() { AlertDialog.Builder ab = new AlertDialog.Builder(MainActivity.this); ab.setTitle("提示"); ab.setMessage("通过js 调用了 java 中的方法"); ab.setPositiveButton("确定", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }); ab.create().show(); } class Person { Context mContext; Person(Context c) { mContext = c; } String name = "我的名字是对象"; int age; public String getName() {//js里面无法直接使用对象加属性的方式访问，暂时没找到方法，只能用对象加getName<span style="white-space:pre"> </span>return name;<span style="white-space:pre"> </span>} public void print() { Toast.makeText(mContext, "你好", Toast.LENGTH_LONG).show(); System.out.println("我成功的调用了对象"); } }}
运行结果如下：
有问题可以探讨，关于html5的部分我也不太懂，以后会好好研究一下
========================分割线，2015年11月13日11:06:24=============================
增加传递list对象数组到js里面：
1.java代码如下：
package com.ccb.javascript;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.app.AlertDialog;import android.content.Context;import android.content.DialogInterface;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.View.OnClickListener;import android.webkit.WebView;import android.widget.Button;import android.widget.Toast;public class MainActivity extends Activity { int priceMenu1 = 1; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // 获取webView 控件 final WebView webview = (WebView) findViewById(R.id.webview); // 加上这句话才能使用javascript方法 webview.getSettings().setJavaScriptEnabled(true); // webview.loadUrl("http://128.128.191.62/cn/mobile/geturl.html"); // 加载assets目录下面的demo.html 界面 webview.loadUrl("file:///android_asset/demo.html"); webview.addJavascriptInterface(new Person(this), "per"); List<Person> programList = initProgramList(); webview.addJavascriptInterface(programList, "programList"); Button button = (Button) findViewById(R.id.button); // 获取button控件 // 即"调用html中的js方法" // 按钮 // 给button添加事件响应,执行JavaScript的fillContent()方法 button.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { // if (priceMenu1 == 1) { // // webview.loadUrl("javascript:chooseOhlcBarType(" + "'bar'" // + "))"); // } else { // webview.loadUrl("javascript:chooseOhlcBarType(" // + "'candleStick'" + "))"); // } webview.loadUrl("javascript:updateHtml('str11','bar22')"); } }); Button button1 = (Button) findViewById(R.id.button1);// 获取button1控件 // 即"重新加载html "按钮 // 给button添加事件响应,执行JavaScript的fillContent()方法 button1.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { Log.d("MainActivity", "button1 OnClick"); webview.loadUrl("file:///android_asset/demo.html"); // return } }); // 增加接口方法,让html页面调用 webview.addJavascriptInterface(this, "ceshi"); Button buttonceshi = (Button) findViewById(R.id.buttonceshi); buttonceshi.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { } }); } public void startFunction() { AlertDialog.Builder ab = new AlertDialog.Builder(MainActivity.this); ab.setTitle("提示"); ab.setMessage("通过js 调用了 java 中的方法"); ab.setPositiveButton("确定", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }); ab.create().show(); } // 初始化数据 private List<Person> initProgramList() { List<Person> list = new ArrayList<Person>(); for (int i = 1; i <= 10; i++) { Person p = new Person("测试", i); list.add(p); } return list; } class Person { Context mContext; Person(Context c) { mContext = c; } Person(String name, int age) { this.name = name; this.id = age; } String name; public void setName(String name) { this.name = name; } int id; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void print() { Toast.makeText(mContext, "你好" + name, Toast.LENGTH_LONG).show(); System.out.println("我成功的调用了对象"); } }}
2.html里的js代码如下：
<html><head><script type="text/javascript"> var startTop = 120; var startPos = 1; var totalNum = 0; var itemHeight = 40; var con1 = ''; function updateHtml(type, type2) { totalNum = window.programList.size(); if (window.programList) { //初始化页面 totalNum = window.programList.size(); for (i = 0; i < totalNum; i++) { con1 += programList.get(i).getId() + programList.get(i).getName(); } } document.getElementById("content").innerHTML = "弹出对话框，测试" + type + type2 + "测试" + totalNum + con1; alert("dialog"); }</script></head><body> 这是一个js与android的例子 <a onClick="window.ceshi.startFunction()" href="">弹出对话框</a> 调用对象方法 <a onClick="ceshi()">调用对象方法</a> <span id="content"></span> </body></html>
http://www.th7.cn/web/js/201511/134192.shtml
9296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
