Android Hybrid混合開發
本例demo下載地址:HybridDemo下載
簡介:
混合開發(Hybrid)也有一段時間了,現在閒下來總結一下。
說到混合開發,重要功能有2種,一是網頁端呼叫安卓原生介面或功能,二是安卓原生呼叫網頁功能。
效果圖:
Hybrid開發流程:
1、Android端編寫網頁呼叫介面
建立一個供網頁端呼叫的類,如JSObject,裡面編寫供網頁呼叫的方法,記得在方法上面新增@JavascriptInterface註釋,否則在有些SDK版本上使用addJavascriptInterface方法(下面會用到)繫結JS物件時會報"they will not be visible in API 17"錯誤。
package mhwang.com.hybriddemo; import android.content.Context; import android.webkit.JavascriptInterface; import android.widget.Toast; /** * Author : mhwang * Date : 2018/11/28 * Version : V1.0 */ public class JSObject { private Context mContext; public JSObject(Context context) { mContext = context; } @JavascriptInterface public int add(int a, int b){ return a + b; } @JavascriptInterface public void showToast(String msg){ Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show(); } }
這裡提供了2個方法給網頁端呼叫,分別為add()方法和showToast()方法。
2、網頁端新增Android端呼叫介面
建立html網頁hybrid_test.html,並新增呼叫介面,在網頁的javascript程式碼中使用上面安卓提供的MyJS.add()來呼叫。MyJS可以看成是JSObject類在網頁中的別名,下面會使用webview的addJavascriptInterface()方法將它們關聯起來。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--新增編碼格式,否則安卓端呼叫時傳遞中文引數會可能亂碼--> <title>Hybrid開發測試</title> </head> <body> <h1>網頁端</h1> <br /> <button id="btn_callNativeAdd" onclick="onAddClick(this)">呼叫本地加法運算並顯示</button> <br /> <div id="div_showTextFromNative"></div> <!--javascript程式碼--> <script type="text/javascript"> // 呼叫android端提供的引數 // MyJS為Android端使用addJavascriptInterface方法時注入的呼叫本地方法類名稱 function onAddClick(e){ var result = MyJS.add(3, 5); MyJS.showToast('3 + 5 = '+result); }; // 提供android端呼叫的造句方法 function makeSentence(word1, word2){ var div_showTextFromNative = document.getElementById("div_showTextFromNative"); div_showTextFromNative.innerHTML = '你'+word1 + ',他'+word2; }; // 提供android端相加的方法 function add(a, b){ var div_showTextFromNative = document.getElementById("div_showTextFromNative"); var result = a + b; div_showTextFromNative.innerHTML = 'a + b = ' + result; } </script> </body> </html>
3、Android端封裝一個生成網頁端方法url的類
正常來說Android端直接使用webview的loadUrl(“javascript:”+網頁方法名)就可以直接呼叫的,但是方法一多這樣就比較容易亂,因此建立一個專門管理的類好點。
建立生成網頁方法的類NativeObject。
package mhwang.com.hybriddemo;
/** 用於封裝拼接呼叫js方法的語句
* Author : mhwang
* Date : 2018/11/28
* Version : V1.0
*/
public class NativeObject {
/** 為了方便獲取String 型別的字串
* @param s 加‘’號的引數
* @return 加了‘’號的引數
*/
private static String getJsStringParam(String s){
return "'"+s+"'";
}
public static String makeSentence(String world1, String world2){
return "javascript:makeSentence("+getJsStringParam(world1)+","+getJsStringParam(world2)+")"; // 這裡要注意的是,若是傳遞的引數是字串,那麼在拼接呼叫的url的時候需要對引數加上‘’號。
}
public static String add(int a, int b){
// 不是字串的話不用加‘’號
return "javascript:add("+a+","+b+")";
}
}
這裡生成的2個方法是跟上面網頁javascript程式碼提供的2個方法對應的。然後在需要呼叫的地方使用就可以,如:
wv_test.loadUrl(NativeObject.add(5, 10));
如果系統版本大於4.4,可以使用evalute.Javascript()方法,該方法的好處是可以回撥javascript的返回結果。並且這個方法比 loadUrl 方法更加方便簡潔,比 loadUrl 效率更高,因為 loadUrl 的執行會造成頁面重新整理一次,這個方法不會,下面是這個方法的使用示例:
final int version = Build.VERSION.SDK_INT;
if (version < 18) {
wv_tests.loadUrl(jsStr);
} else {
wv_test.evaluateJavascript(jsStr, new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此處為 js 返回的結果
}
});
}
4、建立網頁存放資料夾(不使用本地網頁的可以跳過)
在Android工程res下面新增assets資料夾,用於存放本地網頁檔案hybrid_test.html。
5、新增webview元件及設定webview屬性
.xml佈局檔案
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<WebView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/wv_test"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="@color/colorPrimary"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android端"
android:textSize="30dp"/>
<Button
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_makeSentence"
android:text="造句"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_webAdd"
android:layout_gravity="center"
android:text="做加法"/>
</LinearLayout>
</LinearLayout>
相應的.java檔案
public class MainActivity extends Activity {
WebView wv_test;
Button btn_makeSentence;
Button btn_webAdd;
private static final String JSOBJECT = "MyJS";
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wv_test = findViewById(R.id.wv_test);
btn_makeSentence = findViewById(R.id.btn_makeSentence);
btn_webAdd = findViewById(R.id.btn_webAdd);
btn_makeSentence.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
wv_test.loadUrl(NativeObject.makeSentence("瀟灑", "放蕩"));
}
});
btn_webAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
wv_test.loadUrl(NativeObject.add(5, 10));
}
});
// 設定webview屬性
WebSettings settings = wv_test.getSettings();
settings.setJavaScriptEnabled(true); // 設定是否能使用javascript
settings.setJavaScriptCanOpenWindowsAutomatically(true);
wv_test.setWebChromeClient(new WebChromeClient()); // 設定預設瀏覽器,否則不能彈窗
// 這裡需要注意,JSObject裡面提供的方法需要新增@JavascriptInterface註釋,
// 否則會報"they will not be visible in API 17"錯誤
wv_test.addJavascriptInterface(new JSObject(this), JSOBJECT);
// 載入網頁,若非本地頁面,則把下面的載入地址換在頁面url
wv_test.loadUrl("file:///android_asset/hybrid_test.html");
}
}
下面是一些webview常用設定項及說明(摘抄):
WebSettings webSettings = webView.getSettings();
//設定了這個屬性後我們才能在 WebView 裡與我們的 Js 程式碼進行互動,對於 WebApp 是非常重要的,預設是 false,
//因此我們需要設定為 true,這個本身會有漏洞,具體的下面我會講到
webSettings.setJavaScriptEnabled(true);
//設定 JS 是否可以開啟 WebView 新視窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
//WebView 是否支援多視窗,如果設定為 true,需要重寫
//WebChromeClient#onCreateWindow(WebView, boolean, boolean, Message) 函式,預設為 false
webSettings.setSupportMultipleWindows(true);
//這個屬性用來設定 WebView 是否能夠載入圖片資源,需要注意的是,這個方法會控制所有圖片,包括那些使用 data URI 協議嵌入
//的圖片。使用 setBlockNetworkImage(boolean) 方法來控制僅僅載入使用網路 URI 協議的圖片。需要提到的一點是如果這
//個設定從 false 變為 true 之後,所有被內容引用的正在顯示的 WebView 圖片資源都會自動載入,該標識預設值為 true。
webSettings.setLoadsImagesAutomatically(false);
//標識是否載入網路上的圖片(使用 http 或者 https 域名的資源),需要注意的是如果 getLoadsImagesAutomatically()
//不返回 true,這個標識將沒有作用。這個標識和上面的標識會互相影響。
webSettings.setBlockNetworkImage(true);
//顯示WebView提供的縮放控制元件
webSettings.setDisplayZoomControls(true);
webSettings.setBuiltInZoomControls(true);
//設定是否啟動 WebView API,預設值為 false
webSettings.setDatabaseEnabled(true);
//開啟 WebView 的 storage 功能,這樣 JS 的 localStorage,sessionStorage 物件才可以使用
webSettings.setDomStorageEnabled(true);
//開啟 WebView 的 LBS 功能,這樣 JS 的 geolocation 物件才可以使用
webSettings.setGeolocationEnabled(true);
webSettings.setGeolocationDatabasePath("");
//設定是否開啟 WebView 表單資料的儲存功能
webSettings.setSaveFormData(true);
//設定 WebView 的預設 userAgent 字串
webSettings.setUserAgentString("");
//設定是否 WebView 支援 “viewport” 的 HTML meta tag,這個標識是用來螢幕自適應的,當這個標識設定為 false 時,
//頁面佈局的寬度被一直設定為 CSS 中控制的 WebView 的寬度;如果設定為 true 並且頁面含有 viewport meta tag,那麼
//被這個 tag 宣告的寬度將會被使用,如果頁面沒有這個 tag 或者沒有提供一個寬度,那麼一個寬型 viewport 將會被使用。
webSettings.setUseWideViewPort(false);
//設定 WebView 的字型,可以通過這個函式,改變 WebView 的字型,預設字型為 "sans-serif"
webSettings.setStandardFontFamily("");
//設定 WebView 字型的大小,預設大小為 16
webSettings.setDefaultFontSize(20);
//設定 WebView 支援的最小字型大小,預設為 8
webSettings.setMinimumFontSize(12);
//設定頁面是否支援縮放
webSettings.setSupportZoom(true);