H5与android原生的JS交互

公司最近接手了一个电信的项目，其中最关键的技术就是H5页面与android的交互。因为之前项目中H5与原生界面的加载动画是分开写的，导致大小以及效果有差距，所以我才有接触两者之间交互的学习机会。简单的来说需求就是在H5中通过Js调用android自定义的LoadingDialog。

首先 Android通过内置的控件Webview来加载H5页面。主要可以设置的代码如下：

webView.setVerticalScrollBarEnabled(false);
webView.setHorizontalScrollBarEnabled(false);
webView.getSettings().setJavaScriptEnabled(true); //加上这句话才能使用JavaScript方法  
webView.getSettings().setDomStorageEnabled(true);
webView.requestFocus();
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSavePassword(false);
webView.getSettings().setSaveFormData(false);
webView.getSettings().setSupportZoom(false);

首先是JsInterface.java

public class JsInterface {
    Context context;

    public JsInterface(Context context) {
        this.context = context;
    }
    @JavascriptInterface
    public void startFunction() {
        new LoadingDialog(context,true,R.style.loadingDialog).show();
    }
 
  
 
  
 
        在activity里面实现H5里面的方法，注意方法之前要加上注解“ 
  @JavascriptInterface 
  ”，当 
  android:targetSdkVersion的数值小于17无所谓，当大于等于17时就必须添加，否则不会调用方法里面的Java代码。 
  
 
  在MainActivity中 通过  
  wv.addJavascriptInterface(new JsInterface(MainActivity.this),"shady") 
  ; 
  前一个参数为定义的JsInterface，后一个为之后在H5界面中调用的名称。 
  
 
  
 
  
public class MainActivity extends AppCompatActivity {
    private Button btn;
    private WebView wv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn = (Button) findViewById(R.id.btn);
        wv = (WebView) findViewById(R.id.wv);

        wv.getSettings().setJavaScriptEnabled(true);//开启Js支持
        wv.loadUrl("file:///android_asset/test.html");
        //New 一个接口类 后面的是名称
        wv.addJavascriptInterface(new JsInterface(MainActivity.this),"shady");
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                wv.loadUrl("javascript:show(" + "'http://blog.csdn.net/Leejizhou'" + ")");//调用HTML5页     面中的JS方法
            }
        });
    }
}
test页面 
  
 
  
 
  



    
    
    
    
    
    


内容显示
aaaaa
CallAndroidMethod