25.Native和Html5的交互（在anroid中使用html5,实现UI交互和数据显示）

来源：互联网发布：php缓存技术有哪些编辑：程序博客网时间：2024/06/08 13:51

一.在android中显示html5页面：

步骤：

1.首先在Android的main文件夹下创建assets文件夹，然后在这个文件夹中创建index.html页面（这个页面就是html页面）

2.创建包含webview的布局文件

3.在activity中创建webview的对象

4.然后加载本地的html页面

代码：

package zuo.com.ui.fragment;//针对保健食品的27中保健功能，根据课堂所学，选择其中一种坍塌你的认识，//maoyun82@sina.comimport 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.comimport 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();        }    }}

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);   }</script></head><body><input id="txtName" class="input" ><br/><hr><button class="button" onclick="sayhello()">say Hello</button></body></html>

效果图：

三、在android调用javascript（）

步骤：

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.comimport 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" onclick="sayhello()">say Hello</button></body></html>

效果图：

0 0