一、前言

現(xiàn)在市面上有一些app是通過(guò)原生ios、Android加載一個(gè)網(wǎng)頁(yè)實(shí)現(xiàn)的，如圖所示，這樣的app我們稱(chēng)之為 Hybrid App

專(zhuān)業(yè)領(lǐng)域包括做網(wǎng)站、網(wǎng)站設(shè)計(jì)、商城網(wǎng)站建設(shè)、微信營(yíng)銷(xiāo)、系統(tǒng)平臺(tái)開(kāi)發(fā)， 與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開(kāi)發(fā)公司不同，成都創(chuàng)新互聯(lián)的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷(xiāo)的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶(hù)提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

那么為什么要用 hybrid app呢？ 個(gè)人認(rèn)為的原因有兩點(diǎn)：

1.提高開(kāi)發(fā)效率，以釘釘為例在涉及到一些OA操作比如打卡，請(qǐng)假等功能的時(shí)候，顯然一個(gè)嵌入一個(gè)網(wǎng)頁(yè)就能夠滿(mǎn)足需求，如果在讓IOS和Android再去各自開(kāi)發(fā)一套那么效率就很低了。
2.提高迭代效率。以商城為例，商城頁(yè)面會(huì)根據(jù)市場(chǎng)情況實(shí)時(shí)發(fā)生變化，比如遇到各種節(jié)假日活動(dòng)做促銷(xiāo)。那么這個(gè)時(shí)候如果用原生，那么迭代等用戶(hù)去升級(jí)可能這個(gè)活動(dòng)都已經(jīng)過(guò)了，但是用嵌套webview嵌套一個(gè)網(wǎng)頁(yè)只需要網(wǎng)頁(yè)做出修改hybrid app內(nèi)的web頁(yè)面就會(huì)馬上修改，這樣效率就非常高了。

hybrid app 實(shí)際上就是利用原生的組件webview加載一個(gè)url再讓js和原生相互調(diào)用實(shí)現(xiàn)各種功能，那么接下來(lái)我就把js和原生相互調(diào)用的情況做一個(gè)總結(jié)。

二、原生api實(shí)現(xiàn)：js和原生相互調(diào)用

要想讓js和原生相互調(diào)用，對(duì)于webview最基本的一個(gè)設(shè)置就是要允許js腳本執(zhí)行

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

（一）、js調(diào)用原生

假設(shè)我現(xiàn)在有一個(gè)需求：點(diǎn)擊web中的一個(gè)按鈕，將web中的值傳遞給原生并在TextView組件中顯示出來(lái)。那么這個(gè)需求怎么實(shí)現(xiàn)呢？

第一步：在java代碼中定義js要調(diào)用的方法

　　// 定義JS需要調(diào)用的方法    // 被JS調(diào)用的方法必須加入@JavascriptInterface注解    @JavascriptInterface    public void sendMsg(String msg) {//        Log.i(TAG, "JS調(diào)用了Android的hello方法" + msg);//        Toast.makeText(mContext, "JS調(diào)用了Android的hello方法" + msg, Toast.LENGTH_SHORT).show();        //為了方便拿到上下文和ui組件,寫(xiě)一個(gè)回調(diào)接口。        mJSBridge.sendMsg(msg);    }

這里需要說(shuō)明的是，1.要在方法上面添加“@JavascriptInterface”注解，2.定義的方法必須是公共方法

第二步：給webview添加js腳本接口。

 mWebView.addJavascriptInterface(jsInterface, "Android_Interface");

void addJavascriptInterface (Object object, String name)，這個(gè)方法有兩個(gè)參數(shù)，第一個(gè)是一個(gè)注入webview中js上下文的java對(duì)象，第二個(gè)參數(shù)是在js腳本中來(lái)暴露的名稱(chēng)對(duì)象，也就是說(shuō)，這里寫(xiě)什么，待會(huì)在js調(diào)用原生的時(shí)候就寫(xiě)什么。

第三步：用js調(diào)用原生方法

function sendMsg() {
    Android_Interface.sendMsg("你好,這是要傳遞的參數(shù)")
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（從零基礎(chǔ)開(kāi)始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，職業(yè)規(guī)劃）

（二）、原生調(diào)用js

原生調(diào)用js中的方法，例如，在這里我們實(shí)現(xiàn)點(diǎn)擊原生中的按鈕來(lái)改變web中div的樣式。那么這個(gè)該如何實(shí)現(xiàn)呢？

這里直接使用webview的api就能夠?qū)崿F(xiàn)。Android中的代碼如下：　

