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與原生安卓的數據互通和方法調用