码迷,mamicode.com
首页 > 移动开发 > 详细

Android与H5混合开发

时间:2018-02-12 18:54:12      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:浏览器   lan   down   XML   oct   body   eval   重要   save   

        Android 和 H5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以App和H5页面相结合就显得尤为重要。而android和H5都不可能独立存在,而是相互影响的。例如,H5页面要获取App中的用户的基本信息,App端要操作H5页面等。

        本文主要功能要点

        1.webView如何加载H5页面

        2.Android如何调用H5中的方法

        3.H5如何调用Android中的方法
       

       一、webView如何加载H5页面

       1.载入远程页面

         (1)在AndroidManifest.xml文件中添加权限

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

    (2)布局文件webview.xml         

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical">

    <WebView
        android:id="@+id/wv_webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

 

      (3)MainActivity.java   

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        webView = (WebView)findViewById(R.id.wv_webview);
        loadWeb();
    }

    public void loadWeb(){
        //String url = "https://www.baidu.com/";
        String url = "file:///android_asset/index.html";
        //此方法可以在webview中打开链接而不会跳转到外部浏览器
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl(url);
    }


    //重载onKeyDown的函数,使其在页面内回退,而不是直接退出程序
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
    
}

 

       2.载入本地页面

       (1)新建assets目录用来存放html页面

     右键app->new->folder->assetsfolder

       (2)html页面放入assets目录

  (3)修改url

          webview.loadUrl(file:///android_asset/index.html);

     二、Android如何调用H5中的方法

             (1)添加webview对调用js方法的支持

      //支持html中javascript解析,不管是不是js和android交互,只要网页中含有js都要
      webView.getSettings().setJavaScriptEnabled(true);
      //支持弹窗,也就是支持html网页弹框
      webView.setWebChromeClient(new WebChromeClient(){
      public boolean onJsAlert(WebView view,String url,String message,JsResult result ){
      return super.onJsAlert(view,url,message,result);
      }
      });
    (2)调用h5无参无返回值的方法(直接调用)
      h5方法:
       function show(){
        document.getElementById("temp").innerHTML = "Hello world";
       }
      调用:
      webView.loadUrl("javascript:show()");
   (3)调用h5有参无返回值的方法
       当调用H5带参数的方法时,势必要传入一个字符串,当传入固定字符串时,用单引号括起来即可;当传入变量名时,需要用转义符。
       h5方法:        
       function alertMsg(message){
      alert(message);
       }
       调用:      
       webView.loadUrl("javascript:alertMsg(‘哈哈‘)");
       String content = "9880";
       webView.loadUrl("javascript:alertMsg(\""+content+"\")");
    (4)调用h5有返回值方法
       function sum(i,j){
       return i+j;
       }
      调用:
      webView.evaluateJavascript("sum(1,2)",new ValueCallback() {
      @Override
      public void onReceiveValue(Object value) {
      Toast.makeText(MainActivity.this,"js返回结果为="+value,Toast.LENGTH_LONG).show();
      }
      });
   
完整代码:
index.html



<!DOCTYPE html>
<html>
<head>
<title>测试</title>

</head>
<body onLoad="init();">
    <div id="temp">h5页面</div>
</body>
<script type="text/javascript">


    //无参无返回值的方法
    function show(){
        document.getElementById("temp").innerHTML = "Hello world";
    }

    //有返回值的方法
    function sum(i,j){
        return i+j;
    }

    //有参无返回值的方法
    function alertMsg(message){
        alert(message);
    }

</script>
</html>



    webview.xml
    



<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical">

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginBottom="12dp"
        android:layout_marginTop="8dp"/>


    <WebView
        android:id="@+id/wv_webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >


    </WebView>

</LinearLayout>

MainActivity.java



public class MainActivity extends AppCompatActivity {

    WebView webView;
    Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        btn = (Button)findViewById(R.id.btn);

        btn.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                //调用H5无参无返回值方法
                webView.loadUrl("javascript:show()");
                //调用H5有参方法
                webView.loadUrl("javascript:alertMsg(‘哈哈‘)");
                String content = "9880";
                webView.loadUrl("javascript:alertMsg(\""+content+"\")");
                //调用H5有返回值方法
                webView.evaluateJavascript("sum(1,2)",new ValueCallback() {
                    @Override
                    public void onReceiveValue(Object value) {
                        Toast.makeText(MainActivity.this,"js返回结果为="+value,Toast.LENGTH_LONG).show();
                    }
                });
            }
        });


        webView = (WebView)findViewById(R.id.wv_webview);
        loadWeb();

    }

    @SuppressLint("JavascriptInterface")
    public void loadWeb(){

        String url =  "file:///android_asset/index.html";
        //此方法可以在webview中打开链接而不会跳转到外部浏览器
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl(url);

        //支持弹窗,也就是支持html网页弹框
        webView.setWebChromeClient(new WebChromeClient(){
            public boolean onJsAlert(WebView view,String url,String message,JsResult result ){
                return super.onJsAlert(view,url,message,result);
            }
        });

        //支持html中javascript解析,不管是不是js和android交互,只要网页中含有js都要
        webView.getSettings().setJavaScriptEnabled(true);
    }


    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //重写onKeyDown,当浏览网页,WebView可以后退时执行后退操作。
        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode,event);
    }


}

 三、H5如何调用Android中的方法
Android需要新建一个类,里边提供给H5操作的方法,并规定别名。
  (1)新建一个类
    
    public  class  JsInteration  {
     @JavascriptInterface
    public String back() {
    return "hello world";
    }
    }  
  (2)webView添加js接口,并起别名
  
    webView.addJavascriptInterface(new JsInteration(),"android");
  (3)H5调用
    
    window.android.back();
完整代码:
index.html
<!DOCTYPE html>
<html>
<head>
<title>测试</title>

</head>
<body onLoad="init();">
    <div id="temp">h5页面</div>

    <button id="btn" onclick="getMsg()">按钮</button>
</body>
<script type="text/javascript">

    function getMsg(){
        var result=window.android.back();
          document.getElementById("temp").innerHTML=result;
    }

</script>
</html>

 

MainActivity.java
public class MainActivity extends AppCompatActivity {

    WebView webView;
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);    

        webView = (WebView)findViewById(R.id.wv_webview);
        loadWeb();

    }

    @SuppressLint("JavascriptInterface")
    public void loadWeb(){

        String url =  "file:///android_asset/dj_index.html";
        //此方法可以在webview中打开链接而不会跳转到外部浏览器
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl(url);

        /*
          打开js接口,参数1为本地类名;参数2为别名
         */
        webView.addJavascriptInterface(new JsInteration(),"android");
    }




    public  class  JsInteration  {
        @JavascriptInterface//一定要写,不然h5调不到这个方法
        public  String  back() {
            return "hello world";
        }
    }


    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //重写onKeyDown,当浏览网页,WebView可以后退时执行后退操作。
        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode,event);
    }


}

 

Android与H5混合开发

标签:浏览器   lan   down   XML   oct   body   eval   重要   save   

原文地址:https://www.cnblogs.com/daisy270/p/8444924.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!