// 第一種調(diào)用js中代碼的方法
// mWebView.loadUrl("javascript:beStronger()");
//第二種調(diào)用js中代碼的方法,同時(shí)傳值過(guò)去
        mWebView.evaluateJavascript("javascript:beStronger(‘" + str + "‘)", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                //此處為 js 返回的結(jié)果
                Toast.makeText(H5Activity.this, value, Toast.LENGTH_SHORT).show();
            }
        });

在web中的代碼如下：

function beStronger(value) {
    let box = document.getElementById("box");
    // box.innerText = value;
    box.className = "box2";
    box.innerText=value;
    return "小明你好"
}

當(dāng)點(diǎn)擊原生按鈕web中的div就會(huì)發(fā)生變化。

（三）、可能存在的安全性問(wèn)題

但是在js調(diào)用原生的時(shí)候，可能會(huì)存在安全問(wèn)題。具體的產(chǎn)生原因和解決辦法可以參考這一篇文章。《你不知道的 Android WebView 使用漏洞》。那如果要做的app對(duì)安全性要求極高，該怎么辦呢？這里推薦一個(gè)Android的第三方庫(kù)：JSBridge

三、第三方庫(kù)實(shí)現(xiàn)：js和原生相互調(diào)用

關(guān)于這個(gè)第三方庫(kù)的介紹，在說(shuō)明文件中已經(jīng)說(shuō)得很清楚了：該庫(kù)是js和java相互調(diào)用的橋梁，它為js和java之間相互調(diào)用提供了一個(gè)安全且便捷的方法。

（一）、引入第三方庫(kù)

第一步是在 app/build.gradle 文件中引入該庫(kù)。

 repositories {
        // ...
        maven { url "https://jitpack.io" }
    }
dependencies {
    .....  
    compile ‘com.github.lzyzsd:jsbridge:1.0.4‘
}

然后在布局中添加自定義的組件，BridgeWebView，該組件繼承自原生的WebView組件。

 <!-- webview 演示web調(diào)用Java -->
    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.github.lzyzsd.jsbridge.BridgeWebView>
       web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（從零基礎(chǔ)開(kāi)始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，職業(yè)規(guī)劃）

（二）、js調(diào)用原生

這套框架使用的核心就是：handler的注冊(cè)的調(diào)用。

要先實(shí)現(xiàn)js調(diào)用原生，那么首先要在java原生中“注冊(cè)handler”，代碼如下

//注冊(cè)handlerwebView.registerHandler("submitFromWeb", new BridgeHandler() {
        @Override
        public void handler(String data, CallBackFunction function) {
            Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
            function.onCallBack("submitFromWeb exe, response data from Java");
        }
    });

在注冊(cè)了handler以后，就可以在js代碼中調(diào)用指定的handler了，例如上面我們注冊(cè)的handler是“submitFromWeb”，js 可以通過(guò)如下的方式調(diào)用java中注冊(cè)的handler。

 WebViewJavascriptBridge.callHandler(
        ‘submitFromWeb‘
        , {‘param‘: str1}
        , function(responseData) {
            document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
        }
    );

（三）、原生調(diào)用js

要先實(shí)現(xiàn)原生調(diào)用js，那么首先也要在js中注冊(cè)handler

 webViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("data from Java: = " + data);
        var responseData = "Javascript Says Right back aka!";
        responseCallback(responseData);
    });

在js中注冊(cè)了handler以后，在java代碼中就能夠調(diào)用指定名稱(chēng)的handler　

 webView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {
        @Override
        public void onCallBack(String data) {

        }
    });

（四）、需要注意的地方

這個(gè)庫(kù)將注冊(cè)一個(gè) WebViewJavascriptBridge 對(duì)象給window 對(duì)象。那么在你的js代碼中，在使用WebViewJavascriptBridge對(duì)象之前，你必須檢測(cè)WebViewJavascriptBridge對(duì)象是否存在。如果WebViewJavascriptBridge對(duì)象不存在，你可以監(jiān)聽(tīng)WebViewJavascriptBridgeReady事件，如下所示：　

  if (window.WebViewJavascriptBridge) {
        //do your work here
    } else {
        document.addEventListener(
            ‘WebViewJavascriptBridgeReady‘
            , function() {
                //do your work here
            },
            false
        );
    }

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：web前端入門(mén)到實(shí)戰(zhàn)：Js和原生相互調(diào)用總結(jié)-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://www.chinadenli.net/article22/gsicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、品牌網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

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