在一些app場景中,經常看到app裡面嵌套H5頁面, 安卓和ios提供一個空殼子,方法兩者互相調用。上一周就是寫H5頁面讓安卓和ios調用使用,中間傳參,接受參數。通過 window.wx 對象調用一些原生 app 的功能。這個H5頁面,我用的是vue來寫的。用到了vue全家桶。
1.調用app方法。
因為安卓和ios不同。需要寫一個方法,來判斷機型是安卓或者是ios;
function checkDevice() {
// js判斷是否是蘋果裝置
function checkIsAppleDevice() {
var u = navigator.userAgent,
app = navigator.appVersion;
var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
var iPad = u.indexOf("iPad") > -1;
var iPhone = u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1;
if (ios || iPad || iPhone) {
return true;
} else {
return false;
}
}
//js判斷是否為Android裝置
function checkIsAndroidDevice() {
var u = navigator.userAgent;
if (u.indexOf("Android") > -1 || u.indexOf("Adr") > -1) {
return true;
} else {
return false;
}
}
if (checkIsAppleDevice()) {
return "ios";
} else {
return "andriod";
}
}
export default checkDevice;
上面寫好的,直接拿來用,在你需要的元件中引入就行。在app.vue中引入這個js檔案。因為一進來就要擷取token值。前提是使用者登入了。
擷取app傳過來的token值。iOSInfo.token這個是ios定義的方法,andriod.token安卓傳過來的token。有些功能,需要判斷使用者是否登入,就是根據app端傳來的token值判斷,有值就可以進行操作,沒有跳動到登入頁面,存儲方式,測試的時候,安卓和ios不支援localStorage,支援sessionStorage。把得到的值存儲到sessionStorage裡面就行,然後那個地方需要,就擷取一下就行,一般都是在請求接口的時候攜帶上去。
this.phone = checkDevice();
getAndioOfIOSInfoList() {
// js判斷是否為ios裝置
if (this.phone== "ios") {
let iOSInfo = JSON.parse(JSON.stringify(window.iOSInfo));
sessionStorage.setItem("token", iOSInfo.token);
this.$store.dispatch("getUserId", iOSInfo.userId);
} else {
let andriod = JSON.parse(Android.getToken()); //token
sessionStorage.setItem("token", andriod.token);
this.$store.dispatch("getUserId", andriod.userId);
}
}
上面因為和安卓和ios溝通,需要給我傳回token和使用者資訊,我是直接把使用者資訊存儲到vuex,因為每個頁面都需要用到使用者資訊。是以存放到vuex中,友善每個頁面使用。
有時候,需要在二級頁面進入一級頁面的時候,需要監聽安卓和ios方法,讓他們傳回,在這個時候我們隻需要監聽安卓和ios定義的方法就行。也是需要判斷機型。handleGoTo這個是前端自己寫的一個傳回上一級的方法名。
handleGoTo() {
//原生傳回上一級頁面
if (this.phone == "ios") {
// ios傳回上一級
webkit.messageHandlers.gotoHomePage.postMessage({});
} else {
Android.back(); //安卓方法
}
},
webkit.messageHandlers.gotoHomePage.postMessage({});監聽ios一個方法,gotoHomePage就是ios定義的方法,隻需要調用這個放個即可,不需要加上window,預設就是全局的。但是在postMessage一定要傳一個空對象即可。
Android.back()安卓的就不需要太麻煩了,很友好,隻需要調用安卓給我定義的方法名back()即可。
隻要是傳回上一級或者跳轉登入,注冊頁面,都可以這樣寫。隻是安卓和ios可能定義方法不同
2.調用H5方法
在一些場景中,需要我們傳一些參數給app。讓他們調用,這時候就需要app端調用我們的方法,把對應的參數傳給他們就行。也是需要判斷機型。jumpToPAage就是安卓和ios定義的方法名,名字一樣不一樣都可以的
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5CN0EGM0QjZyQjMxY2NiNTOhFmN4EjM4I2YiVmN5YDOl9CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
以上都是和安卓和ios在工作中兩者之間互相調用的方法,總結一下,友善以後查詢使用。