Android中webview與JS交互、互調(diào)方法實(shí)例詳解

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、留壩網(wǎng)絡(luò)推廣、成都小程序開發(fā)、留壩網(wǎng)絡(luò)營(yíng)銷、留壩企業(yè)策劃、留壩品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供留壩建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：aaarwkj.com

前言：

對(duì)于試水的功能，一般公司都會(huì)采用H5的方式來(lái)開發(fā)，可以用很少的資源與很短的項(xiàng)目工期來(lái)完成。
但許多情況下，H5頁(yè)面會(huì)需要一些原生持有的一些如用戶信息之類的數(shù)據(jù)，一些交互也需要調(diào)用原生的，如toast之類要保持同一個(gè)手機(jī)風(fēng)格一致的交互行為。這個(gè)時(shí)候就需要能夠讓JS主動(dòng)調(diào)用原生的方法來(lái)進(jìn)行操作或者獲取數(shù)據(jù)?；蛘呤窃{(diào)用JS的方法在H5加載的時(shí)候傳遞一些參數(shù)。

對(duì)于原生調(diào)用JS的方法

我們需要實(shí)現(xiàn)一個(gè)WebViewClient，在這個(gè)WebViewClient里面進(jìn)行JS方法加載的替換

如

 webView_.setWebViewClient(new WebViewClient() {
      public void onPageFinished(WebView view, String url) {
        view.loadUrl(MessageFormat.format("javascript:initEvaluationPage({0})",
            Util.wrapGetParameter(json)
        ));
      }
    });

這里的initEvaluationPage必須要和JS的方法名一致

建議傳遞json格式數(shù)據(jù)作為參數(shù)。

不要忘了允許WebView執(zhí)行JS代碼

webView_.getSettings()s.setJavaScriptEnabled(true);

對(duì)于JS調(diào)用原生方法，稍微復(fù)雜一些

首先，需要本地定義一個(gè)接口，接口名需要和JS內(nèi)寫的一致

比如JS需要客戶端保存的用戶信息

JS中代碼是這樣的

  var userInfo = JSON.parse(window.JSUserInfoInterface.getUserInfo());

那么我們本地也需要定義一個(gè)對(duì)應(yīng)的接口

public interface JSUserInfoInterface {

  @JavascriptInterface
  String getUserInfo();

}

接口名方法名一致

實(shí)例化這個(gè)接口，在實(shí)例方法內(nèi)返回我們的用戶信息

 JSUserInfoInterface method3 = new JSUserInfoInterface() {

      @Override
      @JavascriptInterface
      public String getUserInfo() {
        SharedPreferences sharedPreferences = getActivity().getApplicationContext().getSharedPreferences(
            "share", Context.MODE_PRIVATE);
        String tel = sharedPreferences.getString(Constant.KEY_USERNAME, "");
        String userid = sharedPreferences.getString("userid", "");
        return "{\"user_id\":\"" + userid + "\",\"user_tel\":\"" + tel + "\"}";
      }

    };

注意不能忘了 @JavascriptInterface注解

然后將這個(gè)接口方法加入到webView_中，注意第二個(gè)參數(shù)就是接口名，需要和JS中的一致。

webView_.addJavascriptInterface(method3, "JSUserInfoInterface");

這樣就可以在JS調(diào)用window.JSUserInfoInterface.getUserInfo()的時(shí)候返回我們實(shí)例里面給的數(shù)據(jù)

同樣的，我們也可以不返回?cái)?shù)據(jù)直接執(zhí)行。比如彈一個(gè)原生的Dialog。

需要注意的是JS里面是沒有主線程子線程的概念的，當(dāng)JS進(jìn)行網(wǎng)絡(luò)請(qǐng)求的時(shí)候，webview會(huì)默認(rèn)給他開子線程。具體機(jī)制大家感興趣可以去了解。不過(guò)這也就意味著你不能直接在給JS掉的原生方法中進(jìn)行UI操作。你可以選擇發(fā)送給主線程執(zhí)行。

比如下面的代碼我是用rxjava來(lái)切換線程的

 JSDialogInterface method2 = new JSDialogInterface() {

      @Override
      @JavascriptInterface
      public void changeDialog(String arg0) {
        Observable.just(arg0)
            .observeOn(AndroidSchedulers.mainThread())
            .subscribe(mess -> {
              if (mess.equals("show")) {
                ld_.show();
              } else {
                ld_.dismiss();
              }
            });
      }
    };

最后

一點(diǎn)小建議

如果你的項(xiàng)目中有很多或者一定數(shù)量的JS交互，建議寫一個(gè)有返回值的接口。然后通過(guò)JSON參數(shù)來(lái)進(jìn)行控制。內(nèi)部制定一個(gè)解析協(xié)議，根據(jù)JSON的數(shù)據(jù)來(lái)決定要做什么事，避免大量定義接口 ，也避免構(gòu)建太多的實(shí)例消耗資源

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

網(wǎng)站欄目：Android中webview與JS交互、互調(diào)方法實(shí)例詳解
網(wǎng)址分享：http://aaarwkj.com/article18/gghdgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化、Google、自適應(yīng)網(wǎng)站、全網(wǎng)營(yíng)銷推廣、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)