h5android交互
㈠ android嵌入h5，怎麼交互
Android和H5之間的交互
hybrid App開發也不是什麼新鮮事了，其中native和h5之間的交互則是必不可少的。Android中是如何和H5交互的？
1、webView載入頁面
我們都知道在Android中是通過webView來載入html頁面的，根據HTML文件所在的位置不同寫法也不同：
//例如：載入assets文件夾下的test.html頁面
mWebView.loadUrl("file:///android_asset/test.html")
//例如：載入網頁
mWebView.loadUrl("http://www..com")
如果只是這樣調用mWebView.loadUrl()載入的話,那麼當你點擊頁面中的鏈接時，頁面將會在你手機默認的瀏覽器上打開。那如果想要頁面在App內中打開的話，那麼就得設置setWebViewClient：
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
}
});
2、Android本地通過java調用HTML頁面中的JavaScript方法
想要調用js方法那麼就必須讓webView支持
WebSettings webSettings = mWebView.getSettings();
//設置為可調用js方法
webSettings.setJavaScriptEnabled(true);
若調用的js方法沒有返回值，則直接可以調用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法；若有返回值時我們可以調用mWebView.evaluateJavascript()方法：
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
js代碼如下：
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function do(){
document.getElementById("p").innerHTML="hello world";
}
</script>
2、js調用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface註解來聲明，下面是在一個本地Java方法
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
定義完這個方法後再調用mWebView.addJavascriptInterface()方法：
mWebView.addJavascriptInterface(new JsInteration(), "android");
那麼在js中怎麼來調用呢？
<script type="text/javascript">
function s(){
//調用Java的back()方法
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
4、攔截HTML頁面中的點擊事件
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//判斷url攔截事件
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
以上就是Java調用js方法以及js調用Java方法的實現交互方式中的一種。下面給出完整代碼：
mainActivity
public class MainActivity extends AppCompatActivity {
public static final String TAG = "MainActivity";
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
mWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsInteration(), "android");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
}
//Android調用有返回值js方法
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View v) {
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
}
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
}
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
</head>
<body>
<button onclick="s()">調用本地方法</button>
<a href="file:///android_asset/test2.html">點擊</a>
<p id="p"></p>
</body>
</html>
㈡ H5頁面與原生App（安卓，IOS）交互
在客戶端項目中，同一個app會開發成兩個版本，一個是安卓版本，一個IOS版本，公司必須有兩個開發團隊（一個安卓團隊，一個IOS團隊）來進行開發，這樣一來，開發成本非常之高。所以，往往在實際項目-中，會嵌套很多H5頁面，一個H5頁面同時兼容安卓和IOS兩個系統 ，這樣一來，大大減少了開發成本，前端開發頁面就必須和原生進行交互。
1. 頁面開發 —— 前端開發人員將所有的頁面按照移動webappp進行開發，做好不同屏幕的適配（寬度100%,視口為移動端視口 (快捷方式meta:vp tap），字體適配rem單位，設置html根標簽的font-size然後根據媒體查詢判斷設備屏幕大小進而設置html根標簽的不同fontsize，去除移動端高亮顯示；小圖標要善於使用字體圖標（常用的字體圖標庫有阿里巴巴矢量圖），改變input標簽的默認樣式可以採用隱藏input,然後通過字體圖標來控制前面的圖標，就可以做成自己想要的圖標效果）
2.前端頁面部署 —— 設置好入口文件（原生一進來就進入的頁面，命名為index.html），部署到對應的伺服器上，通過網址就能夠訪問到頁面，將網址給app客戶端開發人員，他們將app配置好環境後講頁面嵌套在app中。
3.進行數據對接：兩種對接方式（1）.前端頁面自己通過ajax去後台拉數據，然後自己在頁面上使用再提交給後台。前提是原生需要將對應的設備號，加密方式，請求數據所需要的各種參數通過回調函數傳遞給H5頁面，H5頁面拿到這些數據後直接調後台的借口、獲取到數據。（2）.前端頁面不用自己去後台拉取數據，而是通過回調函數，獲取到原生app拉取的數據，前端頁面將這些數據處理後又通過回調函數交給app，再又app發送給後台。兩種調用的優劣比較：如果H5頁面及數據不是很多，使用第二種方式比較合理，不用H5頁面請求數據（不用封裝請求，不用加密數據），不使用框架，大大減少了頁面的大小，提高性能及用戶體驗。如果涉及到的前端頁面非常多，數據交互比較復雜的話，就必須使用第一種對接方式了，app只需要將設備號，加密規則，參數傳遞給H5，H5根據頁面需求自己向後台拉去和請求數據，直接交互，不再通過app進行轉接，減小復雜程度。
㈢ H5調用Android和ios原生方法(react)
混合開發中需要web需要和原生交互方式。
原生需要寫方法來讓H5調用，H5在window中獲取方法。
ios殼中方法全部放在webkit.messageHandlers對象中，前端調用只需要
Android中調用方法，直接在window中調用安卓給的對象
H5調用原生方法後，原生怎麼回調給H5?
跟原生一樣，H5需要寫好方法，讓原生調用，這里調用就是原生直接調用了H5的方法，當然這個方法是要全局的方法，在window對象中的。
在react中寫原生調用的方法，需要在調用的組件中componentDidMount裡面添加方法：
原生方法可能多個地方使用，每次都去判斷系統，然後分別調用不同方法很麻煩，不是前端該有范兒。應該在一個文件中統一處理，其他頁面只需要調用處理好的方法就好。
例如獲取當前設備號，原生封裝好方法後，統一在一個文件中處理：
這樣在其他頁面就可以直接使用getDeviceId就可以得到得到設備號，才不管你是哪個系統呢。
㈣ H5和Native交互原理
Hybrid架構的核心就是JSBridge交互，而實現這個交互的前提是弄清楚H5和Native端的交互
本文主要介紹Native端（Android/iOS）和H5端（泛指前端）的交互原理
原生和前端的交互有兩種方式：url scheme以及JavaScriptCore（在Android中是addJavascriptInterface）
url scheme適用於所有的系統設備（低版本Android和低版本iOS都適用）
但是url scheme畢竟是通過url攔截實現的，在大量數據傳輸，以及效率上都有影響
另一種方法則在低版本中會有這樣或那樣的問題
如JavaScriptCore不支持iOS7以下，addJavascriptInterface在4.2以前有風險漏洞
當然了，時至今日，這些低版本造成的影響已經慢慢不再
這個是最廣為流傳的交互方式，起因是因為在hybrid剛出來時，很多低版本都需要兼容，因此幾乎都用的這種
一些概念：
一般清空下，url scheme是一種類似於url的鏈接,是為了方便app直接互相調用設計的
具體為,可以用系統的OpenURI打開一個類似於url的鏈接(可拼入參數),
然後系統會進行判斷,如果是系統的url scheme,則打開系統應用,
否則找看是否有app注冊這種scheme,打開對應app
需要注意的是,這種scheme必須原生app注冊後才會生效,如微信的scheme為(weixin://)
而本文中混合開發交互的url scheme則是仿照上述的形式的一種方式
具體為,由前端頁面通過某種方式觸發scheme(如用iframe.src),
然後Native用某種方法捕獲對應的url觸發事件,然後拿到當前的觸發url,
根據定義好的協議,分析當前觸發了那種方法,然後根據定義來執行等
協議類似於： quickhybrid://xxx
一般這種交互的url沒有必要在原生app配置中注冊
注意⚠️： ️iOS10以後，urlscheme必須符合url規范，否則會報錯。
基本原理：
如下圖：
相比於其它方案的優點：
所以如果需要兼容這類型低版本的機型，url scheme方案是不二選擇
分別包括Android，iOS中H5和原生互相調用，總結如下：
H5調Android：
首先，原生webview需要先注冊可供前端調用的JS函數
然後H5中即可調用原生中注冊的函數
注意：
Android調H5：
在4.4版本之前
在4.4及以後（包括）
注意：
H5調iOS：
以OC為例
首先，需要引入JavaScriptCore庫
然後原生需要注冊API
之後前端就可以調用了
注意：
iOS調H5：
注意：
本文轉自： http://www.cnblogs.com/dailc/p/8097598.html
㈤ H5&&Android交互
JS調用Android原生方法，參數須是Java的內置類型：int、String等，若是JavaScript對象，需字元串化，否則Android無法正確接收；
JS調用Android原生方法，返回值是內置類型：int、String等，JS能夠正確接收。若是Java自定義類型，則JS接收不到正確數據；
JS可以通過Android原生方法的返回值獲取內置類型的參數，如String
若需要互傳復雜類型的對象，雙方須以String對媒介，以各自語言的Json工具類進行相互轉化；
㈥ Android WebView與H5交互
可以通過registerHandler（）用來注冊一個java函數，來實現js回調的handler
Js做如下聲明
MainActivity
activity_main.xml
wx.html
附上一篇 傳送門
㈦ 安卓Webview 與 vue h5 使用js交互
總的來說都是使用安卓webview.loadUrl(url)載入頁面
url為在線網頁連接
將打包好的網頁資源放入安卓靜態目錄
載入目錄為
Android 調用 JS 有兩種方式，都是通過 WebView 的方法：
webview.loadUrl()
webview.evaluateJavascript()
js方法
vue需要把方法掛載到windows
通過映射js object暴露給js操作
安卓
h5調用
經常需要適配安卓和ios
加入以下機型判斷
Android與H5交互——JSBridge - (jianshu.com)
㈧ H5與原生APP交互方式 (IOS及安卓)
判斷設備
JS與IOS交互方式一：WKScriptMessageHandler
WKWebView有一個內容交互控制器，該對象提供了通過JS向WKWebView發送消息的途徑。需要設置MessageHandler，大家把這個功能簡稱為MessageHandler。
IOS具體實現參考： 鏈接
這里只說js調用
JS與IOS交互方式二：WebViewJavascriptBridge交互 攔截url做事件處理，如果要傳參數，不建議用這種
Android端交互
冒號前面區分是什麼功能，冒號後面是接收的參數