Android Hybrid混合開發-有解無憂

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

Android如何嵌套h5頁面？
h5頁面如何呼叫Android介面？
Android如何呼叫網頁（js）方法?
h5頁面判斷移動端是ios、或者Android

問題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介面或功能？

在java檔案中創建一個供網頁端呼叫的類，如JSObject,里面撰寫供網頁呼叫的方法.
一般h5頁面常要呼叫Android攝像頭，相冊，還有自定義方法，
在h5頁面中，添加呼叫介面，在網頁的javascript代碼中使用上面安卓提供的MyJS.add()來呼叫（MyJS為Android端使用addJavascriptInterface方法時注入的呼叫本地方法類名稱
），

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

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

問題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);

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/195184.html

標籤：java

上一篇：蘋果，U盤越獄iPhone繞ID最新教程及各種坑解決，吐血之作（超詳細超簡單教程）-balenaEtcher-Checkm8-bootra1n

下一篇：vue生命周期函式、react生命周期函式、微信小程式生命周期函式、uni-app生命周期函式，簡介及圖示