uniapp H5與原生安卓的數據互通和方法調用

1、準備

我這裏是uniapp與原生安卓之間的相互調用,也就是原生安卓內嵌H5頁面,下面先來準備一下安卓端的代碼。
(1)、初始化的MainActivity 類定義一個 WebView

private WebView webView;

(2)、初始化的方法onCreate 設置 WebView 的參數及各種設置,這裏主要是開啓js 的調用 和添加H5調用的類,相當於在項目啓動的時候就加載H5需要調用的類。

 @Override
    @SuppressLint("JavascriptInterface")
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        CONTEXT = this.getBaseContext();

			 // H5調用的類,deviceInfo  是給類取得別名,調用的時候用到
        webView.addJavascriptInterface(new DeviceInfo(), "deviceInfo");
        
       // 添加js支持
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }

(3)、H5調用的類,

public class DeviceInfo {
				// H5調用的方法,這裏的方法可以自己定義,和java的寫法一樣。
        @JavascriptInterface
        public String getDeviceId() {
            //獲取手機的Serial碼
            String deviceId = Build.SERIAL;
            return deviceId;
        }

        @JavascriptInterface
        public String getDeviceInfo() {
            //獲取手機的Serial碼
            String serialNumber = Build.SERIAL;
            String deviceType = Build.DEVICE;
            String deviceName = Build.PRODUCT;
            Map<String,String> map = new HashMap<>();
            map.put("serialNumber",serialNumber);
            map.put("deviceType",deviceType);
            map.put("deviceName",deviceName);
            String toJson = new Gson().toJson(map);
            return toJson;
        }
    }

這樣前期的準備就做好了,當然原生安卓項目的創建這些我這裏的就不講了。

2、H5調原生安卓

1、H5代碼

我這裏是用uniapp寫的H5頁面,在 methods 模塊 的方法裏面,需要調原生安卓的地方:

let  deviceId = window.deviceInfo.getDeviceId();

注意: window 是固定寫法,deviceInfo 上面的取得類別名,getDeviceId 就是我們需要調的這個類裏面的方法名了,這裏我沒有傳參數,需要傳參的直接加上實參參數就可以了,對應的方法也加上形參就可以了。

  // H5調用的類,deviceInfo  是給類取得別名,調用的時候用到
        webView.addJavascriptInterface(new DeviceInfo(), "deviceInfo");
2、原生安卓代碼

這裏就是上面寫的代碼,這裏需要講的就是需要返回參數到H5的直接 return 回去就可以了。

public class DeviceInfo {
        @JavascriptInterface
        public String getDeviceId() {
            //獲取手機的Serial碼
            String deviceId = Build.SERIAL;
            return deviceId;
        }

        @JavascriptInterface
        public String getDeviceInfo() {
            //獲取手機的Serial碼
            String serialNumber = Build.SERIAL;
            String deviceType = Build.DEVICE;
            String deviceName = Build.PRODUCT;
            Map<String,String> map = new HashMap<>();
            map.put("serialNumber",serialNumber);
            map.put("deviceType",deviceType);
            map.put("deviceName",deviceName);
            String toJson = new Gson().toJson(map);
            return toJson;
        }
    }

3、原生安卓調H5方法

這裏我也網上找了很久,都是原生的H5 js 寫法,因爲我是用uniapp寫的,所以和原生js寫法不一樣,這重點講一下,我踩了一個大坑。
(1)原生安卓代碼。
首先講一下安卓端的代碼,其實很簡單。

// initializeData 爲H5的方法,也就是uniapp的方法, payStatus 爲需要傳的參數。 
webView.loadUrl("javascript:initializeData(" + payStatus + ")");

安卓端代碼就完了,就這麼簡單,和網上找的帖子一樣,都是這麼調的,但是當時不知道的是,H5的方法怎麼寫。
(2)uniapp H5 的方法。
我的寫法:在 mounted模塊

mounted: function() {
			// window 這應該是固定寫法,initializeData  爲原生安卓端調用的方法。
			window.initializeData =function (e) {
				// e爲傳回來的參數
				// 自己的業務邏輯處理
			}
		},

剛剛在網上看到了一種寫法,應該也可以的

created() {
      window.getResult = this.getResult //註冊到windows  調完原生方法之後 走h5的方法
},
methods: {
      getResult(res){
      //調用完成原生方法後,會走到這個方法
      }
}

好了,這就是原生安卓與uinapp H5的參數和方法的相互調用的全部過程
uniapp H5與原生安卓的數據互通和方法調用

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章