android h5 书,android与H5交互
1 — WebView基本配置
2 —WebView和H5的交互
3 — WebView錯誤頁面處理
4 —WebView中的Cookie操作
5 —WebView漏洞
6 —WebView內存泄漏問題
1WebView基本配置
布局設置
代碼設置<?xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="50dp">
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:id="@+id/btn1"
android:text="無參調用"/>
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="有參調用"
android:id="@+id/btn2"/>
android:id="@+id/wv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="9" />
初如化控件//初始化控件
Button btn1 = (Button) findViewById(R.id.btn1);
btn1.setOnClickListener(this);
Button btn2 = (Button) findViewById(R.id.btn2);
btn2.setOnClickListener(this);
wv = (WebView) findViewById(R.id.wv);
//獲取webSettings
WebSettings settings = wv.getSettings();
//讓webView支持JS
settings.setJavaScriptEnabled(true);
//加載百度網頁
wv.loadUrl("http://www.baidu.com/");
//這個時候就能顯示百度頁面了
2 WebView和H5的交互
我們自己寫一個H5頁面 放在assets目錄下
注意 ： 如果html文件存于assets：則加前綴：file:///android_asset/
如果在Sdcard直接使用file:///sdcard/ or file:/sdcard也可以//加載本地assets目錄下的靜態網頁
wv.loadUrl("file:///android_asset/123.html");
//第一個參數把自身傳給js 第二個參數是this的一個名字//這個方法用于讓H5調用android方法
wv.addJavascriptInterface(this, "android");
Android調用JS方法
//這個是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;
}
}
JS調用Android方法
//下面的兩個方法是讓網頁來調的//這個注解必須加 因為 兼容問題
@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代碼，如果H5看不懂請自行百度
調用android無參參數
調用android有參參數
點我試試
百度
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;
};
第二種交互方式 而是采用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的使用
看一下原來的H5代碼
點我試試
注意：
//Url地址? aa://atguigu/path
下面的是Activity清單文件的配置
上下對比其實和我們的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);
}
}
3WebView錯誤頁面處理
場景 ： 加載webview錯誤時加載網頁的錯誤頁面，體驗不好，速度慢，這個時候就需要我們自行處理錯誤頁面
第一步 先做一個錯誤的H5頁面放在本地，或者加載Activity都可以wv.setWebViewClient(new WebViewClient() {
@Override
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
Log.i(TAG, "onReceivedError: " + errorCode + "? " + description);
//判斷錯誤類型
if (errorCode == ERROR_UNSUPPORTED_SCHEME) {
Log.i(TAG, "onReceivedError: " + "true");
//停止加載錯誤頁面，否則會顯示原來H5加載的錯誤頁面
//再跳到現在的錯誤頁面，體驗不好，當然也可以做其它操作
view.stopLoading();
view.loadUrl("file:///android_asset/error.html");
}
}
}
4WebView中的Cookie操作
關于Cookie的介紹在這不再詳說
場景：webView需要保存從網頁中獲取到的Cookie 在涉及到賬戶體系的產品中，包含了一種登錄狀態的傳遞。比如，在Native(原生)界面的登錄操作，進入到Web界面時，涉及到賬戶信息時，需要將登錄狀態傳遞到Web里面，避免用戶二次登錄。這里就涉及到WebView加載網頁時的Cookie操作了。
通常我們在登錄時獲取到用戶的Cookie信息，然后將其保存到sdcard的WebView緩存文件當中，這樣在加載網頁時，WebView會自動將當前url的本地Cookie信息放在http請求的request中，傳遞給服務器
獲取cookie
//加載百度網站wv.loadUrl("http://www.baidu.com");
wv.setWebViewClient(new WebViewClient() {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
CookieManager instance = CookieManager.getInstance();
//這樣就可以獲取到Cookie了
String cookie = instance.getCookie(url);
Log.i(TAG, "onPageStarted: "+cookie);
}
}
設置cookie
//創建CookieSyncManager 參數是上下文
CookieSyncManager.createInstance(context);
//得到CookieManager
CookieManager cookieManager = CookieManager.getInstance();
//得到向URL中添加的Cookie的值
String cookieString;//獲取方法不再詳述，以項目要求而定
//使用cookieManager..setCookie()向URL中添加Cookie
cookieManager.setCookie(url, cookieString);
CookieSyncManager.getInstance().sync();
5WebView漏洞和內存泄漏
/**
* ① Android API 16 沒有正確限制使用webview.addJavaScripteInterface方法，遠程攻擊者使用 JavaReflectionAPI利用執行任意java對象的方法
*
* ② webview在布局文件中的使用：webView寫在其它容器中時 (先銷毀webview再銷毀activity)因為 webview是獨立進程，最好創建個viewGroup用來放置webview，Activity創建時add進來，在Activity停止時remove掉
*
* ③使用 jsbridge(詳情看下面)
*
* ④ 在此方法的操作放到后者使用webviewClient.onPageFinished->WebChromeClient.onProgressChanged
*
* ⑤ 后臺耗電問題 ：activity不可見時要停用webview
*
* ⑥ webview硬件加速導致頁面渲染問題－白屏展示(關閉硬件加速)
*
* ⑦動態添加webview，對傳入webview中使用的context使用弱引用，動態添加webview意思在布局
* */
JSBridge
什么是JsBridge
WebViewJavascriptBridge是移動UIView和Html交互通信的橋梁，就是實現java和js的互相調用的橋梁。替代了WebView的自帶的JavascriptInterface的接口，使得開發者更方便的讓js和native靈活交互，使我們的開發更加靈活和安全。
1
JSBridge的優點
Android API 4.4以前，谷歌的webview存在安全漏洞，網站可以通過js注入就可以隨便拿到客戶端的重要信息，甚至輕而易舉的調用本地代碼進行流氓行為，谷歌后來發現有此漏洞后，在API 4.4以后增加了防御措施，如果用js調用本地代碼，開發者必須在代碼申明JavascriptInterface， 列如在4.0之前我們要使得webView加載js只需如下代碼：
mWebView.addJavascriptInterface(new JsToJava(), "myjsfunction");
4.4之后使用時需要在調用Java方法加入@JavascriptInterface注解，如果代碼無此申明，那么也就無法使得js生效，也就是說這樣就可以避免惡意網頁利用js對客戶端的進行竊取和攻擊。 但是即使這樣，我們很多時候需要在js調用本地java代碼的時候，要做一些判斷和限制，或者有的場景也會做些過濾或者對用戶友好提示，甚至更復雜的Hybrid模式下，需要js和native之間進行交互通訊，拍照上傳，因此原生的JavascriptInterface 就比較維護了，特此有了基于JavascriptInterface 封裝的WebViewJavascriptBridge框架。
---------------------
作者：小龍哥的開發日記
來源：CSDN
原文：https://blog.csdn.net/w15321970103/article/details/75635454
總結
以上是生活随笔為你收集整理的android h5 书,android与H5交互的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android lame wav 转 m
- 下一篇： 自动摘要php,phpcms修改手动摘要