技術文章 » Android Hybrid混合開發

Android Hybrid混合開發

2020-10-28 16:01:05

關於混合開發常問道的問題：

  1. Android如何巢狀h5頁面？
  2. h5頁面如何呼叫Android介面？
  3. Android如何呼叫網頁（js）方法?
  4. h5頁面 判斷 行動端是ios、或者Android

問題1.android如何巢狀h5頁面：

  1. 當我們用vue開發完專案，執行nmp run build打包生產dist目錄，如何巢狀在Android框架中

  2. 建立網頁存放資料夾，在Android工程res下面新增assets資料夾，把dist目錄內容拷貝到assets下。(這裡我把index.html改名為hybrid_test.html)

  3. 找到Android專案中.xml佈局檔案，新增webview元件及設定webview屬性

    <WebView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/wv_test"/>
  1. 在相應的.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介面或功能？

  1. 在java檔案中建立一個供網頁端呼叫的類，如JSObject,裡面編寫供網頁呼叫的方法.
  2. 一般h5頁面常要呼叫Android攝像頭，相簿，還有自定義方法。
  3. 在h5頁面中，新增呼叫介面，在網頁的javascript程式碼中使用上面安卓提供的MyJS.add()來呼叫（MyJS為Android端使用addJavascriptInterface方法時注入的呼叫本地方法類名稱
    ）。

問題3. Android如何呼叫網頁（js）方法?

  1. Android端直接使用webview的loadUrl(「javascript:」+網頁方法名)就可以直接呼叫的
  2. 但是方法一多這樣就比較容易亂，因此我們可以建立一個專門管理的。
    建立生成網頁方法的類NativeObject。

問題4. h5頁面 判斷 行動端是ios、或者Android

  1. 簡稱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);