Hybird App

最近遇到一个需求，产品经理要求Android客户端点击“积分商城”调用H5页面的时候，Android和Js可以相互调用方法。这就涉及到HTML和Android之间的交互和通讯。作为Android实习生,虽然是第一次接触，且产品不像以前比赛项目那样，这次是面向消费者人群。于是乎，一顿猛操作…“度娘”[hhhhh~]。大概了解之后，一开始看的资料全是用内嵌的WebView。但是项目中用的是开源框架AgentWeb，且很多地方都涉及到调用相关方法。接着就开始了AgentWeb 的流浪之旅。buBBle~

具体看以下代码：

import android.content.Context;import android.os.Handler;import android.os.Looper;import android.util.Log;import android.webkit.JavascriptInterface;import android.widget.Toast;import com.just.agentweb.AgentWeb;import org.json.JSONObject;//定义一个AndroidInterface类 方便调用、管理public class AndroidInterface {    private AgentWeb agent;    private Context context;    public AndroidInterface(AgentWeb agent, Context context) {        this.agent = agent;        this.context = context;    }    private Handler deliver = new Handler(Looper.getMainLooper());    @JavascriptInterface    public void callAndroid(final String msg) {        deliver.post(new Runnable() {            @Override            public void run() {                Log.i("Info", "main Thread:" + Thread.currentThread());                Toast.makeText(context.getApplicationContext(), "" + msg, Toast.LENGTH_LONG).show();            }        });        Log.i("Info", "Thread:" + Thread.currentThread());    }        //这里是你要传的参数给Js    @JavascriptInterface    public String getJson(){        String result="";        try {            JSONObject mJSONObject=new JSONObject();            mJSONObject.put("phone_number", "12763912321");            mJSONObject.put("name", "小二");            mJSONObject.put("age","19");            result= mJSONObject.toString();        }catch (Exception e){        }        return result;    }    @JavascriptInterface    public void show(){        Log.i("Test","method");    }}

积分商城部分的相关代码：

import android.graphics.Bitmap;import android.os.Build;import android.support.annotation.RequiresApi;import android.util.Log;import android.webkit.WebResourceRequest;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.LinearLayout;import android.widget.TextView;import com.just.agentweb.AgentWeb;import butterknife.BindView;import butterknife.OnClick;public class TMallActivity extends BaseActivity {    @BindView(R.id.webview)    LinearLayout mWebView;    private String message;    private String mLoadUrl;    @BindView(R.id.tv_webview_title)    TextView webTitle;    private String mTitle;    AgentWeb mAgentWeb;    @Override    protected int getContentViewId() {        return R.layout.activity_web;    }     @RequiresApi(api = Build.VERSION_CODES.KITKAT)    @Override    protected void initView() {        super.initView();        mLoadUrl = getIntent().getStringExtra("url");        mTitle = getIntent().getStringExtra("title");        //加载H5页面地址        mAgentWeb = AgentWeb.with(this)                .setAgentWebParent(mWebView, new LinearLayout.LayoutParams(-1, -1))                .useDefaultIndicator(getResources().getColor(R.color.colorPrimary))                .setWebViewClient(mWebViewClient)                .createAgentWeb()                .ready()                .go(mLoadUrl);        //初始化js交互对象        mAgentWeb.getJsInterfaceHolder().addJavaObject("android", new AndroidInterface(mAgentWeb, this.getApplicationContext()));        mWebView = (LinearLayout) findViewById(R.id.webview);        mWebView.requestFocus();        webTitle.setText(mTitle);        KeyBoardListener.getInstance(this).init();    }    private WebViewClient mWebViewClient = new WebViewClient() {        @Override        public void onPageStarted(WebView view, String url, Bitmap favicon) {            //do you  work        }        @Override        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {            return super.shouldOverrideUrlLoading(view, request);        }        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            return super.shouldOverrideUrlLoading(view, url);        }    };    @OnClick(R.id.ll_back)    public void onViewClicked() {        finish();    }    @Override    protected void onPause() {        mAgentWeb.getWebLifeCycle().onPause();        super.onPause();    }    @Override    protected void onResume() {        mAgentWeb.getWebLifeCycle().onResume();        super.onResume();    }}

关键的代码片段

//初始化js交互对象        mAgentWeb.getJsInterfaceHolder().addJavaObject("android", new AndroidInterface(mAgentWeb, this.getApplicationContext()));

xml代码

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="@dimen/dp_44"        android:background="@color/white"        android:orientation="horizontal"        >        <LinearLayout            android:id="@+id/ll_back"            android:layout_width="@dimen/dp_50"            android:focusable="true"            android:layout_height="match_parent">            <ImageView               android:padding="10dp"                android:layout_width="@dimen/dp_30"                android:layout_height="match_parent"                android:focusable="false"                android:layout_marginLeft="@dimen/dp_10"                android:src="@mipmap/ic_back"                android:layout_gravity="center_vertical"                />        LinearLayout>        <TextView            android:gravity="center"            android:id="@+id/tv_webview_title"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="标题"            android:layout_gravity="center"            android:layout_marginRight="@dimen/dp_50"            android:textColor="@color/black"            android:maxLines="1"            android:ellipsize="end"            android:textSize="@dimen/dp_15"/>    LinearLayout>    <LinearLayout        android:orientation="vertical"        android:id="@+id/webview"        android:overScrollMode="never"        android:scrollbars="none"        android:layout_width="match_parent"        android:layout_height="match_parent"/>LinearLayout>

这样Android端的方法就定义好了。接下来是Js的工作了。

Js代码片段

<!DOCTYPE html><html><head>    <meta charset="utf-8"/> <script> window.android.callAndroid("北海有雨"); </script></head>//省略。。。。

window.android.callAndroid("");

其中android是在初始化Js对象的时候约定好的，你也可以写成其他的，例如“jsandroid”…而callAndroid()是我们定义好的方法。同样，要传参数的话，你可以调用getJson（）这个方法，传参，返回String类型。

这样，只要参数没传错的话，工作就完成了。

感谢查看！

Hybrid App混合开发实战