天天看點

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

前言:

  關于H5的調用Android原生方法的方式有很多,在該片文章中我主要簡單介紹三種與Android原生方法互動的方式。

一、H5+方法調用android原生方法

H5+ Android開發規範官方文檔:

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原生方法

實作功能:通過點選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);
  }      

三、WebView簡單實作Android與H5互調

WebView簡介:

  要實作Android與H5互調,WebView是一個很重要的控件,WebView可以很好地幫助我們展示html頁面,是以有必要先了解一下WebView。