android，ios與web互動-—APP使用H5頁面
一、ios與H5之間的互動
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <h1>OC與JS互動</h1> | |
| <p id="yidahulian1"></p> | |
| <p id="yidahulian2"></p> | |
| <script> |
|
| --不帶引數oc->js | function yida_oc_to_js() |
| { | |
| x=document.getElementById("yidahulian1"); // 找到元素 | |
| x.innerHTML="OC呼叫JS(沒有傳值)[成功]";// 改變指定標籤內容 | |
| } | |
| -----帶引數的oc->js | function yida_oc_to_js2(num,name,url) |
| { | |
| //alert(name+url); | |
| x=document.getElementById("yidahulian2"); // 找到元素 | |
| x.innerHTML="OC呼叫JS[成功],傳過來的字串為:"+num+name+url;// 改變指定標籤內容 | |
| } | |
| </script> | |
| <input type="button" value="JS呼叫OC不傳值" onclick="js_call_oc()"/> | |
| <input type="button" value="JS呼叫OC並傳值" onclick="js_call_oc2()"/> | |
| <input type="button" value="JS呼叫OC程式碼裡的無參方法名" onclick="js_call_oc3()"/> | |
| <input type="button" value="JS呼叫OC程式碼裡的有引數方法名" onclick="js_call_oc4()"/> | |
| <script> | |
| -----js->oc | function js_call_oc() |
| { | |
| //向OC程式碼傳空值 | |
| window.webkit.messageHandlers.yida_js_to_oc.postMessage(null); | |
| } | |
| function js_call_oc2() | |
| { | |
| //向OC程式碼傳字串 | |
| window.webkit.messageHandlers.yida_js_to_oc2.postMessage("百度https://www.baidu.com") | |
| } | |
| function js_call_oc3() | |
| { | |
| //向OC程式碼傳陣列 | |
| window.webkit.messageHandlers.yida_js_to_oc3.postMessage(["hello","world","百度"]); | |
| } | |
| function js_call_oc4() | |
| { | |
| //向OC程式碼傳字典(物件) | |
| window.webkit.messageHandlers.yida_js_to_oc4.postMessage({"key1":"百度","key2":"hello world"}); | |
| } | |
| </script> | |
| </body> | |
| </html> |
二、
Android和H5互動一篇就夠了
具體參考：https://blog.csdn.net/w15321970103/article/details/75635454
第一種方法：
android端：
//這個是button的點選事件
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn1:
//引數 “javascript:” + js方法名
wv.loadUrl("javascript:message()");
break;
case R.id.btn2:
//在android呼叫js有參的函式的時候引數要加單引號
wv.loadUrl("javascript:message2('" + name + "')");
break;
}
}
//下面的兩個方法是讓H5網頁來調的
//這個註解必須加 因為 相容問題
@JavascriptInterface
public void setMessage() {
Toast.makeText(this, "我彈", Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void setMessage(String name) {
Toast.makeText(this, "我彈彈" + name, Toast.LENGTH_SHORT).show();
}
H5頁面端：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="btn0">呼叫android無參引數</button>
<button id="btn1">呼叫android有參引數</button>
<a href='aa://atguigu/path'>點我試試</a>
<a href='https://www.baidu.com'>百度</a>
<div id="content"></div>
</body>
<script type="text/javascript">
var name = "啊福老師 哇哇哇"
document.getElementById("btn0").onclick = function(){
//android是傳過來的物件名稱，setmessage是android中的方法
android.setMessage();
};
document.getElementById("btn1").onclick = function(){
//android是傳過來的物件名稱，setmessage是android中的方法
android.setMessage(name);
};
var content = document.getElementById("content");
function message(){
content.innerHTML = "呼叫了有參的js函式"
};
function message2(des){
content.innerHTML = "呼叫了"+des;
};
</script>
</html>
第二種互動方式 而是採用scheme + cookie的方式
--1、Java 呼叫 js裡面的函式、效率低、估計要200ms左右
而js去調Java的方法、速度很快、50ms左右、所以儘量用js呼叫Java方法
--2、Java 呼叫 js 的函式、沒有返回值、呼叫了就控制不到了
--3、Js 呼叫 Java 的方法、返回值如果是字串、你會發現這個字串是 native 的、轉成 locale 的才能正常使用
--4、網頁中儘量不要使用jQuery、執行起來需要5-6秒、最好使用原生的js寫業務指令碼、以提升載入速度、改善使用者體驗
--5、Android4.2以下的系統存在著webview的js物件注入漏洞…Android API 16 沒有正確限制使用webview.addJavaScripteInterface方法，遠端攻擊者 使用JavaReflectionAPI利用執行任意java物件的方法
scheme設定：對於要啟動的Activity
//這一章不詳細講解scheme的使用
<activity android:name=".SecondActivity">
<intent-filter>
<data android:scheme="aa"/>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
</intent-filter>
</activity>
看一下原來的H5程式碼
<a href='aa://atguigu/path'>點我試試</a>
注意：
//Url地址 aa://atguigu/path
下面的是Activity清單檔案的配置
<data android:scheme="aa" android:host="atguigu" android:path="/path"/>
上下對比其實和我們的URL地址是一樣的
aa 是 scheme
host 是主機名稱
path 是路徑
當然還可以配置埠和加引數
aa://atguigu:8080/path？id = 10
通過activity配置那麼就可以跳轉到相應的介面裡，如果activity只配置scheme = aa那麼只要是aa的Url都是適配的
wv.setWebViewClient(new WebViewClient() {
//當頁面開始載入的時候呼叫此方法
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
//通過對URl的解析來決定調轉到哪個頁面
//這邊只是簡單做一些判斷當前是否是Scheme跳轉
if (url.contains("aa")) {
Intent intent = new Intent(Intent.ACTION_VIEW,
Uri.parse(url));
startActivity(intent);
}
}
二、android與H5之間的互動2
參考https://blog.csdn.net/Sunny2011111/article/details/72729405
一、通過H5頁面所在的app呼叫另一個app
1、HTML連結處理
<a href="[scheme]://[host]/[path]?[query]">點我</a>
說明：
schema: 判斷啟動的App
<a href="myapp://jp.app/openwith?name=zhangsan&age=26">啟動應用程式</a>
1
本例中做如下超連結跳轉：
<a href="finance://pay.com/mpos?orderId=1020160126"> Open APP </a>
其中：
schema —- finance 對應Android中 android:schema
host --- pay.com 對應android中 android:host
path --- mpos 對應android中 android:pathPrefix
query --- orderId=1020160102 為Html連結和APP相互傳遞的資料，可以在Uri中通過getQueryParameter 方法獲取
全部Html原始碼：
2、android中如何處理？
1）在AndroidManifest.xml檔案中，在需要跳轉到的Activity中新增如下宣告：
<activity
android:name=".ui.activity.OrderDetailActivity"
android:configChanges="keyboardHidden|orientation"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/CustomTitle">
<intent-filter>
<category android:name="android.intent.category.BROWSABLE" />
<category android:name="android.intent.category.DEFAULT" />
<action android:name="android.intent.action.VIEW" />
<data
android:host="pay.com"
android:pathPrefix="/mpos"
android:scheme="finance" />
</intent-filter>
</activity>
2）如何獲取連結中傳遞的資料？
if (getIntent() != null) {
if (Intent.ACTION_VIEW.equals(action)) {
Uri uri = Uri.parse(getIntent().getDataString());
if (uri != null) {
String orderId = uri.getQueryParameter("orderId");
}
}
}
3、應該注意的地方？
1）連結開啟的Activity中，【android.intent.action.MAIN】和【android.intent.category.LAUNCHER】這2個，不能與這次追加的內容混合在一起；如果跳轉的剛好是啟動Activity，可以寫一個類繼承啟動類。
2）參考：http://blog.csdn.NET/jiangwei0910410003/article/details/23940445
二、由H5頁面直接調起另一個app
1、WebView基礎設定如下：
String mUrl = "http://10.0.41.19:8099/TomcatTest/web_app_upload_image.html";
WebSettings webSettings = webView.getSettings();
//設定WebView屬性，能夠執行Javascript指令碼
webSettings.setJavaScriptEnabled(true);
//設定可以訪問檔案
webSettings.setAllowFileAccess(true);
//設定支援縮放
webSettings.setBuiltInZoomControls(true);
//載入需要顯示的網頁
// 載入 asset目錄下的本地html檔案： mUrl = "file:///android_asset/web_app.html"
webView.loadUrl(mUrl);
//設定WebViewClient用來輔助WebView處理各種通知請求事件等，如更新歷史記錄、網頁開始載入/完畢、報告錯誤資訊等
webView.setWebViewClient(new WebViewClient() {
// 以下方法避免 自動開啟系統自帶的瀏覽器，而是讓新開啟的網頁在當前的WebView中顯示
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
// 用於輔助WebView處理JavaScript的對話方塊、網站圖示、網站標題以及網頁載入進度等
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onReceivedTitle(WebView view, String title) {
tv_title.setText(title);
}
});
// 使 H5可呼叫Native方法： android.nativeMethod()
webView.addJavascriptInterface(new MyJsInterface(), "android");
2、H5 呼叫 Native 方法實現 H5頁面 按鈕點選事件處理，程式碼如下：
<input type="button" value="JS Call Native: Toast Message" onclick="android.toastMessage()">
App WebViewActivity類中處理
public class MyJsInterface {
@JavascriptInterface
public void toastMessage(String msg) {
Toast.makeText(WebViewActivity.this, "app to H5 toast " + msg, Toast.LENGTH_SHORT).show();
Intent intent = new Intent(WebViewActivity.this, FirstActivity.class);
WebViewActivity.this.startActivity(intent);
}
3、Native 傳遞資料給 H5，場景：點選原生頁面的標題欄按鈕，給H5頁面傳值 並且更新 H5頁面：
// 點選原生按鈕，向H5頁面傳送資料，可更新H5頁面
tv_click.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String msg = "from Native";
<strong>// loadUrl必須在主執行緒中執行
webView.loadUrl("javascript:toNative('" + msg + "')");</strong>
}
});
H5 中頁面資料更新程式碼：
<input type="text" value="hhhh" id="pp"/>
<script type="text/javascript">
// 2. js供 Native 呼叫的方法 （js接收資料）
function toNative(msg) {
alert("Hello, from H5, received msg: " + msg);
var p = document.getElementById("pp");
p.value = msg;
}
</script>