關於混合開發常問道的問題:
問題1.android如何巢狀h5頁面:
當我們用vue開發完專案,執行nmp run build
打包生產dist目錄,如何巢狀在Android框架中
建立網頁存放資料夾,在Android工程res下面新增assets資料夾,把dist目錄內容拷貝到assets下。(這裡我把index.html
改名為hybrid_test.html
)
找到Android專案中.xml
佈局檔案,新增webview
元件及設定webview
屬性
<WebView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/wv_test"/>
.java
檔案中通過id獲取webview
元件,將Android方法存入一個物件,通過addJavascriptInterface()方法,暴露給html頁面。 //獲取webview元件
wv_test = findViewById(R.id.wv_test);
// 通過addJavascriptInterface方法 將Android裡面提供的方法物件集合JSObject暴露給頁面,同時也將頁面的提供的js方法註冊給Android
wv_test.addJavascriptInterface(new JSObject(this), JSOBJECT);
// 載入網頁,若非本地頁面,則把下面的載入地址換在頁面url
wv_test.loadUrl("file:///android_asset/hybrid_test.html");
問題2. h5頁面如何呼叫Android介面或功能?
JSObject
,裡面編寫供網頁呼叫的方法.MyJS.add()
來呼叫(MyJS
為Android端使用addJavascriptInterface
方法時注入的呼叫本地方法類名稱問題3. Android如何呼叫網頁(js)方法?
問題4. h5頁面 判斷 行動端是ios、或者Android
ua
檢測$(function(){
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
alert('是否是Android:'+isAndroid);
alert('是否是iOS:'+isiOS);
if(isAndroid){
$ ("#choose").attr('capture','camera');
}
});
本例demo下載地址:HybridDemo下載
簡介:
混合開發(Hybrid)也有一段時間了,現在閒下來總結一下。
說到混合開發,重要功能有2種,一是網頁端呼叫安卓原生介面或功能,二是安卓原生呼叫網頁功能。
效果圖:
Hybrid開發流程:
1、Android端編寫方法api,暴露給h5頁面呼叫
建立一個供網頁端呼叫的類,如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;
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方法的語句
*/
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);