一.在android中显示html5页面：
步骤：1.首先在Android的main文件夹下创建assets文件夹，然后在这个文件夹中创建index.html页面（这个页面就是html页面）
2.创建包含webview的布局文件
3.在activity中创建webview的对象
4.然后加载本地的html页面
代码：
package zuo.com.ui.fragment; //针对保健食品的27中保健功能，根据课堂所学，选择其中一种坍塌你的认识， //maoyun82@sina.com import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.webkit.WebView; import android.widget.LinearLayout; import zuo.com.ui.R; /** * Created by Administrator on 2016/10/6. */ public class MineFragment extends Fragment { private LayoutInflater layoutInflater; private WebView webView; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { layoutInflater=LayoutInflater.from(getContext()); View view=layoutInflater.inflate(R.layout.fragment_mine,container,false); webView= (WebView) view.findViewById(R.id.web_view); webView.loadUrl("file:///android_asset/index.html"); return view; }
效果图:
二、android和html5的交互（用javascript调用android）
步骤：
1.首先在android中定义调用javascript的true
2.然后编写WebAppInterface接口，在里面实现逻辑处理，然后在html中编写javascript来处理从android中获取的数据，还能调用webApplnterface中的属性，然后可以在button中调用javascript（）
代码：
package zuo.com.ui.fragment; //针对保健食品的27中保健功能，根据课堂所学，选择其中一种坍塌你的认识， //maoyun82@sina.com import android.content.Context; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.webkit.JavascriptInterface; import android.webkit.WebView; import android.widget.LinearLayout; import android.widget.Toast; import zuo.com.ui.R; /** * Created by Administrator on 2016/10/6. */ public class MineFragment extends Fragment { private LayoutInflater layoutInflater; private WebView webView; private WebAppInterface appInterface; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { layoutInflater = LayoutInflater.from(getContext()); View view = layoutInflater.inflate(R.layout.fragment_mine, container, false); webView = (WebView) view.findViewById(R.id.web_view); webView.loadUrl("file:///android_asset/index.html"); //实现android和html的交互 webView.getSettings().setJavaScriptEnabled(true); appInterface=new WebAppInterface(getContext()); webView.addJavascriptInterface(appInterface, "app"); return view; } class WebAppInterface { private Context context; public WebAppInterface(Context ct) { this.context = ct; } @JavascriptInterface public void sayHello(String name) { Toast.makeText(context, "name=" + name, Toast.LENGTH_LONG).show(); } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 测试</title> <style type="text/css"> .input{ width: 90%; height: 30px; } .button{ width: 60%; height: 20px; background: #fff; color: #000 } </style> <script type="text/javascript"> function sayhello(){ var name = document.getElementById("txtName").value; app.sayHello(name); } </script> </head> <body> <input id="txtName" class="input" > <br/> <hr> <button class="button" οnclick="sayhello()">say Hello</button> </body> </html>
效果图：
步骤：
1.在JS中写上Android需要调用的方法：
function showName(name){
document.getElementById("txtName").value=name;
}
2.然后在class WebAppInterface这个类中，编写调用js中方法的方法：
//安卓调用JS中的方法 public void showName(final String name){ webView.loadUrl("javascript:showName('"+name+"')"); }
3.最后在布局中添加一个button按钮，设置点击事件，调用来调用js的方法
代码：
package zuo.com.ui.fragment; //针对保健食品的27中保健功能，根据课堂所学，选择其中一种坍塌你的认识， //maoyun82@sina.com import android.content.Context; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.webkit.JavascriptInterface; import android.webkit.WebView; import android.widget.Button; import android.widget.LinearLayout; import android.widget.Toast; import zuo.com.ui.R; /** * Created by Administrator on 2016/10/6. */ public class MineFragment extends Fragment { private LayoutInflater layoutInflater; private WebView webView; private WebAppInterface appInterface; private Button button; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { layoutInflater = LayoutInflater.from(getContext()); View view = layoutInflater.inflate(R.layout.fragment_mine, container, false); button= (Button) view.findViewById(R.id.button); webView = (WebView) view.findViewById(R.id.web_view); webView.loadUrl("file:///android_asset/index.html"); //实现android和html的交互 webView.getSettings().setJavaScriptEnabled(true); appInterface=new WebAppInterface(getContext()); webView.addJavascriptInterface(appInterface, "app"); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { appInterface.showName("Android调用JS"); } }); return view; } class WebAppInterface { private Context context; public WebAppInterface(Context ct) { this.context = ct; } //这个方法用于js调用android @JavascriptInterface public void sayHello(String name) { Toast.makeText(context, "name=" + name, Toast.LENGTH_LONG).show(); } //安卓调用JS中的方法 public void showName(final String name){ webView.loadUrl("javascript:showName('"+name+"')"); } } }
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 测试</title> <style type="text/css"> .input{ width: 90%; height: 30px; } .button{ width: 60%; height: 20px; background: #fff; color: #000 } </style> <script type="text/javascript"> function sayhello(){ var name = document.getElementById("txtName").value; app.sayHello(name); } function showName(name){ document.getElementById("txtName").value=name; } </script> </head> <body> <input id="txtName" class="input" > <br/> <hr> <button class="button" οnclick="sayhello()">say Hello</button> </body> </html>
效果图：
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
