uni-app&H5&Android混合開發三 || uni-app呼叫Android原生方法的三種方式

追逐時光者發表於2021-07-24

前言：

　　關於H5的呼叫Android原生方法的方式有很多，在該片文章中我主要簡單介紹三種與Android原生方法互動的方式。

一、H5+方法呼叫android原生方法

H5+ Android開發規範官方文件：

https://www.html5plus.org/doc/zh_cn/android.html

H5端呼叫Android activity 並獲取activity返回過來的資料：

//獲取當前Activity，使用H5的方式呼叫android原生方法，從而啟動activity
var main = plus.android.runtimeMainActivity();

//invoke: 呼叫物件（類物件/例項物件）的方法,呼叫Android原生方法        

plus.android.invoke('com.pingAnBank.payment.PingAnPaymentHelper', 'StartCallPosPayment', paymentMoney,orderNumber, main, paymentType);

//requestCode請求碼，即呼叫startActivityForResult()傳遞過去的值（一般為int，標誌不同的支付型別）
//resultCode  結果碼，結果碼用於標識返回資料來自哪個新Activity
//data Intent中所攜帶的資料
main.onActivityResult = function(requestCode, resultCode, data) {


//解析android 的activity回傳過來的資料
plus.android.importClass(data);
var bundle = data.getExtras();
plus.android.importClass(bundle);

//獲取activity回傳過來的引數值
var amount = bundle.getString("amount"); //支付金額
var traceNo = bundle.getString("traceNo"); //支付流水號

}

呼叫Android方法說明：plus.android.invoke('com.pingAnBank.payment.PingAnPaymentHelper', 'StartCallPosPayment', paymentMoney,orderNumber, main, paymentType);
com.pingAnBank.payment.PingAnPaymentHelper：Android中的內部類名
StartCallPosPayment：Android中的內部類名中的方法名
paymentMoney,orderNumber, paymentType：方法所需的引數
main：當前頁面的Activity

二、uniapp原生外掛呼叫Android原生方法

Android原生外掛開發教程：https://nativesupport.dcloud.net.cn/NativePlugin/course/android

實現功能：通過點選uni-app頁面中的按鈕傳遞引數，呼叫android原生程式碼，然後Android原生程式碼處理資料，返回到uniapp頁面展示。

uni-app程式碼:

<template>
    <view class="content">
      
        <view @click="callAndroidWay">android原生方法呼叫</view>
        
    </view>
</template>
<script>
    // 匯入自己定義的外掛js
    var elitetyc = require('../plugin.js');
    export default {
        data() {
            return {
                 plugins: elitetyc
            }
        },
        onLoad() {
 
        },
        methods: {
             callAndroidWay(){
              this.plugins.StartCallPosPayment(
                  "這段文字是uniapp傳過來的",
                  function(result) {
                      uni.showToast({title:JSON.stringify(result),icon:'none',duration:5000});
                  },
                  function(result) {
                      uni.showToast({title:result,icon:"none",duration:5000});
                  }
              );
             }
        }
    }
</script>

plugin.js外掛程式碼：

! function(root, factory) {  
if (typeof exports == 'object' && typeof module != 'undefined') {  
    module.exports = factory()  
} else if (typeof define == 'function' && define.amd) {  
    define(factory)  
} else {  
    document.addEventListener('plusready', function(){  
    // 這裡是定義外掛的名稱
    var moduleName = 'elitetyc';   
    
    root.plus[moduleName] = factory()  
    },false);  
}  
}(this, function() {  
//在此處定義自己的方法 （這裡也是外掛的名稱，可以看到在後面的）
var _BARCODE = 'elitetyc';  
var plugintest = {  
    // 這裡定義了一個名叫StartCallPosPayment的方法，傳遞三個引數，後面兩個是回撥函式
    StartCallPosPayment: function(num, successCallback, errorCallback) {
        var success = typeof successCallback !== 'function' ? null : function(args) {
                successCallback(args);
            },
            fail = typeof errorCallback !== 'function' ? null : function(code) {
                errorCallback(code);
            };
      // 回撥ID，後面原生程式碼中會用到，就好像你呼叫我，我有結果了，我該知道我把資料返回給誰把？這個id就是這個作用
        var callbackID = plus.bridge.callbackId(success, fail);
      // 在上面有講到過，這裡需要注意的是前兩個引數，第一個引數是外掛類別名，後面再原生程式碼中的dcloud_properties.xml檔案中會用到第二個引數（HelloAndroidWay），是android原生程式碼中的方法名要一致
        return plus.bridge.exec(_BARCODE, "HelloAndroidWay", [callbackID, num]);
    }
};  
return plugintest;  
});

Android程式碼:

　　我們需要在Android專案中新建一個java檔案，在對應的類中什麼一個HelloAndroidWay的方法。

/**
   * 定義一個名為HelloAndroidWay的方法
   * @param pWebview
   * @param array
   */
  public void HelloAndroidWay(IWebview pWebview, JSONArray array) {
  	//獲取回撥ID
  	String CallBackID = array.optString(0);
  	//        獲取引數並計算（這裡模擬原生處理）
  	String newstring = "你好，這個字串來自android原生程式碼，您傳過來的引數是:" + array.optString(1);
  	//        構建回傳引數
  	JSONArray newArray = new JSONArray();
  	newArray.put(newstring);
  	//        JSUtil.execCallback(IWebview pWebViewImpl,String pCallbackId,String pMessage,int pStatus,boolean pKeepCallback)
  	//        引數:
  	//        pWebViewImpl - webview物件
  	//        pCallbackId - 回撥方法ID
  	//        pMessage - 回撥資訊
  	//        pStatus - 回撥code值 如：OK、ERROR
  	//        pKeepCallback - js層回撥function是否要儲存

  	// 第一個引數是當前函式的入參，直接傳入， 第二個是根據入參獲取的回撥id，第三個是回撥的資料，是一個json陣列
  	JSUtil.execCallback(pWebview, CallBackID, newstring, JSUtil.OK, false);
  }