web前端入门到实战：Js和原生相互调用总结

一、前言

现在市面上有一些app是通过原生ios、Android加载一个网页实现的，如图所示，这样的app我们称之为 Hybrid App

那么为什么要用 hybrid app呢？ 个人认为的原因有两点：

1.提高开发效率，以钉钉为例在涉及到一些OA操作比如打卡，请假等功能的时候，显然一个嵌入一个网页就能够满足需求，如果在让IOS和Android再去各自开发一套那么效率就很低了。
2.提高迭代效率。以商城为例，商城页面会根据市场情况实时发生变化，比如遇到各种节假日活动做促销。那么这个时候如果用原生，那么迭代等用户去升级可能这个活动都已经过了，但是用嵌套webview嵌套一个网页只需要网页做出修改hybrid app内的web页面就会马上修改，这样效率就非常高了。

hybrid app 实际上就是利用原生的组件webview加载一个url再让js和原生相互调用实现各种功能，那么接下来我就把js和原生相互调用的情况做一个总结。

二、原生api实现：js和原生相互调用

要想让js和原生相互调用，对于webview最基本的一个设置就是要允许js脚本执行

 WebSettings settings = mWebView.getSettings();
 settings.setJavaScriptEnabled(true);

（一）、js调用原生

假设我现在有一个需求：点击web中的一个按钮，将web中的值传递给原生并在TextView组件中显示出来。那么这个需求怎么实现呢？

第一步：在java代码中定义js要调用的方法

　　// 定义JS需要调用的方法    // 被JS调用的方法必须加入@JavascriptInterface注解    @JavascriptInterface    public void sendMsg(String msg) {//        Log.i(TAG, "JS调用了Android的hello方法" + msg);//        Toast.makeText(mContext, "JS调用了Android的hello方法" + msg, Toast.LENGTH_SHORT).show();        //为了方便拿到上下文和ui组件,写一