H5与android的混合式开发

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

一.webView如何加载H5页面
(1)添加权限

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

（2）布局文件

<?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）Activity代码

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.我们来对其中的方法调用进行简单的了解

         （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.loa